@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/RefreshOnChange.test.js

@@ -0,0 +1,233 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithProviders } from '../test-utils';
+import { respondWith, respondWithDelay } from '../test-utils/fetch-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { vi } from 'vitest';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const cases = [
+    ['refreshOnChange', { refreshStepOnChange: true }],
+    ['onChange (of type refresh)', { onChange: { type: 'refresh' } }],
+];
+describe.each(cases)('given a step with a string schema that has %s', (_, refreshOnChangeProp) => {
+    const step = {
+        id: 'step',
+        title: 'Step',
+        layout: [
+            {
+                type: 'form',
+                schemaId: '#form',
+            },
+        ],
+        schemas: [
+            Object.assign({ $id: '#form', type: 'string', title: 'IBAN', minLength: 5, maxLength: 7 }, refreshOnChangeProp),
+        ],
+        refreshUrl: '/refresh',
+    };
+    const optionalSchemaStep = {
+        id: 'step',
+        title: 'Step',
+        layout: [
+            {
+                type: 'form',
+                schemaId: '#form',
+            },
+        ],
+        schemas: [
+            {
+                type: 'object',
+                $id: '#form',
+                displayOrder: ['iban'],
+                properties: {
+                    iban: Object.assign({ type: 'string', title: 'IBAN', minLength: 5, maxLength: 7 }, refreshOnChangeProp),
+                },
+            },
+        ],
+        refreshUrl: '/refresh',
+    };
+    describe('when the schema is initially empty', () => {
+        describe('and is updated to a valid value', () => {
+            it('triggers a refresh (debounced)', async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: step, httpClient: httpClient, onCompletion: () => { }, onError: () => { } }));
+                await user.type(screen.getByLabelText('IBAN'), '123456');
+                await act(async () => vi.advanceTimersByTime(2000));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenCalledWith('/refresh', expect.anything());
+                });
+            });
+        });
+        describe('and is updated to an invalid value', () => {
+            it('triggers does not trigger a refresh', async () => {
+                const httpClient = vi
+                    .fn()
+                    .mockImplementationOnce(async (input, init) => {
+                    return respondWithDelay(Object.assign(Object.assign({}, optionalSchemaStep), { model: (await JSON.parse(init === null || init === void 0 ? void 0 : init.body)) }), 500, { status: 200 });
+                });
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: optionalSchemaStep, httpClient: httpClient, onCompletion: () => { }, onError: () => { } }));
+                await user.type(screen.getByLabelText('IBAN'), '1');
+                await act(async () => vi.advanceTimersByTime(500));
+                await user.type(screen.getByLabelText('IBAN'), '2');
+                await act(async () => vi.advanceTimersByTime(500));
+                await user.type(screen.getByLabelText('IBAN'), '3');
+                await act(async () => vi.advanceTimersByTimeAsync(10000));
+                await waitFor(() => {
+                    expect(httpClient).not.toHaveBeenCalled();
+                });
+            });
+        });
+    });
+    describe('when the schema has a valid value', () => {
+        describe('and the value is updated to something that is also valid', () => {
+            it('triggers a refresh (debounced)', async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: step, httpClient: httpClient, onCompletion: () => { }, onError: () => { } }));
+                await user.type(screen.getByLabelText('IBAN'), '123456');
+                await act(async () => vi.advanceTimersByTime(2000));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenCalledWith('/refresh', expect.anything());
+                });
+                httpClient.mockClear();
+                await user.type(screen.getByLabelText('IBAN'), '7');
+                await act(async () => vi.advanceTimersByTime(2000));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenCalledWith('/refresh', expect.anything());
+                });
+            });
+            it('immediately aborts the previous request (debounced)', async () => {
+                let abortSignalCalled = false;
+                const httpClient = vi.fn(async (input, init) => {
+                    var _a;
+                    (_a = init === null || init === void 0 ? void 0 : init.signal) === null || _a === void 0 ? void 0 : _a.addEventListener('abort', () => {
+                        abortSignalCalled = true;
+                    });
+                    return new Response(null, { status: 304 });
+                });
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: step, httpClient: httpClient, onCompletion: () => { }, onError: () => { } }));
+                await user.type(screen.getByLabelText('IBAN'), '123456');
+                await act(async () => vi.advanceTimersByTime(2000));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenCalledWith('/refresh', expect.anything());
+                });
+                await user.type(screen.getByLabelText('IBAN'), '7');
+                expect(abortSignalCalled).toBe(true);
+            });
+        });
+        describe('and the value is updated to something that is invalid', () => {
+            it('triggers a refresh (debounced)', async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: optionalSchemaStep, httpClient: httpClient, onCompletion: () => { }, onError: () => { } }));
+                await user.type(screen.getByLabelText('IBAN'), '1234567');
+                await act(async () => vi.advanceTimersByTime(2000));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenCalledWith('/refresh', expect.anything());
+                });
+                httpClient.mockClear();
+                await user.type(screen.getByLabelText('IBAN'), '8');
+                await act(async () => vi.advanceTimersByTime(500));
+                await user.type(screen.getByLabelText('IBAN'), '9');
+                await act(async () => vi.advanceTimersByTime(500));
+                await user.type(screen.getByLabelText('IBAN'), '0');
+                await act(async () => vi.advanceTimersByTime(500));
+                await user.type(screen.getByLabelText('IBAN'), '1');
+                await act(async () => vi.advanceTimersByTime(500));
+                await waitFor(() => {
+                    expect(httpClient).not.toHaveBeenCalledWith('/refresh', expect.anything());
+                });
+            });
+        });
+    });
+    describe('when the schema has an invalid value', () => {
+        describe('and the value is updated to something that valid', () => {
+            it('triggers a refresh (debounced)', async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: step, httpClient: httpClient, onCompletion: () => { }, onError: () => { } }));
+                await user.type(screen.getByLabelText('IBAN'), '123');
+                await act(async () => vi.advanceTimersByTime(2000));
+                await waitFor(() => {
+                    expect(httpClient).not.toHaveBeenCalledWith('/refresh', expect.anything());
+                });
+                httpClient.mockClear();
+                await user.type(screen.getByLabelText('IBAN'), '456');
+                await act(async () => vi.advanceTimersByTime(2000));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenCalledWith('/refresh', expect.anything());
+                });
+            });
+        });
+        describe('and the value is updated to something that is also invalid', () => {
+            it('triggers does not trigger a refresh', async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: step, httpClient: httpClient, onCompletion: () => { }, onError: () => { } }));
+                await user.type(screen.getByLabelText('IBAN'), '123');
+                await act(async () => vi.advanceTimersByTime(2000));
+                await waitFor(() => {
+                    expect(httpClient).not.toHaveBeenCalledWith('/refresh', expect.anything());
+                });
+                httpClient.mockClear();
+                await user.type(screen.getByLabelText('IBAN'), '4');
+                await act(async () => vi.advanceTimersByTime(2000));
+                await waitFor(() => {
+                    expect(httpClient).not.toHaveBeenCalledWith('/refresh', expect.anything());
+                });
+            });
+        });
+    });
+});
+describe('when a schema has persist-async and we trigger a refresh before the token is set', () => {
+    const initialStep = {
+        id: 'step',
+        title: 'Step',
+        schemas: [
+            {
+                $id: '#form',
+                type: 'object',
+                displayOrder: ['token'],
+                properties: {
+                    token: {
+                        type: 'string',
+                        persistAsync: {
+                            url: '/persist',
+                            method: 'POST',
+                            param: 'cardNumber',
+                            idProperty: 'token',
+                            schema: {
+                                type: 'string',
+                                title: 'Card number',
+                            },
+                        },
+                    },
+                },
+            },
+        ],
+        layout: [
+            {
+                type: 'form',
+                schemaId: '#form',
+            },
+            {
+                type: 'button',
+                title: 'Refresh',
+                behavior: { type: 'refresh' },
+            },
+        ],
+        refreshUrl: '/refresh',
+    };
+    it('makes the refresh request without the token', async () => {
+        const httpClient = vi.fn(async (input) => {
+            if (input === '/persist') {
+                return respondWithDelay(null, 500, { status: 404 });
+            }
+            if (input === '/refresh') {
+                return respondWith(null, { status: 304 });
+            }
+            throw new Error(`Unexpected request to ${input}`);
+        });
+        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: initialStep, httpClient: httpClient, onCompletion: () => { }, onError: () => { } }));
+        await user.type(screen.getByLabelText('Card number'), '1234567890');
+        await act(async () => vi.advanceTimersByTime(1000));
+        await user.click(screen.getByRole('button', { name: 'Refresh' }));
+        expect(httpClient).toHaveBeenCalledWith('/refresh', expect.objectContaining({ body: '{}' }));
+    });
+});

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

