From ccae9991f9232a019964d48bd1a6f7e17d760cdb Mon Sep 17 00:00:00 2001 From: Ravichandra Date: Mon, 27 Sep 2021 20:26:39 +0530 Subject: [PATCH] Added frontend Input Field Validations on the EventForm.tsx and Enabled validations in app.ts (#707) * Added frontend Input Field Validations on the EventForm 1. Added type to input component in the Event form page 2. removed the DefaultValue prop from input component since it is already getting set via UseForm react hook 3. changed the type of UrL and Video URL to url * Updated cypress tests of Event form for changes in type 1. Updated cypress tests to match the role of type=number of Capacity 2. Changed the query for start_at and ends_at * Added class Validation decorators for Url and Vidio URL fields 1. Added decorators for URL and Video URL fields 2. Enabled Validations in app.ts * Updated cypress tests 1.Added Get instaed of find to query starts_at and ends_at 2.Added 5 sec wait time for event to save * Updated app.ts and event.js based on code review comments 1. removed validate:tru from app.ts as it is default value 2. changed the location function from get to findbyLabelText in cypress test Co-authored-by: Ravi --- .../dashboard/Events/components/EventForm.tsx | 14 ++++++++++---- .../dashboard/Events/components/EventFormUtils.ts | 4 ++-- cypress/integration/dashboard/events.js | 11 ++++++----- server/src/app.ts | 2 +- server/src/controllers/Events/inputs.ts | 5 +++++ 5 files changed, 24 insertions(+), 12 deletions(-) diff --git a/client/src/modules/dashboard/Events/components/EventForm.tsx b/client/src/modules/dashboard/Events/components/EventForm.tsx index e026d2e140..bf77391f33 100644 --- a/client/src/modules/dashboard/Events/components/EventForm.tsx +++ b/client/src/modules/dashboard/Events/components/EventForm.tsx @@ -27,15 +27,21 @@ const EventForm: React.FC = (props) => { } = useVenuesQuery(); const defaultValues = useMemo(() => { - if (!data) return {}; + if (!data) + return { + start_at: new Date().toISOString().slice(0, 16), + ends_at: new Date(Date.now() + 1000 * 60 * 60) + .toISOString() + .slice(0, 16), + }; return { name: data.name, description: data.description, url: data.url, video_url: data.video_url, capacity: data.capacity, - start_at: data.start_at, - ends_at: data.ends_at, + start_at: new Date(data.start_at).toISOString().slice(0, 16), + ends_at: new Date(data.ends_at).toISOString().slice(0, 16), tags: (data.tags || []).map((t) => t.name).join(', '), venueId: data.venueId, }; @@ -66,11 +72,11 @@ const EventForm: React.FC = (props) => { ) : ( ), )} diff --git a/client/src/modules/dashboard/Events/components/EventFormUtils.ts b/client/src/modules/dashboard/Events/components/EventFormUtils.ts index 538f0dc59d..8d1eb8cbaa 100644 --- a/client/src/modules/dashboard/Events/components/EventFormUtils.ts +++ b/client/src/modules/dashboard/Events/components/EventFormUtils.ts @@ -23,13 +23,13 @@ export const fields: Field[] = [ }, { key: 'url', - type: 'text', + type: 'url', label: 'Url', placeholder: '', }, { key: 'video_url', - type: 'text', + type: 'url', label: 'Video Url', placeholder: '', }, diff --git a/cypress/integration/dashboard/events.js b/cypress/integration/dashboard/events.js index bd34ef3a36..0be31811fe 100644 --- a/cypress/integration/dashboard/events.js +++ b/cypress/integration/dashboard/events.js @@ -38,14 +38,14 @@ describe('events dashboard', () => { cy.findByRole('textbox', { name: 'Description' }).type(fix.description); cy.findByRole('textbox', { name: 'Url' }).type(fix.url); cy.findByRole('textbox', { name: 'Video Url' }).type(fix.videoUrl); - cy.findByRole('textbox', { name: 'Capacity' }).type(fix.capacity); + cy.findByRole('spinbutton', { name: 'Capacity' }).type(fix.capacity); cy.findByRole('textbox', { name: 'Tags (separated by a comma)' }).type( 'Test, Event, Tag', ); - // TODO: it shouldn't be necessary to clear the date textboxes - the page needs to - // be fixed - cy.findByRole('textbox', { name: 'Start at' }).clear().type(fix.startAt); - cy.findByRole('textbox', { name: 'End at' }).clear().type(fix.endAt); + + cy.findByLabelText(/^Start at/).type(fix.startAt); + + cy.findByLabelText(/^End at/).type(fix.endAt); // TODO: figure out why cypress thinks this is covered. // cy.findByRole('checkbox', { name: 'Invite only' }).click(); cy.get('[data-cy="invite-only-checkbox"]').click(); @@ -60,6 +60,7 @@ describe('events dashboard', () => { .as('venueTitle'); cy.findByRole('form', { name: 'Add event' }).submit(); + cy.location('pathname').should('match', /^\/dashboard\/events\/\d/); // confirm that the test data appears in the new event cy.wrap(Object.entries(fix)).each(([key, value]) => { diff --git a/server/src/app.ts b/server/src/app.ts index e57642060c..488a359b34 100644 --- a/server/src/app.ts +++ b/server/src/app.ts @@ -26,7 +26,7 @@ export const main = async (app: Express) => { app.use(cors({ credentials: true, origin: true })); app.use(userMiddleware); - const schema = await buildSchema({ resolvers, validate: false }); + const schema = await buildSchema({ resolvers }); const server = new ApolloServer({ schema, context: ({ req, res }: { req: Request; res: Response }): GQLCtx => ({ diff --git a/server/src/controllers/Events/inputs.ts b/server/src/controllers/Events/inputs.ts index df7f4b0989..ace2723788 100644 --- a/server/src/controllers/Events/inputs.ts +++ b/server/src/controllers/Events/inputs.ts @@ -1,3 +1,4 @@ +import { IsUrl } from 'class-validator'; import { InputType, Field, Int } from 'type-graphql'; import { VenueType } from 'src/models'; @@ -10,9 +11,11 @@ export class CreateEventInputs { description: string; @Field(() => String, { nullable: true }) + @IsUrl() url?: string; @Field(() => String, { nullable: true }) + @IsUrl() video_url?: string; @Field(() => VenueType, { nullable: true }) @@ -46,9 +49,11 @@ export class UpdateEventInputs { description: string; @Field(() => String, { nullable: true }) + @IsUrl() url?: string; @Field(() => String, { nullable: true }) + @IsUrl() video_url?: string; @Field(() => VenueType, { nullable: true })