@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/RefreshOnChange.with.Tabs.test.js

@@ -0,0 +1,358 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { renderWithProviders, respondWith } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { isObject, isString } from '../utils/type-validators';
+import { vi } from 'vitest';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const getProps = () => ({
+    flowId: 'flow-id',
+    initialStep,
+    httpClient: vi.fn(async (input, init) => {
+        var _a, _b;
+        const payload = JSON.parse((_b = (_a = init === null || init === void 0 ? void 0 : init.body) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : `{}`);
+        const currency = isObject(payload) && isString(payload.currency) ? payload.currency : 'GBP';
+        const step = steps[currency];
+        return respondWith(step);
+    }),
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+describe('RefreshOnChange with Tabs', () => {
+    describe('given a oneOf schema with refresh-on-change and the child schemas contain tabs', () => {
+        it('selects the fist tab by default', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps())));
+            await waitFor(() => {
+                expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            });
+            expect(screen.getByText('IBAN')).toBeInTheDocument();
+        });
+        it('when configured, it does NOT trigger a refresh upon intitialisation', async () => {
+            const props = Object.assign(Object.assign({}, getProps()), { initialStep: steps.EUR_REFRESH });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            });
+            await waitFor(() => {
+                expect(props.httpClient).not.toHaveBeenCalled();
+            });
+        });
+        it('selects the first tab by default, even after a refresh-on-change', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps())));
+            await waitFor(() => {
+                expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            });
+            await user.click(screen.getByText('EUR'));
+            await user.click(screen.getByText('GBP'));
+            await waitFor(() => {
+                expect(screen.getByText('UK sort code')).toBeInTheDocument();
+            });
+        });
+        describe('when another value in the form has been entered and causes a refresh', () => {
+            it('selects the matching tab, not the first', async () => {
+                const mockHttpClient = vi.fn().mockImplementation(async (input, init) => respondWith(Object.assign(Object.assign({}, steps.GBP), { model: {
+                        currency: 'GBP',
+                        type: 'SwiftCode',
+                    } })));
+                const props = Object.assign(Object.assign({}, getProps()), { initialStep: steps.GBP, httpClient: mockHttpClient });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await user.click(screen.getByText('SWIFT'));
+                await user.type(screen.getByText('SWIFT / BIC code'), '12345');
+                await user.click(screen.getByText('IBAN'));
+                await user.type(screen.getByText('Refresh Field'), 'some value');
+                await user.tab();
+                await waitFor(() => {
+                    expect(mockHttpClient).toHaveBeenCalledTimes(1);
+                });
+                // we show the correct child content
+                await waitFor(() => {
+                    expect(screen.getByText('SWIFT / BIC code')).toBeInTheDocument();
+                });
+                // the correct tab is shown to be selected
+                expect(screen.getByRole('tab', { name: 'SWIFT' })).toHaveAttribute('aria-selected', 'true');
+            });
+        });
+    });
+});
+const currencyObjectSchema = {
+    type: 'object',
+    displayOrder: ['currency'],
+    properties: {
+        currency: {
+            title: 'Currency',
+            analyticsId: 'currency-select',
+            oneOf: [
+                {
+                    title: 'EUR',
+                    analyticsId: 'EUR',
+                    icon: { name: 'flag-eur' },
+                    description: 'Euro',
+                    const: 'EUR',
+                },
+                {
+                    title: 'GBP',
+                    analyticsId: 'GBP',
+                    icon: { name: 'flag-gbp' },
+                    description: 'British pound',
+                    const: 'GBP',
+                },
+            ],
+            refreshStepOnChange: true,
+            default: 'EUR',
+        },
+    },
+};
+const getGBPStep = () => ({
+    id: 'account',
+    type: 'form',
+    title: 'Enter their account details',
+    actions: [
+        {
+            title: 'Confirm',
+            url: '/submit',
+            type: 'primary',
+            method: 'POST',
+            $id: 'submit',
+        },
+    ],
+    schemas: [
+        {
+            allOf: [
+                currencyObjectSchema,
+                {
+                    title: 'Bank details',
+                    analyticsId: 'recipient-type',
+                    oneOf: [
+                        {
+                            title: 'Local bank account',
+                            type: 'object',
+                            analyticsId: 'SortCode',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'details', 'type'],
+                            properties: {
+                                name: {
+                                    title: 'Full name of the account holder',
+                                    type: 'string',
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['sortCode', 'accountNumber'],
+                                    properties: {
+                                        sortCode: {
+                                            title: 'UK sort code',
+                                            type: 'string',
+                                            placeholder: '40-30-20',
+                                            format: 'numeric',
+                                        },
+                                        accountNumber: {
+                                            title: 'Account number',
+                                            type: 'string',
+                                            placeholder: '12345678',
+                                            format: 'numeric',
+                                        },
+                                    },
+                                },
+                                type: {
+                                    const: 'SortCode',
+                                },
+                            },
+                        },
+                        {
+                            title: 'IBAN',
+                            type: 'object',
+                            analyticsId: 'Iban',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'details', 'type'],
+                            properties: {
+                                name: {
+                                    title: 'Full name of the account holder',
+                                    type: 'string',
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['bic', 'iban'],
+                                    properties: {
+                                        bic: {
+                                            title: 'Bank code (BIC/SWIFT)',
+                                            type: 'string',
+                                            hidden: true,
+                                            placeholder: "Please choose recipient's bank",
+                                        },
+                                        iban: {
+                                            title: 'IBAN',
+                                            type: 'string',
+                                            placeholder: 'DE12345678901234567890',
+                                            displayFormat: '**** **** **** **** **** **** **** ****',
+                                        },
+                                    },
+                                },
+                                type: {
+                                    const: 'Iban',
+                                },
+                            },
+                        },
+                        {
+                            title: 'SWIFT',
+                            type: 'object',
+                            analyticsId: 'SwiftCode',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'details', 'type'],
+                            properties: {
+                                name: {
+                                    title: 'Full name of the account holder',
+                                    type: 'string',
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['bic', 'accountNumber'],
+                                    properties: {
+                                        bic: {
+                                            title: 'SWIFT / BIC code',
+                                            type: 'string',
+                                            placeholder: 'BUKBGB22',
+                                        },
+                                        accountNumber: {
+                                            title: 'IBAN / Account number',
+                                            type: 'string',
+                                        },
+                                    },
+                                },
+                                type: {
+                                    const: 'SwiftCode',
+                                },
+                            },
+                        },
+                    ],
+                    control: 'tab',
+                },
+            ],
+            $id: 'form',
+        },
+        {
+            $id: '#refresh',
+            type: 'string',
+            title: 'Refresh Field',
+            refreshStepOnChange: true,
+        },
+    ],
+    refreshFormUrl: '/refresh',
+    model: {
+        currency: 'GBP',
+        details: {},
+    },
+    layout: [
+        { schema: { $ref: 'form' }, type: 'form' },
+        { schema: { $ref: '#refresh' }, type: 'form' },
+        { type: 'button', action: { $ref: 'submit' } },
+    ],
+});
+const getEURStep = (refreshable) => ({
+    id: 'account',
+    type: 'form',
+    title: 'Enter their account details',
+    actions: [
+        {
+            title: 'Confirm',
+            url: '/submit',
+            type: 'primary',
+            method: 'POST',
+            $id: 'submit',
+        },
+    ],
+    schemas: [
+        {
+            allOf: [
+                currencyObjectSchema,
+                Object.assign(Object.assign({ title: 'Bank details', analyticsId: 'recipient-type' }, (refreshable ? { refreshStepOnChange: true } : {})), { oneOf: [
+                        {
+                            title: 'Inside Europe',
+                            type: 'object',
+                            analyticsId: 'Iban',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'details', 'type'],
+                            properties: {
+                                name: {
+                                    title: 'Full name of the account holder',
+                                    type: 'string',
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['bic', 'iban'],
+                                    properties: {
+                                        bic: {
+                                            title: 'Bank code (BIC/SWIFT)',
+                                            type: 'string',
+                                            hidden: true,
+                                            placeholder: 'BARCGB22XXX',
+                                        },
+                                        iban: {
+                                            title: 'IBAN',
+                                            type: 'string',
+                                            placeholder: 'DE12345678901234567890',
+                                        },
+                                    },
+                                },
+                                type: {
+                                    const: 'Iban',
+                                },
+                            },
+                            required: ['type', 'name', 'details'],
+                        },
+                        {
+                            title: 'Outside Europe',
+                            type: 'object',
+                            analyticsId: 'SwiftCode',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'details', 'type'],
+                            properties: {
+                                name: {
+                                    title: 'Full name of the account holder',
+                                    type: 'string',
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['bic', 'accountNumber'],
+                                    properties: {
+                                        bic: {
+                                            title: 'SWIFT / BIC code',
+                                            type: 'string',
+                                            placeholder: 'BUKBGB22',
+                                        },
+                                        accountNumber: {
+                                            title: 'IBAN / Account number',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['bic', 'accountNumber'],
+                                },
+                                type: {
+                                    const: 'SwiftCode',
+                                },
+                            },
+                            required: ['type', 'name', 'details'],
+                        },
+                    ], control: 'tab', placeholder: 'Please select where you are sending to' }),
+            ],
+            $id: 'form',
+        },
+    ],
+    refreshFormUrl: '/refresh',
+    model: {
+        currency: 'EUR',
+        type: 'Iban',
+        details: {},
+    },
+    layout: [
+        { schema: { $ref: 'form' }, type: 'form' },
+        { type: 'button', action: { $ref: 'submit' } },
+    ],
+});
+const steps = {
+    GBP: getGBPStep(),
+    EUR: getEURStep(false),
+    EUR_REFRESH: getEURStep(true),
+};
+const initialStep = steps.EUR;

