From b335b436ea4a34755c62d1610b8d293370ff128b Mon Sep 17 00:00:00 2001 From: nicholas Date: Fri, 15 Nov 2024 15:23:24 +0100 Subject: [PATCH] Refactoring panLength.focus.avs.spec.ts to work in new framework --- packages/e2e-playwright/models/card.ts | 9 ++++ .../panLength/panLength.focus.avs.spec.ts | 52 ++++++------------- .../panLength/panLength.focus.regular.spec.ts | 6 +-- 3 files changed, 28 insertions(+), 39 deletions(-) diff --git a/packages/e2e-playwright/models/card.ts b/packages/e2e-playwright/models/card.ts index 8effc589b..6a774ce6e 100644 --- a/packages/e2e-playwright/models/card.ts +++ b/packages/e2e-playwright/models/card.ts @@ -55,6 +55,9 @@ class Card extends Base { readonly ssnField: Locator; readonly ssnLabelWithFocus: Locator; + readonly addressField: Locator; + readonly addressLabelWithFocus: Locator; + constructor( public readonly page: Page, rootElementSelector = '.adyen-checkout__card-input' @@ -131,6 +134,12 @@ class Card extends Base { */ this.ssnField = this.rootElement.locator('.adyen-checkout__field--socialSecurityNumber'); // Holder this.ssnLabelWithFocus = this.ssnField.locator('.adyen-checkout__label--focused'); + + /** + * AVS related elements + */ + this.addressField = this.rootElement.locator('.adyen-checkout__field--street'); // Holder + this.addressLabelWithFocus = this.addressField.locator('.adyen-checkout__label--focused'); } get availableBrands() { diff --git a/packages/e2e-playwright/tests/ui/card/binLookup/panLength/panLength.focus.avs.spec.ts b/packages/e2e-playwright/tests/ui/card/binLookup/panLength/panLength.focus.avs.spec.ts index 2737152b9..b7ed9087d 100644 --- a/packages/e2e-playwright/tests/ui/card/binLookup/panLength/panLength.focus.avs.spec.ts +++ b/packages/e2e-playwright/tests/ui/card/binLookup/panLength/panLength.focus.avs.spec.ts @@ -1,44 +1,24 @@ -import { test } from '@playwright/test'; -import { mocks } from './mocks'; -import { binLookupUrl, getBinLookupMock, turnOffSDKMocking } from '../../cardMocks'; +import { test, expect } from '../../../../../fixtures/card.fixture'; +import { getStoryUrl } from '../../../../utils/getStoryUrl'; +import { URL_MAP } from '../../../../../fixtures/URL_MAP'; +import { binLookupMock } from '../../../../../mocks/binLookup/binLookup.mock'; +import { optionalDateAndCvcWithPanLengthMock } from '../../../../../mocks/binLookup/binLookup.data'; +import { REGULAR_TEST_CARD } from '../../../../utils/constants'; -/** - * NOTE - we are mocking the response until such time as we have a genuine card that returns the properties we want to test - */ +test.describe('Test Card, binLookup w. panLength property & address fields', () => { + test('#1 Fill out PAN & see that focus moves to an address field since expiryDate & cvc are optional', async ({ card, page }) => { + await binLookupMock(page, optionalDateAndCvcWithPanLengthMock); -let currentMock = null; + const componentConfig = { billingAddressRequired: true, billingAddressRequiredFields: ['street', 'houseNumberOrName', 'postalCode', 'city'] }; -const getMock = val => { - const mock = mocks[val]; - currentMock = getBinLookupMock(binLookupUrl, mock); - return currentMock; -}; + await card.goto(getStoryUrl({ baseUrl: URL_MAP.card, componentConfig })); -test.describe('Test how Card Component handles binLookup returning a panLength property for a card with address fields', () => { - // use config from panLength.avs.clientScripts.js + await card.isComponentVisible(); - test.beforeEach(async () => { - // todo: go to the card page - // For individual test suites (that rely on binLookup & perhaps are being run in isolation) - // - provide a way to ensure SDK bin mocking is turned off - await turnOffSDKMocking(); - }); + await card.typeCardNumber(REGULAR_TEST_CARD); - test('#1 Fill out PAN (binLookup w. panLength) see that focus moves to an address field since expiryDate & cvc are optional', async () => { - // use mock await t.addRequestHooks(getMock('optionalDateAndCVC')); - // Wait for field to appear in DOM - // await cardPage.numHolder(); - // - // const firstDigits = REGULAR_TEST_CARD.substring(0, 15); - // const lastDigits = REGULAR_TEST_CARD.substring(15, 16); - // - // await cardPage.cardUtils.fillCardNumber(t, firstDigits); - // - // await t.wait(INPUT_DELAY); - // - // await cardPage.cardUtils.fillCardNumber(t, lastDigits); - // - // // Expect focus to be place on address (street) field - // await t.expect(cardPage.addressLabelWithFocus.exists).ok(); + // Expect focus to be place on address (street) field + await expect(card.cardNumberLabelWithFocus).not.toBeVisible(); + await expect(card.addressLabelWithFocus).toBeVisible(); }); }); diff --git a/packages/e2e-playwright/tests/ui/card/binLookup/panLength/panLength.focus.regular.spec.ts b/packages/e2e-playwright/tests/ui/card/binLookup/panLength/panLength.focus.regular.spec.ts index 45ad26171..a0c18dc14 100644 --- a/packages/e2e-playwright/tests/ui/card/binLookup/panLength/panLength.focus.regular.spec.ts +++ b/packages/e2e-playwright/tests/ui/card/binLookup/panLength/panLength.focus.regular.spec.ts @@ -12,7 +12,7 @@ import { } from '../../../../../mocks/binLookup/binLookup.data'; test.describe('Test Card, & binLookup w/o panLength property', () => { - test('#1 Fill out PAN & see that focus stays on number field', async ({ card }) => { + test('#0 Fill out PAN & see that focus stays on number field', async ({ card }) => { await card.goto(URL_MAP.card); await card.isComponentVisible(); @@ -132,9 +132,9 @@ test.describe('Test Card, & binLookup w. panLength property', () => { await page.evaluate(() => navigator.clipboard.writeText('4000620000000007')); // Can't use the constant for some reason // Paste text from clipboard - await page.keyboard.press('Meta+V'); + await page.keyboard.press('ControlOrMeta+V'); - await page.waitForTimeout(500); + await page.waitForTimeout(1000); // Expect UI change - expiryDate field has focus await expect(card.cardNumberLabelWithFocus).not.toBeVisible();