@wise/dynamic-flow-client 5.30.0 → 5.30.2-experimental-949e5e5

package/build/tests/Submission.test.js

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