Match paymentMethods response to Card Component created as 'card' (#1406

)

* Ensure that when the Card component is created as 'card' it is still matched with the paymentMethods response item with type 'scheme'

* Refined method for mapping created component type into private function

* Added unit tests

* Added unit tests to make sure a paymentMethodsConfiguration.card object reaches the card component regardless of how the component is created

* Throw warning from core if 'scheme' prop defined on paymentMethodsConfiguration object + unit test

* Comments added about workings of create & handleCreate functions. Plus removing unnecessary calls to prop retrieval routines

* Update comment

* Updated comment

* Added comment

* Further comments added

* Separating unit tests into own file

* Finalised unit test for correct props within Dropin comp itself

* Commented out setTimeouts in Dropin.test.ts & replaced with async test functions - could find no evidence that the setTimeouts were ever called

* Added e2e tests to ensure components created within the Dropin receive all the expected props

* Added unit tests for Dropin created components. Removed e2e tests that overlapped.

* upped sf version to 3.7.4

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

@@ -33,10 +33,18 @@ export default class DropinPage extends BasePage {
         this.dualBrandingImages = this.dualBrandingIconHolderActive.find('img');
     }
 
-    getFromState = ClientFunction(path => {
+    getFromActivePM = ClientFunction(path => {
         const splitPath = path.split('.');
         const reducer = (xs, x) => (xs && xs[x] !== undefined ? xs[x] : undefined);
 
-        return splitPath.reduce(reducer, window.dropin.dropinRef.state.activePaymentMethod.state);
+        return splitPath.reduce(reducer, window.dropin.dropinRef.state.activePaymentMethod);
+    });
+
+    // Access the DropinComponent elements array - avoids having to make a PM active in order to inspect it
+    getFromDropinRefStateElements = ClientFunction((index, path) => {
+        const splitPath = path.split('.');
+        const reducer = (xs, x) => (xs && xs[x] !== undefined ? xs[x] : undefined);
+
+        return splitPath.reduce(reducer, window.dropin.dropinRef.state.elements[index]);
     });
 }

packages/e2e/tests/cards/Bancontact/bancontact.visa.test.js

@@ -139,7 +139,7 @@ test(
 
         // Expect comp to be valid (also check that it is set on state for this PM)
         await t.expect(dropinPage.getFromWindow('dropin.isValid')).eql(true);
-        await t.expect(dropinPage.getFromState('isValid')).eql(true);
+        await t.expect(dropinPage.getFromActivePM('state.isValid')).eql(true);
     }
 );
 

packages/lib/src/components/Dropin/Dropin.test.ts

@@ -22,13 +22,16 @@ describe('Dropin', () => {
             expect(dropin.isValid).toEqual(false);
         });
 
-        test('should return the isValid value of the activePaymentMethod', () => {
-            mount(dropin.render());
-
-            setTimeout(() => {
-                dropin.dropinRef.state.activePaymentMethod = { isValid: true };
-                expect(dropin.isValid).toEqual(true);
-            }, 0);
+        test('should return the isValid value of the activePaymentMethod', async () => {
+            // mount(dropin.render());
+            const dp = await mount(dropin.render());
+            await dp.update();
+
+            // setTimeout(() => {
+            // console.log('### Dropin.test:::: dropin.dropinRef1', dropin.dropinRef.state);
+            dropin.dropinRef.state.activePaymentMethod = { isValid: true };
+            expect(dropin.isValid).toEqual(true);
+            // }, 0);
         });
     });
 
@@ -39,14 +42,17 @@ describe('Dropin', () => {
     });
 
     describe('closeActivePaymentMethod', () => {
-        test('should close active payment method', () => {
-            mount(dropin.render());
-
-            setTimeout(() => {
-                expect(dropin.dropinRef.state.activePaymentMethod).toBeDefined();
-                dropin.closeActivePaymentMethod();
-                expect(dropin.dropinRef.state.activePaymentMethod).toBeNull();
-            }, 0);
+        test('should close active payment method', async () => {
+            // mount(dropin.render());
+            const dp = await mount(dropin.render());
+            await dp.update();
+
+            // setTimeout(() => {
+            // console.log('### Dropin.test:::: dropin.dropinRef2', dropin.dropinRef.state);
+            expect(dropin.dropinRef.state.activePaymentMethod).toBeDefined();
+            dropin.closeActivePaymentMethod();
+            expect(dropin.dropinRef.state.activePaymentMethod).toBeNull();
+            // }, 0);
         });
     });
 

packages/lib/src/components/Dropin/types.ts

@@ -35,7 +35,7 @@ export interface DropinElementProps extends UIElementProps {
      *
      * @defaultValue []
      */
-    instantPaymentTypes: InstantPaymentTypes[];
+    instantPaymentTypes?: InstantPaymentTypes[];
 
     /**
      * Instant Payment methods derived from the instantPaymentTypes property

packages/lib/src/core/ProcessResponse/PaymentMethodsResponse/PaymentMethodsResponse.ts

@@ -12,12 +12,17 @@ class PaymentMethodsResponse {
         this.storedPaymentMethods = response ? processStoredPaymentMethods(response.storedPaymentMethods, options) : [];
     }
 
+    private mapCreatedComponentType(pmType: string): string {
+        // Components created as 'card' need to be matched with paymentMethod response objects with type 'scheme'
+        return pmType === 'card' ? 'scheme' : pmType;
+    }
+
     has(paymentMethod: string): boolean {
-        return Boolean(this.paymentMethods.find(pm => pm.type === paymentMethod));
+        return Boolean(this.paymentMethods.find(pm => pm.type === this.mapCreatedComponentType(paymentMethod)));
     }
 
     find(paymentMethod: string): PaymentMethod {
-        return this.paymentMethods.find(pm => pm.type === paymentMethod);
+        return this.paymentMethods.find(pm => pm.type === this.mapCreatedComponentType(paymentMethod));
     }
 }