Boleto tests

packages/e2e-playwright/fixtures/URL_MAP.ts

@@ -25,5 +25,10 @@ export const URL_MAP = {
     riverty: '/iframe.html?globals=&args=&id=components-riverty--default&viewMode=story',
     rivertyWithVisibleSrPanel: '/iframe.html?args=srConfig.showPanel:!true&globals=&id=components-riverty--default&viewMode=story',
     /* Redirect */
-    ideal: '/iframe.html?globals=&id=components-ideal--default&viewMode=story'
+    ideal: '/iframe.html?globals=&id=components-ideal--default&viewMode=story',
+
+    /**
+     * Vouchers
+     */
+    boleto: '/iframe.html?globals=&id=vouchers-boleto--default&viewMode=story'
 };

packages/e2e-playwright/models/address.ts

@@ -4,10 +4,7 @@ class Address {
     readonly rootElement: Locator;
     readonly rootElementSelector: string;
 
-    constructor(
-        public readonly 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;
     }
@@ -36,10 +33,19 @@ class Address {
         return this.rootElement.getByRole('textbox', { exact: false, name: /code/i }); // US uses 'Zip Code', the rest uses 'Postal Code';
     }
 
+    get stateInput() {
+        return this.rootElement.getByRole('combobox', { name: /state/i });
+    }
+
     async fillInPostCode(postCode: string) {
         await this.postalCodeInput.fill(postCode);
     }
 
+    async selectState(options: { name?: RegExp | string }) {
+        await this.stateInput.click();
+        await this.rootElement.getByRole('option', options).click();
+    }
+
     async selectCountry(options: { name?: RegExp | string }) {
         await this.countrySelector.click();
         await this.rootElement.getByRole('option', options).click();

packages/e2e-playwright/models/boleto.ts

@@ -0,0 +1,21 @@
+import { Base } from './base';
+import { Address } from './address';
+import { Page } from '@playwright/test';
+import { PersonalDetails } from './personal-details';
+
+class Boleto extends Base {
+    readonly billingAddress: Address;
+    readonly personalDetails: PersonalDetails;
+
+    constructor(page: Page) {
+        super(page);
+        this.personalDetails = new PersonalDetails(page, { socialSecurityLabel: 'CPF/CNPJ' });
+        this.billingAddress = new Address(page);
+    }
+
+    get barcodeLocator() {
+        return this.page.locator('.adyen-checkout__voucher-result__code > img');
+    }
+}
+
+export default Boleto;

packages/e2e-playwright/models/personal-details.ts

@@ -0,0 +1,35 @@
+import { Locator, Page } from '@playwright/test';
+
+class PersonalDetails {
+    readonly rootElement: Locator;
+    readonly rootElementSelector: string;
+
+    // Social security label varies per country
+    private readonly socialSecurityLabel: string;
+
+    constructor(
+        public readonly page: Page,
+        options?: {
+            rootElementSelector?: string;
+            socialSecurityLabel?: string;
+        }
+    ) {
+        this.rootElementSelector = options.rootElementSelector || '.adyen-checkout__fieldset--personalDetails';
+        this.rootElement = page.locator(this.rootElementSelector);
+        this.socialSecurityLabel = options?.socialSecurityLabel || 'Social security number';
+    }
+
+    get firstNameInput() {
+        return this.rootElement.getByRole('textbox', { name: /first name/i });
+    }
+
+    get lastNameInput() {
+        return this.rootElement.getByRole('textbox', { name: /last name/i });
+    }
+
+    get socialSecurityNumberInput() {
+        return this.rootElement.getByRole('textbox', { name: this.socialSecurityLabel });
+    }
+}
+
+export { PersonalDetails };

packages/e2e-playwright/tests/e2e/vouchers/boleto/boleto.spec.ts

@@ -1,75 +1,31 @@
-import { test } from '@playwright/test';
+import { test as base, expect } from '@playwright/test';
+import Boleto from '../../../../models/boleto';
+import { URL_MAP } from '../../../../fixtures/URL_MAP';
 
-const getComponentData = () => {
-    return globalThis.boletoInput.data;
+type Fixture = {
+    boleto: Boleto;
 };
 
-const mockData = {
-    shopperName: {
-        firstName: 'Tom',
-        lastName: 'Jobim'
-    },
-    socialSecurityNumber: '32553325916',
-    billingAddress: {
-        country: 'BR',
-        street: 'Fake street',
-        houseNumberOrName: '123',
-        city: 'Sao Paulo',
-        postalCode: '11111555',
-        stateOrProvince: 'SP'
-    },
-    shopperEmail: '[email protected]'
-};
+const test = base.extend<Fixture>({
+    boleto: async ({ page }, use) => {
+        const boleto = new Boleto(page);
+        await boleto.goto(URL_MAP.boleto);
+        await use(boleto);
+    }
+});
 
-async function fillBoleto(t) {
-    // await t
-    //   .typeText('.boleto-input .adyen-checkout__field--firstName .adyen-checkout__input', mockData.shopperName.firstName)
-    //   .typeText('.boleto-input .adyen-checkout__field--lastName .adyen-checkout__input', mockData.shopperName.lastName)
-    //   .typeText('.boleto-input .adyen-checkout__field--socialSecurityNumber .adyen-checkout__input', mockData.socialSecurityNumber)
-    //   .typeText('.boleto-input .adyen-checkout__input--street', mockData.billingAddress.street)
-    //   .typeText('.boleto-input .adyen-checkout__input--houseNumberOrName', mockData.billingAddress.houseNumberOrName)
-    //   .typeText('.boleto-input .adyen-checkout__input--city', mockData.billingAddress.city)
-    //   .typeText('.boleto-input .adyen-checkout__input--postalCode', mockData.billingAddress.postalCode)
-    //   .click(Selector('.boleto-input .adyen-checkout__field--stateOrProvince .adyen-checkout__dropdown__button'))
-    //   .click(Selector('.boleto-input [data-value=SP]'));
-}
+test('should make a Boleto payment', async ({ boleto, page }) => {
+    await boleto.personalDetails.firstNameInput.fill('Jose');
+    await boleto.personalDetails.lastNameInput.fill('Fernandez');
+    await boleto.personalDetails.socialSecurityNumberInput.fill('56861752509');
 
-test('should make a Boleto payment', async () => {
-    // await fillBoleto(t);
-    // const stateData = await getComponentData();
-    //
-    // await t
-    //   .expect(stateData.paymentMethod.type)
-    //   .eql('boletobancario')
-    //   .expect(stateData.shopperName)
-    //   .eql(mockData.shopperName)
-    //   .expect(stateData.socialSecurityNumber)
-    //   .eql(mockData.socialSecurityNumber)
-    //   .expect(stateData.billingAddress)
-    //   .eql(mockData.billingAddress)
-    //   .expect(getIsValid('boletoInput'))
-    //   .eql(true);
-});
+    await boleto.billingAddress.streetInput.fill('Main St');
+    await boleto.billingAddress.houseNumberInput.fill('1');
+    await boleto.billingAddress.postalCodeInput.fill('13010111');
+    await boleto.billingAddress.cityInput.fill('Capital');
+    await boleto.billingAddress.selectState({ name: 'São Paulo' });
 
-test('should not submit a Boleto payment if the form in not valid', async () => {});
+    await boleto.pay({ name: 'Generate Boleto' });
 
-test('should allow shoppers to send a copy to their email and make a Boleto payment', async () => {
-    // await fillBoleto(t);
-    // await t.expect(getIsValid('boletoInput')).eql(true);
-    //
-    // await t.click(Selector('.boleto-input .adyen-checkout__field--sendCopyToEmail .adyen-checkout__checkbox'));
-    // await t.expect(getIsValid('boletoInput')).eql(false);
-    //
-    // await t.typeText('.boleto-input .adyen-checkout__input--email', mockData.shopperEmail);
-    // await t.expect(getIsValid('boletoInput')).eql(true);
-    //
-    // const stateData = await getComponentData();
-    //
-    // await t
-    //   .expect(stateData.paymentMethod.type)
-    //   .eql('boletobancario')
-    //   .expect(stateData.shopperEmail)
-    //   .eql(mockData.shopperEmail)
-    //   .expect(getIsValid('boletoInput'))
-    //   .eql(true);
+    await expect(boleto.barcodeLocator).toBeVisible();
 });

packages/lib/config/jest.config.cjs

@@ -1,5 +1,5 @@
 module.exports = {
-    testEnvironment: 'jsdom',
+    testEnvironment: 'jest-fixed-jsdom',
     verbose: true,
     rootDir: '../',
     setupFilesAfterEnv: ['<rootDir>/config/setupTests.ts'],
@@ -10,10 +10,6 @@ module.exports = {
     moduleNameMapper: {
         '\\.scss$': '<rootDir>/config/testMocks/styleMock.js'
     },
-    collectCoverageFrom: [
-        'src/**/*.{ts,tsx}',
-        '!src/**/types.ts',
-        '!src/language/locales/**'
-    ],
+    collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/types.ts', '!src/language/locales/**'],
     coveragePathIgnorePatterns: ['node_modules/', 'config/', 'scripts/', 'storybook/', '.storybook/', 'auto/', '_']
 };

packages/lib/package.json

@@ -119,8 +119,10 @@
     "husky": "9.1.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "jest-fixed-jsdom": "^0.0.9",
     "jest-mock-extended": "3.0.7",
     "lint-staged": "15.2.7",
+    "msw": "^2.6.4",
     "postcss": "8.4.39",
     "rollup": "4.22.4",
     "rollup-plugin-dts": "6.1.1",
@@ -137,8 +139,8 @@
     "typescript": "5.5.3",
     "typescript-eslint": "7.16.1",
     "vite": "5.3.6",
-    "vite-plugin-stylelint": "5.3.1",
     "vite-plugin-static-copy": "1.0.6",
+    "vite-plugin-stylelint": "5.3.1",
     "whatwg-fetch": "3.6.20"
   },
   "dependencies": {