@rebilly/framepay-react 2.0.1 → 2.1.0

package/test/e2e/local-server.mjs

@@ -0,0 +1,12 @@
+/**
+ * Not used in e2e test, just for run the manual preview
+ */
+
+import server from './server.mjs';
+
+(async function() {
+    const { app } = await server();
+    app.use(`/`, (req, res) => {
+        res.redirect('/checkout-combined');
+    });
+})();

package/test/e2e/server.mjs

@@ -0,0 +1,43 @@
+import express from 'express';
+import path from 'path';
+import fs from 'fs';
+import portfinder from 'portfinder';
+import AutoEncryptLocalhost from '@small-tech/auto-encrypt-localhost';
+import HttpServer from '@small-tech/auto-encrypt-localhost/lib/HttpServer.js';
+import { fileURLToPath } from 'url';
+
+// __dirname is not available in esmodules, so we must build it
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const app = express();
+
+const staticFiles = path.resolve(__dirname, './build');
+
+app.use(express.static(staticFiles));
+
+const addDirRoutes = (dir, category) => {
+    fs.readdirSync(dir)
+        .filter(name => !!name.includes('.html'))
+        .forEach((name) => {
+            const basename = path.basename(name, path.extname(name));
+            const url = category ? `/${category}/${basename}` : `/${basename}`;
+            app.use(url, express.static(path.resolve(dir, name)));
+        });
+};
+
+addDirRoutes(path.resolve(__dirname, './build'), '');
+
+export default function() {
+    return new Promise((resolve) => {
+        portfinder.getPort((err, port) => {
+            // Do not create a http redirect server
+            HttpServer.instance = true;
+
+            const server = AutoEncryptLocalhost.https.createServer(app);
+            server.listen(port);
+            console.log(`Running at https://localhost:${port}`);
+            resolve({ port, server, app });
+        });
+    });
+};

package/test/e2e/specs/bank-separate.cy.ts

@@ -0,0 +1,27 @@
+describe('bank-separate', () => {
+    beforeEach(() => {
+        cy.visit({ url: '/bank-separate' });
+    });
+
+    it('should load the page', () => {
+        cy.title().should('eq', 'Test Bank Page Separate Fields');
+    });
+
+    it('should inject the bank iframes into the page', () => {
+        cy.get('iframe#bbanAccountType');
+        cy.get('iframe#bbanAccountNumber');
+        cy.get('iframe#bbanRoutingNumber');
+    });
+
+    it('should call the on-ready BankAccountType element hook', () => {
+        cy.get('#events-bankAccountType-onReady-true');
+    });
+
+    it('should call the on-ready BankAccountNumber element hook', () => {
+        cy.get('#events-bankAccountNumber-onReady-true');
+    });
+
+    it('should call the on-ready BankRoutingNumber element hook', () => {
+        cy.get('#events-bankRoutingNumber-onReady-true');
+    });
+});

package/test/e2e/specs/card-separate-brands.cy.ts

@@ -0,0 +1,70 @@
+describe('card-separate-brands', () => {
+    beforeEach(() => {
+        cy.visit({ url: '/card-separate-brands' });
+    });
+
+    it('should load the page', () => {
+        cy.title().should(
+            'eq',
+            'Test Card Page Separate Fields allowed Brands'
+        );
+    });
+
+    it('should inject the card iframes into the page', () => {
+        cy.get('iframe#cardNumber');
+        cy.get('iframe#cardCvv');
+        cy.get('iframe#cardExpiration');
+    });
+
+    it('should be call the on-ready card element hook', () => {
+        cy.get('#events-number-onReady-true');
+    });
+
+    it('should be call the on-ready cvv element hook', () => {
+        cy.get('#events-cvv-onReady-true');
+    });
+
+    it('should be call the on-ready expiry element hook', () => {
+        cy.get('#events-expiry-onReady-true');
+    });
+
+    it('should decline the MasterCard by default', () => {
+        cy.get('#events-number-onReady-true');
+
+        cy.iframe('iframe#cardNumber')
+            .findByTestId('cardnumber')
+            .type('4111 1111 1111 1111');
+
+        cy.get('#events-number-onChange-error-code-unavailable-card-brand');
+    });
+
+    it('should allow the Visa after update and decline after restore', () => {
+        cy.iframe('iframe#cardNumber')
+            .findByTestId('cardnumber')
+            .type('4111 1111 1111 1111');
+
+        cy.iframe('iframe#cardCvv')
+            .findByTestId('cvv')
+            .type('123');
+
+        cy.iframe('iframe#cardExpiration').within(() => {
+            const expiry =
+                String('0' + (new Date().getMonth() + 1)).substr(-2) +
+                String(new Date().getFullYear()).substr(-2);
+
+            cy.findByTestId('exp-date').type(expiry);
+        });
+
+        cy.get('#events-number-onChange-error-code-unavailable-card-brand');
+
+        cy.get('#btn-update').click();
+
+        cy.get(
+            '#events-number-onChange-error-code-unavailable-card-brand'
+        ).should('not.exist');
+
+        cy.get('#btn-restore').click();
+
+        cy.get('#events-number-onChange-error-code-unavailable-card-brand');
+    });
+});

