[Epic] New Donation Flow - New version of the Donation Flow

.github/workflows/playwright.yml

@@ -95,6 +95,8 @@ jobs:
       - name: Start frontend
         working-directory: ./frontend
         run: yarn start &> frontend.log &
+        env:
+          STRIPE_PUBLIC_KEY: ${{ env.STRIPE_DEV_PUBLISHABLE_KEY }}
 
       - name: Install Playwright Browsers
         working-directory: ./frontend/e2e

e2e/data/donation-test.data.ts

@@ -0,0 +1,23 @@
+export const stripeSuccessFormData = {
+  cardNumber: '4242 4242 4242 4242',
+  email: '[email protected]',
+  expiryDate: '04 / 42',
+  cvc: '424',
+  country: 'BG',
+}
+
+export const stripeErrorNoBalanceFormData = {
+  cardNumber: '4000 0000 0000 9995',
+  email: '[email protected]',
+  expiryDate: '04 / 42',
+  cvc: '424',
+  country: 'BG',
+}
+
+export const stripeAuthenticationRequiredFormData = {
+  cardNumber: '4000 0027 6000 3184',
+  email: '[email protected]',
+  expiryDate: '04 / 42',
+  cvc: '424',
+  country: 'BG',
+}

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

@@ -1,14 +1,5 @@
-// This enum should be used as a parameter for methods in E2E tests
-
-// Check bgLocalizationOneTimeDonation["third-step"]["card-region"]
-export enum bgDonationRegions {
-  EUROPE = 'Европа',
-  GREAT_BRITAIN = 'Великобритания',
-  OTHER = 'други',
-}
-
-export enum enDonationRegions {
-  EUROPE = 'Europe',
-  GREAT_BRITAIN = 'Great Britain',
-  OTHER = 'other',
+export enum DonationRegions {
+  EUROPE = 'EU',
+  GREAT_BRITAIN = 'UK',
+  OTHER = 'Other',
 }

e2e/data/localization.ts

@@ -13,8 +13,8 @@ import enLocalizationValidationJson from '../../public/locales/en/validation.jso
 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'
+import bgLocalizationDonationFlowJson from '../../public/locales/bg/donation-flow.json'
+import enLocalizationDonationFlowJson from '../../public/locales/en/donation-flow.json'
 
 // All these constants are used in the E2E test pages to manipulate web elements in a respective language
 // Common localization terms
@@ -30,8 +30,8 @@ export const enLocalizationSupport = enLocalizationSupportJson
 export const bgLocalizationCampaigns = bgLocalizationCampaignsJson
 export const enLocalizationCampaigns = enLocalizationCampaignsJson
 // Donations
-export const bgLocalizationOneTimeDonation = bgLocalizationOneTimeDonationJson
-export const enLocalizationOneTimeDonation = enLocalizationOneTimeDonationJson
+export const bgLocalizationDonationFlow = bgLocalizationDonationFlowJson
+export const enLocalizationDonationFlow = enLocalizationDonationFlowJson
 // Validations
 export const bgLocalizationValidation = bgLocalizationValidationJson
 export const enLocalizationValidation = enLocalizationValidationJson

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

@@ -5,11 +5,3 @@ export const supportPageVolutneerTestData = {
   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',
-}

e2e/pages/web-pages/base.page.ts

@@ -358,7 +358,7 @@ export class BasePage {
     for (const item of labelText) {
       // Here we use Xpath because of the special symbol "&nbsp" in the English version
       const radioCheckboxElementLocator = this.page.locator(
-        "(//input[@type='radio']/ancestor::label/p[contains(text(),'" + item + "')])[1]",
+        "(//input[@type='radio']/ancestor::label/span/p[contains(text(),'" + item + "')])[1]",
       )
       if (await this.isElementVisibleByLocatorWithTimeout(radioCheckboxElementLocator)) {
         await radioCheckboxElementLocator.click()

e2e/pages/web-pages/campaigns/campaigns.page.ts

@@ -23,6 +23,9 @@ export class CampaignsPage extends HomePage {
   private readonly bgSupportNowActionButtonText = bgLocalizationCampaigns.cta['support-now']
   private readonly enSupportNowActionButtonText = enLocalizationCampaigns.cta['support-now']
 
+  /**
+   * Ovverride the method from the BasePage and add the specific selector for the Campaigns page as default
+   */
   async checkPageUrlByRegExp(urlRegExpAsString?: string, timeoutParam = 10000): Promise<void> {
     await this.page.waitForTimeout(1000)
     await expect(this.page, 'The URL is not correct!').toHaveURL(

e2e/pages/web-pages/donation/donation-status.page.ts

@@ -0,0 +1,40 @@
+import { Page, expect } from '@playwright/test'
+import { LanguagesEnum } from '../../../data/enums/languages.enum'
+import { bgLocalizationDonationFlow, enLocalizationDonationFlow } from '../../../data/localization'
+import { SLUG_REGEX } from '../../../utils/helpers'
+import { CampaignsPage } from '../campaigns/campaigns.page'
+export class DonationStatusPage extends CampaignsPage {
+  constructor(page: Page) {
+    super(page)
+  }
+
+  // -> Status titles <-
+  private readonly bgSuccessTitle = bgLocalizationDonationFlow.status.success.title
+  private readonly enSuccessTitle = enLocalizationDonationFlow.status.success.title
+
+  // -> Wish form <-
+  private readonly wishSendText = bgLocalizationDonationFlow.status.success.wish.send
+
+  async checkPageUrlByRegExp(urlRegExpAsString?: string, timeoutParam = 10000): Promise<void> {
+    await expect(this.page, 'The URL is not correct!').toHaveURL(
+      new RegExp(urlRegExpAsString || `^(.*?)/campaigns/donation/${SLUG_REGEX}/status?.+$`),
+      {
+        timeout: timeoutParam,
+      },
+    )
+  }
+
+  async isSucceededStatusTitleDisplayed(): Promise<boolean> {
+    return this.isH4HeadingVisible(LanguagesEnum.BG, this.bgSuccessTitle, this.enSuccessTitle)
+  }
+
+  async submitWishForm(): Promise<void> {
+    const wishAreaLocator = await this.page.locator('textarea[name="wish"]')
+    await this.waitForElementToBeReadyByLocator(wishAreaLocator)
+    await wishAreaLocator.fill('e2e_test_wish')
+    const buttonLocator = await this.page.locator('button[type="submit"]', {
+      hasText: this.wishSendText,
+    })
+    await this.clickElementByLocator(buttonLocator)
+  }
+}