Fix - e2e checkURL tests failing unexpectedly (#1323)

* fix-e2e - add `umountOnExit` on donation form collapses * fix-e2e - ovverride page `checkURL` methods to match the pages * fix-e2e - remove form submission of the `supportPage` contact form because of emails, add --immutable to `yarn install`s
podkrepi-bg · Feb 6, 2023 · 7d61b5b · 7d61b5b
1 parent f9272f4
commit 7d61b5b
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 30 deletions.
diff --git a/.github/workflows/build-nextjs.yml b/.github/workflows/build-nextjs.yml
@@ -26,7 +26,7 @@ jobs:
             ${{ runner.os }}-build-yarn-
 
       - name: Install dependencies
-        run: yarn
+        run: yarn install --immutable
 
       - name: Build frontend
         run: |

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v3
 
       - name: Install dependencies
-        run: yarn
+        run: yarn install --immutable
 
       - name: Lint frontend
         run: yarn lint

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -67,11 +67,11 @@ jobs:
 
       - name: Install Frontend Dependencies
         working-directory: ./frontend
-        run: yarn
+        run: yarn install --immutable
 
       - name: Install e2e Dependencies
         working-directory: ./frontend/e2e
-        run: yarn
+        run: yarn install --immutable
 
       - name: Setup env
         working-directory: ./frontend

diff --git a/e2e/pages/web-pages/campaigns/campaigns.page.ts b/e2e/pages/web-pages/campaigns/campaigns.page.ts
@@ -1,4 +1,4 @@
-import { Page } from '@playwright/test'
+import { Page, expect } from '@playwright/test'
 import { LanguagesEnum } from '../../../data/enums/languages.enum'
 import { bgLocalizationCampaigns, enLocalizationCampaigns } from '../../../data/localization'
 import { SLUG_REGEX } from '../../../utils/helpers'
@@ -24,7 +24,13 @@ export class CampaignsPage extends HomePage {
   private readonly enSupportNowActionButtonText = enLocalizationCampaigns.cta['support-now']
 
   async checkPageUrlByRegExp(urlRegExpAsString?: string, timeoutParam = 10000): Promise<void> {
-    super.checkPageUrlByRegExp(urlRegExpAsString || `^(.*?)/campaigns/${SLUG_REGEX}`, timeoutParam)
+    await this.page.waitForTimeout(1000)
+    await expect(this.page, 'The URL is not correct!').toHaveURL(
+      new RegExp(urlRegExpAsString || `^(.*?)/campaigns/${SLUG_REGEX}`),
+      {
+        timeout: timeoutParam,
+      },
+    )
   }
 
   /**

diff --git a/e2e/pages/web-pages/campaigns/donation.page.ts b/e2e/pages/web-pages/campaigns/donation.page.ts
@@ -1,4 +1,4 @@
-import { Page } from '@playwright/test'
+import { Page, expect } from '@playwright/test'
 import { LanguagesEnum } from '../../../data/enums/languages.enum'
 import {
   bgLocalizationOneTimeDonation,
@@ -61,9 +61,12 @@ export class DonationPage extends CampaignsPage {
   private readonly enSuccessfulDonationTitle = enLocalizationOneTimeDonation.success.title
 
   async checkPageUrlByRegExp(urlRegExpAsString?: string, timeoutParam = 10000): Promise<void> {
-    super.checkPageUrlByRegExp(
-      urlRegExpAsString || `^(.*?)/campaigns/donation/${SLUG_REGEX}`,
-      timeoutParam,
+    await this.page.waitForTimeout(1000)
+    await expect(this.page, 'The URL is not correct!').toHaveURL(
+      new RegExp(urlRegExpAsString || `^(.*?)/campaigns/donation/${SLUG_REGEX}`),
+      {
+        timeout: timeoutParam,
+      },
     )
   }
 

diff --git a/e2e/pages/web-pages/support.page.ts b/e2e/pages/web-pages/support.page.ts
@@ -132,7 +132,8 @@ export class SupportPage extends HomePage {
     await this.setInputFieldBySelector(this.contactFormPhoneInputField, volunteerData[3])
     await this.setInputFieldBySelector(this.contactFormCommentInputField, volunteerData[4])
     await this.selectCheckboxByLabelText([this.agreeWithTerms, this.understandTerms])
-    await this.clickSendSubmitButton()
+    // Stop form submission, because of email sending
+    // await this.clickSendSubmitButton()
   }
 
   /**

diff --git a/e2e/tests/regression/support-as-member.spec.ts b/e2e/tests/regression/support-as-member.spec.ts
@@ -127,19 +127,20 @@ test.describe.serial('Support page - Join us as member - BG language version', a
     ).toBeFalsy()
   })
 
-  test('"Thank you" step works correctly', async () => {
-    expect
-      .soft(
-        await supportPage.isContactDataStepActive(),
-        'Contact Data step is active, but should not be.',
-      )
-      .toBeFalsy()
-    expect
-      .soft(await supportPage.isParticipationStepActive(), 'Participation step is Not active.')
-      .toBeTruthy()
-    expect(
-      await supportPage.isThankYouSupportH4HeadingVisible(),
-      'Thank you greeting is not visible.',
-    ).toBeTruthy()
-  })
+  // Comment out thank you step because of email sending
+  // test('"Thank you" step works correctly', async () => {
+  //   expect
+  //     .soft(
+  //       await supportPage.isContactDataStepActive(),
+  //       'Contact Data step is active, but should not be.',
+  //     )
+  //     .toBeFalsy()
+  //   expect
+  //     .soft(await supportPage.isParticipationStepActive(), 'Participation step is Not active.')
+  //     .toBeTruthy()
+  //   expect(
+  //     await supportPage.isThankYouSupportH4HeadingVisible(),
+  //     'Thank you greeting is not visible.',
+  //   ).toBeTruthy()
+  // })
 })
diff --git a/src/components/one-time-donation/steps/FirstStep.tsx b/src/components/one-time-donation/steps/FirstStep.tsx
@@ -106,7 +106,7 @@ export default function FirstStep() {
           options={paymentOptions}
         />
       </Box>
-      <Collapse in={paymentField.value === 'bank'} timeout="auto">
+      <Collapse unmountOnExit in={paymentField.value === 'bank'} timeout="auto">
         <List component="div" disablePadding>
           <Typography marginTop={theme.spacing(4)} variant="h6">
             {t('third-step.bank-details')}
@@ -173,7 +173,7 @@ export default function FirstStep() {
           <Typography>{t('third-step.message-warning')}</Typography>
         </List>
       </Collapse>
-      <Collapse in={paymentField.value === 'card'} timeout="auto">
+      <Collapse unmountOnExit in={paymentField.value === 'card'} timeout="auto">
         <Typography paragraph={true} variant="body2" sx={{ marginTop: theme.spacing(2) }}>
           {t('third-step.card-fees')}
           <ExternalLink href="https://stripe.com/en-bg/pricing">
@@ -197,7 +197,7 @@ export default function FirstStep() {
                 .concat({ label: t('first-step.other'), value: 'other' }) || []
             }
           />
-          <Collapse in={amount.value === 'other'} timeout="auto">
+          <Collapse unmountOnExit in={amount.value === 'other'} timeout="auto">
             <Grid
               item
               xs={12}
@@ -283,7 +283,7 @@ export default function FirstStep() {
           ) : null}
         </Box>
       </Collapse>
-      <Collapse in={paymentField.value === 'paypal'}>
+      <Collapse unmountOnExit in={paymentField.value === 'paypal'}>
         <Grid container justifyContent="center">
           <Grid my={2} item display="flex" justifyContent="center" xs={9}>
             <Typography>