@wise/dynamic-flow-client 5.13.2 → 5.13.4

package/build/tests/RefreshOnChange.test.js

@@ -1,233 +0,0 @@
-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

@@ -1,350 +0,0 @@
-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
-            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',
-            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;