package/build/tests/RefreshOnChangePreserve.test.js

@@ -0,0 +1,224 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { renderWithProviders, respondWith } from '../test-utils';
+import { abortableDelay } from '../test-utils/fetch-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { vi } from 'vitest';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const getProps = () => ({
+    flowId: 'flow-id',
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+const initialSchema = {
+    $id: '#schema',
+    type: 'object',
+    displayOrder: ['name', 'card'],
+    properties: {
+        name: { title: 'Name', type: 'string', refreshStepOnChange: true },
+        card: {
+            type: 'string',
+            persistAsync: {
+                url: '/persist-card',
+                method: 'POST',
+                param: 'card',
+                idProperty: 'token',
+                schema: { type: 'string', title: 'Card Number' },
+            },
+        },
+    },
+};
+const submitButton = {
+    type: 'button',
+    title: 'Submit',
+    action: { url: '/submit' },
+};
+const getStep = (schema, overrides) => {
+    var _a;
+    return (Object.assign({ id: 'step-id', title: 'Initial Step Title', schemas: [schema], layout: [
+            {
+                type: 'form',
+                schemaId: (_a = schema.$id) !== null && _a !== void 0 ? _a : '',
+            },
+            submitButton,
+        ], refreshUrl: '/refresh' }, overrides));
+};
+const finalStep = {
+    id: 'final-step',
+    title: 'Final Step Title',
+    layout: [],
+    schemas: [],
+};
+describe('Refresh On Change Preserve', () => {
+    describe('When the schema contains a persisted field, and something else refreshes the step', () => {
+        var _a;
+        const cases = [
+            [
+                'Case 1: refresh on change without altering the schema or layout',
+                getStep(initialSchema),
+                getStep(initialSchema, {
+                    title: 'Refreshed Step Title',
+                    model: { name: 'John', card: 'TOKEN' },
+                }),
+            ],
+            [
+                'Case 2: refresh on change with altered layout',
+                getStep(initialSchema),
+                getStep(initialSchema, {
+                    title: 'Refreshed Step Title',
+                    layout: [
+                        {
+                            type: 'paragraph',
+                            text: 'The step has been refreshed',
+                        },
+                        {
+                            type: 'form',
+                            schemaId: (_a = initialSchema.$id) !== null && _a !== void 0 ? _a : '',
+                        },
+                        submitButton,
+                    ],
+                    model: { name: 'John', card: 'TOKEN' },
+                }),
+            ],
+            [
+                'Case 3: refresh on change without the model for the persisted field',
+                getStep(initialSchema),
+                getStep(initialSchema, {
+                    title: 'Refreshed Step Title',
+                    model: { name: 'John' },
+                }),
+            ],
+        ];
+        describe.each(cases)('%s', (_, initialStep, refreshedStep) => {
+            it('should preserve the value of the persisted field', async () => {
+                const httpClient = vi.fn().mockImplementation(async (input, init) => {
+                    var _a;
+                    await abortableDelay(1, (_a = init === null || init === void 0 ? void 0 : init.signal) !== null && _a !== void 0 ? _a : null);
+                    switch (input) {
+                        case '/persist-card':
+                            return respondWith({ token: 'TOKEN' });
+                        case '/refresh':
+                            return respondWith(refreshedStep);
+                        case '/submit':
+                            return respondWith(finalStep);
+                    }
+                });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps(), { initialStep: initialStep, httpClient: httpClient })));
+                await waitFor(() => {
+                    expect(screen.getByText('Initial Step Title')).toBeInTheDocument();
+                });
+                const button = screen.getByRole('button', { name: 'Submit' });
+                await user.type(screen.getByLabelText('Card Number'), '1234 2345 3456 4567');
+                await user.tab();
+                await user.type(screen.getByLabelText('Name'), 'John');
+                await waitFor(() => {
+                    expect(button).toBeDisabled();
+                });
+                await waitFor(() => {
+                    expect(screen.getByText('Refreshed Step Title')).toBeInTheDocument();
+                });
+                await waitFor(() => {
+                    expect(screen.getByRole('button', { name: 'Submit' })).toBeEnabled();
+                });
+                expect(screen.getByLabelText('Card Number')).toHaveValue('1234 2345 3456 4567');
+                await user.click(screen.getByRole('button', { name: 'Submit' }));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({ body: '{"name":"John","card":"TOKEN"}' }));
+                });
+                await waitFor(() => {
+                    expect(screen.getByText('Final Step Title')).toBeInTheDocument();
+                });
+            });
+        });
+    });
+    describe('Given a base64url string schema', () => {
+        const initialStep = {
+            id: 'initial-step',
+            title: 'Initial Step Title',
+            layout: [
+                {
+                    type: 'form',
+                    schemaId: '#schema',
+                },
+                submitButton,
+            ],
+            schemas: [
+                {
+                    $id: '#schema',
+                    type: 'object',
+                    displayOrder: ['file', 'tnc'],
+                    properties: {
+                        file: {
+                            type: 'string',
+                            format: 'base64url',
+                            title: 'Upload a file',
+                        },
+                        tnc: {
+                            type: 'boolean',
+                            title: 'I agree to the terms and conditions',
+                            refreshStepOnChange: true,
+                        },
+                    },
+                },
+            ],
+            refreshUrl: '/refresh',
+        };
+        const expectedBase64url = 'data:image/png;base64,Zm9v';
+        describe('When a base64url string schema has a value and the step is refreshed', () => {
+            const file = new File(['foo'], 'passport.png', { type: 'image/png' });
+            const refreshedStep = Object.assign(Object.assign({}, initialStep), { title: 'Refreshed Step Title', model: { file: expectedBase64url, tnc: true } });
+            const httpClient = vi.fn().mockImplementation(async (input, init) => {
+                var _a;
+                await abortableDelay(1, (_a = init === null || init === void 0 ? void 0 : init.signal) !== null && _a !== void 0 ? _a : null);
+                switch (input) {
+                    case '/initial':
+                        return respondWith(initialStep);
+                    case '/refresh':
+                        return respondWith(refreshedStep);
+                    case '/submit':
+                        return respondWith(finalStep);
+                }
+            });
+            it('should preserve the value of the persisted field', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps(), { initialAction: { url: '/initial' }, httpClient: httpClient })));
+                await waitFor(() => {
+                    expect(screen.getByText('Initial Step Title')).toBeInTheDocument();
+                });
+                await user.upload(screen.getByTestId('uploadInput'), file);
+                await user.click(screen.getByLabelText('I agree to the terms and conditions'));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenLastCalledWith('/refresh', expect.objectContaining({ body: `{"file":"${expectedBase64url}","tnc":true}` }));
+                });
+                await waitFor(() => {
+                    expect(screen.getByText('Refreshed Step Title')).toBeInTheDocument();
+                });
+                // refresh a second time
+                await user.click(screen.getByLabelText('I agree to the terms and conditions'));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenLastCalledWith('/refresh', expect.objectContaining({ body: `{"file":"${expectedBase64url}","tnc":false}` }));
+                });
+                await user.click(screen.getByRole('button', { name: 'Submit' }));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({ body: `{"file":"${expectedBase64url}","tnc":true}` }));
+                });
+            });
+        });
+        describe('When a base64url string schema has a step.model value and the step is submitted', () => {
+            it('should submit the base64url string value', async () => {
+                const step = Object.assign(Object.assign({}, initialStep), { title: 'Step Title', model: { file: expectedBase64url } });
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps(), { initialStep: step, httpClient: httpClient })));
+                await waitFor(() => {
+                    expect(screen.getByText('Step Title')).toBeInTheDocument();
+                });
+                await user.click(screen.getByRole('button', { name: 'Submit' }));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({ body: `{"file":"${expectedBase64url}","tnc":false}` }));
+                });
+            });
+        });
+    });
+});