Updating Playwright to 1.39.0

packages/e2e-playwright/app/src/handlers.js

@@ -4,10 +4,10 @@ function removeComponent(component) {
     component.remove();
 }
 
-export function showAuthorised() {
+export function showAuthorised(message = 'Authorised') {
     const resultElement = document.getElementById('result-message');
     resultElement.classList.remove('hide');
-    resultElement.innerText = 'Authorised';
+    resultElement.innerText = message;
 }
 
 export function handleResponse(response, component) {

packages/e2e-playwright/app/src/pages/ANCV/ANCV.html

@@ -16,11 +16,12 @@ <h2>ANCV</h2>
                     </div>
                     <div class="merchant-checkout__payment-method__details">
                         <div class="ancv-field"></div>
-                        <button id="ancv-pay-button" type="button">Pay</button>
                     </div>
                 </div>
             </form>
+
             <div id='result-message' class="merchant-checkout__result hide"></div>
+
         </main>
 
         <script type="text/javascript">

packages/e2e-playwright/app/src/pages/ANCV/ANCV.js

@@ -1,7 +1,7 @@
 import AdyenCheckout from '@adyen/adyen-web';
 import '@adyen/adyen-web/dist/es/adyen.css';
-import { handleSubmit, handleAdditionalDetails, handleError, handleOrderRequest, showAuthorised } from '../../handlers';
-import { amount, shopperLocale, countryCode } from '../../services/commonConfig';
+import { handleError, showAuthorised } from '../../handlers';
+import { shopperLocale, countryCode } from '../../services/commonConfig';
 import '../../style.scss';
 import { createSession } from '../../services';
 
@@ -16,13 +16,8 @@ const initCheckout = async () => {
         returnUrl: 'http://localhost:3024/'
     });
 
-    // console.log('env env', process.env.__CLIENT_ENV__);
-    // console.log('env key', process.env.__CLIENT_KEY__);
     const checkout = await AdyenCheckout({
         environment: process.env.__CLIENT_ENV__,
-        // environmentUrls: {
-        //     api: process.env.__CLIENT_ENV__
-        // },
         analytics: {
             enabled: false
         },
@@ -31,32 +26,16 @@ const initCheckout = async () => {
         clientKey: process.env.__CLIENT_KEY__,
         locale: shopperLocale,
         countryCode,
-        showPayButton: false,
-        //onSubmit: handleSubmit,
-        //onOrderRequest: handleOrderRequest,
-        //onAdditionalDetails: handleAdditionalDetails,
-        onOrderCreated: data => {
-            console.log('=== onOrderCreated ===', data);
+        showPayButton: true,
 
-            window.paymentMethod = checkout.create('card').mount('.ancv-field');
-        },
-        onPaymentCompleted: () => {
-            showAuthorised();
+        onOrderCreated: data => {
+            console.log('hello');
+            showAuthorised('Partially Authorised');
         },
-        onError: handleError,
-        paymentMethodsConfiguration: {
-            ideal: {
-                highlightedIssuers: ['1121', '1154', '1153']
-            }
-        }
-        // ...window.mainConfiguration
+        onError: handleError
     });
 
     window.paymentMethod = checkout.create('ancv').mount('.ancv-field');
-
-    document.querySelector('#ancv-pay-button').addEventListener('click', () => {
-        window.paymentMethod.submit();
-    });
 };
 
 initCheckout();

packages/e2e-playwright/mocks/status/status.mock.ts

@@ -1,10 +1,32 @@
 import { Page } from '@playwright/test';
 
 const STATUS_URL = 'https://checkoutshopper-*.adyen.com/checkoutshopper/services/PaymentInitiation/v1/status?*';
+
+const numberOfPendingCalls = 3;
+
 const statusMock = async (page: Page, mockedResponse: any): Promise<void> => {
+    let numberOfCalls = 0;
+
     await page.route(STATUS_URL, (route, request) => {
-        const requestData = JSON.parse(request.postData() || '');
+        if (numberOfCalls < numberOfPendingCalls) {
+            numberOfCalls++;
+
+            route.fulfill({
+                status: 200,
+                contentType: 'application/json',
+                body: JSON.stringify({
+                    payload: 'encrypted-data',
+                    resultCode: 'pending',
+                    type: 'complete'
+                }),
+                headers: {
+                    'Access-Control-Allow-Origin': '*'
+                }
+            });
+            return;
+        }
 
+        const requestData = JSON.parse(request.postData() || '');
         route.fulfill({
             status: 200,
             contentType: 'application/json',

packages/e2e-playwright/models/ancv.ts

@@ -20,7 +20,7 @@ class ANCV {
         this.rootElementSelector = rootElementSelector;
 
         this.ancvInput = this.rootElement.getByRole('textbox');
-        this.submitButton = this.page.getByRole('button', { name: /Pay/i });
+        this.submitButton = this.page.getByRole('button', { name: /Confirm purchase/i });
 
         this.awaitText = this.rootElement.getByText('Use your ANCV application to confirm the payment.');
     }

packages/e2e-playwright/package.json

@@ -7,11 +7,12 @@
   "scripts": {
     "test:start-playground": "cross-env NODE_ENV=test webpack-dev-server --config app/config/webpack.config.js",
     "test:headless": "npx playwright test",
-    "test:headed": "npx playwright test --headed"
+    "test:headed": "npx playwright test --headed",
+    "test:ui-mode": "npx playwright test --ui"
   },
   "devDependencies": {
     "@adyen/adyen-web-server": "1.0.0",
-    "@playwright/test": "1.30.0",
+    "@playwright/test": "1.39.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.0.0",
     "dotenv": "^16.0.2",

packages/e2e-playwright/pages/ancv/ancv.fixture.ts

@@ -14,6 +14,7 @@ type Fixture = {
 const test = base.extend<Fixture>({
     ancvPage: async ({ page }, use) => {
         const ancvPage = new AncvPage(page);
+
         await sessionsMock(page, sessionsMockData);
         await setupMock(page, setupMockData);
         await ancvPage.goto();

packages/e2e-playwright/pages/ancv/ancv.page.ts

@@ -2,7 +2,7 @@ import { Page } from '@playwright/test';
 import { ANCV } from '../../models/ancv';
 
 class AncvPage {
-    private readonly page: Page;
+    public readonly page: Page;
 
     public readonly ancv: ANCV;
 

packages/e2e-playwright/tests/ancv/ancv.spec.ts

@@ -2,43 +2,27 @@ import { test, expect } from '../../pages/ancv/ancv.fixture';
 import { createOrderMock } from '../../mocks/createOrder/createOrder.mock';
 import { orderCreatedMockData } from '../../mocks/createOrder/createOrder.data';
 import { paymentsMock } from '../../mocks/payments/payments.mock';
-import { paymentsActionAncvMockData, paymentsSuccessCardMockData } from '../../mocks/payments/payments.data';
+import { paymentsActionAncvMockData } from '../../mocks/payments/payments.data';
 import { paymentDetailsMock } from '../../mocks/paymentDetails/paymentDetails.mock';
 import { paymentDetailsPartiallyAuthorisedAncvMockData } from '../../mocks/paymentDetails/paymentDetails.data';
 import { setupWithAncvOrderMockData } from '../../mocks/setup/setup.data';
 import { statusMockData } from '../../mocks/status/status.data';
 import { setupMock } from '../../mocks/setup/setup.mock';
 import { statusMock } from '../../mocks/status/status.mock';
 
-// test('should display the await component on successful payment', async ({ ancvPage }) => {
-//     const { ancv } = ancvPage;
-//
-//     await createOrderMock(ancv.page, orderCreatedMockData);
-//     await paymentsMock(ancv.page, paymentsActionAncvMockData);
-//
-//     await ancv.fillInID('ancv-id@example.com');
-//     await ancv.clickOnSubmit();
-//
-//     await expect(ancv.awaitText).toBeVisible();
-// });
+test.describe('ANCV - Sessions', () => {
+    test('should call onOrderCreated when payment is partially authorised (Sessions flow)', async ({ ancvPage }) => {
+        const { ancv, page } = ancvPage;
 
-test('should display card component after handling onOrderCreated', async ({ ancvPage }) => {
-    const { ancv } = ancvPage;
+        await createOrderMock(page, orderCreatedMockData);
+        await paymentsMock(page, paymentsActionAncvMockData);
+        await statusMock(page, statusMockData);
+        await paymentDetailsMock(page, paymentDetailsPartiallyAuthorisedAncvMockData);
+        await setupMock(page, setupWithAncvOrderMockData);
 
-    await createOrderMock(ancv.page, orderCreatedMockData);
-    await paymentsMock(ancv.page, paymentsActionAncvMockData);
+        await ancv.fillInID('ancv-id@example.com');
+        await ancv.clickOnSubmit();
 
-    await ancv.fillInID('ancv-id@example.com');
-    await ancv.clickOnSubmit();
-
-    await paymentDetailsMock(ancv.page, paymentDetailsPartiallyAuthorisedAncvMockData);
-    await setupMock(ancv.page, setupWithAncvOrderMockData);
-
-    await statusMock(ancv.page, statusMockData);
-
-    await paymentsMock(ancv.page, paymentsSuccessCardMockData);
-
-    const cardDisclaimerText = ancv.page.getByText('All fields are required unless marked otherwise.');
-
-    await expect(cardDisclaimerText).toBeVisible();
+        await expect(page.locator('#result-message')).toHaveText('Partially Authorised');
+    });
 });

packages/lib/src/components/ANCV/ANCV.tsx

@@ -46,8 +46,15 @@ export class ANCVElement extends UIElement<ANCVProps> {
         }
     };
 
+    /**
+     * Called when the /paymentDetails endpoint returns PartiallyAuthorised. The /paymentDetails happens once the /status
+     * returns PartiallyAuthorised
+     *
+     * @param order
+     */
     protected handleOrder = ({ order }: PaymentResponse) => {
         this.updateParent({ order });
+
         if (this.props.session && this.props.onOrderCreated) {
             return this.props.onOrderCreated(order);
         }

yarn.lock

@@ -3685,13 +3685,12 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@playwright/test@1.30.0":
-  version "1.30.0"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.30.0.tgz#8c0c4930ff2c7be7b3ec3fd434b2a3b4465ed7cb"
-  integrity sha512-SVxkQw1xvn/Wk/EvBnqWIq6NLo1AppwbYOjNLmyU0R1RoQ3rLEBtmjTnElcnz8VEtn11fptj1ECxK0tgURhajw==
+"@playwright/test@1.39.0":
+  version "1.39.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.39.0.tgz#d10ba8e38e44104499e25001945f07faa9fa91cd"
+  integrity sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ==
   dependencies:
-    "@types/node" "*"
-    playwright-core "1.30.0"
+    playwright "1.39.0"
 
 "@preact/preset-vite@^2.0.0":
   version "2.5.0"
@@ -9167,7 +9166,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@^2.3.2, fsevents@~2.3.2:
+fsevents@2.3.2, fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -12723,10 +12722,19 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
-playwright-core@1.30.0:
-  version "1.30.0"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.30.0.tgz#de987cea2e86669e3b85732d230c277771873285"
-  integrity sha512-7AnRmTCf+GVYhHbLJsGUtskWTE33SwMZkybJ0v6rqR1boxq2x36U7p1vDRV7HO2IwTZgmycracLxPEJI49wu4g==
+playwright-core@1.39.0:
+  version "1.39.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.39.0.tgz#efeaea754af4fb170d11845b8da30b2323287c63"
+  integrity sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==
+
+playwright@1.39.0:
+  version "1.39.0"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.39.0.tgz#184c81cd6478f8da28bcd9e60e94fcebf566e077"
+  integrity sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==
+  dependencies:
+    playwright-core "1.39.0"
+  optionalDependencies:
+    fsevents "2.3.2"
 
 pngjs@^3.3.1:
   version "3.4.0"
@@ -13756,11 +13764,16 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.9, regenerator-runtime@^0.14.0:
+regenerator-runtime@^0.13.11:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regenerator-transform@^0.15.1:
   version "0.15.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"