diff --git a/cypress/e2e/auth-user.ts b/cypress/e2e/auth-user.ts new file mode 100644 index 0000000..5b02ab9 --- /dev/null +++ b/cypress/e2e/auth-user.ts @@ -0,0 +1,12 @@ +export default function authUser() { + cy.visit('http://127.0.0.1:3000/login'); + cy.getBySel('login-header').should('exist'); + cy.getBySel('login-form').should('exist'); + cy.getBySel('email-input').should('exist'); + cy.getBySel('password-input').should('exist'); + cy.getBySel('login-button').should('exist'); + cy.getBySel('email-input').type('cypress@example.com'); + cy.getBySel('password-input').type('Password123!'); + cy.getBySel('login-button').click(); + cy.url().should('include', '/home'); +} diff --git a/cypress/e2e/event-create.cy.ts b/cypress/e2e/event-create.cy.ts index 2a8385a..a74f770 100644 --- a/cypress/e2e/event-create.cy.ts +++ b/cypress/e2e/event-create.cy.ts @@ -1,40 +1,9 @@ +import authUser from './auth-user'; + describe('event creation', () => { it('loads', () => { - cy.login(); + authUser(); - cy.visit('http://127.0.0.1:3000/events/new'); - cy.getBySel('event-form').should('exist'); - cy.getBySel('event-form').within(() => { - cy.getBySel('event-name-input').should('exist'); - cy.getBySel('event-start-time-picker').should('exist'); - cy.getBySel('event-end-time-picker').should('exist'); - cy.getBySel('event-location-input').should('exist'); - cy.getBySel('event-description-input').should('exist'); - cy.getBySel('event-save-button').should('exist'); - }); - }); - - it('creates an event', () => { - cy.login(); - cy.visit( - 'http://127.0.0.1:3000/events/new?start=2025-07-01T01:00:00.000Z&end=2025-07-01T04:30:00.000Z', - ); - - cy.getBySel('event-form').should('exist'); - cy.getBySel('event-form').within(() => { - cy.getBySel('event-name-input').type('Cypress Test Event'); - cy.getBySel('event-location-input').type('Cypress Park'); - cy.getBySel('event-description-input').type( - 'This is a test event created by Cypress.', - ); - cy.getBySel('event-save-button').click(); - }); - cy.wait(1000); - cy.visit('http://127.0.0.1:3000/events'); - cy.getBySel('event-list-entry').should('exist'); - cy.getBySel('event-list-entry') - .contains('Cypress Test Event') - .should('exist'); - cy.getBySel('event-list-entry').contains('Cypress Park').should('exist'); + // cy.visit('http://127.0.0.1:3000/events/new'); // TODO: Add event creation tests }); }); diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 994b7ef..59717f5 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -1,5 +1,3 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable @typescript-eslint/no-namespace */ /// // *********************************************** // This example commands.ts shows you how to @@ -46,22 +44,6 @@ Cypress.Commands.add('getBySelLike', (selector, ...args) => { return cy.get(`[data-cy*=${selector}]`, ...args); }); -Cypress.Commands.add('login', () => { - cy.session('auth', () => { - cy.visit('http://127.0.0.1:3000/login'); - cy.getBySel('login-header').should('exist'); - cy.getBySel('login-form').should('exist'); - cy.getBySel('email-input').should('exist'); - cy.getBySel('password-input').should('exist'); - cy.getBySel('login-button').should('exist'); - cy.getBySel('email-input').type('cypress@example.com'); - cy.getBySel('password-input').type('Password123!'); - cy.getBySel('login-button').click(); - cy.url().should('include', '/home'); - cy.getBySel('header').should('exist'); - }); -}); - declare global { namespace Cypress { interface Chainable { @@ -73,7 +55,6 @@ declare global { selector: string, ...args: any[] ): Chainable>; - login(): Chainable; } } } diff --git a/src/app/(main)/events/page.tsx b/src/app/(main)/events/page.tsx index 741f19b..bcd1e57 100644 --- a/src/app/(main)/events/page.tsx +++ b/src/app/(main)/events/page.tsx @@ -17,10 +17,7 @@ export default function Events() { const events = eventsData?.data?.events || []; return ( -
+
{/* Heading */}

My Events diff --git a/src/components/custom-ui/event-list-entry.tsx b/src/components/custom-ui/event-list-entry.tsx index b52d438..edc4a2f 100644 --- a/src/components/custom-ui/event-list-entry.tsx +++ b/src/components/custom-ui/event-list-entry.tsx @@ -43,10 +43,7 @@ export default function EventListEntry({ return ( -
+
diff --git a/src/components/custom-ui/labeled-input.tsx b/src/components/custom-ui/labeled-input.tsx index 38a6c56..4900e66 100644 --- a/src/components/custom-ui/labeled-input.tsx +++ b/src/components/custom-ui/labeled-input.tsx @@ -17,7 +17,6 @@ export default function LabeledInput({ variantSize = 'default', autocomplete, error, - 'data-cy': dataCy, ...rest }: { label: string; @@ -31,7 +30,6 @@ export default function LabeledInput({ variantSize?: 'default' | 'big' | 'textarea'; autocomplete?: string; error?: string; - 'data-cy'?: string; } & React.InputHTMLAttributes) { const [passwordVisible, setPasswordVisible] = React.useState(false); const [inputValue, setInputValue] = React.useState( @@ -66,7 +64,6 @@ export default function LabeledInput({ id={name} name={name} rows={3} - data-cy={dataCy} /> ) : ( @@ -85,7 +82,6 @@ export default function LabeledInput({ id={name} name={name} autoComplete={autocomplete} - data-cy={dataCy} {...rest} onChange={handleInputChange} /> diff --git a/src/components/forms/event-form.tsx b/src/components/forms/event-form.tsx index 822cf4d..d89efdc 100644 --- a/src/components/forms/event-form.tsx +++ b/src/components/forms/event-form.tsx @@ -190,6 +190,11 @@ const EventForm: React.FC = (props) => { router.back(); } + // Calculate values for organiser, created, and updated + const organiserValue = isLoading + ? 'Loading...' + : data?.data.user?.name || 'Unknown User'; + // Use DB values for created_at/updated_at in edit mode const createdAtValue = props.type === 'edit' && eventData?.data?.event?.created_at @@ -204,203 +209,188 @@ const EventForm: React.FC = (props) => { const createdAtDisplay = new Date(createdAtValue).toLocaleDateString(); const updatedAtDisplay = new Date(updatedAtValue).toLocaleDateString(); - const [isClient, setIsClient] = React.useState(false); - React.useEffect(() => { - setIsClient(true); - }, []); - if (props.type === 'edit' && isLoading) return
Loading...
; if (props.type === 'edit' && fetchError) return
Error loading event.
; return ( - -
-
-
-
- -
-
- setTitle(e.target.value)} - data-cy='event-name-input' - /> -
-
-
-
-
- -
-
- -
-
- setLocation(e.target.value)} - data-cy='event-location-input' - /> -
-
-
- - + <> + + +
+
+
+
-
- -

- {updatedAtDisplay} -

+
+ setTitle(e.target.value)} + />
+
-
-
-
-
+
+
+ +
+
+ +
+
+ setLocation(e.target.value)} + /> +
+
- + + +
+
+

- {!isClient || isLoading - ? 'Loading...' - : data?.data.user?.name || 'Unknown User'} + {updatedAtDisplay}

+
+
+
+
+
+ + +
+
+
+ setDescription(e.target.value)} + > +
+
- setDescription(e.target.value)} - data-cy='event-description-input' - > + + { + setSelectedParticipants((current) => + current.find((u) => u.id === user.id) + ? current + : [...current, user], + ); + }} + removeUserAction={(user) => { + setSelectedParticipants((current) => + current.filter((u) => u.id !== user.id), + ); + }} + /> + + + +
+ {selectedParticipants.map((user) => ( + + ))} +
-
- - { - setSelectedParticipants((current) => - current.find((u) => u.id === user.id) - ? current - : [...current, user], - ); - }} - removeUserAction={(user) => { - setSelectedParticipants((current) => - current.filter((u) => u.id !== user.id), - ); - }} - /> - - - -
- {selectedParticipants.map((user) => ( - - ))} -
-
-
-
-
- -
-
- +
+
+ +
+
+ +
+ {isSuccess &&

Event created!

} + {error &&

Error: {error.message}

}
- {isSuccess &&

Event created!

} - {error &&

Error: {error.message}

} -
- - - - Calendar - - Calendar for selected participants - - - - u.id)} - additionalEvents={[ - { - id: 'temp-event', - title: title || 'New Event', - start: startDate ? new Date(startDate) : new Date(), - end: endDate ? new Date(endDate) : new Date(), - type: 'event', - userId: 'create-event', - colorOverride: '#ff9800', - }, - ]} - height='600px' - /> - - -
+ + + + Calendar + + Calendar for selected participants + + + + u.id)} + additionalEvents={[ + { + id: 'temp-event', + title: title || 'New Event', + start: startDate ? new Date(startDate) : new Date(), + end: endDate ? new Date(endDate) : new Date(), + type: 'event', + userId: 'create-event', + colorOverride: '#ff9800', + }, + ]} + height='600px' + /> + + +
+ ); }; diff --git a/src/components/misc/header.tsx b/src/components/misc/header.tsx index 0421563..5d9d438 100644 --- a/src/components/misc/header.tsx +++ b/src/components/misc/header.tsx @@ -25,10 +25,7 @@ export default function Header({ }>) { return (
-
+
diff --git a/src/components/time-picker.tsx b/src/components/time-picker.tsx index 1f36367..4402b88 100644 --- a/src/components/time-picker.tsx +++ b/src/components/time-picker.tsx @@ -20,7 +20,6 @@ export default function TimePicker({ setDate, time, setTime, - ...props }: { dateLabel?: string; timeLabel?: string; @@ -28,11 +27,11 @@ export default function TimePicker({ setDate?: (date: Date | undefined) => void; time?: string; setTime?: (time: string) => void; -} & React.HTMLAttributes) { +}) { const [open, setOpen] = React.useState(false); return ( -
+