Refactoring panLength.focus.avs.spec.ts to work in new framework

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() {

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();
     });
 });

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();