First dropin test, for default view of card brands, passes

Adyen · Nov 17, 2023 · ffde438 · ffde438
1 parent 358514e
commit ffde438
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 31 deletions.
diff --git a/packages/e2e-playwright/models/dropin.ts b/packages/e2e-playwright/models/dropin.ts
@@ -49,26 +49,14 @@ class Dropin {
         this.rootElementSelector = rootElementSelector;
 
         this.pmList = this.rootElement.locator('.adyen-checkout__payment-methods-list');
-
-        /**
-         * ###############################################
-         * Credit card related (but only appear in Dropin)
-         * ###############################################
-         */
-        // Regular branding
-        // this.creditCard = this.pmList.getByText('Credit Card');
-        this.creditCard = this.getPaymentMethodItem('Credit Card');
-        this.brandsHolder = this.pmList.locator('.adyen-checkout__payment-method__brands');
     }
 
     async isComponentVisible() {
         await this.pmList.waitFor({ state: 'visible' });
-        // await this.expiryDateInput.waitFor({ state: 'visible' });
-        // await this.cvcInput.waitFor({ state: 'visible' });
     }
 
     getPaymentMethodItem(pmName: string) {
-        return this.pmList.getByText(pmName);
+        return this.pmList.locator(`.adyen-checkout__payment-method:has-text("${pmName}")`);
     }
 
     // async typeCardNumber(cardNumber: string) {

diff --git a/packages/e2e-playwright/pages/dropin/dropin.fixture.ts b/packages/e2e-playwright/pages/dropin/dropin.fixture.ts
@@ -1,16 +1,37 @@
-import { test as base, expect } from '@playwright/test';
+import { test as base, expect, Page } from '@playwright/test';
 import { DropinPage } from './dropin.page';
 
 type Fixture = {
     dropinPage: DropinPage;
+    dropinPage_cardBrands_defaultView: DropinPage;
 };
 
 const test = base.extend<Fixture>({
     dropinPage: async ({ page }, use) => {
-        const dropinPage = new DropinPage(page);
-        await dropinPage.goto();
-        await use(dropinPage);
+        await useDropinPage(page, use);
+    },
+
+    dropinPage_cardBrands_defaultView: async ({ page }, use) => {
+        const pmsConfig = JSON.stringify({
+            paymentMethodsConfiguration: {
+                card: {
+                    showBrandsUnderCardNumber: false,
+                    brands: ['visa', 'mc', 'amex', 'discover', 'cup', 'maestro', 'bijcard', 'diners', 'jcb', 'synchrony_cbcc']
+                }
+            }
+        });
+        await page.addInitScript({
+            content: `window.mainConfiguration = ${pmsConfig}`
+        });
+
+        await useDropinPage(page, use);
     }
 });
 
+const useDropinPage = async (page: Page, use: any, PageType = DropinPage) => {
+    const dropinPage = new PageType(page);
+    await dropinPage.goto();
+    await use(dropinPage);
+};
+
 export { test, expect };
diff --git a/packages/e2e-playwright/tests/dropin/dropin.spec.ts b/packages/e2e-playwright/tests/dropin/dropin.spec.ts
@@ -1,26 +1,18 @@
 import { test, expect } from '../../pages/dropin/dropin.fixture';
 
 test.describe('Dropin', () => {
-    test('should select highlighted issuer and update pay button label', async ({ dropinPage }) => {
-        const { dropin, page } = dropinPage;
+    test('should select highlighted issuer and update pay button label', async ({ dropinPage_cardBrands_defaultView }) => {
+        const { dropin, page } = dropinPage_cardBrands_defaultView;
 
         await dropin.isComponentVisible();
 
-        // await page.waitForTimeout(5000);
+        const creditCard = dropin.getPaymentMethodItem('Credit Card');
+        await creditCard.scrollIntoViewIfNeeded();
 
-        await dropin.creditCard.scrollIntoViewIfNeeded();
+        const brandsHolder = creditCard.locator('.adyen-checkout__payment-method__brands');
 
-        const imgCount = await dropin.brandsHolder.getByRole('img').count();
+        const imgCount = await brandsHolder.getByRole('img').count();
 
         await expect(imgCount).toEqual(10);
-
-        // const creditCard = dropin.getPaymentMethodItem('Credit Card');
-        // await creditCard.scrollIntoViewIfNeeded();
-        //
-        // const brandsHolder = creditCard.locator('.adyen-checkout__payment-method__brands');
-        //
-        // const imgCount = await brandsHolder.getByRole('img').count();
-        //
-        // await expect(imgCount).toEqual(10);
     });
 });