package/test/e2e/specs/card-separate.cy.ts

@@ -0,0 +1,27 @@
+describe('card-separate', () => {
+    beforeEach(() => {
+        cy.visit({ url: '/card-separate' });
+    });
+
+    it('should load the page', () => {
+        cy.title().should('eq', 'Test Card Page Separate Fields');
+    });
+
+    it('should inject the card iframes into the page', () => {
+        cy.get('iframe#cardNumber');
+        cy.get('iframe#cardCvv');
+        cy.get('iframe#cardExpiration');
+    });
+
+    it('should be call the on-ready card element hook', () => {
+        cy.get('#events-number-onReady-true');
+    });
+
+    it('should be call the on-ready cvv element hook', () => {
+        cy.get('#events-cvv-onReady-true');
+    });
+
+    it('should be call the on-ready expiry element hook', () => {
+        cy.get('#events-expiry-onReady-true');
+    });
+});

package/test/e2e/specs/checkout-combined.cy.ts

@@ -0,0 +1,24 @@
+describe('checkout-combined', () => {
+    beforeEach(() => {
+        cy.visit({ url: '/checkout-combined' });
+    });
+
+    it('should load the page', () => {
+        cy.title().should('eq', 'Test Checkout Page Combined Field');
+    });
+
+    it('should inject the card iframe into the page', () => {
+        cy.get('iframe#card');
+    });
+
+    it('should be call the on-ready hook', () => {
+        cy.get('#events-onReady-true');
+    });
+
+    it('should call the on-change hook', () => {
+        cy.get('#events-onReady-true');
+        cy.get('#submit').click();
+        cy.get('#key-onChange');
+        cy.get('#token-data-code-invalid-payment-card');
+    });
+});

package/test/e2e/specs/google-pay.cy.ts

@@ -0,0 +1,13 @@
+describe('google-pay', () => {
+    beforeEach(() => {
+        cy.visit({ url: '/google-pay' });
+    });
+
+    it('should load the page', () => {
+        cy.title().should('eq', 'Test Google Pay');
+    });
+
+    it('should inject the Google pay iframe into the page', () => {
+        cy.get('iframe#googlePay');
+    });
+});

package/test/e2e/specs/iban.cy.ts

@@ -0,0 +1,17 @@
+describe('iban', () => {
+    beforeEach(() => {
+        cy.visit({ url: '/iban' });
+    });
+
+    it('should load the page', () => {
+        cy.title().should('eq', 'Test IBAN Field');
+    });
+
+    it('should inject the card iframe into the page', () => {
+        cy.get('iframe#iban');
+    });
+
+    it('should call the on-ready iban element hook', () => {
+        cy.get('#events-iban-onReady-true');
+    });
+});

package/test/e2e/specs/multiple-methods.cy.ts

