Added test checking BCMC's UI when in the Dropin

packages/e2e-playwright/fixtures/URL_MAP.ts

@@ -6,6 +6,7 @@ export const URL_MAP = {
         '/iframe.html?globals=&args=amount:0;sessionData.recurringProcessingModel:CardOnFile;sessionData.storePaymentMethodMode:askForConsent&id=dropin-default--auto&viewMode=story',
     dropinSessions_zeroAuthCard_fail:
         '/iframe.html?globals=&args=amount:0;sessionData.recurringProcessingModel:CardOnFile;sessionData.storePaymentMethodMode:askForConsent;sessionData.enableOneClick:!true&id=dropin-default--auto&viewMode=story',
+    dropinWithSession_BCMC_noStoredPms: '/iframe.html?args=countryCode:BE&globals=&id=dropin-default--auto&viewMode=story',
 
     /**
      * Card

packages/e2e-playwright/models/bcmc.ts

@@ -1,4 +1,8 @@
 import { Card } from './card';
+import LANG from '../../server/translations/en-US.json';
+
+const CVC_IFRAME_TITLE = LANG['creditCard.encryptedSecurityCode.aria.iframeTitle'];
+const CVC_IFRAME_LABEL = LANG['creditCard.securityCode.label'];
 
 class BCMC extends Card {
     get brands() {
@@ -24,6 +28,18 @@ class BCMC extends Card {
     ) {
         await this.cardNumberField.getByAltText(text, options).click();
     }
+
+    /**
+     * When in the context of the Dropin, if storedPMs are not hidden - the cvcInput locator will find 2 CVC inputs
+     * - the hidden, storedPM, one, and the one in the BCMC comp
+     */
+    get getCVCInputInDropin() {
+        const rootEl = this.rootElement.locator('.adyen-checkout__payment-method--bcmc');
+        const cvcIframe = rootEl.frameLocator(`[title="${CVC_IFRAME_TITLE}"]`);
+        return cvcIframe.locator(`input[aria-label="${CVC_IFRAME_LABEL}"]`);
+    }
 }
 
 export { BCMC };
+
+// adyen-checkout__payment-method--bcmc

packages/e2e-playwright/tests/ui/dropin/bcmc/bancontact.dropin.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect } from './dropinWithBcmc.fixture';
+import { URL_MAP } from '../../../../fixtures/URL_MAP';
+
+test.describe('Bcmc in dropin', () => {
+    test('UI looks as expected with no user interaction', async ({ dropinWithBcmc, bcmc }) => {
+        const expectedAltAttributes = ['Bancontact card', 'MasterCard', 'VISA', 'Maestro'];
+
+        await dropinWithBcmc.goto(URL_MAP.dropinWithSession_BCMC_noStoredPms);
+
+        // Check shown card brands in Dropin
+        expect(await dropinWithBcmc.visibleCardBrands).toHaveLength(4);
+
+        // Check list of brands
+        const visibleBrands = await dropinWithBcmc.visibleCardBrands;
+
+        visibleBrands.forEach((img, index) => {
+            expect(img).toHaveAttribute('alt', expectedAltAttributes[index]);
+        });
+
+        await dropinWithBcmc.selectPaymentMethod('bcmc');
+
+        await bcmc.isComponentVisible();
+
+        await bcmc.waitForVisibleBrands(1);
+
+        const [firstBrand, secondBrand] = await bcmc.brands;
+
+        // Only a single brand in the PAN input
+        expect(firstBrand).toHaveAttribute('alt', /bancontact/i);
+
+        // Hidden Cvc
+        await bcmc.getCVCInputInDropin.waitFor({ state: 'hidden' });
+    });
+});

packages/e2e-playwright/tests/ui/dropin/bcmc/dropinWithBcmc.fixture.ts

@@ -0,0 +1,28 @@
+import { test as base, mergeTests, expect } from '@playwright/test';
+import { DropinWithSession } from '../../../../models/dropinWithSession';
+import { test as card } from '../../../../fixtures/card.fixture';
+
+class DropinWithBcmc extends DropinWithSession {
+    get bcmc() {
+        return super.getPaymentMethodLabelByType('bcmc');
+    }
+
+    get visibleCardBrands() {
+        return this.bcmc.locator('.adyen-checkout__payment-method__brands').getByRole('img').all();
+    }
+}
+
+type Fixture = {
+    dropinWithBcmc: DropinWithBcmc;
+};
+
+const dropin = base.extend<Fixture>({
+    dropinWithBcmc: async ({ page }, use) => {
+        const dropin = new DropinWithBcmc(page);
+        await use(dropin);
+    }
+});
+
+const test = mergeTests(card, dropin);
+
+export { test, expect };