Updating Playwright to 1.39.0 (#2448)

* dep: updating version

* fix: ancv fix

* fix typo
This commit is contained in:
Guilherme Ribeiro
2023-11-23 14:06:31 +01:00
committed by GitHub
parent e5bc41897f
commit 4e6f174da7
11 changed files with 87 additions and 79 deletions

View File

@@ -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) {

View File

@@ -16,11 +16,12 @@
</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">

View File

@@ -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');
onOrderCreated: data => {
console.log('hello');
showAuthorised('Partially Authorised');
},
onPaymentCompleted: () => {
showAuthorised();
},
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();

View File

@@ -1,10 +1,32 @@
import { Page } from '@playwright/test';
const STATUS_URL = 'https://checkoutshopper-*.adyen.com/checkoutshopper/services/PaymentInitiation/v1/status?*';
const statusMock = async (page: Page, mockedResponse: any): Promise<void> => {
await page.route(STATUS_URL, (route, request) => {
const requestData = JSON.parse(request.postData() || '');
const numberOfPendingCalls = 3;
const statusMock = async (page: Page, mockedResponse: any): Promise<void> => {
let numberOfCalls = 0;
await page.route(STATUS_URL, (route, request) => {
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',

View File

@@ -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.');
}

View File

@@ -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",

View File

@@ -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();

View File

@@ -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;

View File

@@ -2,7 +2,7 @@ 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';
@@ -10,35 +10,19 @@ 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');
});
});

View File

@@ -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);
}

View File

@@ -3692,13 +3692,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"
@@ -9165,7 +9164,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==
@@ -12740,10 +12739,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"
@@ -13773,11 +13781,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"