Merge pull request #1382 from Adyen/feature/bump_securedFields_version

Bumping securedFields version to 3.7.3

packages/e2e/tests/_models/CardComponent.page.js

@@ -19,8 +19,9 @@ export default class CardPage extends BasePage {
          */
         // Top level <div>
         this.numHolder = Selector(`${BASE_EL} .adyen-checkout__field--cardNumber`);
-        //        this.numHolderInError = Selector(`${BASE_EL} .adyen-checkout__field--cardNumber.adyen-checkout__field--error`);
+        //        this.numHolderWithErrorCls = Selector(`${BASE_EL} .adyen-checkout__field--cardNumber.adyen-checkout__field--error`);
 
+        this.numLabel = Selector(`${BASE_EL} .adyen-checkout__field--cardNumber .adyen-checkout__label`);
         // The <span> that holds the label text (first child of the <label>)
         this.numLabelText = Selector(`${BASE_EL} .adyen-checkout__field--cardNumber .adyen-checkout__label__text`);
         this.numLabelTextError = Selector(`${BASE_EL} .adyen-checkout__field--cardNumber .adyen-checkout__label__text--error`);
@@ -39,9 +40,9 @@ export default class CardPage extends BasePage {
          */
         // Top level <div>
         this.dateHolder = Selector(`${BASE_EL} .adyen-checkout__field__exp-date`);
-        //        this.dateHolderInError = Selector(`${BASE_EL} .adyen-checkout__field__exp-date.adyen-checkout__field--error`);
         this.dateHolderAsOptional = Selector(`${BASE_EL} .adyen-checkout__field__exp-date--optional`);
 
+        this.dateLabel = Selector(`${BASE_EL} .adyen-checkout__field__exp-date .adyen-checkout__label`);
         // The <span> that holds the label text (first child of the <label>)
         this.dateLabelText = Selector(`${BASE_EL} .adyen-checkout__field__exp-date .adyen-checkout__label__text`);
         this.dateLabelTextError = Selector(`${BASE_EL} .adyen-checkout__field__exp-date .adyen-checkout__label__text--error`);
@@ -57,9 +58,9 @@ export default class CardPage extends BasePage {
          */
         // Top level <div>
         this.cvcHolder = Selector(`${BASE_EL} .adyen-checkout__field__cvc`);
-        //        this.cvcHolderInError = Selector(`${BASE_EL} .adyen-checkout__field__cvc.adyen-checkout__field--error`);
         this.cvcHolderAsOptional = Selector(`${BASE_EL} .adyen-checkout__field__cvc--optional`);
 
+        this.cvcLabel = Selector(`${BASE_EL} .adyen-checkout__field__cvc .adyen-checkout__label`);
         // The <span> that holds the label text (first child of the <label>)
         this.cvcLabelText = Selector(`${BASE_EL} .adyen-checkout__field__cvc .adyen-checkout__label__text`);
         this.cvcLabelTextError = Selector(`${BASE_EL} .adyen-checkout__field__cvc .adyen-checkout__label__text--error`);

packages/e2e/tests/cards/general/general.test.js

@@ -1,39 +1,73 @@
-import { Selector } from 'testcafe';
-import { start, getIframeSelector } from '../../utils/commonUtils';
-import cu from '../utils/cardUtils';
-import { CARDS_URL } from '../../pages';
 import { REGULAR_TEST_CARD } from '../utils/constants';
+import CardComponentPage from '../../_models/CardComponent.page';
 
-const errorHolder = Selector('.card-field .adyen-checkout__field--error');
+const cardPage = new CardComponentPage();
 
-const TEST_SPEED = 1;
-
-const iframeSelector = getIframeSelector('.card-field iframe');
-const cardUtils = cu(iframeSelector);
-
-fixture`Testing regular card completion and payment`.page(CARDS_URL);
-//    .clientScripts('general.clientScripts.js');
+fixture`Testing some general functionality and UI on the regular card component`.beforeEach(async t => {
+    await t.navigateTo(cardPage.pageUrl);
+});
 
-test('Can fill out the fields in the regular custom card and make a successful payment', async t => {
-    // Start, allow time for iframes to load
-    await start(t, 2000, TEST_SPEED);
+test('#1 Can fill out the fields in the regular card and make a successful payment', async t => {
+    // Wait for field to appear in DOM
+    await cardPage.numHolder();
 
     // handler for alert that's triggered on successful payment
     await t.setNativeDialogHandler(() => true);
 
-    await cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
 
-    await cardUtils.fillDateAndCVC(t);
+    await cardPage.cardUtils.fillDateAndCVC(t);
 
     // click pay
     await t
-        .click('.card-field .adyen-checkout__button')
+        .click(cardPage.payButton)
         // no visible errors
-        .expect(errorHolder.exists)
+        .expect(cardPage.numLabelTextError.exists)
+        .notOk()
+        .expect(cardPage.dateLabelTextError.exists)
+        .notOk()
+        .expect(cardPage.cvcLabelTextError.exists)
         .notOk()
         .wait(1000);
 
     // Check the value of the alert text
     const history = await t.getNativeDialogHistory();
     await t.expect(history[0].text).eql('Authorised');
 });
+
+test("#2 Value of label's 'for' attr should match value of corresponding securedField input's 'id' attr", async t => {
+    // Wait for field to appear in DOM
+    await cardPage.numHolder();
+
+    const numAttrVal = await cardPage.numLabel.getAttribute('for');
+    await cardPage.cardUtils.checkIframeForAttrVal(t, 0, 'encryptedCardNumber', 'id', numAttrVal);
+
+    const dateAttrVal = await cardPage.dateLabel.getAttribute('for');
+    await cardPage.cardUtils.checkIframeForAttrVal(t, 1, 'encryptedExpiryDate', 'id', dateAttrVal);
+
+    const cvcAttrVal = await cardPage.cvcLabel.getAttribute('for');
+    await cardPage.cardUtils.checkIframeForAttrVal(t, 2, 'encryptedSecurityCode', 'id', cvcAttrVal);
+
+    // KEEP AS REF - process needed if we actually want to be able to store or log the value of an attr on an iframe
+    //    await t.switchToMainWindow().switchToIframe(cardPage.iframeSelector.nth(0));
+    //    const idVal = await Selector(getInputSelector('encryptedCardNumber')).getAttribute('id');
+    //    console.log('### general.test:::: idVal', idVal);
+    //    await t.switchToMainWindow();
+    //    await t.expect(numAttrVal).eql(idVal);
+});
+
+test('#3 PAN that consists of the same digit (but passes luhn) causes an error', async t => {
+    // Wait for field to appear in DOM
+    await cardPage.numHolder();
+
+    await cardPage.cardUtils.fillCardNumber(t, '3333 3333 3333 3333 3333');
+
+    await cardPage.setForceClick(true);
+
+    // Click label text to force the blur event on the card field
+    await t
+        .click(cardPage.dateLabelText)
+        // visible error
+        .expect(cardPage.numLabelTextError.exists)
+        .ok();
+});

packages/e2e/tests/cards/utils/threeDS2Utils.js

@@ -10,6 +10,6 @@ export const submitChallenge = async t => {
     return t
         .switchToMainWindow()
         .switchToIframe(iframeSelector.nth(0))
-        .click('.button--primary')
+        .click('[type="submit"]')
         .switchToMainWindow();
 };

packages/lib/src/components/internal/SecuredFields/lib/configuration/constants.ts

@@ -16,7 +16,7 @@ export const GIFT_CARD = 'giftcard';
 export const ENCRYPTED_BANK_ACCNT_NUMBER_FIELD = 'encryptedBankAccountNumber';
 export const ENCRYPTED_BANK_LOCATION_FIELD = 'encryptedBankLocationId';
 
-export const SF_VERSION = '3.7.2';
+export const SF_VERSION = '3.7.3';
 
 export const DEFAULT_CARD_GROUP_TYPES = ['amex', 'mc', 'visa'];
 

packages/playground/src/pages/Dropin/manual.js

@@ -68,10 +68,8 @@ export async function initManual() {
                 hasHolderName: true,
                 holderNameRequired: true
             },
-            paymentMethodsConfiguration: {
-                paywithgoogle: {
-                    buttonType: 'plain'
-                }
+            paywithgoogle: {
+                buttonType: 'plain'
             }
         }
     });