@wise/dynamic-flow-client 5.9.0 → 5.9.2-logging-bf0bd22

package/build/tests/Submission.test.js

@@ -1,523 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { act, screen, waitFor } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import { Button } from '@transferwise/components';
-import { useState } from 'react';
-import { renderWithProviders, respondWith } from '../test-utils';
-import { abortableDelay, respondWithDelay } from '../test-utils/fetch-utils';
-import DynamicFlowWise from '../test-utils/DynamicFlowWise';
-import { createEmptyStep } from '../test-utils/step-utils';
-import { vi } from 'vitest';
-const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-const emptyStep = createEmptyStep();
-const getDefaultProps = () => ({
-    flowId: 'flow-id',
-    onCompletion: vi.fn(),
-    onError: vi.fn(),
-    onEvent: vi.fn(),
-    onLog: vi.fn(),
-});
-const getStep = (model, schema) => {
-    var _a;
-    return ({
-        id: 'step-id',
-        title: 'Submission test',
-        layout: [
-            { type: 'box', components: [{ type: 'form', schemaId: (_a = schema.$id) !== null && _a !== void 0 ? _a : '' }] },
-            {
-                type: 'button',
-                title: 'Submit',
-                action: { id: 'action-id', url: '/submit', method: 'POST' },
-            },
-            {
-                type: 'button',
-                title: 'Other',
-                action: { id: 'action-id', url: '/submit', method: 'POST' },
-            },
-        ],
-        refreshUrl: '/refresh',
-        schemas: [schema],
-        model,
-    });
-};
-describe('Data submission', () => {
-    const schema = {
-        $id: '#schema',
-        type: 'object',
-        displayOrder: ['name', 'number'],
-        properties: {
-            name: {
-                title: 'Name on card',
-                type: 'string',
-            },
-            number: {
-                title: 'Card number',
-                type: 'string',
-            },
-        },
-    };
-    it('should submit the data to the server', async () => {
-        const model = { name: 'Name', number: '12345' };
-        const step = getStep(model, schema);
-        const httpClient = vi.fn().mockResolvedValue(respondWith(emptyStep));
-        const props = getDefaultProps();
-        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, props)));
-        const submitButton = screen.getByText('Submit');
-        await user.click(submitButton);
-        await waitFor(() => {
-            expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
-                body: JSON.stringify(model),
-            }));
-        });
-        expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Action Triggered', expect.objectContaining({
-            flowId: 'flow-id',
-            integrationId: 'flow-id',
-            stepId: 'step-id',
-            actionId: 'action-id',
-            stepCount: 0,
-        }));
-    });
-    it('should prevent submission if data is invalid', async () => {
-        const model = 'Name';
-        const step = getStep(model, {
-            $id: '#schema',
-            title: 'Name on card',
-            type: 'string',
-            minLength: 10,
-        });
-        const httpClient = vi.fn().mockResolvedValue(respondWith(emptyStep));
-        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, getDefaultProps())));
-        const submitButton = screen.getByText('Submit');
-        await user.click(submitButton);
-        await waitFor(() => {
-            expect(httpClient).not.toHaveBeenCalled();
-        });
-        expect(screen.getByText('Please enter at least 10 characters.')).toBeInTheDocument();
-    });
-    it('should prevent submission if text input is typed in and then cleared when field is required', async () => {
-        const step = getStep(null, {
-            $id: '#schema',
-            title: 'Name',
-            type: 'string',
-        });
-        const httpClient = vi.fn().mockResolvedValue(respondWith(emptyStep));
-        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, getDefaultProps())));
-        const input = screen.getByText('Name');
-        await user.type(input, '123');
-        await user.type(input, '{backspace}{backspace}{backspace}');
-        const submitButton = screen.getByText('Submit');
-        await user.click(submitButton);
-        await waitFor(() => {
-            expect(httpClient).not.toHaveBeenCalled();
-        });
-        expect(screen.getByText('Please fill out this field.')).toBeInTheDocument();
-    });
-    it('should submit nothing if text input is typed in and then cleared when field is optional', async () => {
-        const step = getStep(null, {
-            $id: '#schema',
-            type: 'object',
-            displayOrder: ['name'],
-            properties: {
-                name: {
-                    title: 'Name',
-                    type: 'string',
-                },
-            },
-        });
-        const httpClient = vi.fn().mockResolvedValue(respondWith(emptyStep));
-        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, getDefaultProps())));
-        const input = screen.getByText('Name');
-        await user.type(input, '123');
-        await user.type(input, '{backspace}{backspace}{backspace}');
-        const submitButton = screen.getByText('Submit');
-        await user.click(submitButton);
-        await waitFor(() => {
-            expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: JSON.stringify({}) }));
-        });
-    });
-    it('should prevent submission if no option is selected for a top-level one-of (implicitly required)', async () => {
-        const model = 'Name';
-        const step = getStep(model, {
-            $id: '#schema',
-            title: 'Select Currency',
-            validationMessages: {
-                required: 'Please select a currency.',
-            },
-            oneOf: [
-                { title: 'USD', const: 'USD' },
-                { title: 'EUR', const: 'EUR' },
-                { title: 'GBP', const: 'GBP' },
-            ],
-        });
-        const httpClient = vi.fn().mockResolvedValue(respondWith(emptyStep));
-        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, getDefaultProps())));
-        const submitButton = screen.getByText('Submit');
-        await user.click(submitButton);
-        await waitFor(() => {
-            expect(httpClient).not.toHaveBeenCalled();
-        });
-        expect(screen.getByText('Please select a currency.')).toBeInTheDocument();
-    });
-    it('should set loading state on action buttons that were clicked (and set disabled on other buttons) while submitting, and then re-enable them', async () => {
-        const model = { name: 'Name', number: '12345' };
-        const step = getStep(model, schema);
-        const httpClient = vi.fn().mockImplementation(async (input, init) => {
-            var _a;
-            return abortableDelay(1, (_a = init === null || init === void 0 ? void 0 : init.signal) !== null && _a !== void 0 ? _a : null).then(async () => respondWith({
-                id: 'next-step',
-                title: 'Next step',
-                layout: [
-                    { type: 'button', title: 'Finish', action: { id: 'action-id', url: '/submit' } },
-                ],
-                schemas: [],
-            }));
-        });
-        const props = getDefaultProps();
-        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, props)));
-        const submitButton = screen.getByRole('button', { name: 'Submit' });
-        const otherButton = screen.getByRole('button', { name: 'Other' });
-        await user.click(submitButton);
-        expect(submitButton).toHaveAttribute('aria-busy', 'true');
-        expect(otherButton).toBeDisabled();
-        await waitFor(() => {
-            const submitButton2 = screen.getByRole('button', { name: 'Finish' });
-            expect(submitButton2).toBeEnabled();
-        });
-    });
-    describe('with unreferenced schemas', () => {
-        it('should submit the values from the unreferenced schemas as well, in the order they appear in the schemas array', async () => {
-            const model = { name: 'Name', number: '12345' };
-            const step = getStep(model, schema);
-            const initialStep = Object.assign(Object.assign({}, step), { schemas: [
-                    {
-                        $id: '#unreferenced-schema-1',
-                        title: 'Unreferenced schema 1',
-                        type: 'object',
-                        displayOrder: ['unreferencedProperty'],
-                        properties: {
-                            unreferencedProperty: {
-                                title: 'Unreferenced property',
-                                type: 'string',
-                                default: 'default value 1',
-                            },
-                        },
-                    },
-                    schema,
-                    {
-                        $id: '#unreferenced-schema-2',
-                        title: 'Unreferenced schema 2',
-                        type: 'object',
-                        displayOrder: ['unreferencedProperty'],
-                        properties: {
-                            unreferencedProperty: {
-                                title: 'Unreferenced property',
-                                type: 'string',
-                                default: 'default value 2',
-                            },
-                        },
-                    },
-                ], model });
-            const httpClient = vi.fn().mockResolvedValue(respondWith(emptyStep));
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: initialStep }, getDefaultProps())));
-            const submitButton = screen.getByText('Submit');
-            await user.click(submitButton);
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                    body: expect.any(String),
-                }));
-            });
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
-            const requestBody = JSON.parse(httpClient.mock.calls[0][1].body);
-            expect(requestBody).toEqual({
-                name: 'Name',
-                number: '12345',
-                unreferencedProperty: 'default value 2',
-            });
-        });
-        it('should not confuse action $refs with schema $refs', async () => {
-            const model = { name: 'Name', number: '12345' };
-            const step = getStep(model, schema);
-            const unreferencedSchemas = [
-                {
-                    $id: '#unreferenced-schema-1',
-                    title: 'Unreferenced schema 1',
-                    type: 'object',
-                    displayOrder: ['unreferencedProperty1'],
-                    properties: {
-                        unreferencedProperty1: {
-                            title: 'Unreferenced property',
-                            type: 'string',
-                            default: 'default value 1',
-                        },
-                    },
-                },
-                {
-                    $id: '#unreferenced-schema-2',
-                    title: 'Unreferenced schema 2',
-                    type: 'object',
-                    displayOrder: ['unreferencedProperty2'],
-                    properties: {
-                        unreferencedProperty2: {
-                            title: 'Unreferenced property',
-                            type: 'string',
-                            default: 'default value 2',
-                        },
-                    },
-                },
-            ];
-            const actions = [
-                {
-                    $id: '#unreferenced-schema-1',
-                    title: 'Submit',
-                    method: 'POST',
-                    url: '/submit',
-                },
-            ];
-            const layout = [
-                ...step.layout,
-                { type: 'button', title: 'Cancel', action: { $ref: '#unreferenced-schema-1' } },
-            ];
-            const initialStep = Object.assign(Object.assign({}, step), { layout,
-                actions, schemas: [schema, ...unreferencedSchemas], model: Object.assign(Object.assign({}, model), { unreferencedProperty1: 'model value 1' }) });
-            const httpClient = vi.fn().mockResolvedValue(respondWith(emptyStep));
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: initialStep }, getDefaultProps())));
-            const submitButton = screen.getByText('Submit');
-            await user.click(submitButton);
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
-                    body: '{"name":"Name","number":"12345","unreferencedProperty1":"model value 1","unreferencedProperty2":"default value 2"}',
-                }));
-            });
-        });
-        it('should submit EVEN if unreferenced schemas do not pass validation', async () => {
-            const model = { name: 'Name', number: '12345' };
-            const step = getStep(model, schema);
-            const initialStep = Object.assign(Object.assign({}, step), { schemas: [
-                    {
-                        $id: '#unreferenced-schema-1',
-                        title: 'Unreferenced schema 1',
-                        type: 'object',
-                        displayOrder: ['unreferencedProperty'],
-                        properties: {
-                            unreferencedProperty: {
-                                title: 'Unreferenced property',
-                                type: 'string',
-                                minLength: 10,
-                                default: '7-chars', // too short!
-                            },
-                        },
-                    },
-                    schema,
-                ], model });
-            const httpClient = vi.fn().mockResolvedValue(respondWith(emptyStep));
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: initialStep }, getDefaultProps())));
-            const submitButton = screen.getByText('Submit');
-            await user.click(submitButton);
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                    body: expect.any(String),
-                }));
-            });
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
-            const requestBody = JSON.parse(httpClient.mock.calls[0][1].body);
-            expect(requestBody).toEqual({
-                name: 'Name',
-                number: '12345',
-                unreferencedProperty: '7-chars',
-            });
-        });
-    });
-    describe('with asynchronously persisted fields', () => {
-        const persistedSchema = {
-            $id: '#schema',
-            type: 'object',
-            displayOrder: ['name', 'number'],
-            properties: {
-                name: {
-                    title: 'Name on card',
-                    type: 'string',
-                },
-                number: {
-                    type: 'string',
-                    persistAsync: {
-                        method: 'POST',
-                        url: '/persist-async',
-                        param: 'param',
-                        idProperty: 'id',
-                        schema: {
-                            title: 'Card number',
-                            type: 'string',
-                        },
-                    },
-                },
-            },
-        };
-        it('waits for persisted fields to be persisted before submitting', async () => {
-            var _a;
-            const step = getStep(null, persistedSchema);
-            const httpClient = vi
-                .fn()
-                .mockImplementationOnce(async () => respondWithDelay({ id: '123' }, 500))
-                .mockResolvedValue(respondWith(emptyStep));
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, getDefaultProps())));
-            const input = screen.getByLabelText('Card number');
-            const submitButton = screen.getByText('Submit');
-            const localUser = userEvent.setup({ advanceTimers: vi.advanceTimersByTimeAsync });
-            await localUser.type(input, '1234567890123456');
-            await localUser.click(submitButton);
-            await act(async () => vi.advanceTimersByTimeAsync(100));
-            expect(httpClient).toHaveBeenCalledTimes(1); // persistAsync request
-            await act(async () => vi.advanceTimersByTimeAsync(400));
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledTimes(2);
-            });
-            const submissionArguments = (_a = httpClient.mock.lastCall) === null || _a === void 0 ? void 0 : _a[1];
-            expect(submissionArguments.body).toBe(JSON.stringify({ number: '123' }));
-        });
-        it('will not submit if persist fails', async () => {
-            var _a;
-            const step = getStep(null, persistedSchema);
-            const httpClient = vi
-                .fn()
-                .mockRejectedValueOnce(new Error('Failed to persist'))
-                .mockResolvedValue(respondWith(emptyStep));
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, getDefaultProps())));
-            const input = screen.getByLabelText('Card number');
-            const submitButton = screen.getByText('Submit');
-            await user.type(input, '1234567890123456');
-            await user.click(submitButton);
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledTimes(1);
-            });
-            expect((_a = httpClient.mock.lastCall) === null || _a === void 0 ? void 0 : _a[0]).toBe('/persist-async');
-            expect(screen.getByText('Something went wrong.')).toBeInTheDocument();
-        });
-        it('will retry on submit if persist fails on the first submission', async () => {
-            var _a, _b;
-            const step = getStep(null, persistedSchema);
-            const httpClient = vi
-                .fn()
-                .mockRejectedValueOnce(new Error('Failed to persist'))
-                .mockImplementationOnce(async () => respondWithDelay({ id: '123' }, 500))
-                .mockResolvedValue(respondWith(emptyStep));
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, getDefaultProps())));
-            const input = screen.getByLabelText('Card number');
-            const submitButton = screen.getByText('Submit');
-            const localUser = userEvent.setup({ advanceTimers: vi.advanceTimersByTimeAsync });
-            await localUser.type(input, '1234567890123456');
-            await localUser.click(submitButton);
-            expect(httpClient).toHaveBeenCalledTimes(1);
-            expect((_a = httpClient.mock.lastCall) === null || _a === void 0 ? void 0 : _a[0]).toBe('/persist-async');
-            expect(screen.getByText('Something went wrong.')).toBeInTheDocument();
-            await localUser.click(submitButton);
-            await act(async () => vi.advanceTimersByTimeAsync(500));
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledTimes(3);
-            });
-            expect((_b = httpClient.mock.lastCall) === null || _b === void 0 ? void 0 : _b[0]).toBe('/submit');
-        });
-    });
-    describe('when the callbacks change on every re-render', () => {
-        it('should call the latest callback', async () => {
-            const model = { name: 'Name', number: '12345' };
-            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getStep(model, schema), httpClient: vi.fn().mockResolvedValue(respondWith(emptyStep)) });
-            function WrapperComponent() {
-                const [state, setState] = useState('initial');
-                // onEvent changes referential identity on every re-render
-                const onEvent = vi.fn(() => {
-                    props.onEvent(state);
-                });
-                return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setState('latest'), children: "Rerender" }), _jsx(DynamicFlowWise, Object.assign({}, props, { onEvent: onEvent })), ","] }));
-            }
-            renderWithProviders(_jsx(WrapperComponent, {}));
-            await user.click(screen.getByText('Rerender'));
-            const submitButton = screen.getByText('Submit');
-            await user.click(submitButton);
-            await waitFor(() => {
-                expect(props.httpClient).toHaveBeenCalled();
-            });
-            expect(props.onEvent).toHaveBeenLastCalledWith('latest');
-        });
-    });
-    describe('concurrent request prevention', () => {
-        describe('when a submission is already in progress', () => {
-            it('should prevent further submissions', async () => {
-                const objectSchema = {
-                    $id: '#schema',
-                    type: 'object',
-                    displayOrder: ['name', 'toc'],
-                    properties: {
-                        name: {
-                            title: 'Name',
-                            type: 'string',
-                        },
-                        toc: {
-                            title: 'Terms and Conditions',
-                            type: 'boolean',
-                            onChange: { type: 'action', action: { url: '/on-change' } },
-                        },
-                    },
-                };
-                const model = { name: 'Name', number: '12345' };
-                const step = getStep(model, objectSchema);
-                const httpClient = vi.fn(async () => {
-                    return respondWithDelay(emptyStep, 1000);
-                });
-                const props = getDefaultProps();
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, props)));
-                const submitButton = screen.getByText('Submit');
-                await user.click(submitButton);
-                await user.click(screen.getByRole('checkbox', { name: 'Terms and Conditions' }));
-                // this should trigger the onChange action that will submit the form
-                // but it should be prevented because a submission is already in progress
-                // so the total number of requests should be 1
-                await waitFor(() => {
-                    expect(httpClient).toHaveBeenCalledTimes(1);
-                });
-            });
-        });
-        describe('when a refresh is already in progress', () => {
-            it('should prevent submissions until the refresh is done', async () => {
-                const objectSchema = {
-                    $id: '#schema',
-                    type: 'object',
-                    displayOrder: ['name', 'toc'],
-                    properties: {
-                        name: {
-                            title: 'Name',
-                            type: 'string',
-                        },
-                        toc: {
-                            title: 'Terms and Conditions',
-                            type: 'boolean',
-                            onChange: { type: 'refresh' },
-                        },
-                    },
-                };
-                const neverDisabledButtonRenderer = {
-                    canRenderType: 'button',
-                    render: ({ title, onClick }) => (_jsx(Button, { block: true, v2: true, type: "button", onClick: onClick, children: title })),
-                };
-                const model = { name: 'Name', number: '12345' };
-                const step = getStep(model, objectSchema);
-                const httpClient = vi.fn(async () => {
-                    return respondWithDelay(emptyStep, 1000);
-                });
-                const props = getDefaultProps();
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, props, { renderers: [neverDisabledButtonRenderer] })));
-                // this should trigger the onChange refresh behavior
-                await user.click(screen.getByRole('checkbox', { name: 'Terms and Conditions' }));
-                const submitButton = screen.getByText('Submit');
-                await user.click(submitButton);
-                // this should trigger the submission
-                // but it should be prevented because a refresh is already in progress
-                // so the total number of requests should be 1
-                await waitFor(() => {
-                    expect(httpClient).toHaveBeenCalledTimes(1);
-                });
-            });
-        });
-    });
-});