Added (or moved) remaining tests related to unsupported.card.number.s…

…pec.ts

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();
+    }
+);

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();
+    });
+});