Chore/bin lookup pan length tests

packages/e2e-playwright/mocks/binLookup/binLookup.data.ts

@@ -1,4 +1,18 @@
 const optionalDateAndCvcMock = {
+    brands: [
+        {
+            brand: 'mc',
+            enableLuhnCheck: true,
+            supported: true,
+            cvcPolicy: 'optional',
+            expiryDatePolicy: 'optional'
+        }
+    ],
+    issuingCountryCode: 'US',
+    requestedId: null
+};
+
+const optionalDateAndCvcWithPanLengthMock = {
     brands: [
         {
             brand: 'mc',
@@ -27,4 +41,88 @@ const hiddenDateAndCvcMock = {
     requestedId: null
 };
 
-export { optionalDateAndCvcMock, hiddenDateAndCvcMock };
+const optionalDateWithPanLengthMock = {
+    brands: [
+        {
+            brand: 'mc',
+            enableLuhnCheck: true,
+            supported: true,
+            cvcPolicy: 'required',
+            expiryDatePolicy: 'optional',
+            panLength: 16
+        }
+    ],
+    issuingCountryCode: 'US',
+    requestedId: null
+};
+
+const hiddenDateWithPanLengthMock = {
+    brands: [
+        {
+            brand: 'mc',
+            enableLuhnCheck: true,
+            supported: true,
+            cvcPolicy: 'required',
+            expiryDatePolicy: 'hidden',
+            panLength: 16
+        }
+    ],
+    issuingCountryCode: 'US',
+    requestedId: null
+};
+
+const multiLengthMaestroWithPanLengthMock = {
+    brands: [
+        {
+            enableLuhnCheck: true,
+            supported: true,
+            brand: 'maestro',
+            cvcPolicy: 'required',
+            expiryDatePolicy: 'required',
+            panLength: 18
+        }
+    ],
+    issuingCountryCode: 'US',
+    requestedId: null
+};
+
+const amexWithPanLengthMock = {
+    brands: [
+        {
+            enableLuhnCheck: true,
+            supported: true,
+            brand: 'amex',
+            cvcPolicy: 'required',
+            expiryDatePolicy: 'required',
+            panLength: 15
+        }
+    ],
+    issuingCountryCode: 'US',
+    requestedId: null
+};
+
+const kcpMockOptionalDateAndCvcWithPanLengthMock = {
+    brands: [
+        {
+            enableLuhnCheck: true,
+            supported: true,
+            brand: 'korean_local_card',
+            cvcPolicy: 'optional',
+            expiryDatePolicy: 'optional',
+            panLength: 16
+        }
+    ],
+    requestedId: null,
+    issuingCountryCode: 'KR'
+};
+
+export {
+    optionalDateAndCvcMock,
+    hiddenDateAndCvcMock,
+    optionalDateWithPanLengthMock,
+    hiddenDateWithPanLengthMock,
+    optionalDateAndCvcWithPanLengthMock,
+    multiLengthMaestroWithPanLengthMock,
+    amexWithPanLengthMock,
+    kcpMockOptionalDateAndCvcWithPanLengthMock
+};

packages/e2e-playwright/models/card.ts

@@ -21,29 +21,46 @@ class Card extends Base {
 
     readonly cardNumberField: Locator;
     readonly cardNumberLabelElement: Locator;
+    readonly cardNumberLabelWithFocus: Locator;
     readonly cardNumberErrorElement: Locator;
     readonly cardNumberInput: Locator;
     readonly brandingIcon: Locator;
 
     readonly expiryDateField: Locator;
+    readonly expiryDateLabelElement: Locator;
     readonly expiryDateLabelText: Locator;
     readonly expiryDateContextualElement: Locator;
+    readonly expiryDateLabelWithFocus: Locator;
     readonly expiryDateInput: Locator;
     readonly expiryDateIframeContextualElement: Locator;
     readonly expiryDateErrorElement: Locator;
 
     readonly cvcField: Locator;
+    readonly cvcLabelElement: Locator;
     readonly cvcLabelText: Locator;
+    readonly cvcLabelWithFocus: Locator;
     readonly cvcErrorElement: Locator;
     readonly cvcContextualElement: Locator;
     readonly cvcInput: Locator;
     readonly cvcIframeContextualElement: Locator;
 
+    readonly holderNameField: Locator;
+    readonly holderNameLabelWithFocus: Locator;
+
     readonly installmentsPaymentLabel: Locator;
     readonly revolvingPaymentLabel: Locator;
     readonly installmentsDropdown: Locator;
     readonly selectorList: Locator;
 
+    readonly ssnField: Locator;
+    readonly ssnLabelWithFocus: Locator;
+
+    readonly addressField: Locator;
+    readonly addressLabelWithFocus: Locator;
+
+    readonly kcpTaxNumberField: Locator;
+    readonly kcpTaxNumberLabelWithFocus: Locator;
+
     constructor(
         public readonly page: Page,
         rootElementSelector = '.adyen-checkout__card-input'
@@ -58,6 +75,7 @@ class Card extends Base {
         this.cardNumberField = this.rootElement.locator('.adyen-checkout__field--cardNumber'); // Holder
         this.cardNumberLabelElement = this.cardNumberField.locator('.adyen-checkout__label');
         this.cardNumberErrorElement = this.cardNumberField.locator('.adyen-checkout-contextual-text--error');
+        this.cardNumberLabelWithFocus = this.cardNumberField.locator('.adyen-checkout__label--focused');
 
         this.brandingIcon = this.rootElement.locator('.adyen-checkout__card__cardNumber__brandIcon');
         /**
@@ -70,9 +88,11 @@ class Card extends Base {
          * Expiry Date elements, in Checkout
          */
         this.expiryDateField = this.rootElement.locator('.adyen-checkout__field--expiryDate'); // Holder
+        this.expiryDateLabelElement = this.expiryDateField.locator('.adyen-checkout__label');
         this.expiryDateLabelText = this.expiryDateField.locator('.adyen-checkout__label__text');
         this.expiryDateContextualElement = this.expiryDateField.locator('.adyen-checkout-contextual-text'); // Related contextual element
         this.expiryDateErrorElement = this.expiryDateField.locator('.adyen-checkout-contextual-text--error'); // Related error element
+        this.expiryDateLabelWithFocus = this.expiryDateField.locator('.adyen-checkout__label--focused');
 
         /**
          * Expiry Date elements, in iframe
@@ -85,9 +105,11 @@ class Card extends Base {
          * Security code elements, in Checkout
          */
         this.cvcField = this.rootElement.locator('.adyen-checkout__field--securityCode'); // Holder
+        this.cvcLabelElement = this.cvcField.locator('.adyen-checkout__label');
         this.cvcLabelText = this.cvcField.locator('.adyen-checkout__label__text');
         this.cvcContextualElement = this.cvcField.locator('.adyen-checkout-contextual-text'); // Related contextual element
         this.cvcErrorElement = this.cvcField.locator('.adyen-checkout-contextual-text--error'); // Related error element
+        this.cvcLabelWithFocus = this.cvcField.locator('.adyen-checkout__label--focused');
 
         /**
          * Security code elements, in iframe
@@ -96,13 +118,37 @@ class Card extends Base {
         this.cvcInput = cvcIframe.locator(`input[aria-label="${CVC_IFRAME_LABEL}"]`);
         this.cvcIframeContextualElement = cvcIframe.locator('.aria-context');
 
+        /**
+         * HolderName elements, in Checkout
+         */
+        this.holderNameField = this.rootElement.locator('.adyen-checkout__card__holderName'); // Holder
+        this.holderNameLabelWithFocus = this.holderNameField.locator('.adyen-checkout__label--focused');
+
         /**
          * Installments related elements
          */
         this.installmentsPaymentLabel = this.rootElement.getByText(INSTALLMENTS_PAYMENTS);
         this.revolvingPaymentLabel = this.rootElement.getByText(REVOLVING_PAYMENT);
         this.installmentsDropdown = this.rootElement.locator('.adyen-checkout__dropdown__button');
         this.selectorList = this.rootElement.getByRole('listbox');
+
+        /**
+         * Social Security Number related elements
+         */
+        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');
+
+        /**
+         * KCP related elements
+         */
+        this.kcpTaxNumberField = this.rootElement.locator('.adyen-checkout__field--kcp-taxNumber'); // Holder
+        this.kcpTaxNumberLabelWithFocus = this.kcpTaxNumberField.locator('.adyen-checkout__label--focused');
     }
 
     get availableBrands() {

packages/e2e-playwright/playwright.config.ts

@@ -51,7 +51,11 @@ const config: PlaywrightTestConfig = {
         {
             name: 'chromium',
             use: {
-                ...devices['Desktop Chrome']
+                ...devices['Desktop Chrome'],
+                contextOptions: {
+                    // chromium-specific permissions
+                    permissions: ['clipboard-read', 'clipboard-write']
+                }
             }
         },
 

packages/e2e-playwright/tests/a11y/card/avs.a11y.spec.ts

@@ -1,6 +1,6 @@
 import { test as base, expect } from '@playwright/test';
 import { binLookupMock } from '../../../mocks/binLookup/binLookup.mock';
-import { optionalDateAndCvcMock } from '../../../mocks/binLookup/binLookup.data';
+import { optionalDateAndCvcWithPanLengthMock } from '../../../mocks/binLookup/binLookup.data';
 import { REGULAR_TEST_CARD } from '../../utils/constants';
 import { CardWithAvs } from '../../../models/card-avs';
 import { getStoryUrl } from '../../utils/getStoryUrl';
@@ -15,7 +15,7 @@ const test = base.extend<Fixture>({
         const cardPage = new CardWithAvs(page);
         const componentConfig = { billingAddressRequired: true, billingAddressRequiredFields: ['street', 'houseNumberOrName', 'postalCode', 'city'] };
         await cardPage.goto(getStoryUrl({ baseUrl: URL_MAP.card, componentConfig }));
-        await binLookupMock(page, optionalDateAndCvcMock);
+        await binLookupMock(page, optionalDateAndCvcWithPanLengthMock);
         await use(cardPage);
     }
 });

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