Skip to content

Commit

Permalink
Migrating bcmc e2e tests (#3033)
Browse files Browse the repository at this point in the history 
* Migrating bcmc e2e tests

* Added test checking BCMC's UI when in the Dropin

* Deleted redundant file: bancontact.visa.a11y.spec.ts
  • Loading branch information
@sponglord
sponglord authored Dec 20, 2024
1 parent 7b5832c commit a650b9e
Show file tree
Hide file tree
Showing 11 changed files with 299 additions and 396 deletions.
1 change: 1 addition & 0 deletions packages/e2e-playwright/fixtures/URL_MAP.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
16 changes: 16 additions & 0 deletions packages/e2e-playwright/models/bcmc.ts
View file
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -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
2 changes: 1 addition & 1 deletion packages/e2e-playwright/tests/a11y/bcmc/bancontact.visa.a11y.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ test(
);

test(
'#5 Enter card number, that we mock to co-branded bcmc/visa ' +
'#5 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 enter CVC and expect comp to be valid',
Expand Down
94 changes: 76 additions & 18 deletions packages/e2e-playwright/tests/e2e/card/bcmc/dualBranding.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ import { URL_MAP } from '../../../../fixtures/URL_MAP';
test.describe('Bcmc payments with dual branding', () => {
test.describe('Bancontact (BCMC) / Maestro brands', () => {
test.describe('Selecting the Bancontact brand', () => {
test('should submit the bcmc payment', async ({ bcmc }) => {
test('#1a should submit the bcmc payment', async ({ bcmc, page }) => {
const paymentsRequestPromise = page.waitForRequest(request => request.url().includes('/payments') && request.method() === 'POST');

await bcmc.goto(URL_MAP.bcmc);

await bcmc.isComponentVisible();
Expand All @@ -28,12 +30,18 @@ test.describe('Bcmc payments with dual branding', () => {

await bcmc.selectBrand('Bancontact card');
await bcmc.pay();

// check brand has been set in paymentMethod data
const request = await paymentsRequestPromise;
const paymentMethod = await request.postDataJSON().paymentMethod;
expect(paymentMethod.brand).toEqual('bcmc');

await bcmc.threeDs2Challenge.fillInPassword(THREEDS2_CHALLENGE_PASSWORD);
await bcmc.threeDs2Challenge.submit();
await expect(bcmc.paymentResult).toContainText(PAYMENT_RESULT.authorised);
});

test('should not submit the bcmc payment with incomplete form data', async ({ bcmc }) => {
test('#1b should not submit the bcmc payment with incomplete form data', async ({ bcmc }) => {
await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();
await bcmc.fillCardNumber(BCMC_CARD);
Expand All @@ -44,7 +52,7 @@ test.describe('Bcmc payments with dual branding', () => {
await expect(bcmc.expiryDateErrorElement).toHaveText('Enter the expiry date');
});

test('should not submit the bcmc payment with invalid bcmc card number', async ({ bcmc }) => {
test('#1c should not submit the bcmc payment with invalid bcmc card number', async ({ bcmc }) => {
await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();
await bcmc.fillCardNumber(`${BCMC_CARD}111`);
Expand All @@ -55,7 +63,9 @@ test.describe('Bcmc payments with dual branding', () => {
});

test.describe('Selecting the maestro brand', () => {
test('should submit the maestro payment', async ({ bcmc }) => {
test('#2a should submit the maestro payment', async ({ bcmc, page }) => {
const paymentsRequestPromise = page.waitForRequest(request => request.url().includes('/payments') && request.method() === 'POST');

await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();

Expand All @@ -70,10 +80,14 @@ test.describe('Bcmc payments with dual branding', () => {
await bcmc.selectBrand('Maestro');
await bcmc.pay();

const request = await paymentsRequestPromise;
const paymentMethod = await request.postDataJSON().paymentMethod;
expect(paymentMethod.brand).toEqual('maestro');

await expect(bcmc.paymentResult).toContainText(PAYMENT_RESULT.authorised);
});

test('should not submit the maestro payment with incomplete form data', async ({ bcmc }) => {
test('#2b should not submit the maestro payment with incomplete form data', async ({ bcmc }) => {
await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();
await bcmc.fillCardNumber(BCMC_CARD);
Expand All @@ -84,7 +98,7 @@ test.describe('Bcmc payments with dual branding', () => {
await expect(bcmc.expiryDateErrorElement).toHaveText('Enter the expiry date');
});

test('should not submit the maestro payment with invalid maestro card number', async ({ bcmc }) => {
test('#2c should not submit the maestro payment with invalid maestro card number', async ({ bcmc }) => {
await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();
await bcmc.fillCardNumber(`${BCMC_CARD}111`);
Expand All @@ -97,7 +111,7 @@ test.describe('Bcmc payments with dual branding', () => {

test.describe('Bancontact (BCMC) / Visa Debit brands', () => {
test.describe('Selecting the Bancontact brand', () => {
test('should submit the bcmc payment', async ({ bcmc }) => {
test('#3a should submit the bcmc payment (without needing to fill CVC field)', async ({ bcmc }) => {
await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();

Expand All @@ -116,7 +130,7 @@ test.describe('Bcmc payments with dual branding', () => {
await expect(bcmc.paymentResult).toContainText(PAYMENT_RESULT.authorised);
});

test('should not submit the bcmc payment with incomplete form data', async ({ bcmc }) => {
test('#3b should not submit the bcmc payment with incomplete form data', async ({ bcmc }) => {
await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();
await bcmc.fillCardNumber(BCMC_DUAL_BRANDED_VISA);
Expand All @@ -127,7 +141,7 @@ test.describe('Bcmc payments with dual branding', () => {
await expect(bcmc.expiryDateErrorElement).toHaveText('Enter the expiry date');
});

test('should not submit the bcmc payment with invalid bcmc card number', async ({ bcmc }) => {
test('#3c should not submit the bcmc payment with invalid bcmc card number', async ({ bcmc }) => {
await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();
await bcmc.fillCardNumber(`${BCMC_DUAL_BRANDED_VISA}111`);
Expand All @@ -138,7 +152,9 @@ test.describe('Bcmc payments with dual branding', () => {
});

test.describe('Selecting the visa brand', () => {
test('should submit the visa payment', async ({ bcmc }) => {
test('#4a should submit the visa payment', async ({ bcmc, page }) => {
const paymentsRequestPromise = page.waitForRequest(request => request.url().includes('/payments') && request.method() === 'POST');

await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();

Expand All @@ -154,12 +170,16 @@ test.describe('Bcmc payments with dual branding', () => {
await bcmc.fillCvc(TEST_CVC_VALUE);
await bcmc.pay();

const request = await paymentsRequestPromise;
const paymentMethod = await request.postDataJSON().paymentMethod;
expect(paymentMethod.brand).toEqual('visa');

await bcmc.threeDs2Challenge.fillInPassword(THREEDS2_CHALLENGE_PASSWORD);
await bcmc.threeDs2Challenge.submit();
await expect(bcmc.paymentResult).toContainText(PAYMENT_RESULT.authorised);
});

test('should not submit the visa payment with incomplete form data', async ({ bcmc }) => {
test('#4b should not submit the visa payment with incomplete form data', async ({ bcmc }) => {
await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();

Expand All @@ -173,7 +193,7 @@ test.describe('Bcmc payments with dual branding', () => {
await expect(bcmc.cvcErrorElement).toHaveText('Enter the security code');
});

test('should not submit the visa payment with invalid visa card number', async ({ bcmc }) => {
test('#4c should not submit the visa payment with invalid visa card number', async ({ bcmc }) => {
await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();
await bcmc.fillCardNumber(`${BCMC_DUAL_BRANDED_VISA}111`);
Expand All @@ -186,7 +206,7 @@ test.describe('Bcmc payments with dual branding', () => {

test.describe('Bancontact (BCMC) / MC brands', () => {
test.describe('Selecting the Bancontact brand', () => {
test('should submit the bcmc payment', async ({ bcmc }) => {
test('#5a should submit the bcmc payment', async ({ bcmc }) => {
await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();

Expand All @@ -204,7 +224,7 @@ test.describe('Bcmc payments with dual branding', () => {
await expect(bcmc.paymentResult).toContainText(PAYMENT_RESULT.authorised);
});

test('should not submit the bcmc payment with incomplete form data', async ({ bcmc }) => {
test('#5b should not submit the bcmc payment with incomplete form data', async ({ bcmc }) => {
await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();
await bcmc.fillCardNumber(BCMC_DUAL_BRANDED_MC);
Expand All @@ -215,7 +235,7 @@ test.describe('Bcmc payments with dual branding', () => {
await expect(bcmc.expiryDateErrorElement).toHaveText('Enter the expiry date');
});

test('should not submit the bcmc payment with invalid bcmc card number', async ({ bcmc }) => {
test('#5c should not submit the bcmc payment with invalid bcmc card number', async ({ bcmc }) => {
await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();
await bcmc.fillCardNumber(`${BCMC_DUAL_BRANDED_MC}111`);
Expand All @@ -226,7 +246,9 @@ test.describe('Bcmc payments with dual branding', () => {
});

test.describe('Selecting the mc brand', () => {
test('should submit the mc payment', async ({ bcmc }) => {
test('#6a should submit the mc payment', async ({ bcmc, page }) => {
const paymentsRequestPromise = page.waitForRequest(request => request.url().includes('/payments') && request.method() === 'POST');

await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();

Expand All @@ -242,10 +264,14 @@ test.describe('Bcmc payments with dual branding', () => {
await bcmc.fillCvc(TEST_CVC_VALUE);
await bcmc.pay();

const request = await paymentsRequestPromise;
const paymentMethod = await request.postDataJSON().paymentMethod;
expect(paymentMethod.brand).toEqual('mc');

await expect(bcmc.paymentResult).toContainText(PAYMENT_RESULT.authorised);
});

test('should not submit the mc payment with incomplete form data', async ({ bcmc }) => {
test('#6b should not submit the mc payment with incomplete form data', async ({ bcmc }) => {
await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();

Expand All @@ -259,7 +285,7 @@ test.describe('Bcmc payments with dual branding', () => {
await expect(bcmc.cvcErrorElement).toHaveText('Enter the security code');
});

test('should not submit the mc payment with invalid mc card number', async ({ bcmc }) => {
test('#6c should not submit the mc payment with invalid mc card number', async ({ bcmc }) => {
await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();
await bcmc.fillCardNumber(`${BCMC_DUAL_BRANDED_MC}111`);
Expand All @@ -269,4 +295,36 @@ test.describe('Bcmc payments with dual branding', () => {
});
});
});
test.describe('Selecting the mc brand', () => {
test.describe('Then deleting the PAN and retyping it without selecting a brand', () => {
test('#7 should submit a non-branded payment payment', async ({ bcmc, page }) => {
const paymentsRequestPromise = page.waitForRequest(request => request.url().includes('/payments') && request.method() === 'POST');

await bcmc.goto(URL_MAP.bcmc);
await bcmc.isComponentVisible();

await bcmc.fillCardNumber(BCMC_DUAL_BRANDED_MC);
await bcmc.fillExpiryDate(TEST_DATE_VALUE);
await bcmc.waitForVisibleBrands();

const [firstBrand, secondBrand] = await bcmc.brands;
expect(firstBrand).toHaveAttribute('data-value', 'bcmc');
expect(secondBrand).toHaveAttribute('data-value', 'mc');

await bcmc.selectBrand('MasterCard');
await bcmc.fillCvc(TEST_CVC_VALUE);

await bcmc.deleteCardNumber();
await bcmc.fillCardNumber(BCMC_DUAL_BRANDED_MC);

await bcmc.pay();

const request = await paymentsRequestPromise;
const paymentMethod = await request.postDataJSON().paymentMethod;
expect(paymentMethod.brand).toBeUndefined();

await expect(bcmc.paymentResult).toContainText(PAYMENT_RESULT.authorised);
});
});
});
});
Loading

0 comments on commit a650b9e

Please sign in to comment.