Added tests for errorPanel.card.visible.spec.ts and refactor custom card models

packages/e2e-playwright/fixtures/URL_MAP.ts

@@ -12,6 +12,7 @@ export const URL_MAP = {
      * Card
      */
     card: '/iframe.html?args=&id=cards-card--default&viewMode=story',
+    cardWithVisibleSrPanel: '/iframe.html?args=srConfig.showPanel:!true&globals=&id=cards-card--default&viewMode=story',
     cardWithSsn: '/iframe.html?globals=&id=cards-card--with-ssn&viewMode=story',
     cardWithAdvancedFlow: '/iframe.html?args=useSessions:!false&globals=&id=cards-card--default&viewMode=story',
     cardWithAvs: '/iframe.html?args=&globals=&id=cards-card--with-avs&viewMode=story',

packages/e2e-playwright/models/customCard.ts

@@ -93,7 +93,7 @@ class CustomCard extends Base {
     }
 
     async typeCardNumber(cardNumber: string) {
-        await this.cardNumberInput.type(cardNumber, { delay: USER_TYPE_DELAY });
+        await this.cardNumberInput.pressSequentially(cardNumber, { delay: USER_TYPE_DELAY });
     }
 
     async deleteCardNumber() {
@@ -105,11 +105,11 @@ class CustomCard extends Base {
     }
 
     async typeExpiryDate(expiryDate: string) {
-        await this.expiryDateInput.type(expiryDate, { delay: USER_TYPE_DELAY });
+        await this.expiryDateInput.pressSequentially(expiryDate, { delay: USER_TYPE_DELAY });
     }
 
     async typeCvc(cvc: string) {
-        await this.cvcInput.type(cvc, { delay: USER_TYPE_DELAY });
+        await this.cvcInput.pressSequentially(cvc, { delay: USER_TYPE_DELAY });
     }
 }
 

packages/e2e-playwright/models/customCardSeparateExpiryDate.ts

@@ -72,10 +72,10 @@ class CustomCardSeparateExpiryDate extends CustomCard {
     }
 
     async typeExpiryMonth(expiryMonth: string) {
-        await this.expiryMonthInput.type(expiryMonth, { delay: USER_TYPE_DELAY });
+        await this.expiryMonthInput.pressSequentially(expiryMonth, { delay: USER_TYPE_DELAY });
     }
     async typeExpiryYear(expiryYear: string) {
-        await this.expiryYearInput.type(expiryYear, { delay: USER_TYPE_DELAY });
+        await this.expiryYearInput.pressSequentially(expiryYear, { delay: USER_TYPE_DELAY });
     }
 }
 

packages/e2e-playwright/tests/a11y/card/errorPanel.card.visible.spec.ts

@@ -1,28 +1,55 @@
-import { test } from '@playwright/test';
+import { mergeTests, expect } from '@playwright/test';
+import { test as card } from '../../../fixtures/card.fixture';
+import { test as srPanel } from '../../../fixtures/srPanel.fixture';
+import { URL_MAP } from '../../../fixtures/URL_MAP';
+import { REGULAR_TEST_CARD } from '../../utils/constants';
 
