@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/Submission.test.js

@@ -0,0 +1,523 @@
+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);
+                });
+            });
+        });
+    });
+});