@wise/dynamic-flow-client 5.25.2 → 5.25.4

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

@@ -1,359 +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 { 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;
-        var _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

@@ -1,221 +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 { 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}` }));
-                });
-            });
-        });
-    });
-});