refactor: added more tests

Author: longyulongyu

packages/e2e-playwright/fixtures/URL_MAP.ts

@@ -13,6 +13,7 @@ export const URL_MAP = {
     cardWithInstallments: '/iframe.html?args=&id=cards-card--with-installments&viewMode=story',
     cardWithKcp: '/iframe.html?args=&id=cards-card--kcp&viewMode=story',
     cardWithClickToPay: '/iframe.html?args=&id=cards-card--with-click-to-pay&viewMode=story',
+    bcmc: '/iframe.html?args=&globals=&id=cards-bancontact--default&viewMode=story',
     /* Custom card */
     customCard: '/iframe.html?globals=&args=&id=cards-custom-card--default&viewMode=story',
     customCardSeparateExpiryDate: '/iframe.html?globals=&args=&id=cards-custom-card--variant&viewMode=story',

packages/e2e-playwright/fixtures/card.fixture.ts

@@ -1,14 +1,22 @@
 import { test as base, expect } from '@playwright/test';
 import { Card } from '../models/card';
+import { BCMC } from '../models/bcmc';
+import { URL_MAP } from './URL_MAP';
 
 type Fixture = {
     card: Card;
+    bcmc: BCMC;
 };
 
 const test = base.extend<Fixture>({
     card: async ({ page }, use) => {
         const cardPage = new Card(page);
         await use(cardPage);
+    },
+    bcmc: async ({ page }, use) => {
+        const bcmc = new BCMC(page);
+        await bcmc.goto(URL_MAP.bcmc);
+        await use(bcmc);
     }
 });
 

packages/e2e-playwright/models/ancv.ts

@@ -15,7 +15,7 @@ class ANCV extends Base {
 
     constructor(
         public readonly page: Page,
-        rootElementSelector = '.ancv-field'
+        rootElementSelector = '.adyen-checkout__ancv'
     ) {
         super(page);
         this.rootElement = page.locator(rootElementSelector);
@@ -39,6 +39,10 @@ class ANCV extends Base {
     async clickOnSubmit() {
         await this.submitButton.click({ delay: SELECTOR_DELAY });
     }
+
+    get paymentResult() {
+        return this.page.locator('.adyen-checkout__await__subtitle--result');
+    }
 }
 
 export { ANCV };

packages/e2e-playwright/models/bcmc.ts

@@ -0,0 +1,10 @@
+import { Card } from './card';
+
+class BCMC extends Card {
+    async isComponentVisible() {
+        await this.cardNumberInput.waitFor({ state: 'visible' });
+        await this.expiryDateInput.waitFor({ state: 'visible' });
+    }
+}
+
+export { BCMC };

packages/e2e-playwright/package.json

@@ -16,8 +16,5 @@
     "dotenv": "16.4.4",
     "ts-loader": "9.4.4",
     "typescript": "5.2.2"
-  },
-  "dependencies": {
-    "@adyen/adyen-web": "6.5.0"
   }
 }

packages/e2e-playwright/tests/a11y/bcmc/bancontact.visa.a11y.spec.ts

@@ -1,34 +1,38 @@
-import { test } from '@playwright/test';
+import { test, expect } from '../../../fixtures/card.fixture';
+import { BCMC_DUAL_BRANDED_VISA, TEST_CVC_VALUE, TEST_DATE_VALUE, VISA_CARD } from '../../utils/constants';
 
-test('BCMC logo should have correct alt text', async () => {
-    // wait for card number field shown
-    // await fillCardNumber(t, '41');
-    // BCMC logo still in number field
-    // await t.expect(cc.brandingIcon.withAttribute('alt', 'Bancontact card').exists).ok();
-    // Hidden cvc field - check aria hidden?
+test('BCMC logo should have correct alt text', async ({ bcmc }) => {
+    await bcmc.typeCardNumber('41');
+    expect(bcmc.rootElement.getByAltText(/bancontact card/i)).toBeTruthy();
 });
 
-test('Visa logo should have correct alt text', async () => {});
+test('Visa logo should have correct alt text', async ({ bcmc }) => {
+    await bcmc.typeCardNumber(VISA_CARD);
+    expect(bcmc.rootElement.getByAltText(/visa/i)).toBeTruthy();
+});
 
 test(
     '#4 Enter card number (co-branded bcmc/visa) ' +
         'then complete expiryDate and expect comp to be valid' +
         'then click Visa logo and expect comp to not be valid' +
         'then click BCMC logo and expect comp to be valid again',
-    async () => {
-        // Wait for field to appear in DOM
-        // fillCardNumber(t, BCMC_DUAL_BRANDED_VISA);
-        // fillDate(t, TEST_DATE_VALUE);
-        // Expect drop in to be valid? - todo move this test to dropin?
-        // Click Visa brand icon
-        // Expect visible CVC field
-        // Expect iframe to exist in CVC field and with aria-required set to true
-        // await checkIframeForAttrVal(t, 2, 'encryptedSecurityCode', 'aria-required', 'true');
-        // Expect dropin not to be valid
-        // Click BCMC brand icon
-        // Eppect hidden CVC field
-        // Expect dropin to be valid (also check that it is set on state for this PM)
-        // Expect the active payment to be valid (also check that it is set on state for this PM)
+    async ({ page, bcmc }) => {
+        await bcmc.typeCardNumber(BCMC_DUAL_BRANDED_VISA);
+        await bcmc.typeExpiryDate(TEST_DATE_VALUE);
+        expect(bcmc.cvcField).toBeHidden();
+        await page.waitForFunction(() => globalThis.component.isValid === true);
+
+        await bcmc.rootElement.getByAltText(/visa/i).first().click();
+        await bcmc.cvcInput.waitFor({ state: 'visible' });
+        expect(bcmc.cvcInput).toHaveAttribute('aria-required', 'true');
+        await page.waitForFunction(() => globalThis.component.isValid === false);
+
+        await bcmc.rootElement
+            .getByAltText(/bancontact card/i)
+            .first()
+            .click();
+        await bcmc.cvcField.waitFor({ state: 'hidden' });
+        await page.waitForFunction(() => globalThis.component.isValid === true);
     }
 );
 
@@ -37,15 +41,16 @@ test(
         'then complete expiryDate and expect comp to be valid' +
         'then click Visa logo and expect comp to not be valid' +
         'then enter CVC and expect comp to be valid',
-    async () => {
-        // Wait for field to appear in DOM
-        // fillCardNumber(t, BCMC_DUAL_BRANDED_VISA);
-        // fillDate(t, TEST_DATE_VALUE);
-        // Expect dropin.isValid
-        // Click Visa brand icon
-        // Expect dropin.isValid not to be valid
-        // fill CVC
-        // Expect dropin.isValid to now be valid
+    async ({ bcmc, page }) => {
+        await bcmc.typeCardNumber(BCMC_DUAL_BRANDED_VISA);
+        await bcmc.typeExpiryDate(TEST_DATE_VALUE);
+        await page.waitForFunction(() => globalThis.component.isValid === true);
+
+        await bcmc.rootElement.getByAltText(/visa/i).first().click();
+        await page.waitForFunction(() => globalThis.component.isValid === false);
+
+        await bcmc.typeCvc(TEST_CVC_VALUE);
+        await page.waitForFunction(() => globalThis.component.isValid === true);
     }
 );
 

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

@@ -73,7 +73,9 @@ test.describe('Test how Custom Card Component with regular date field handles hi
         await expect(cardValid).toEqual(true);
     });
     // flaky
-    test.fixme('#3 date field in error does not stop card becoming valid', async ({ page, customCard }) => {
+    test('#3 date field in error does not stop card becoming valid', async ({ browserName, page, customCard }) => {
+        test.skip(browserName === 'webkit', 'Skipping tests for WebKit');
+
         await binLookupMock(page, hiddenDateAndCvcMock);
 
         // Card out of date

packages/e2e-playwright/tests/utils/constants.ts

@@ -1,6 +1,7 @@
 export const BIN_LOOKUP_VERSION = 'v3';
 
 export const REGULAR_TEST_CARD = '5500000000000004';
+export const VISA_CARD = '4111111111111111';
 export const AMEX_CARD = '370000000000002';
 export const KOREAN_TEST_CARD = '9490220006611406'; // 9490220006611406 works against Test. For localhost:8080 use: 5067589608564358 + hack in triggerBinLookup
 export const BCMC_CARD = '6703444444444449'; // actually dual branded bcmc & maestro