@@ -0,0 +1,130 @@
+describe('multiple-methods', () => {
+    beforeEach(() => {
+        cy.visit({ url: '/multiple-methods' });
+    });
+
+    it('should load the page', () => {
+        cy.title().should('eq', 'Test Multiple Methods');
+    });
+
+    it('should call the on-ready card element hook', () => {
+        cy.get('#events-card-onReady-true');
+    });
+
+    it('should init with payment-card method by default', () => {
+        cy.get('#events-card-onReady-true');
+        cy.get('#events-bankAccountType-onReady-false');
+        cy.get('#events-bankAccountNumber-onReady-false');
+        cy.get('#events-bankRoutingNumber-onReady-false');
+        cy.get('#events-iban-onReady-false');
+    });
+
+    it('should load other methods', () => {
+        cy.get('#events-card-onReady-true');
+
+        cy.get('#set-active-element-bank').click();
+
+        // check other methods are disabled
+        cy.get('#events-card-onReady-false');
+        cy.get('#events-iban-onReady-false');
+
+        // check bank is loaded
+        cy.get('#events-bankAccountNumber-onReady-true');
+        cy.get('#events-bankAccountType-onReady-true');
+        cy.get('#events-bankRoutingNumber-onReady-true');
+
+        // load IBAN
+        cy.get('#set-active-element-iban').click();
+
+        // check other methods are disabled
+        cy.get('#events-card-onReady-false');
+        cy.get('#events-bankAccountType-onReady-false');
+        cy.get('#events-bankAccountNumber-onReady-false');
+        cy.get('#events-bankRoutingNumber-onReady-false');
+
+        // check IBAN is loaded
+        cy.get('#events-iban-onReady-true');
+
+        // load Google Pay
+        cy.get('#set-active-element-googlepay').click();
+
+        // check other methods are disabled
+        cy.get('#events-card-onReady-false');
+        cy.get('#events-bankAccountType-onReady-false');
+        cy.get('#events-bankAccountNumber-onReady-false');
+        cy.get('#events-bankRoutingNumber-onReady-false');
+        cy.get('#events-iban-onReady-false');
+
+        // check Google Pay is loaded
+        cy.iframe('#googlePay');
+    });
+
+    it('should generate the card token', () => {
+        cy.get('#events-card-onReady-true');
+
+        cy.iframe('iframe#card').within(() => {
+            const cardNumber = '4111111111111111';
+            const expiry =
+                String('0' + (new Date().getMonth() + 1)).substr(-2) +
+                String(new Date().getFullYear()).substr(-2);
+            const cvv = '123';
+
+            cy.findByTestId('cardnumber').type(cardNumber);
+            cy.findByTestId('exp-date').type(expiry);
+            cy.findByTestId('cvv').type(cvv);
+        });
+
+        cy.get('#submit').click();
+
+        cy.get('#events-card-onChange-valid-true');
+        cy.get('#events-card-onChange-source-card');
+        cy.get('#token-error-false');
+        cy.get('#token-data-method-payment-card');
+        cy.get('#token-data-paymentInstrument-brand-Visa');
+    });
+
+    it('should generate the bank token', () => {
+        cy.get('#set-active-element-bank').click();
+
+        cy.get('#events-bankAccountType-onReady-true');
+        cy.get('#events-bankAccountNumber-onReady-true');
+        cy.get('#events-bankRoutingNumber-onReady-true');
+
+        cy.iframe('iframe#bbanAccountType')
+            .findByTestId('savings')
+            .click();
+        cy.iframe('iframe#bbanAccountNumber')
+            .findByTestId('bbanAccountNumber')
+            .type('22222222');
+        cy.iframe('iframe#bbanRoutingNumber')
+            .findByTestId('bbanRoutingNumber')
+            .type('11111111');
+
+        cy.get('#submit').click();
+
+        cy.get('#events-bankAccountNumber-onChange-valid-true');
+        cy.get('#events-bankAccountNumber-onChange-source-bankAccountNumber');
+        cy.get('#events-bankRoutingNumber-onChange-valid-true');
+        cy.get('#events-bankRoutingNumber-onChange-source-bankRoutingNumber');
+        cy.get('#events-bankAccountType-onChange-valid-true');
+        cy.get('#events-bankAccountType-onChange-source-bankAccountType');
+        cy.get('#token-error-false');
+        cy.get('#token-data-method-ach');
+    });
+
+    it('should generate the iban token', () => {
+        cy.get('#set-active-element-iban').click();
+
+        cy.get('#events-iban-onReady-true');
+
+        cy.iframe('iframe#iban')
+            .findByTestId('iban')
+            .type('DE89 3704 0044 0532 0130 00');
+
+        cy.get('#submit').click();
+
+        cy.get('#events-iban-onChange-valid-true');
+        cy.get('#token-error-false');
+        cy.get('#token-data-method-ach');
+    });
+});

