From 7be6248dca56c314289b9642e6574930aceec35a Mon Sep 17 00:00:00 2001 From: nicholas Date: Mon, 25 Nov 2024 14:58:12 +0100 Subject: [PATCH] Added (or moved) remaining tests related to unsupported.card.number.spec.ts --- .../unsupported.card.number.spec.ts | 106 ++++++++++-------- .../tests/ui/card/errors/card.errors.spec.ts | 37 ++++++ 2 files changed, 96 insertions(+), 47 deletions(-) create mode 100644 packages/e2e-playwright/tests/ui/card/errors/card.errors.spec.ts diff --git a/packages/e2e-playwright/tests/ui/card/cardNumber/unsupported.card.number.spec.ts b/packages/e2e-playwright/tests/ui/card/cardNumber/unsupported.card.number.spec.ts index 40402d7fa..125245f42 100644 --- a/packages/e2e-playwright/tests/ui/card/cardNumber/unsupported.card.number.spec.ts +++ b/packages/e2e-playwright/tests/ui/card/cardNumber/unsupported.card.number.spec.ts @@ -1,56 +1,15 @@ import { expect, test } from '../../../../fixtures/card.fixture'; import { getStoryUrl } from '../../../utils/getStoryUrl'; import { URL_MAP } from '../../../../fixtures/URL_MAP'; -import { PAYMENT_RESULT, REGULAR_TEST_CARD, TEST_CVC_VALUE, TEST_DATE_VALUE, VISA_CARD } from '../../../utils/constants'; +import { PAYMENT_RESULT, REGULAR_TEST_CARD, TEST_CVC_VALUE, TEST_DATE_VALUE, UNKNOWN_BIN_CARD, VISA_CARD } from '../../../utils/constants'; import LANG from '../../../../../server/translations/en-US.json'; const PAN_ERROR_NOT_SUPPORTED = LANG['cc.num.903']; -test( - '#1 Enter number of unsupported card, ' + 'then check UI shows an error ' + 'then PASTE supported card & check UI error is cleared', - async () => { - // Wait for field to appear in DOM - // Fill card field with unsupported number - // Test UI shows "Unsupported card" error - // Past card field with supported number - // Test UI shows "Unsupported card" error has gone - } -); - -test( - '#2 Enter number of unsupported card, ' + - 'then check UI shows an error ' + - 'then press the Pay button ' + - 'then check UI shows more errors ' + - 'then PASTE supported card & check PAN UI errors are cleared whilst others persist', - async () => { - // Wait for field to appear in DOM - // Fill card field with unsupported number - // Test UI shows "Unsupported card" error - // Click Pay (which will call showValidation on all fields) - // Past card field with supported number - // Test UI shows "Unsupported card" error has gone - // PAN error cleared but other errors persist - } -); - -test('#3 Enter number of unsupported card, ' + 'then check UI shows an error ' + 'then PASTE card not in db check UI error is cleared', async () => { - // Wait for field to appear in DOM - // Fill card field with unsupported number - // Test UI shows "Unsupported card" error - // Past card field with supported number - // Test UI shows "Unsupported card" error has gone -}); - -test('#4 Enter number of unsupported card, ' + 'then check UI shows an error ' + 'then delete PAN & check UI error is cleared', async () => { - // Wait for field to appear in DOM - // Fill card field with unsupported number - // Test UI shows "Unsupported card" error - // delete card number - // Test UI shows "Unsupported card" error has gone -}); - -test('#5 Test that after an unsupported card has been entered PASTING in full supported card makes it possible to pay', async ({ card, page }) => { +test('#1 Test that after an unsupported card has been entered we see errors, PASTING in a full supported card clears errors & makes it possible to pay', async ({ + card, + page +}) => { // const componentConfig = { brands: ['mc'] }; @@ -72,8 +31,61 @@ test('#5 Test that after an unsupported card has been entered PASTING in full su await card.fillCardNumber(REGULAR_TEST_CARD); await page.waitForTimeout(100); - // If correct events have fired expect the card to be valid + // If correct events have fired expect the card to not have errors await expect(card.cardNumberErrorElement).not.toBeVisible(); + + // And to be valid await card.pay(); await expect(card.paymentResult).toHaveText(PAYMENT_RESULT.authorised); }); + +test( + '#2 Enter number of unsupported card, ' + 'then check UI shows an error ' + 'then PASTE card not in db & check UI error is cleared', + async ({ card, page }) => { + const componentConfig = { brands: ['mc'] }; + + await card.goto(getStoryUrl({ baseUrl: URL_MAP.card, componentConfig })); + + await card.isComponentVisible(); + + // Fill unsupported card + await card.fillCardNumber(VISA_CARD); + await page.waitForTimeout(100); + + await card.typeExpiryDate(TEST_DATE_VALUE); + await card.typeCvc(TEST_CVC_VALUE); + + await expect(card.cardNumberErrorElement).toBeVisible(); + await expect(card.cardNumberErrorElement).toHaveText(PAN_ERROR_NOT_SUPPORTED); + + // "Paste" number that is unknown + await card.fillCardNumber(UNKNOWN_BIN_CARD); + await page.waitForTimeout(100); + + // If correct events have fired expect the card to not have errors + await expect(card.cardNumberErrorElement).not.toBeVisible(); + } +); + +test( + '#3 Enter number of unsupported card, ' + 'then check UI shows an error ' + 'then delete PAN & check UI error is cleared', + async ({ card, page }) => { + const componentConfig = { brands: ['mc'] }; + + await card.goto(getStoryUrl({ baseUrl: URL_MAP.card, componentConfig })); + + await card.isComponentVisible(); + + // Fill unsupported card + await card.fillCardNumber(VISA_CARD); + await page.waitForTimeout(100); + + await expect(card.cardNumberErrorElement).toBeVisible(); + await expect(card.cardNumberErrorElement).toHaveText(PAN_ERROR_NOT_SUPPORTED); + + await page.waitForTimeout(300); // leave time for focus to shift + + await card.deleteCardNumber(); + await expect(card.cardNumberErrorElement).not.toBeVisible(); + } +); diff --git a/packages/e2e-playwright/tests/ui/card/errors/card.errors.spec.ts b/packages/e2e-playwright/tests/ui/card/errors/card.errors.spec.ts new file mode 100644 index 000000000..f09d02186 --- /dev/null +++ b/packages/e2e-playwright/tests/ui/card/errors/card.errors.spec.ts @@ -0,0 +1,37 @@ +import { test, expect } from '../../../../fixtures/card.fixture'; +import { REGULAR_TEST_CARD, TEST_CVC_VALUE, TEST_DATE_VALUE } from '../../../utils/constants'; +import { URL_MAP } from '../../../../fixtures/URL_MAP'; +import LANG from '../../../../../server/translations/en-US.json'; + +const ERROR_ENTER_PAN = LANG['cc.num.900']; +const ERROR_ENTER_DATE = LANG['cc.dat.910']; +const ERROR_ENTER_CVC = LANG['cc.cvc.920']; + +test.describe('Card - UI errors', () => { + test('#1 Not filling in card fields should lead to errors, which are cleared when fields are filled', async ({ card, page }) => { + await card.goto(URL_MAP.card); + await card.isComponentVisible(); + await card.pay(); + + // Expect errors + await expect(card.cardNumberErrorElement).toBeVisible(); + await expect(card.cardNumberErrorElement).toHaveText(ERROR_ENTER_PAN); + + await expect(card.expiryDateErrorElement).toBeVisible(); + await expect(card.expiryDateErrorElement).toHaveText(ERROR_ENTER_DATE); + + await expect(card.cvcErrorElement).toBeVisible(); + await expect(card.cvcErrorElement).toHaveText(ERROR_ENTER_CVC); + + await page.waitForTimeout(300); // leave time for focus to shift + + await card.typeCardNumber(REGULAR_TEST_CARD); + await card.typeExpiryDate(TEST_DATE_VALUE); + await card.typeCvc(TEST_CVC_VALUE); + + // Expect no errors + await expect(card.cardNumberErrorElement).not.toBeVisible(); + await expect(card.expiryDateErrorElement).not.toBeVisible(); + await expect(card.cvcErrorElement).not.toBeVisible(); + }); +});