test(frontend): fix issue with userEvent timing out test cases

More info testing-library/user-event#565 (comment)
opengovsg · Apr 18, 2022 · bce7938 · bce7938
1 parent ed1670d
commit bce7938
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 75 deletions.
diff --git a/frontend/src/components/dashboard/create/create-modal/CreateModal.tsx b/frontend/src/components/dashboard/create/create-modal/CreateModal.tsx
@@ -77,9 +77,7 @@ const CreateModal = ({
             <label htmlFor="nameCampaign">Name your campaign</label>
           </h2>
           <h5 className={styles.subtitle}>
-            <label htmlFor="nameCampaign">
-              Give your campaign a descriptive name
-            </label>
+            <label>Give your campaign a descriptive name</label>
           </h5>
           <TextInput
             id="nameCampaign"

diff --git a/frontend/src/components/dashboard/tests/integration/email.test.tsx b/frontend/src/components/dashboard/tests/integration/email.test.tsx
@@ -33,22 +33,22 @@ test('successfully creates and sends a new email campaign', async () => {
   })
 
   // Click on the "Create new campaign" button
-  await userEvent.click(newCampaignButton)
+  await userEvent.click(newCampaignButton, { delay: null })
 
   // Wait for the CreateModal to load
   const campaignNameTextbox = await screen.findByRole('textbox', {
     name: /name your campaign/i,
   })
 
   // Fill in the campaign title
-  await userEvent.type(campaignNameTextbox, CAMPAIGN_NAME)
+  await userEvent.type(campaignNameTextbox, CAMPAIGN_NAME, { delay: null })
   expect(campaignNameTextbox).toHaveValue(CAMPAIGN_NAME)
 
   // Click on the email channel button
   const emailChannelButton = screen.getByRole('button', {
     name: /^email$/i,
   })
-  await userEvent.click(emailChannelButton)
+  await userEvent.click(emailChannelButton, { delay: null })
   expect(emailChannelButton).toHaveClass('active')
   expect(screen.getByRole('button', { name: /^telegram$/i })).not.toHaveClass(
     'active'
@@ -59,7 +59,8 @@ test('successfully creates and sends a new email campaign', async () => {
 
   // Click on the "Create campaign" button
   await userEvent.click(
-    screen.getByRole('button', { name: /create campaign/i })
+    screen.getByRole('button', { name: /create campaign/i }),
+    { delay: null }
   )
 
   // Wait for the message template to load
@@ -71,11 +72,12 @@ test('successfully creates and sends a new email campaign', async () => {
   const customFromDropdown = screen.getByRole('listbox', {
     name: /custom from/i,
   })
-  await userEvent.click(customFromDropdown)
+  await userEvent.click(customFromDropdown, { delay: null })
   await userEvent.click(
     await screen.findByRole('option', {
       name: DEFAULT_FROM_ADDRESS,
-    })
+    }),
+    { delay: null }
   )
   expect(customFromDropdown).toHaveTextContent(DEFAULT_FROM_ADDRESS)
 
@@ -84,7 +86,7 @@ test('successfully creates and sends a new email campaign', async () => {
     name: /subject/i,
   })
   for (const char of SUBJECT_TEXT) {
-    await userEvent.type(subjectTextbox, char)
+    await userEvent.type(subjectTextbox, char, { delay: null })
   }
   expect(subjectTextbox).toHaveTextContent(SUBJECT_TEXT)
 
@@ -104,7 +106,8 @@ test('successfully creates and sends a new email campaign', async () => {
   await userEvent.click(
     screen.getByRole('button', {
       name: /next/i,
-    })
+    }),
+    { delay: null }
   )
   expect(
     await screen.findByRole('button', {
@@ -117,7 +120,7 @@ test('successfully creates and sends a new email campaign', async () => {
   const fileUploadInput = screen.getByLabelText(
     /upload file/i
   ) as HTMLInputElement
-  await userEvent.upload(fileUploadInput, VALID_EMAIL_CSV_FILE)
+  await userEvent.upload(fileUploadInput, VALID_EMAIL_CSV_FILE, { delay: null })
   expect(fileUploadInput?.files).toHaveLength(1)
   expect(fileUploadInput?.files?.[0]).toBe(VALID_EMAIL_CSV_FILE)
 
@@ -134,7 +137,8 @@ test('successfully creates and sends a new email campaign', async () => {
   await userEvent.click(
     screen.getByRole('button', {
       name: /next/i,
-    })
+    }),
+    { delay: null }
   )
   expect(
     await screen.findByRole('heading', {
@@ -159,7 +163,8 @@ test('successfully creates and sends a new email campaign', async () => {
   await userEvent.click(
     screen.getByRole('button', {
       name: /send/i,
-    })
+    }),
+    { delay: null }
   )
   expect(
     await screen.findByText(/credentials have been validated/i)
@@ -169,7 +174,8 @@ test('successfully creates and sends a new email campaign', async () => {
   await userEvent.click(
     screen.getByRole('button', {
       name: /next/i,
-    })
+    }),
+    { delay: null }
   )
 
   // Wait for the page to load and ensure the necessary elements are shown
@@ -182,7 +188,8 @@ test('successfully creates and sends a new email campaign', async () => {
   await userEvent.click(
     screen.getByRole('button', {
       name: /send campaign now/i,
-    })
+    }),
+    { delay: null }
   )
 
   // Wait for the confirmation modal to load
@@ -196,7 +203,8 @@ test('successfully creates and sends a new email campaign', async () => {
   await userEvent.click(
     screen.getByRole('button', {
       name: /confirm send now/i,
-    })
+    }),
+    { delay: null }
   )
 
   // Wait for the campaign to be sent and ensure
@@ -224,7 +232,7 @@ test('successfully creates and sends a new email campaign', async () => {
     name: /refresh stats/i,
   })
 
-  await userEvent.click(refreshStatsButton)
+  await userEvent.click(refreshStatsButton, { delay: null })
   expect(refreshStatsButton).toBeDisabled()
   await waitFor(() => expect(refreshStatsButton).toBeEnabled())
 

diff --git a/frontend/src/components/dashboard/tests/integration/protected-email.test.tsx b/frontend/src/components/dashboard/tests/integration/protected-email.test.tsx
@@ -34,23 +34,25 @@ test('successfully creates and sends a new protected email campaign', async () =
   })
 
   // Click on the "Create new campaign" button
-  await userEvent.click(newCampaignButton)
+  await userEvent.click(newCampaignButton, { delay: null })
 
   // Wait for the CreateModal to load
   const campaignNameTextbox = await screen.findByRole('textbox', {
     name: /name your campaign/i,
   })
 
   // Fill in the campaign title
-  await userEvent.type(campaignNameTextbox, CAMPAIGN_NAME)
+  await userEvent.type(campaignNameTextbox, CAMPAIGN_NAME, { delay: null })
   expect(campaignNameTextbox).toHaveValue(CAMPAIGN_NAME)
 
   // Click on the email channel button
   const emailChannelButton = screen.getByRole('button', {
     name: /^email$/i,
   })
-  await userEvent.click(emailChannelButton)
-  await userEvent.click(screen.getByText(/password protected/i))
+  await userEvent.click(emailChannelButton, { delay: null })
+  await userEvent.click(screen.getByText(/password protected/i), {
+    delay: null,
+  })
   expect(emailChannelButton).toHaveClass('active')
   expect(screen.getByRole('button', { name: /^telegram$/i })).not.toHaveClass(
     'active'
@@ -61,7 +63,8 @@ test('successfully creates and sends a new protected email campaign', async () =
 
   // Click on the "Create campaign" button
   await userEvent.click(
-    screen.getByRole('button', { name: /create campaign/i })
+    screen.getByRole('button', { name: /create campaign/i }),
+    { delay: null }
   )
 
   // Wait for the message template to load
@@ -73,11 +76,12 @@ test('successfully creates and sends a new protected email campaign', async () =
   const customFromDropdown = screen.getByRole('listbox', {
     name: /custom from/i,
   })
-  await userEvent.click(customFromDropdown)
+  await userEvent.click(customFromDropdown, { delay: null })
   await userEvent.click(
     await screen.findByRole('option', {
       name: DEFAULT_FROM_ADDRESS,
-    })
+    }),
+    { delay: null }
   )
   expect(customFromDropdown).toHaveTextContent(DEFAULT_FROM_ADDRESS)
 
@@ -86,7 +90,7 @@ test('successfully creates and sends a new protected email campaign', async () =
     name: /subject/i,
   })
   for (const char of SUBJECT_TEXT) {
-    await userEvent.type(subjectTextbox, char)
+    await userEvent.type(subjectTextbox, char, { delay: null })
   }
   expect(subjectTextbox).toHaveTextContent(SUBJECT_TEXT)
 
@@ -106,7 +110,8 @@ test('successfully creates and sends a new protected email campaign', async () =
   await userEvent.click(
     screen.getByRole('button', {
       name: /next/i,
-    })
+    }),
+    { delay: null }
   )
   expect(
     await screen.findByRole('button', {
@@ -118,15 +123,15 @@ test('successfully creates and sends a new protected email campaign', async () =
   const protectedMessageTextbox = screen.getByRole('textbox', {
     name: /message b/i,
   })
-  await userEvent.type(protectedMessageTextbox, MESSAGE_TEXT)
+  await userEvent.type(protectedMessageTextbox, MESSAGE_TEXT, { delay: null })
   expect(protectedMessageTextbox).toHaveValue(MESSAGE_TEXT)
 
   // Upload the file
   // Note: we cannot select files via the file picker
   const fileUploadInput = screen.getByLabelText(
     /upload file/i
   ) as HTMLInputElement
-  await userEvent.upload(fileUploadInput, VALID_EMAIL_CSV_FILE)
+  await userEvent.upload(fileUploadInput, VALID_EMAIL_CSV_FILE, { delay: null })
   expect(fileUploadInput?.files).toHaveLength(1)
   expect(fileUploadInput?.files?.[0]).toBe(VALID_EMAIL_CSV_FILE)
 
@@ -139,7 +144,8 @@ test('successfully creates and sends a new protected email campaign', async () =
   await userEvent.click(
     screen.getByRole('button', {
       name: /confirm/i,
-    })
+    }),
+    { delay: null }
   )
 
   // Wait for CSV to be processed and ensure that message preview is shown
@@ -153,7 +159,8 @@ test('successfully creates and sends a new protected email campaign', async () =
   await userEvent.click(
     await screen.findByRole('button', {
       name: /next/i,
-    })
+    }),
+    { delay: null }
   )
   expect(
     await screen.findByRole('heading', {
@@ -178,7 +185,8 @@ test('successfully creates and sends a new protected email campaign', async () =
   await userEvent.click(
     screen.getByRole('button', {
       name: /send/i,
-    })
+    }),
+    { delay: null }
   )
   expect(
     await screen.findByText(/credentials have been validated/i)
@@ -188,7 +196,8 @@ test('successfully creates and sends a new protected email campaign', async () =
   await userEvent.click(
     screen.getByRole('button', {
       name: /next/i,
-    })
+    }),
+    { delay: null }
   )
 
   // Wait for the page to load and ensure the necessary elements are shown
@@ -201,7 +210,8 @@ test('successfully creates and sends a new protected email campaign', async () =
   await userEvent.click(
     screen.getByRole('button', {
       name: /send campaign now/i,
-    })
+    }),
+    { delay: null }
   )
 
   // Wait for the confirmation modal to load
@@ -215,7 +225,8 @@ test('successfully creates and sends a new protected email campaign', async () =
   await userEvent.click(
     screen.getByRole('button', {
       name: /confirm send now/i,
-    })
+    }),
+    { delay: null }
   )
 
   // Wait for the campaign to be sent and ensure
@@ -243,7 +254,7 @@ test('successfully creates and sends a new protected email campaign', async () =
     name: /refresh stats/i,
   })
 
-  await userEvent.click(refreshStatsButton)
+  await userEvent.click(refreshStatsButton, { delay: null })
   expect(refreshStatsButton).toBeDisabled()
   await waitFor(() => expect(refreshStatsButton).toBeEnabled())