package/test/e2e/specs/paypal.cy.ts

@@ -0,0 +1,13 @@
+describe('paypal', () => {
+    beforeEach(() => {
+        cy.visit({ url: '/paypal' });
+    });
+
+    it('should load the page', () => {
+        cy.title().should('eq', 'Test Paypal');
+    });
+
+    it('should inject the PayPal iframe into the page', () => {
+        cy.get('iframe[title="PayPal"]');
+    });
+});

package/test/e2e/specs/react-version.cy.ts

@@ -0,0 +1,12 @@
+const pkg = require('../../../package.json');
+const expectedVersion =
+    Cypress.env('REACT_VERSION') ?? pkg.devDependencies.react.slice(1);
+
+it(`should render with correct react version (${expectedVersion})`, () => {
+    cy.visit('/');
+    cy.get('#react-version')
+        .invoke('text')
+        .should(actualVersion => {
+            expect(actualVersion.startsWith(expectedVersion)).to.be.true;
+        });
+});

package/test/e2e/switch-react-version.js

@@ -0,0 +1,42 @@
+/**
+ * Tiny util to switch react version in test
+ *
+ * @type {string}
+ */
+const fs = require('fs');
+const pkg = require('../../package');
+
+const version = process.env.REACT_VERSION;
+const clean = !Boolean(version) || version === 'clean';
+
+
+const template = {
+    'prop-types': './test/e2e/assets/prop-types.js',
+    'react': `./test/e2e/assets/react-${version}.js`,
+    'react-dom': `./test/e2e/assets/react-dom-${version}.js`
+};
+
+
+/**
+ * Delete aliases
+ */
+if (clean) {
+    if (pkg.alias) {
+        Object.keys(template).forEach(key => delete pkg.alias[key]);
+
+        if (!Object.keys(pkg.alias).length) {
+            delete pkg.alias;
+        }
+    }
+} else {
+    pkg.alias = pkg.alias || {};
+    Object.assign(pkg.alias, template);
+}
+
+if (!clean) {
+    console.log(`>>> REACT_VERSION ${version} <<<`);
+} else {
+    console.log(`>>> CLEAN REACT ALIAS <<<`);
+}
+
+fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 4), 'utf8');

package/test/e2e/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "lib": ["es5", "dom"],
+        "types": ["cypress", "@testing-library/cypress"]
+    },
+    "include": ["**/*.ts", "./cypress.d.ts"]
+}

package/test/unit/jest.config.js

@@ -0,0 +1,29 @@
+module.exports = {
+  rootDir: '../..',
+  testEnvironment: 'jsdom',
+  testPathIgnorePatterns: [
+    '.*/e2e/.*',
+  ],
+  transform: {
+    '.(ts|tsx)': [
+      'ts-jest',
+      {
+        tsconfig: 'tsconfig.spec.json',
+        diagnostics: {
+          warnOnly: true,
+        },
+      },
+    ],
+  },
+  moduleFileExtensions: [
+    'js',
+    'json',
+    'ts',
+    'tsx',
+  ],
+  moduleDirectories: [
+    'node_modules',
+    'src',
+    'types',
+  ],
+}

package/test/unit/specs/declaration-mock.spec.tsx

