-
Notifications
You must be signed in to change notification settings - Fork 141
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Confirming that .fill triggers required events in SF (#2982)
* Confirming that .fill triggers required events in SF * Cleanup * removing clipboard permissions * reverting value for sf version * Add extra check that card is valid * Added (or moved) remaining tests related to unsupported.card.number.spec.ts * Slow down typing on test that is always flaky (because PAN doesn't fill properly on Webkit) * Removed commented out line * Removed commented out line * Added comments
- Loading branch information
Showing
9 changed files
with
187 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 41 additions & 0 deletions
41
packages/e2e-playwright/tests/ui/card/binLookup/plcc/plcc.luhn.paste.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { test, expect } from '../../../../../fixtures/card.fixture'; | ||
| import { getStoryUrl } from '../../../../utils/getStoryUrl'; | ||
| import { PLCC_NO_LUHN_NO_DATE, PLCC_WITH_LUHN_NO_DATE_WOULD_FAIL_LUHN, 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 PAN_ERROR_NOT_VALID = LANG['cc.num.902']; | ||
|
|
||
| test.describe('Testing binLookup/plcc/pasting fny: test what happens when cards that do, or do not, require a luhn check, are pasted in', () => { | ||
| test('#1 Test that the paste event triggers the correct response and the validation rules are updated accordingly', async ({ card, page }) => { | ||
| // | ||
| const componentConfig = { brands: ['mc', 'visa', 'amex', 'bcmc', 'synchrony_plcc'] }; | ||
|
|
||
| await card.goto(getStoryUrl({ baseUrl: URL_MAP.card, componentConfig })); | ||
|
|
||
| await card.isComponentVisible(); | ||
|
|
||
| /** | ||
| * Type number that identifies as plcc, no luhn required, but that fails luhn | ||
| */ | ||
| await card.fillCardNumber(PLCC_WITH_LUHN_NO_DATE_WOULD_FAIL_LUHN); | ||
| await page.waitForTimeout(100); | ||
|
|
||
| await card.typeExpiryDate(TEST_DATE_VALUE); | ||
| await card.typeCvc(TEST_CVC_VALUE); | ||
|
|
||
| // Expect the card not to be valid | ||
| await card.pay(); | ||
|
|
||
| await expect(card.cardNumberErrorElement).toBeVisible(); | ||
| await expect(card.cardNumberErrorElement).toHaveText(PAN_ERROR_NOT_VALID); | ||
|
|
||
| // "Paste" number that identifies as plcc, luhn required | ||
| await card.fillCardNumber(PLCC_NO_LUHN_NO_DATE); | ||
| await page.waitForTimeout(100); | ||
|
|
||
| // If correct events have fired expect the card to be valid i.e. no error message when pressing pay | ||
| await card.pay(); | ||
| await expect(card.cardNumberErrorElement).not.toBeVisible(); | ||
| }); | ||
| }); |
120 changes: 83 additions & 37 deletions
120
packages/e2e-playwright/tests/ui/card/cardNumber/unsupported.card.number.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,91 @@ | ||
| import { test } from '../../../../fixtures/card.fixture'; | ||
| 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, 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 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'] }; | ||
|
|
||
| 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 supported | ||
| await card.fillCardNumber(REGULAR_TEST_CARD); | ||
| await page.waitForTimeout(100); | ||
|
|
||
| // 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( | ||
| '#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 | ||
| '#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( | ||
| '#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 | ||
| } | ||
| ); | ||
| '#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'] }; | ||
|
|
||
| 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 | ||
| }); | ||
| await card.goto(getStoryUrl({ baseUrl: URL_MAP.card, componentConfig })); | ||
|
|
||
| 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 | ||
| }); | ||
| 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(); | ||
| } | ||
| ); |
37 changes: 37 additions & 0 deletions
37
packages/e2e-playwright/tests/ui/card/errors/card.errors.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters