From 0b5ebb7786485b908996ea48118c77d7272e63ee Mon Sep 17 00:00:00 2001 From: Yu Long Date: Mon, 6 Jan 2025 14:32:49 +0100 Subject: [PATCH] Added tests for `errorPanel.card.visible.spec.ts` and refactor custom card models (#3057) * test(errorPanel.card.visible.spec.ts): added test * test(e2e): use `pressSequentially` for `customCard.ts` and `customCardSeparateExpiryDate.ts` models * test(e2e): added tests for customCard.spec.ts --- packages/e2e-playwright/fixtures/URL_MAP.ts | 1 + packages/e2e-playwright/models/customCard.ts | 6 +- .../models/customCardSeparateExpiryDate.ts | 4 +- .../a11y/card/errorPanel.card.visible.spec.ts | 71 +++++++++++++------ .../tests/e2e/customCard/customCard.spec.ts | 13 +++- ...egular.expiryDatePolicies.optional.spec.ts | 4 +- ...separate.expiryDatePolicies.hidden.spec.ts | 4 +- ...parate.expiryDatePolicies.optional.spec.ts | 4 +- .../ui/customCard/general/general.spec.ts | 62 ---------------- .../stories/components/Donation.stories.tsx | 6 +- 10 files changed, 76 insertions(+), 99 deletions(-) delete mode 100644 packages/e2e-playwright/tests/ui/customCard/general/general.spec.ts diff --git a/packages/e2e-playwright/fixtures/URL_MAP.ts b/packages/e2e-playwright/fixtures/URL_MAP.ts index 8fa9b23d63..2cc1ce06e1 100644 --- a/packages/e2e-playwright/fixtures/URL_MAP.ts +++ b/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', diff --git a/packages/e2e-playwright/models/customCard.ts b/packages/e2e-playwright/models/customCard.ts index 55b7776710..0129eafb57 100644 --- a/packages/e2e-playwright/models/customCard.ts +++ b/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 }); } } diff --git a/packages/e2e-playwright/models/customCardSeparateExpiryDate.ts b/packages/e2e-playwright/models/customCardSeparateExpiryDate.ts index 5f298e3d89..95735e50e8 100644 --- a/packages/e2e-playwright/models/customCardSeparateExpiryDate.ts +++ b/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 }); } } diff --git a/packages/e2e-playwright/tests/a11y/card/errorPanel.card.visible.spec.ts b/packages/e2e-playwright/tests/a11y/card/errorPanel.card.visible.spec.ts index f007e73eb5..1222c448c0 100644 --- a/packages/e2e-playwright/tests/a11y/card/errorPanel.card.visible.spec.ts +++ b/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'); + } }); diff --git a/packages/e2e-playwright/tests/e2e/customCard/customCard.spec.ts b/packages/e2e-playwright/tests/e2e/customCard/customCard.spec.ts index afeeb18bbf..6d753a5e82 100644 --- a/packages/e2e-playwright/tests/e2e/customCard/customCard.spec.ts +++ b/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); + }); }); diff --git a/packages/e2e-playwright/tests/ui/customCard/expiryDate/customCard.regular.expiryDatePolicies.optional.spec.ts b/packages/e2e-playwright/tests/ui/customCard/expiryDate/customCard.regular.expiryDatePolicies.optional.spec.ts index 7816a2194a..269e85219b 100644 --- a/packages/e2e-playwright/tests/ui/customCard/expiryDate/customCard.regular.expiryDatePolicies.optional.spec.ts +++ b/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 diff --git a/packages/e2e-playwright/tests/ui/customCard/expiryDate/customCard.separate.expiryDatePolicies.hidden.spec.ts b/packages/e2e-playwright/tests/ui/customCard/expiryDate/customCard.separate.expiryDatePolicies.hidden.spec.ts index 9dae5c2858..ed9794fa8b 100644 --- a/packages/e2e-playwright/tests/ui/customCard/expiryDate/customCard.separate.expiryDatePolicies.hidden.spec.ts +++ b/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 diff --git a/packages/e2e-playwright/tests/ui/customCard/expiryDate/customCard.separate.expiryDatePolicies.optional.spec.ts b/packages/e2e-playwright/tests/ui/customCard/expiryDate/customCard.separate.expiryDatePolicies.optional.spec.ts index 6b99425014..f2b41e3a2d 100644 --- a/packages/e2e-playwright/tests/ui/customCard/expiryDate/customCard.separate.expiryDatePolicies.optional.spec.ts +++ b/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 diff --git a/packages/e2e-playwright/tests/ui/customCard/general/general.spec.ts b/packages/e2e-playwright/tests/ui/customCard/general/general.spec.ts deleted file mode 100644 index 6991546c9c..0000000000 --- a/packages/e2e-playwright/tests/ui/customCard/general/general.spec.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { test } from '@playwright/test'; - -// Applies to regular, single date field custom card -const iframeSelectorRegular = '.secured-fields iframe'; -// Applies to custom card with separate date fields -const iframeSelectorSeparate = '.secured-fields-2 iframe'; - -test.describe('Testing Custom Cards completion and payment', () => { - test.beforeEach(async () => { - //await t.navigateTo(CUSTOMCARDS_URL); - }); - test('Can fill out the fields in the regular custom card and make a successful payment', async t => { - // Start, allow time for iframes to load - // await start(t, 2000, TEST_SPEED); - // - // // handler for alert that's triggered on successful payment - // await t.setNativeDialogHandler(() => true); - // - // await cardUtilsRegular.fillCardNumber(t, REGULAR_TEST_CARD); - // - // await cardUtilsRegular.fillDateAndCVC(t); - // - // // click pay - // await t - // .click('.secured-fields .adyen-checkout__button') - // // no visible errors - // .expect(Selector('.pm-form-label__error-text').filterHidden().exists) - // .ok() - // .wait(2000); - // - // // Check the value of the alert text - // const history = await t.getNativeDialogHistory(); - // await t.expect(history[0].text).eql('Authorised'); - }); - - test('Can fill out the fields in the separate custom card and make a successful payment', async t => { - // Start, allow time for iframes to load - // await start(t, 2000, TEST_SPEED); - // - // // handler for alert that's triggered on successful payment - // await t.setNativeDialogHandler(() => true); - // - // await cardUtilsSeparate.fillCardNumber(t, REGULAR_TEST_CARD); - // - // await customCardUtils.fillMonth(t, TEST_MONTH_VALUE); - // await customCardUtils.fillYear(t, TEST_YEAR_VALUE); - // - // await customCardUtils.fillCVC(t, TEST_CVC_VALUE); - // - // // click pay - // await t - // .click('.secured-fields-2 .adyen-checkout__button') - // // no visible errors - // .expect(Selector('.pm-form-label__error-text').filterHidden().exists) - // .ok() - // .wait(2000); - // - // // Check the value of the alert text - // const history = await t.getNativeDialogHistory(); - // await t.expect(history[0].text).eql('Authorised'); - }); -}); diff --git a/packages/lib/storybook/stories/components/Donation.stories.tsx b/packages/lib/storybook/stories/components/Donation.stories.tsx index 87432a0a48..ceb646c094 100644 --- a/packages/lib/storybook/stories/components/Donation.stories.tsx +++ b/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;