-test('#1 Error panel is present at start, when there are no errors, but is empty', async () => {
-    // Wait for field to appear in DOM
-    // error panel exists but is empty
+const test = mergeTests(card, srPanel);
+
+test('#1 Error panel is present at start, when there are no errors, but is empty', async ({ card, srPanel }) => {
+    await card.goto(URL_MAP.cardWithVisibleSrPanel);
+    expect(await srPanel.allMessages).toHaveLength(0);
 });
 
-test('#2 Click pay with empty fields and error panel is populated', async () => {
-    // Wait for field to appear in DOM
-    // click pay, to validate & generate errors
-    // Expect 3 elements, in order, with specific text
-    // expect(cardPage.errorPanelEls.nth(0).withExactText(CARD_NUMBER_EMPTY).exists)
-    // expect(cardPage.errorPanelEls.nth(1).withExactText(EXPIRY_DATE_EMPTY).exists)
-    // expect(cardPage.errorPanelEls.nth(2).withExactText(CVC_EMPTY).exists)
-    // no 4th element
-    // Expect focus to be place on Card number field - since SRConfig for this card comp says it should be
+test('#2 Click pay with empty fields and error panel is populated', async ({ card, srPanel, page, browserName }) => {
+    const expectedSRPanelTexts = ['Enter the card number-sr', 'Enter the expiry date-sr', 'Enter the security code-sr'];
+    await card.goto(URL_MAP.cardWithVisibleSrPanel);
+    await card.pay();
+    // Wait for all sr panel messages
+    await page.waitForFunction(
+        expectedLength => [...document.querySelectorAll('.adyen-checkout-sr-panel__msg')].map(el => el.textContent).length === expectedLength,
+        expectedSRPanelTexts.length
+    );
+    // check individual messages
+    const srErrorMessages = await srPanel.allMessages;
+    srErrorMessages.forEach((retrievedText, index) => {
+        expect(retrievedText).toHaveText(expectedSRPanelTexts[index]);
+    });
+    if (browserName !== 'firefox') {
+        await expect(card.cardNumberInput).toBeFocused();
+    } else {
+        console.log('Skipping focus check for Firefox');
+    }
 });
 
-test('#3 Fill out PAN & see that first error in error panel is date related', async () => {
-    // Wait for field to appear in DOM
-    // await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
-    // click pay, to validate & generate errors
-    // Expect 2 elements, in order, with specific text
-    // expect(cardPage.errorPanelEls.nth(0).withExactText(EXPIRY_DATE_EMPTY).exists)
-    // expect(cardPage.errorPanelEls.nth(1).withExactText(CVC_EMPTY).exists)
-    // no 3rd element
-    // Expect focus to be place on Expiry date field
+test('#3 Fill out PAN & see that first error in error panel is date related', async ({ card, srPanel, page, browserName }) => {
+    const expectedSRPanelTexts = ['Enter the expiry date-sr', 'Enter the security code-sr'];
+    await card.goto(URL_MAP.cardWithVisibleSrPanel);
+    await card.fillCardNumber(REGULAR_TEST_CARD);
+    await card.pay();
+    // Wait for all sr panel messages
+    await page.waitForFunction(
+        expectedLength => [...document.querySelectorAll('.adyen-checkout-sr-panel__msg')].map(el => el.textContent).length === expectedLength,
+        expectedSRPanelTexts.length
+    );
+    // check individual messages
+    const srErrorMessages = await srPanel.allMessages;
+    srErrorMessages.forEach((retrievedText, index) => {
+        expect(retrievedText).toHaveText(expectedSRPanelTexts[index]);
+    });
+    if (browserName !== 'firefox') {
+        await expect(card.expiryDateInput).toBeFocused();
+    } else {
+        console.log('Skipping focus check for Firefox');
+    }
 });

packages/e2e-playwright/tests/e2e/customCard/customCard.spec.ts

@@ -1,12 +1,21 @@
 import { test, expect } from '../../../fixtures/customCard.fixture';
-import { PAYMENT_RESULT, REGULAR_TEST_CARD, TEST_CVC_VALUE, TEST_DATE_VALUE } from '../../utils/constants';
+import { PAYMENT_RESULT, REGULAR_TEST_CARD, TEST_CVC_VALUE, TEST_DATE_VALUE, TEST_MONTH_VALUE, TEST_YEAR_VALUE } from '../../utils/constants';
 
 test.describe('Custom Card - Standard flow', () => {
-    test('should fill in card fields and complete the payment', async ({ customCard }) => {
+    test('should fill out the fields in the regular custom card and make a successful payment', async ({ customCard }) => {
         await customCard.typeCardNumber(REGULAR_TEST_CARD);
         await customCard.typeExpiryDate(TEST_DATE_VALUE);
         await customCard.typeCvc(TEST_CVC_VALUE);
         await customCard.pay();
         await expect(customCard.paymentResult).toContainText(PAYMENT_RESULT.authorised);
     });
+
+    test('should fill out the fields in the separate custom card and make a successful payment', async ({ customCardSeparateExpiryDate }) => {
+        await customCardSeparateExpiryDate.typeCardNumber(REGULAR_TEST_CARD);
+        await customCardSeparateExpiryDate.typeExpiryMonth(TEST_MONTH_VALUE);
+        await customCardSeparateExpiryDate.typeExpiryYear(TEST_YEAR_VALUE);
+        await customCardSeparateExpiryDate.typeCvc(TEST_CVC_VALUE);
+        await customCardSeparateExpiryDate.pay();
+        await expect(customCardSeparateExpiryDate.paymentResult).toContainText(PAYMENT_RESULT.authorised);
+    });
 });

packages/e2e-playwright/tests/ui/customCard/expiryDate/customCard.regular.expiryDatePolicies.optional.spec.ts

@@ -95,8 +95,8 @@ test.describe('Test how Custom Card Component with regular date field handles hi
         await expect(cardErrors[ENCRYPTED_EXPIRY_DATE]).toBe(null);
         await expect(cardErrors[ENCRYPTED_SECURITY_CODE]).toBe(null);
     });
-    // todo: flaky
-    test.fixme('#4 date field in error DOES stop card becoming valid', async ({ page, customCard }) => {
+
+    test('#4 date field in error DOES stop card becoming valid', async ({ page, customCard }) => {
         await binLookupMock(page, optionalDateAndCvcMock);
 
         // Card out of date

packages/e2e-playwright/tests/ui/customCard/expiryDate/customCard.separate.expiryDatePolicies.hidden.spec.ts

@@ -77,8 +77,8 @@ test.describe('Test how Custom Card Component with separate date field handles h
         let cardValid = await page.evaluate('window.customCardSeparate.isValid');
         await expect(cardValid).toEqual(true);
     });
-    // todo: flaky
-    test.fixme('#3 date field in error does not stop card becoming valid', async ({ page, customCardSeparateExpiryDate }) => {
+
+    test('#3 date field in error does not stop card becoming valid', async ({ page, customCardSeparateExpiryDate }) => {
         await binLookupMock(page, hiddenDateAndCvcMock);
 
         // Card out of date

packages/e2e-playwright/tests/ui/customCard/expiryDate/customCard.separate.expiryDatePolicies.optional.spec.ts

@@ -112,8 +112,8 @@ test.describe('Test how Custom Card Component with separate date fields handles
         let cardValid = await page.evaluate('window.customCardSeparate.isValid');
         await expect(cardValid).toEqual(true);
     });
-    // todo: flaky.
-    test.fixme('#4 date field in error DOES stop card becoming valid', async ({ page, customCardSeparateExpiryDate }) => {
+
+    test('#4 date field in error DOES stop card becoming valid', async ({ page, customCardSeparateExpiryDate }) => {
         await binLookupMock(page, optionalDateAndCvcMock);
 
         // Card out of date

packages/lib/storybook/stories/components/Donation.stories.tsx

@@ -11,7 +11,8 @@ const componentConfiguration: DonationConfiguration = {
     onCancel: () => alert('Donation canceled'),
     nonprofitName: 'Test Charity',
     nonprofitUrl: 'https://example.org',
-    nonprofitDescription: 'Lorem ipsum...',
+    nonprofitDescription:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
     donation: {
         type: 'fixedAmounts',
         currency: 'EUR',
@@ -20,7 +21,8 @@ const componentConfiguration: DonationConfiguration = {
     termsAndConditionsUrl: 'https://www.adyen.com',
     bannerUrl: '/banner.png',
     logoUrl: '/logo.png',
-    commercialTxAmount: 1000
+    commercialTxAmount: 1000,
+    causeName: 'Earthquake Turkey & Syria'
 };
 
 type DonationStory = StoryConfiguration<DonationConfiguration>;