Skip to content

Commit

Permalink
refactor: enable test
Browse files Browse the repository at this point in the history
  • Loading branch information
@longyulongyu
longyulongyu committed Nov 7, 2024
1 parent 4636f72 commit bc95e7d
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 88 deletions.
10 changes: 9 additions & 1 deletion packages/e2e-playwright/models/address.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ class Address {
readonly rootElement: Locator;
readonly rootElementSelector: string;

constructor(page: Page, rootElementSelector: string = '.adyen-checkout__fieldset--billingAddress') {
constructor(
public readonly page: Page,
rootElementSelector: string = '.adyen-checkout__fieldset--billingAddress'
) {
this.rootElement = page.locator(rootElementSelector);
this.rootElementSelector = rootElementSelector;
}
Expand Down Expand Up @@ -36,6 +39,11 @@ class Address {
async fillInPostCode(postCode: string) {
await this.postalCodeInput.fill(postCode);
}

async selectCountry(options: { name?: RegExp | string }) {
await this.countrySelector.click();
await this.rootElement.getByRole('option', options).click();
}
}

export { Address };
233 changes: 146 additions & 87 deletions packages/e2e-playwright/tests/a11y/card/errorPanel.avs.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { mergeTests, expect } from '@playwright/test';
import { test as cardWithAvs } from '../../../fixtures/card.fixture';
import { test as srPanel } from '../../../fixtures/srPanel.fixture';
import { REGULAR_TEST_CARD, TEST_CVC_VALUE, TEST_DATE_VALUE } from '../../utils/constants';

const test = mergeTests(cardWithAvs, srPanel);
// Card with AVS, show srPanel, no prefilled data
Expand All @@ -16,101 +17,159 @@ test('#1 avsCard error fields and inputs should have correct aria attributes', a
await expect(cardWithAvs.billingAddress.streetInputError).not.toHaveAttribute('aria-describedby', /^adyen-checkout-street.*ariaError$/);
});

test('#2 Click pay with empty fields and error panel in avsCard is populated', async () => {
// error panel exists at startup
// Wait for field to appear in DOM
// click pay, to validate & generate errors
// Expect 8 elements in the sr panel, with default order & text
// expect(cardPage.errorPanelEls.nth(0).withExactText(CARD_NUMBER_EMPTY).exists)
// expect(cardPage.errorPanelEls.nth(1).withExactText(EXPIRY_DATE_EMPTY).exists)
// expect(cardPage.errorPanelEls.nth(2).withExactText(CVC_EMPTY).exists)
// expect(cardPage.errorPanelEls.nth(3).withExactText(`Enter the Country/Region${SR_INDICATOR_PREFIX}`).exists)
// expect(cardPage.errorPanelEls.nth(4).withExactText(`Enter the Street${SR_INDICATOR_PREFIX}`).exists)
// expect(cardPage.errorPanelEls.nth(5).withExactText(`Enter the House number${SR_INDICATOR_PREFIX}`).exists)
// expect(cardPage.errorPanelEls.nth(6).withExactText(`Enter the Postal code${SR_INDICATOR_PREFIX}`).exists)
// expect(cardPage.errorPanelEls.nth(7).withExactText(`Enter the City${SR_INDICATOR_PREFIX}`).exists)
// no 9th element?
// Expect focus to be place on Card number field - since SRConfig for this card comp says we should move focus
test('#2 Click pay with empty fields and error panel in avsCard is populated', async ({ page, cardWithAvs, srPanel }) => {
const expectedSRPanelTexts = [
'Enter the card number-sr',
'Enter the expiry date-sr',
'Enter the security code-sr',
'Enter the Country/Region-sr',
'Enter the Street-sr',
'Enter the House number-sr',
'Enter the Postal code-sr',
'Enter the City-sr'
];
await cardWithAvs.goto(url);
await cardWithAvs.pay();
// Wait for all sr panel messages
await page.waitForFunction(
expectedLength => [...document.querySelectorAll('.adyen-checkout-sr-panel__msg')].map(el => el.textContent).length === expectedLength,
expectedSRPanelTexts.length
);
// check individual messages
const srErrorMessages = await srPanel.allMessages;
srErrorMessages.forEach((retrievedText, index) => {
expect(retrievedText).toHaveText(expectedSRPanelTexts[index]);
});
});

test('#3 fill out credit card fields & see that first error in error panel is country related', async () => {
// Wait for field to appear in DOM
//await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
//await cardPage.cardUtils.fillDateAndCVC(t);
// click pay, to validate & generate errors
// Expect 5 elements, with default order & text
//expect(cardPage.errorPanelEls.nth(0).withExactText(`Enter the Country/Region${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(1).withExactText(`Enter the Street${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(2).withExactText(`Enter the House number${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(3).withExactText(`Enter the Postal code${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(4).withExactText(`Enter the City${SR_INDICATOR_PREFIX}`).exists)
// no 6th element
// Expect focus to be place on country field
// - focus is move to this field but it seems to be a browser imposed styling rather than a class we add, so it is not possible to test for it
// await t.expect(cardPage.countrySelectBtnActive.exists).ok();
test('#3 fill out credit card fields & see that first error in error panel is country related', async ({ page, cardWithAvs, srPanel }) => {
const expectedSRPanelTexts = [
'Enter the Country/Region-sr',
'Enter the Street-sr',
'Enter the House number-sr',
'Enter the Postal code-sr',
'Enter the City-sr'
];
await cardWithAvs.goto(url);
await cardWithAvs.fillCardNumber(REGULAR_TEST_CARD);
await cardWithAvs.fillExpiryDate(TEST_DATE_VALUE);
await cardWithAvs.fillCvc(TEST_CVC_VALUE);

await cardWithAvs.pay();
// Wait for all sr panel messages
await page.waitForFunction(
expectedLength => [...document.querySelectorAll('.adyen-checkout-sr-panel__msg')].map(el => el.textContent).length === expectedLength,
expectedSRPanelTexts.length
);
// check individual messages
const srErrorMessages = await srPanel.allMessages;
srErrorMessages.forEach((retrievedText, index) => {
expect(retrievedText).toHaveText(expectedSRPanelTexts[index]);
});
});

test('#4 Switch country to US, click pay with empty fields and error panel in avsCard is populated US style', async () => {
// Wait for field to appear in DOM
// Opens dropdown
// Click US
// click pay, to validate & generate errors
// Expect 7 elements, with order & text specific to the US
//expect(cardPage.errorPanelEls.nth(0).withExactText(CARD_NUMBER_EMPTY).exists)
//expect(cardPage.errorPanelEls.nth(1).withExactText(EXPIRY_DATE_EMPTY).exists)
//expect(cardPage.errorPanelEls.nth(2).withExactText(CVC_EMPTY).exists)
//expect(cardPage.errorPanelEls.nth(3).withExactText(`Enter the Address${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(4).withExactText(`Enter the City${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(5).withExactText(`Enter the State${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(6).withExactText(`Enter the Zip code${SR_INDICATOR_PREFIX}`).exists)
// no 8th element
test('#4 Switch country to US, click pay with empty fields and error panel in avsCard is populated US style', async ({
page,
cardWithAvs,
srPanel
}) => {
const expectedSRPanelTexts = [
'Enter the card number-sr',
'Enter the expiry date-sr',
'Enter the security code-sr',
'Enter the Address-sr',
'Enter the City-sr',
'Enter the State-sr',
'Enter the Zip code-sr'
];

await cardWithAvs.goto(url);
await cardWithAvs.billingAddress.selectCountry({ name: 'United States' });
await cardWithAvs.pay();
// Wait for all sr panel messages
await page.waitForFunction(
expectedLength => [...document.querySelectorAll('.adyen-checkout-sr-panel__msg')].map(el => el.textContent).length === expectedLength,
expectedSRPanelTexts.length
);
const srErrorMessages = await srPanel.allMessages;
srErrorMessages.forEach((retrievedText, index) => {
expect(retrievedText).toHaveText(expectedSRPanelTexts[index]);
});
});

test('#5 Switch country to US, fill out credit card fields & see that first error in error panel is address related', async () => {
// Wait for field to appear in DOM
// Opens dropdown
// Click US
//await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
//await cardPage.cardUtils.fillDateAndCVC(t);
// click pay, to validate & generate errors
// Expect 4 elements, with order & text specific to the US
//expect(cardPage.errorPanelEls.nth(0).withExactText(`Enter the Address${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(1).withExactText(`Enter the City${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(2).withExactText(`Enter the State${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(3).withExactText(`Enter the Zip code${SR_INDICATOR_PREFIX}`).exists)
// no 5th element
// Expect focus to be place on Address field
test('#5 Switch country to US, fill out credit card fields & see that first error in error panel is address related', async ({
page,
cardWithAvs,
srPanel
}) => {
const expectedSRPanelTexts = ['Enter the Address-sr', 'Enter the City-sr', 'Enter the State-sr', 'Enter the Zip code-sr'];

await cardWithAvs.goto(url);
await cardWithAvs.fillCardNumber(REGULAR_TEST_CARD);
await cardWithAvs.fillExpiryDate(TEST_DATE_VALUE);
await cardWithAvs.fillCvc(TEST_CVC_VALUE);
await cardWithAvs.billingAddress.selectCountry({ name: 'United States' });
await cardWithAvs.pay();
// Wait for all sr panel messages
await page.waitForFunction(
expectedLength => [...document.querySelectorAll('.adyen-checkout-sr-panel__msg')].map(el => el.textContent).length === expectedLength,
expectedSRPanelTexts.length
);
const srErrorMessages = await srPanel.allMessages;
srErrorMessages.forEach((retrievedText, index) => {
expect(retrievedText).toHaveText(expectedSRPanelTexts[index]);
});
});

test('#6 Switch country to UK, click pay with empty fields and error panel in avsCard is populated UK style', async () => {
// Wait for field to appear in DOM
// Opens country dropdown
// Click UK
// click pay, to validate & generate errors
// Expect 7 elements, with order & text specific to the UK
//expect(cardPage.errorPanelEls.nth(0).withExactText(CARD_NUMBER_EMPTY).exists)
//expect(cardPage.errorPanelEls.nth(1).withExactText(EXPIRY_DATE_EMPTY).exists)
//expect(cardPage.errorPanelEls.nth(2).withExactText(CVC_EMPTY).exists)
//expect(cardPage.errorPanelEls.nth(3).withExactText(`Enter the House number${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(4).withExactText(`Enter the Street${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(5).withExactText(`Enter the City / Town${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(6).withExactText(`Enter the Postal code${SR_INDICATOR_PREFIX}`).exists)
// no 8th element
// Expect focus to be place on Card number field
test('#6 Switch country to UK, click pay with empty fields and error panel in avsCard is populated UK style', async ({
page,
cardWithAvs,
srPanel
}) => {
const expectedSRPanelTexts = [
'Enter the card number-sr',
'Enter the expiry date-sr',
'Enter the security code-sr',
'Enter the House number-sr',
'Enter the Street-sr',
'Enter the City / Town-sr',
'Enter the Postal code-sr'
];

await cardWithAvs.goto(url);
await cardWithAvs.billingAddress.selectCountry({ name: 'United Kingdom' });
await cardWithAvs.pay();
// Wait for all sr panel messages
await page.waitForFunction(
expectedLength => [...document.querySelectorAll('.adyen-checkout-sr-panel__msg')].map(el => el.textContent).length === expectedLength,
expectedSRPanelTexts.length
);
const srErrorMessages = await srPanel.allMessages;
srErrorMessages.forEach((retrievedText, index) => {
expect(retrievedText).toHaveText(expectedSRPanelTexts[index]);
});
});

test('#7 Switch country to UK, fill out credit card fields & see that first error in error panel is address related', async () => {
// Wait for field to appear in DOM
// Opens dropdown
// Click UK
//await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
//await cardPage.cardUtils.fillDateAndCVC(t);
// click pay, to validate & generate errors
// Expect 4 elements, with order & text specific to the US
//expect(cardPage.errorPanelEls.nth(0).withExactText(`Enter the House number${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(1).withExactText(`Enter the Street${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(2).withExactText(`Enter the City / Town${SR_INDICATOR_PREFIX}`).exists)
//expect(cardPage.errorPanelEls.nth(3).withExactText(`Enter the Postal code${SR_INDICATOR_PREFIX}`).exists)
// no 5th element
// Expect focus to be place on House number field
test('#7 Switch country to UK, fill out credit card fields & see that first error in error panel is address related', async ({
page,
cardWithAvs,
srPanel
}) => {
const expectedSRPanelTexts = ['Enter the House number-sr', 'Enter the Street-sr', 'Enter the City / Town-sr', 'Enter the Postal code-sr'];

await cardWithAvs.goto(url);
await cardWithAvs.fillCardNumber(REGULAR_TEST_CARD);
await cardWithAvs.fillExpiryDate(TEST_DATE_VALUE);
await cardWithAvs.fillCvc(TEST_CVC_VALUE);
await cardWithAvs.billingAddress.selectCountry({ name: 'United Kingdom' });
await cardWithAvs.pay();
// Wait for all sr panel messages
await page.waitForFunction(
expectedLength => [...document.querySelectorAll('.adyen-checkout-sr-panel__msg')].map(el => el.textContent).length === expectedLength,
expectedSRPanelTexts.length
);
const srErrorMessages = await srPanel.allMessages;
srErrorMessages.forEach((retrievedText, index) => {
expect(retrievedText).toHaveText(expectedSRPanelTexts[index]);
});
});

0 comments on commit bc95e7d

Please sign in to comment.