@@ -0,0 +1,348 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { renderWithProviders, respondWith } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { isObject, isString } from '../utils/type-validators';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const getProps = () => ({
+    flowId: 'flow-id',
+    initialStep,
+    httpClient: (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 SegmentedControl', () => {
+    describe('given a oneOf schema with refresh-on-change and the child schemas contain a oneOf with control segmented', () => {
+        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('selects the first tab by default, even after a refresh-on-change', async () => {
+            const props = getProps();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            await user.click(screen.getByText('GBP')); // selects GBP
+            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',
+            control: 'radio',
+            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 steps = {
+    GBP: {
+        id: 'account',
+        type: 'form',
+        title: 'Enter their account details',
+        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: 'segmented',
+                    },
+                ],
+                $id: 'form',
+            },
+            {
+                $id: '#refresh',
+                type: 'string',
+                title: 'Refresh Field',
+                refreshStepOnChange: true,
+            },
+        ],
+        refreshFormUrl: '/refresh',
+        model: {
+            currency: 'GBP',
+            details: {},
+        },
+        layout: [
+            { type: 'form', schemaId: 'form' },
+            { type: 'form', schemaId: '#refresh' },
+            {
+                type: 'button',
+                title: 'Confirm',
+                control: 'primary',
+                action: { url: '/submit' },
+            },
+        ],
+    },
+    EUR: {
+        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: '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: 'segmented',
+                        placeholder: 'Please select where you are sending to',
+                    },
+                ],
+                $id: 'form',
+            },
+        ],
+        refreshFormUrl: '/refresh',
+        model: {
+            currency: 'EUR',
+            details: {},
+        },
+        layout: [
+            { type: 'form', schemaId: 'form' },
+            {
+                type: 'button',
+                title: 'Confirm',
+                control: 'primary',
+                action: { url: '/submit' },
+            },
+        ],
+    },
+};
+const initialStep = steps.EUR;