mirror of
https://github.com/jlengrand/adyen-web.git
synced 2026-03-10 08:01:22 +00:00
Updating Playwright to 1.39.0 (#2448)
* dep: updating version * fix: ancv fix * fix typo
This commit is contained in:
committed by
GitHub
parent
e5bc41897f
commit
4e6f174da7
@@ -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) {
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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.');
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
37
yarn.lock
37
yarn.lock
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user