New Donation Flow - Form Data Flow and Stripe Card submission

.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: |

.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

.github/workflows/playwright.yml

@@ -67,7 +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 install --immutable
 
       - name: Setup env
         working-directory: ./frontend
@@ -92,8 +96,8 @@ jobs:
         run: yarn start &> frontend.log &
 
       - name: Install Playwright Browsers
-        working-directory: ./frontend
-        run: npx playwright install --with-deps
+        working-directory: ./frontend/e2e
+        run: yarn run playwright:install
 
       - name: Wait on frontend
         uses: iFaxity/wait-on-action@v1
@@ -103,13 +107,20 @@ jobs:
 
       - name: Run Frontend Tests
         working-directory: ./frontend
-        run: yarn playwright test e2e/local
+        run: yarn run test:e2e
 
       - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: playwright-report
-          path: ./frontend/playwright-report/
+          path: ./frontend/e2e/test-results/
+          retention-days: 14
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: ./frontend/e2e/e2e-reports/
           retention-days: 14
 
       - uses: actions/upload-artifact@v3

.gitignore

@@ -17,6 +17,13 @@ lerna-debug.log*
 coverage
 .nyc_output
 
+# E2E
+test-results/
+playwright-report/
+playwright/.cache/
+e2e-reports/
+e2e/.yarn/*
+
 # IDEs and editors
 .idea
 .project
@@ -51,9 +58,6 @@ build/
 bld/
 [Bb]in/
 [Oo]bj/
-/test-results/
-/playwright-report/
-/playwright/.cache/
 
 # https://yarnpkg.com/getting-started/qa/#which-files-should-be-gitignored
 .pnp.*

e2e/README.md

@@ -45,14 +45,8 @@ Options:
 yarn test:e2e
 ```
 
-### Run only local test suites
+### Run test suites in headed mode with enabled debug
 
 ```shell
-yarn test:e2e local
-```
-
-### Run local test suites in headed mode with enabled debug
-
-```shell
-yarn test:e2e local --headed --debug -x -g support
+yarn test:e2e --headed --debug -x -g support
 ```

e2e/data/enums/donation-regions.enum.ts

@@ -0,0 +1,5 @@
+export enum DonationRegions {
+  EUROPE = 'EU',
+  GREAT_BRITAIN = 'UK',
+  OTHER = 'Other',
+}

e2e/data/enums/languages.enum.ts

@@ -0,0 +1,6 @@
+// This enum should be used as a parameter for methods in E2E tests
+
+export enum LanguagesEnum {
+  BG = 'BG',
+  EN = 'EN',
+}

e2e/data/localization.ts

@@ -0,0 +1,37 @@
+import bgLocalizationCommonJson from '../../public/locales/bg/common.json'
+import enLocalizationCommonJson from '../../public/locales/en/common.json'
+
+import bgLocalizationIndexJson from '../../public/locales/bg/index.json'
+import enLocalizationIndexJson from '../../public/locales/en/index.json'
+
+import bgLocalizationSupportJson from '../../public/locales/bg/support.json'
+import enLocalizationSupportJson from '../../public/locales/en/support.json'
+
+import bgLocalizationValidationJson from '../../public/locales/bg/validation.json'
+import enLocalizationValidationJson from '../../public/locales/en/validation.json'
+
+import bgLocalizationCampaignsJson from '../../public/locales/bg/campaigns.json'
+import enLocalizationCampaignsJson from '../../public/locales/en/campaigns.json'
+
+import bgLocalizationOneTimeDonationJson from '../../public/locales/bg/one-time-donation.json'
+import enLocalizationOneTimeDonationJson from '../../public/locales/en/one-time-donation.json'
+
+// All these constants are used in the E2E test pages to manipulate web elements in a respective language
+// Common localization terms
+export const bgLocalizationCommon = bgLocalizationCommonJson
+export const enLocalizationCommon = enLocalizationCommonJson
+// Home
+export const bgLocalizationIndex = bgLocalizationIndexJson
+export const enLocalizationIndex = enLocalizationIndexJson
+// Support page
+export const bgLocalizationSupport = bgLocalizationSupportJson
+export const enLocalizationSupport = enLocalizationSupportJson
+// Campaigns page
+export const bgLocalizationCampaigns = bgLocalizationCampaignsJson
+export const enLocalizationCampaigns = enLocalizationCampaignsJson
+// Donations
+export const bgLocalizationOneTimeDonation = bgLocalizationOneTimeDonationJson
+export const enLocalizationOneTimeDonation = enLocalizationOneTimeDonationJson
+// Validations
+export const bgLocalizationValidation = bgLocalizationValidationJson
+export const enLocalizationValidation = enLocalizationValidationJson

e2e/data/support-page-tests.data.ts

@@ -0,0 +1,15 @@
+export const supportPageVolutneerTestData = {
+  firstName: 'Test valid first name',
+  lastName: 'Test valid last name',
+  email: '[email protected]',
+  phone: '+359888000000',
+  comment: 'E2E Test comment',
+}
+
+export const anonDonationTestData = {
+  cardNumber: '4242 4242 4242 4242',
+  cardExpDate: '04 / 42',
+  cardCvc: '424',
+  billingName: 'E2E Test Anonymous Donation',
+  country: 'BG',
+}