@@ -0,0 +1,143 @@
+import { Arg, Substitute } from '@fluffy-spoon/substitute';
+import { render } from '@testing-library/react';
+import * as React from 'react';
+
+/**
+ * @see https://www.npmjs.com/package/@fluffy-spoon/substitute
+ */
+describe('Mock functionality works correctly', () => {
+    it('String property of interface', () => {
+        interface Example {
+            readonly bar: string;
+        }
+
+        const baz = 'baz';
+        const foo = Substitute.for<Example>();
+
+        foo.bar.returns(baz);
+        const call1 = foo.bar;
+        const call2 = foo.bar;
+        expect(call1).toEqual(baz);
+        expect(call2).toEqual(baz);
+    });
+
+    it('Can mock parent interface', () => {
+        interface NestedApi {
+            readonly nestedMethod: () => boolean;
+        }
+
+        interface SuperParent {
+            readonly property1: string;
+            readonly method1: () => number;
+            readonly api: NestedApi;
+        }
+
+        interface Parent extends SuperParent {
+            readonly property2: string;
+            readonly method2: (arg: any) => string;
+        }
+
+        interface Child extends Parent {
+            readonly bar: string;
+        }
+
+        const params = Substitute.for<Child>();
+
+        params.property1.returns('property1-value');
+        params.property2.returns('property2-value');
+        params.method1().returns(10);
+        params.method2(Arg.any()).returns('method2-value');
+
+        params.api.nestedMethod().returns(false);
+
+        expect(params.property1).toEqual('property1-value');
+        expect(params.property2).toEqual('property2-value');
+        expect(params.method1()).toEqual(10);
+        expect(params.method2(10)).toEqual('method2-value');
+
+        expect(params.api.nestedMethod()).toEqual(false);
+    });
+
+    it('Extended calls on the same level works correctly', () => {
+        interface Element {
+            readonly destroy: () => void;
+        }
+
+        interface ParentMethod {
+            readonly mount: () => Element;
+        }
+
+        interface ChildMethod1 extends ParentMethod {
+            readonly name: string;
+        }
+
+        interface ChildMethod2 extends ParentMethod {
+            readonly name: string;
+        }
+
+        interface Api {
+            readonly child1: ChildMethod1;
+            readonly child2: ChildMethod2;
+        }
+
+        const api = Substitute.for<Api>();
+        const spy1 = jest.fn();
+        const spy2 = jest.fn();
+
+        api.child1.mount().returns(Substitute.for<Element>());
+
+        api.child2.mount().returns(Substitute.for<Element>());
+
+        api.child1
+            .mount()
+            .destroy()
+
+            .mimicks(spy1);
+
+        api.child2
+            .mount()
+            .destroy()
+
+            .mimicks(spy2);
+
+        const el = api.child1.mount();
+        el.destroy();
+
+        expect(spy1).toBeCalledTimes(1);
+        expect(spy2).not.toHaveBeenCalled();
+
+        interface ComponentProps {
+            readonly api: Api;
+        }
+
+        interface ComponentState {
+            readonly element: Element;
+        }
+
+        class TmpParentComponent extends React.Component<
+            ComponentProps,
+            ComponentState
+        > {
+            componentDidMount() {
+                this.setState({ element: this.props.api.child1.mount() });
+            }
+
+            componentWillUnmount() {
+                this.state.element.destroy();
+            }
+
+            render() {
+                return <div />;
+            }
+        }
+
+        const { unmount } = render(<TmpParentComponent api={api} />);
+        expect(spy1).toBeCalledTimes(1);
+        expect(spy2).not.toHaveBeenCalled();
+
+        unmount();
+
+        expect(spy1).toBeCalledTimes(2);
+        expect(spy2).not.toHaveBeenCalled();
+    });
+});

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "outDir": "build",
+        "rootDir": "src",
+        "moduleResolution": "node",
+        "module": "commonjs",
+        "declaration": true,
+        "inlineSourceMap": true,
+        "esModuleInterop": true,
+        "strict": true,
+        "noUnusedLocals": false,
+        "noUnusedParameters": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "traceResolution": false,
+        "listEmittedFiles": false,
+        "listFiles": false,
+        "pretty": true,
+        "lib": ["es2015", "dom"],
+        "typeRoots": [
+            "node_modules/@types",
+            "types",
+            "../../node_modules/@types"
+        ],
+        "jsx": "react"
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx", "types/**/*.d.ts"],
+    "exclude": ["node_modules/**", "*/**/**.spec.tsx"],
+    "compileOnSave": false
+}

package/tsconfig.spec.json

@@ -0,0 +1,13 @@
+{
+    "extends": "./tsconfig",
+    "compilerOptions": {
+        "strictNullChecks": false
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "test/**/*.ts",
+        "test/**/*.tsx",
+        "types/**/*.d.ts"
+    ]
+}