@wise/dynamic-flow-client 5.25.1 → 5.25.2

package/build/tests/Submission.test.js

@@ -0,0 +1,821 @@
+import { Fragment as _Fragment, jsx as _jsx, 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 { vi } from 'vitest';
+import { renderWithProviders, respondWith } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { abortableDelay, respondWithDelay } from '../test-utils/fetch-utils';
+import { createEmptyStep } from '../test-utils/step-utils';
+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(),
+    onLink: 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();
+    });
+    describe('loading state', () => {
+        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: [],
+        })); });
+        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 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();
+            expect(otherButton).not.toHaveAttribute('aria-busy');
+            await waitFor(() => {
+                expect(screen.getByText('Next step')).toBeInTheDocument();
+            });
+        });
+        describe('when attempting submission with one button, but validation fails, then submissting with another button', () => {
+            it('should only set the loading state of the button that was last pressed', async () => {
+                const step = {
+                    id: 'step-id',
+                    title: 'Submission test',
+                    layout: [
+                        { type: 'box', components: [{ type: 'form', schemaId: '#schema' }] },
+                        {
+                            type: 'button',
+                            title: 'Submit',
+                            action: { id: 'submit', url: '/submit', method: 'POST' },
+                        },
+                        {
+                            type: 'button',
+                            title: 'Submit without validation',
+                            action: {
+                                id: 'submit-without-validation',
+                                url: '/submit',
+                                method: 'POST',
+                                skipValidation: true,
+                            },
+                        },
+                    ],
+                    refreshUrl: '/refresh',
+                    schemas: [
+                        {
+                            $id: '#schema',
+                            title: 'Name',
+                            type: 'string',
+                            validationMessages: { required: 'Please enter your name!' },
+                        },
+                    ],
+                };
+                const props = getDefaultProps();
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, props)));
+                const submitButton = screen.getByRole('button', { name: 'Submit' });
+                const submitWithoutValidationButton = screen.getByRole('button', {
+                    name: 'Submit without validation',
+                });
+                await user.click(submitButton);
+                expect(screen.getByText('Please enter your name!')).toBeInTheDocument();
+                await user.click(submitWithoutValidationButton);
+                // expect(screen.queryByText('Please enter your name!')).not.toBeInTheDocument();
+                expect(submitWithoutValidationButton).toHaveAttribute('aria-busy', 'true');
+                expect(submitButton).toBeDisabled();
+                expect(submitButton).not.toHaveAttribute('aria-busy');
+            });
+        });
+        describe('link buttons', () => {
+            it('should NOT set loading state on link buttons that have been previously clicked', async () => {
+                var _a;
+                const model = { name: 'Name', number: '12345' };
+                const step = {
+                    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',
+                            behavior: {
+                                type: 'action',
+                                action: { id: 'action-id', url: '/submit', method: 'POST' },
+                            },
+                        },
+                        {
+                            type: 'button',
+                            title: 'Link',
+                            behavior: { type: 'link', url: 'https://www.google.com' },
+                        },
+                    ],
+                    schemas: [schema],
+                    model,
+                };
+                const props = getDefaultProps();
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, props)));
+                const submitButton = screen.getByRole('button', { name: 'Submit' });
+                const linkButton = screen.getByRole('button', { name: 'Link' });
+                await user.click(linkButton);
+                expect(props.onLink).toHaveBeenCalled();
+                await user.click(submitButton);
+                expect(submitButton).toHaveAttribute('aria-busy', 'true');
+                expect(linkButton).toBeDisabled();
+                expect(linkButton).not.toHaveAttribute('aria-busy');
+                await waitFor(() => {
+                    expect(screen.getByText('Next step')).toBeInTheDocument();
+                });
+            });
+        });
+        describe('buttons that trigger modals', () => {
+            it('should NOT set loading state on buttons that trigger modals that have been previously clicked', async () => {
+                var _a;
+                const model = { name: 'Name', number: '12345' };
+                const step = {
+                    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',
+                            behavior: {
+                                type: 'action',
+                                action: { id: 'action-id', url: '/submit', method: 'POST' },
+                            },
+                        },
+                        {
+                            type: 'button',
+                            title: 'Open Modal',
+                            behavior: {
+                                type: 'modal',
+                                title: 'Open Modal',
+                                content: [
+                                    {
+                                        type: 'paragraph',
+                                        text: 'This is a modal opened by the submit button.',
+                                    },
+                                ],
+                            },
+                        },
+                    ],
+                    schemas: [schema],
+                    model,
+                };
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, getDefaultProps())));
+                const submitButton = screen.getByRole('button', { name: 'Submit' });
+                const modalButton = screen.getByRole('button', { name: 'Open Modal' });
+                await user.click(modalButton);
+                await waitFor(() => {
+                    expect(screen.getByText('This is a modal opened by the submit button.')).toBeInTheDocument();
+                });
+                await user.keyboard('{Escape}');
+                await waitFor(() => {
+                    expect(screen.queryByText('This is a modal opened by the submit button.')).not.toBeInTheDocument();
+                });
+                await user.click(submitButton);
+                expect(submitButton).toHaveAttribute('aria-busy', 'true');
+                expect(modalButton).toBeDisabled();
+                expect(modalButton).not.toHaveAttribute('aria-busy');
+                await waitFor(() => {
+                    expect(screen.getByText('Next step')).toBeInTheDocument();
+                });
+            });
+        });
+    });
+    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 and log a warning', 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 props = getDefaultProps();
+            const httpClient = vi.fn().mockResolvedValue(respondWith(emptyStep));
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: initialStep }, props)));
+            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',
+            });
+            expect(props.onLog).toHaveBeenCalledWith('warning', expect.stringMatching(/Unreferenced schema does not pass validation/), expect.objectContaining({
+                flowId: 'flow-id',
+                stepId: 'step-id',
+                unreferencedSchemaId: '#unreferenced-schema-1',
+                componentUid: 'root:0.step-id',
+            }));
+        });
+        it('should block submission and log an error when "validateUnreferencedSchemas" feature is enabled', 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',
+                            },
+                        },
+                    },
+                    schema,
+                ], model });
+            const props = getDefaultProps();
+            const httpClient = vi.fn().mockResolvedValue(respondWith(emptyStep));
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: initialStep, features: { validateUnreferencedSchemas: true } }, props)));
+            const submitButton = screen.getByText('Submit');
+            await user.click(submitButton);
+            await waitFor(() => {
+                expect(httpClient).not.toHaveBeenCalled();
+            });
+            expect(props.onLog).toHaveBeenCalledWith('error', expect.stringMatching(/Unreferenced schema does not pass validation/), expect.objectContaining({
+                flowId: 'flow-id',
+                stepId: 'step-id',
+                unreferencedSchemaId: '#unreferenced-schema-1',
+                componentUid: 'root:0.step-id',
+            }));
+        });
+        it('should still validate later schemas and log warning even when an earlier referenced schema fails', async () => {
+            const referencedSchema = {
+                type: 'object',
+                $id: '#referenced-schema',
+                displayOrder: ['referencedProperty'],
+                required: ['referencedProperty'],
+                properties: {
+                    referencedProperty: {
+                        title: 'Referenced property',
+                        type: 'string',
+                    },
+                },
+            };
+            const initialStep = Object.assign(Object.assign({}, getStep('short', referencedSchema)), { schemas: [
+                    referencedSchema,
+                    {
+                        type: 'object',
+                        $id: '#unreferenced-schema-1',
+                        displayOrder: ['unreferencedProperty'],
+                        required: ['unreferencedProperty'],
+                        properties: {
+                            unreferencedProperty: {
+                                title: 'Unreferenced property',
+                                type: 'string',
+                            },
+                        },
+                    },
+                ] });
+            const props = getDefaultProps();
+            const httpClient = vi.fn().mockResolvedValue(respondWith(emptyStep));
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: initialStep }, props)));
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => {
+                expect(httpClient).not.toHaveBeenCalled();
+            });
+            expect(props.onLog).toHaveBeenCalledWith('warning', expect.stringMatching(/Unreferenced schema does not pass validation/), expect.objectContaining({}));
+        });
+    });
+    describe('with schemas referenced in the footer', () => {
+        it('should submit the values from schemas referenced in the footer', async () => {
+            const footerSchema = {
+                $id: '#footer-schema',
+                type: 'object',
+                displayOrder: ['city'],
+                properties: {
+                    city: {
+                        title: 'City',
+                        type: 'string',
+                    },
+                },
+            };
+            const initialStep = {
+                id: 'step-id',
+                title: 'Footer submission test',
+                layout: [{ type: 'box', components: [{ type: 'form', schemaId: '#schema' }] }],
+                footer: [
+                    { type: 'form', schemaId: '#footer-schema' },
+                    {
+                        type: 'button',
+                        title: 'Submit',
+                        behavior: { type: 'action', action: { url: '/submit', method: 'POST' } },
+                    },
+                ],
+                schemas: [schema, footerSchema],
+                model: { name: 'Name', number: '12345', city: 'London' },
+            };
+            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',
+                city: 'London',
+            });
+        });
+        it('should validate schemas referenced in the footer before submitting', async () => {
+            const footerSchema = {
+                $id: '#footer-schema',
+                title: 'Required field',
+                type: 'string',
+                minLength: 5,
+            };
+            const initialStep = {
+                id: 'step-id',
+                title: 'Footer validation test',
+                layout: [],
+                footer: [
+                    { type: 'form', schemaId: '#footer-schema' },
+                    {
+                        type: 'button',
+                        title: 'Submit',
+                        behavior: { type: 'action', action: { url: '/submit', method: 'POST' } },
+                    },
+                ],
+                schemas: [footerSchema],
+                model: null,
+            };
+            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).not.toHaveBeenCalled();
+            });
+            expect(screen.getByText('Please fill out this field.')).toBeInTheDocument();
+        });
+    });
+    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);
+                });
+            });
+        });
+    });
+});