From e863f37e0ef45e3d1b9c3d4a8dfb4fa3290aa072 Mon Sep 17 00:00:00 2001 From: Guilherme Ribeiro Date: Tue, 26 Nov 2024 10:29:56 +0100 Subject: [PATCH] kcp tests (#2981) --- packages/e2e-playwright/fixtures/URL_MAP.ts | 2 +- .../mocks/payments/payments.mock.ts | 17 +- packages/e2e-playwright/models/card-kcp.ts | 27 ++- .../tests/e2e/card/kcp/card.kcp.spec.ts | 149 +++++++++++++++ .../startWithKCP.clientScripts.js | 11 -- .../kcp/startWithKCP/startWithKCP.spec.ts | 137 -------------- .../startWithoutKCP.clientScripts.js | 10 - .../startWithoutKCP/startWithoutKCP.spec.ts | 174 ------------------ .../storybook/stories/cards/Card.stories.tsx | 6 +- 9 files changed, 190 insertions(+), 343 deletions(-) create mode 100644 packages/e2e-playwright/tests/e2e/card/kcp/card.kcp.spec.ts delete mode 100644 packages/e2e-playwright/tests/ui/card/kcp/startWithKCP/startWithKCP.clientScripts.js delete mode 100644 packages/e2e-playwright/tests/ui/card/kcp/startWithKCP/startWithKCP.spec.ts delete mode 100644 packages/e2e-playwright/tests/ui/card/kcp/startWithoutKCP/startWithoutKCP.clientScripts.js delete mode 100644 packages/e2e-playwright/tests/ui/card/kcp/startWithoutKCP/startWithoutKCP.spec.ts diff --git a/packages/e2e-playwright/fixtures/URL_MAP.ts b/packages/e2e-playwright/fixtures/URL_MAP.ts index fa54bc3da4..564323a858 100644 --- a/packages/e2e-playwright/fixtures/URL_MAP.ts +++ b/packages/e2e-playwright/fixtures/URL_MAP.ts @@ -16,7 +16,7 @@ export const URL_MAP = { cardWithAvs: '/iframe.html?args=&globals=&id=cards-card--with-avs&viewMode=story', cardWithPartialAvs: '/iframe.html?args=&globals=&id=cards-card--with-partial-avs&viewMode=story', cardWithInstallments: '/iframe.html?args=&id=cards-card--with-installments&viewMode=story', - cardWithKcp: '/iframe.html?args=&id=cards-card--kcp&viewMode=story', + cardWithKcp: '/iframe.html?args=&globals=&id=cards-card--with-kcp&viewMode=story', cardWithClickToPay: '/iframe.html?args=&id=cards-card--with-click-to-pay&viewMode=story', fullAvsWithoutPrefilledDataUrl: '/iframe.html?args=componentConfiguration.data:!undefined&globals=&id=cards-card--with-avs&viewMode=story', fullAvsWithPrefilledDataUrl: '/iframe.html?globals=&args=&id=cards-card--with-avs&viewMode=story', diff --git a/packages/e2e-playwright/mocks/payments/payments.mock.ts b/packages/e2e-playwright/mocks/payments/payments.mock.ts index 31a140778a..fd3daa31e0 100644 --- a/packages/e2e-playwright/mocks/payments/payments.mock.ts +++ b/packages/e2e-playwright/mocks/payments/payments.mock.ts @@ -1,11 +1,12 @@ import { Page } from '@playwright/test'; const PAYMENTS_URL = 'https://checkoutshopper-*.adyen.com/checkoutshopper/v1/sessions/*/payments?*'; + const paymentsMock = async (page: Page, mockedResponse: any): Promise => { - await page.route(PAYMENTS_URL, (route, request) => { + await page.route(PAYMENTS_URL, async (route, request) => { const requestData = JSON.parse(request.postData() || ''); - route.fulfill({ + await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ @@ -19,4 +20,14 @@ const paymentsMock = async (page: Page, mockedResponse: any): Promise => { }); }; -export { paymentsMock }; +const paymentSuccessfulMock = async (page: Page) => { + await page.route(PAYMENTS_URL, async route => { + await route.fulfill({ + json: { + resultCode: 'Authorised' + } + }); + }); +}; + +export { paymentsMock, paymentSuccessfulMock }; diff --git a/packages/e2e-playwright/models/card-kcp.ts b/packages/e2e-playwright/models/card-kcp.ts index 6232690341..6ad15831d3 100644 --- a/packages/e2e-playwright/models/card-kcp.ts +++ b/packages/e2e-playwright/models/card-kcp.ts @@ -1,16 +1,35 @@ import { Card } from './card'; import { type Locator, Page } from '@playwright/test'; +import { USER_TYPE_DELAY } from '../tests/utils/constants'; class CardWithKCP extends Card { - readonly kcpTaxNumberField: Locator; - constructor(page: Page) { super(page); - this.kcpTaxNumberField = this.rootElement.locator('.adyen-checkout__field--kcp-taxNumber'); // Holder } get taxNumberInput() { - return this.kcpTaxNumberField.getByRole('textbox', { name: /Cardholder birthdate/i }); + return this.rootElement.getByRole('textbox', { name: /Cardholder birthdate/i }); + } + + get taxNumberErrorLocator() { + return this.rootElement.locator('.adyen-checkout__field--kcp-taxNumber .adyen-checkout-contextual-text--error'); + } + + get passwordInput() { + const passwordIframe = this.rootElement.frameLocator('[title="Iframe for password"]'); + return passwordIframe.locator('input[aria-label="First 2 digits of card password"]'); + } + + get passwordErrorLocator() { + return this.rootElement.locator('.adyen-checkout__field--koreanAuthentication-encryptedPassword .adyen-checkout-contextual-text--error'); + } + + async typeTaxNumber(taxNumber: string) { + return this.taxNumberInput.pressSequentially(taxNumber, { delay: USER_TYPE_DELAY }); + } + + async typePassword(password: string) { + return this.passwordInput.pressSequentially(password, { delay: USER_TYPE_DELAY }); } } diff --git a/packages/e2e-playwright/tests/e2e/card/kcp/card.kcp.spec.ts b/packages/e2e-playwright/tests/e2e/card/kcp/card.kcp.spec.ts new file mode 100644 index 0000000000..fd4c3ffb8f --- /dev/null +++ b/packages/e2e-playwright/tests/e2e/card/kcp/card.kcp.spec.ts @@ -0,0 +1,149 @@ +import { expect, test } from '../../../../fixtures/card.fixture'; +import { URL_MAP } from '../../../../fixtures/URL_MAP'; +import { + KOREAN_TEST_CARD, + PAYMENT_RESULT, + REGULAR_TEST_CARD, + TEST_CVC_VALUE, + TEST_DATE_VALUE, + TEST_PWD_VALUE, + TEST_TAX_NUMBER_VALUE +} from '../../../utils/constants'; +import { getStoryUrl } from '../../../utils/getStoryUrl'; +import { paymentSuccessfulMock } from '../../../../mocks/payments/payments.mock'; + +test.describe('Card with KCP fields', () => { + test.describe('Displaying KCP fields by default', () => { + test('should hide KCP fields if Card is not korean and make the payment', async ({ cardWithKCP }) => { + await cardWithKCP.goto(URL_MAP.cardWithKcp); + await cardWithKCP.typeCardNumber(REGULAR_TEST_CARD); + + await expect(cardWithKCP.passwordInput).not.toBeVisible(); + await expect(cardWithKCP.taxNumberInput).not.toBeVisible(); + + await cardWithKCP.typeCvc(TEST_CVC_VALUE); + await cardWithKCP.typeExpiryDate(TEST_DATE_VALUE); + await cardWithKCP.pay(); + + await expect(cardWithKCP.paymentResult).toContainText(PAYMENT_RESULT.authorised); + }); + + test('should hide KCP fields if Card is not korean, then show them again once the Card is replaced by korean card and make the payment', async ({ + cardWithKCP, + page + }) => { + await paymentSuccessfulMock(page); + const paymentsRequestPromise = page.waitForRequest(request => request.url().includes('/payments') && request.method() === 'POST'); + + await cardWithKCP.goto(URL_MAP.cardWithKcp); + await cardWithKCP.typeCardNumber(REGULAR_TEST_CARD); + + await expect(cardWithKCP.passwordInput).not.toBeVisible(); + await expect(cardWithKCP.taxNumberInput).not.toBeVisible(); + + await cardWithKCP.deleteCardNumber(); + + await cardWithKCP.typeCardNumber(KOREAN_TEST_CARD); + await cardWithKCP.typeCvc(TEST_CVC_VALUE); + await cardWithKCP.typeExpiryDate(TEST_DATE_VALUE); + await cardWithKCP.typeTaxNumber(TEST_TAX_NUMBER_VALUE); + await cardWithKCP.typePassword(TEST_PWD_VALUE); + await cardWithKCP.pay(); + + // Check that KCP fields are passed in + const request = await paymentsRequestPromise; + const paymentMethod = await request.postDataJSON().paymentMethod; + expect(paymentMethod.encryptedPassword).not.toBeNull(); + expect(paymentMethod.taxNumber).not.toBeNull(); + + await expect(cardWithKCP.paymentResult).toContainText(PAYMENT_RESULT.authorised); + }); + test('should fill in KCP fields, then replace with non-korean Card and make a payment', async ({ cardWithKCP }) => { + await cardWithKCP.goto(URL_MAP.cardWithKcp); + + await cardWithKCP.typeCardNumber(KOREAN_TEST_CARD); + await cardWithKCP.typeCvc(TEST_CVC_VALUE); + await cardWithKCP.typeExpiryDate(TEST_DATE_VALUE); + await cardWithKCP.typeTaxNumber(TEST_TAX_NUMBER_VALUE); + await cardWithKCP.typePassword(TEST_PWD_VALUE); + + await cardWithKCP.deleteCardNumber(); + await cardWithKCP.typeCardNumber(REGULAR_TEST_CARD); + + await expect(cardWithKCP.passwordInput).not.toBeVisible(); + await expect(cardWithKCP.taxNumberInput).not.toBeVisible(); + + await cardWithKCP.pay(); + + await expect(cardWithKCP.paymentResult).toContainText(PAYMENT_RESULT.authorised); + }); + }); + + test.describe('Displaying KCP fields once Korean card is detected', () => { + const url = getStoryUrl({ + baseUrl: URL_MAP.card, + componentConfig: { + brands: ['mc', 'visa', 'amex', 'korean_local_card'], + configuration: { + koreanAuthenticationRequired: true + } + } + }); + + test('should display KCP fields once korean card is entered and make the payment', async ({ cardWithKCP, page }) => { + await paymentSuccessfulMock(page); + + await cardWithKCP.goto(url); + + await expect(cardWithKCP.passwordInput).not.toBeVisible(); + await expect(cardWithKCP.taxNumberInput).not.toBeVisible(); + + await cardWithKCP.typeCardNumber(KOREAN_TEST_CARD); + + await expect(cardWithKCP.passwordInput).toBeVisible(); + await expect(cardWithKCP.taxNumberInput).toBeVisible(); + + await cardWithKCP.typeCvc(TEST_CVC_VALUE); + await cardWithKCP.typeExpiryDate(TEST_DATE_VALUE); + await cardWithKCP.typeTaxNumber(TEST_TAX_NUMBER_VALUE); + await cardWithKCP.typePassword(TEST_PWD_VALUE); + await cardWithKCP.pay(); + + await expect(cardWithKCP.paymentResult).toContainText(PAYMENT_RESULT.authorised); + }); + + test('should display KCP fields once korean card is entered, then replace by regular Card and make the payment', async ({ cardWithKCP }) => { + await cardWithKCP.goto(url); + + await cardWithKCP.typeCardNumber(KOREAN_TEST_CARD); + + await expect(cardWithKCP.passwordInput).toBeVisible(); + await expect(cardWithKCP.taxNumberInput).toBeVisible(); + + await cardWithKCP.deleteCardNumber(); + + await cardWithKCP.typeCardNumber(REGULAR_TEST_CARD); + await cardWithKCP.typeCvc(TEST_CVC_VALUE); + await cardWithKCP.typeExpiryDate(TEST_DATE_VALUE); + + await expect(cardWithKCP.passwordInput).not.toBeVisible(); + await expect(cardWithKCP.taxNumberInput).not.toBeVisible(); + + await cardWithKCP.pay(); + + await expect(cardWithKCP.paymentResult).toContainText(PAYMENT_RESULT.authorised); + }); + + test('should apply validation to KCP fields', async ({ cardWithKCP }) => { + await cardWithKCP.goto(url); + + await cardWithKCP.typeCardNumber(KOREAN_TEST_CARD); + await cardWithKCP.typeCvc(TEST_CVC_VALUE); + await cardWithKCP.typeExpiryDate(TEST_DATE_VALUE); + await cardWithKCP.pay(); + + await expect(cardWithKCP.taxNumberErrorLocator).toHaveText('Invalid Cardholder birthdate or Corporate registration number'); + await expect(cardWithKCP.passwordErrorLocator).toHaveText('Enter the password'); + }); + }); +}); diff --git a/packages/e2e-playwright/tests/ui/card/kcp/startWithKCP/startWithKCP.clientScripts.js b/packages/e2e-playwright/tests/ui/card/kcp/startWithKCP/startWithKCP.clientScripts.js deleted file mode 100644 index 3350649fa4..0000000000 --- a/packages/e2e-playwright/tests/ui/card/kcp/startWithKCP/startWithKCP.clientScripts.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Set koreanAuthenticationRequired & countryCode so KCP fields show at start - */ -window.cardConfig = { - type: 'scheme', - brands: ['mc', 'visa', 'amex', 'korean_local_card'], - configuration: { - koreanAuthenticationRequired: true - }, - countryCode: 'kr' -}; diff --git a/packages/e2e-playwright/tests/ui/card/kcp/startWithKCP/startWithKCP.spec.ts b/packages/e2e-playwright/tests/ui/card/kcp/startWithKCP/startWithKCP.spec.ts deleted file mode 100644 index face759bd0..0000000000 --- a/packages/e2e-playwright/tests/ui/card/kcp/startWithKCP/startWithKCP.spec.ts +++ /dev/null @@ -1,137 +0,0 @@ -import { test } from '@playwright/test'; -import { turnOffSDKMocking } from '../../cardMocks'; - -test.describe('Starting with KCP fields', () => { - test.beforeEach(async () => { - // await t.navigateTo(cardPage.pageUrl); - await turnOffSDKMocking(); - //use startWithKCP.clientScripts.js - }); - test( - '#1 Fill in card number that will hide KCP fields, ' + - 'then check password iframe is hidden, ' + - 'then complete the form & check component becomes valid', - async () => { - // Wait for field to appear in DOM - // await cardPage.numHolder(); - // - // // Fill card field with non-korean card - // await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD); - // - // // Does the password securedField get removed - // await t.expect(cardPage.pwdSpan.exists).notOk(); - // - // // Complete form - // await cardPage.cardUtils.fillDateAndCVC(t); - // - // // Expect card to now be valid - // await t.expect(cardPage.getFromState('isValid')).eql(true); - } - ); - - test( - '#2 Fill in all KCP details, ' + - 'then check card state for taxNumber & password entries, ' + - 'then replace card number with non-korean card and check taxNumber and password state are cleared', - async () => { - // For some reason, at full speed, testcafe can fail to fill in the taxNumber correctly - // await t.setTestSpeed(0.9); - // - // await cardPage.numHolder(); - // - // // Complete form with korean card number - // await cardPage.cardUtils.fillCardNumber(t, KOREAN_TEST_CARD); - // await cardPage.cardUtils.fillDateAndCVC(t); - // await cardPage.kcpUtils.fillTaxNumber(t); - // await cardPage.kcpUtils.fillPwd(t); - // - // // Expect card to now be valid - // await t.expect(cardPage.getFromState('isValid')).eql(true); - // - // // Expect card state to have tax and pwd elements - // await t.expect(cardPage.getFromState('data.taxNumber')).eql(TEST_TAX_NUMBER_VALUE); - // - // // Extract & decode JWE header - // const JWEToken = await cardPage.getFromState('data.encryptedPassword'); - // const JWETokenArr = JWEToken.split('.'); - // const blobHeader = JWETokenArr[0]; - // const base64Decoded = await cardPage.decodeBase64(blobHeader); - // const headerObj = JSON.parse(base64Decoded); - // - // // Look for expected properties - // await t.expect(JWETokenArr.length).eql(5); // Expected number of components in the JWE token - // - // await t.expect(headerObj.alg).eql(JWE_ALG).expect(headerObj.enc).eql(JWE_CONTENT_ALG).expect(headerObj.version).eql(JWE_VERSION); - // - // // await t.expect(cardPage.getFromState('data.encryptedPassword')).contains('adyenjs_0_1_'); - // - // await t.expect(cardPage.getFromState('valid.taxNumber')).eql(true); - // await t.expect(cardPage.getFromState('valid.encryptedPassword')).eql(true); - // - // // Replace number - // await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD, 'replace'); - // - // // (Does the password securedField get removed) - // await t.expect(cardPage.pwdSpan.exists).notOk(); - // - // // Expect card state's tax and pwd elements to have been cleared/reset - // await t.expect(cardPage.getFromState('data.taxNumber')).eql(undefined); - // await t.expect(cardPage.getFromState('data.encryptedPassword')).eql(undefined); - // - // await t.expect(cardPage.getFromState('valid.taxNumber')).eql(false); - // await t.expect(cardPage.getFromState('valid.encryptedPassword')).eql(false); - // - // // Expect card to still be valid (get it from window.card this time - just to check that is also set) - // await t.expect(cardPage.getFromWindow('card.isValid')).eql(true); - } - ); - - test( - '#3 Fill in card number that will hide KCP fields, ' + - 'then complete form and expect component to be valid & to be able to pay,' + - 'then replace card number with korean card and expect component to be valid & to be able to pay', - async () => { - // For some reason, at full speed, testcafe can fail to fill in the taxNumber correctly - // await t.setTestSpeed(0.9); - // - // await cardPage.numHolder(); - // - // // handler for alert that's triggered on successful payment - // await t.setNativeDialogHandler(() => true); - // - // // Complete form with regular card number - // await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD); - // await cardPage.cardUtils.fillDateAndCVC(t); - // - // // Expect card to now be valid - // await t.expect(cardPage.getFromState('isValid')).eql(true); - // - // // Click pay - except we can't... - // await t; - // // .click(cardPage.payButton) // Can't do this in testing scenario - for some reason it triggers a redirect to a hpp/collectKcpAuthentication page - // // ... & no errors - // await t.expect(cardPage.numLabelTextError.exists).notOk(); - // - // // Replace number with korean card (pasting works better than replacing in textcafe >1.13.0) - // await cardPage.cardUtils.fillCardNumber(t, KOREAN_TEST_CARD, 'paste'); // 'replace' - // - // // Expect card to now be invalid - // await t.expect(cardPage.getFromState('isValid')).eql(false); - // - // // Complete form - // await cardPage.kcpUtils.fillTaxNumber(t); - // await cardPage.kcpUtils.fillPwd(t); - // - // // Expect card to now be valid - // await t.expect(cardPage.getFromState('isValid')).eql(true); - // - // // Click pay - // await t - // .click(cardPage.payButton) - // // no errors - // .expect(cardPage.numLabelTextError.exists) - // .notOk() - // .wait(1000); - } - ); -}); diff --git a/packages/e2e-playwright/tests/ui/card/kcp/startWithoutKCP/startWithoutKCP.clientScripts.js b/packages/e2e-playwright/tests/ui/card/kcp/startWithoutKCP/startWithoutKCP.clientScripts.js deleted file mode 100644 index cf15e10a94..0000000000 --- a/packages/e2e-playwright/tests/ui/card/kcp/startWithoutKCP/startWithoutKCP.clientScripts.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Set koreanAuthenticationRequired so KCP fields will show if a korean card number is entered - */ -window.cardConfig = { - type: 'scheme', - brands: ['mc', 'visa', 'amex', 'korean_local_card'], - configuration: { - koreanAuthenticationRequired: true - } -}; diff --git a/packages/e2e-playwright/tests/ui/card/kcp/startWithoutKCP/startWithoutKCP.spec.ts b/packages/e2e-playwright/tests/ui/card/kcp/startWithoutKCP/startWithoutKCP.spec.ts deleted file mode 100644 index 1ff8e75263..0000000000 --- a/packages/e2e-playwright/tests/ui/card/kcp/startWithoutKCP/startWithoutKCP.spec.ts +++ /dev/null @@ -1,174 +0,0 @@ -import { test } from '@playwright/test'; -import { turnOffSDKMocking } from '../../cardMocks'; - -test.describe('Starting without KCP fields', () => { - test.beforeEach(async () => { - // await t.navigateTo(cardPage.pageUrl); - await turnOffSDKMocking(); - //use startWithoutKCP.clientScripts.js - }); - - test( - '#1 Fill in card number that will trigger addition of KCP fields, ' + - 'then check new iframe field is correctly set up, ' + - 'then complete the form & check component becomes valid', - async () => { - // For some reason, at full speed, testcafe can fail to fill in the taxNumber correctly - // await t.setTestSpeed(0.5); - // - // // Wait for field to appear in DOM - // await cardPage.numHolder(); - // - // // Fill card field with korean card - // await cardPage.cardUtils.fillCardNumber(t, KOREAN_TEST_CARD); - // - // // Does a newly added password securedField now exist with a state.valid entry, a holder and an iframe...? - // await t - // .expect(cardPage.getFromState('valid.encryptedPassword')) - // .eql(false) - // .expect(cardPage.pwdSpan.exists) - // .ok() - // .expect(cardPage.pwdSpan.find('iframe').getAttribute('src')) - // .contains('securedFields.html'); - // - // // ...and can we can type into the iframe? - // await cardPage.kcpUtils.fillPwd(t); - // - // // Check pwd field for value - // await cardPage.kcpUtils.checkPwd(t, TEST_PWD_VALUE); - // - // // // Complete form - // await cardPage.cardUtils.fillDateAndCVC(t); - // await cardPage.kcpUtils.fillTaxNumber(t); - // - // // // Expect card to now be valid - // await t.expect(cardPage.getFromState('isValid')).eql(true); - } - ); - - test( - '#2 Fill in card number that will trigger addition of KCP fields, ' + - 'then fill in all KCP details & check card state for taxNumber & password entries, ' + - 'then delete card number and check taxNumber and password state are cleared', - async () => { - // For some reason, at full speed, testcafe can fail to fill in the taxNumber correctly - // await t.setTestSpeed(0.5); - // - // await cardPage.numHolder(); - // - // // Complete form with korean card number - // await cardPage.cardUtils.fillCardNumber(t, KOREAN_TEST_CARD); - // await cardPage.cardUtils.fillDateAndCVC(t); - // await cardPage.kcpUtils.fillTaxNumber(t); - // await cardPage.kcpUtils.fillPwd(t); - // - // // Expect card to now be valid - // await t.expect(cardPage.getFromState('isValid')).eql(true); - // - // // Expect card state to have tax and pwd elements - // await t.expect(cardPage.getFromState('data.taxNumber')).eql(TEST_TAX_NUMBER_VALUE); - // - // // Extract & decode JWE header - // const JWEToken = await cardPage.getFromState('data.encryptedPassword'); - // const JWETokenArr = JWEToken.split('.'); - // const blobHeader = JWETokenArr[0]; - // const base64Decoded = await cardPage.decodeBase64(blobHeader); - // const headerObj = JSON.parse(base64Decoded); - // - // // Look for expected properties - // await t.expect(JWETokenArr.length).eql(5); // Expected number of components in the JWE token - // - // await t.expect(headerObj.alg).eql(JWE_ALG).expect(headerObj.enc).eql(JWE_CONTENT_ALG).expect(headerObj.version).eql(JWE_VERSION); - // - // // await t.expect(cardPage.getFromState('data.encryptedPassword')).contains('adyenjs_0_1_'); - // - // await t.expect(cardPage.getFromState('valid.taxNumber')).eql(true); - // await t.expect(cardPage.getFromState('valid.encryptedPassword')).eql(true); - // - // // Delete number - // await cardPage.cardUtils.deleteCardNumber(t); - // - // // Expect card state's tax and pwd elements to have been cleared/reset - // await t.expect(cardPage.getFromState('data.taxNumber')).eql(undefined); - // await t.expect(cardPage.getFromState('data.encryptedPassword')).eql(undefined); - // - // await t.expect(cardPage.getFromState('valid.taxNumber')).eql(false); - // await t.expect(cardPage.getFromState('valid.encryptedPassword')).eql(false); - // - // // Expect card to no longer be valid - // await t.expect(cardPage.getFromState('isValid')).eql(false); - } - ); - - test( - '#3 Fill in card number that will trigger addition of KCP fields, ' + - 'then complete form and expect component to be valid & to be able to pay,' + - 'then replace card number with non-korean card and expect component to be valid & to be able to pay', - async () => { - // For some reason, at full speed, testcafe can fail to fill in the taxNumber correctly - // await t.setTestSpeed(0.5); - // - // await cardPage.numHolder(); - // - // // handler for alert that's triggered on successful payment - // await t.setNativeDialogHandler(() => true); - // - // // Complete form with korean card number - // await cardPage.cardUtils.fillCardNumber(t, KOREAN_TEST_CARD); - // await cardPage.cardUtils.fillDateAndCVC(t); - // await cardPage.kcpUtils.fillTaxNumber(t); - // await cardPage.kcpUtils.fillPwd(t); - // - // // Expect card to now be valid - // await t.expect(cardPage.getFromState('isValid')).eql(true); - // - // // click pay - // await t - // .click(cardPage.payButton) - // // no errors - // .expect(cardPage.numLabelTextError.exists) - // .notOk(); - // - // // Replace number with non-korean card - // await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD, 'replace'); - // - // // Expect card to now be valid - // await t.expect(cardPage.getFromState('isValid')).eql(true); - // - // // click pay - // await t - // .click(cardPage.payButton) - // // no errors - // .expect(cardPage.numLabelTextError.exists) - // .notOk() - // .wait(1000); - } - ); - - test( - '#4 Fill in card number that will trigger addition of KCP fields, ' + - 'then complete form except for password field,' + - 'expect component not to be valid and for password field to show error', - async () => { - // For some reason, at full speed, testcafe can fail to fill in the taxNumber correctly - // await t.setTestSpeed(0.5); - // - // await cardPage.numHolder(); - // - // // Complete form with korean card number - // await cardPage.cardUtils.fillCardNumber(t, KOREAN_TEST_CARD); - // await cardPage.cardUtils.fillDateAndCVC(t); - // await cardPage.kcpUtils.fillTaxNumber(t); - // - // // Expect card to not be valid - // await t.expect(cardPage.getFromState('isValid')).eql(false); - // - // // click pay - // await t - // .click(cardPage.payButton) - // // Expect error on password field - // .expect(cardPage.pwdErrorText.exists) - // .ok(); - } - ); -}); diff --git a/packages/lib/storybook/stories/cards/Card.stories.tsx b/packages/lib/storybook/stories/cards/Card.stories.tsx index 2741afcb5b..4fd713929e 100644 --- a/packages/lib/storybook/stories/cards/Card.stories.tsx +++ b/packages/lib/storybook/stories/cards/Card.stories.tsx @@ -127,9 +127,10 @@ export const WithInstallments: CardStory = { } }; -export const KCP: CardStory = { +export const WithKCP: CardStory = { render: createCardComponent, args: { + countryCode: 'KR', componentConfiguration: { ...{ brands: ['mc', 'visa', 'amex', 'bcmc', 'maestro', 'korean_local_card'] }, _disableClickToPay: true, @@ -137,8 +138,7 @@ export const KCP: CardStory = { // Just set koreanAuthenticationRequired if KCP fields should only show if korean_local_card entered configuration: { koreanAuthenticationRequired: true - }, - countryCode: 'KR' + } } } };