@wise/dynamic-flow-client 5.12.1 → 5.13.0-experimental-13d828c

package/build/tests/PersistAsync.test.js

@@ -1,687 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { act, screen, waitFor } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import { renderWithProviders } from '../test-utils';
-import DynamicFlowWise from '../test-utils/DynamicFlowWise';
-import { abortableDelay, respondWith, respondWithDelay } from '../test-utils/fetch-utils';
-import { vi } from 'vitest';
-const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-describe('Persist Async', () => {
-    const submitButtonComponent = {
-        type: 'button',
-        title: 'Submit',
-        behavior: { type: 'action', action: { url: '/submit' } },
-    };
-    const getStepWithPersisAsync = (childSchema) => ({
-        id: 'step-1',
-        title: 'Persist Async Step',
-        schemas: [
-            {
-                $id: '#persist-async-schema',
-                type: 'object',
-                displayOrder: ['token'],
-                properties: {
-                    token: {
-                        type: 'string',
-                        persistAsync: {
-                            idProperty: 'id',
-                            url: '/persist-async',
-                            method: 'POST',
-                            param: 'value',
-                            schema: childSchema,
-                        },
-                    },
-                },
-            },
-        ],
-        layout: [{ type: 'form', schemaId: '#persist-async-schema' }, submitButtonComponent],
-    });
-    const getStepWithPersistAsyncNoObject = (childSchema) => ({
-        id: 'step-1',
-        title: 'Persist Async Step',
-        schemas: [
-            {
-                $id: '#persist-async-schema',
-                type: 'string',
-                persistAsync: {
-                    idProperty: 'id',
-                    url: '/persist-async',
-                    method: 'POST',
-                    param: 'value',
-                    schema: childSchema,
-                },
-            },
-        ],
-        layout: [{ type: 'form', schemaId: '#persist-async-schema' }, submitButtonComponent],
-    });
-    const renderDF = (httpClient, initialStep, onError = vi.fn()) => renderWithProviders(_jsx(DynamicFlowWise, { flowId: "persist-async-test-flow", httpClient: httpClient, initialStep: initialStep, onError: onError, onCompletion: () => { } }));
-    describe('with a string schema', () => {
-        const getStepWithStringSchema = () => getStepWithPersisAsync({ type: 'string', title: 'Credit Card Number' });
-        describe('initialisation', () => {
-            it('should submit the model if provided', async () => {
-                const step = Object.assign(Object.assign({}, getStepWithStringSchema()), { model: { token: 'card-token-from-step-model' } });
-                const mockHttpClient = vi.fn().mockResolvedValue(respondWith({ id: '##SOME-TOKEN##' }));
-                renderDF(mockHttpClient, step);
-                const submitButton = screen.getByRole('button', { name: 'Submit' });
-                await user.click(submitButton);
-                await waitFor(() => {
-                    expect(mockHttpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({
-                        body: JSON.stringify({ token: 'card-token-from-step-model' }),
-                    }));
-                });
-            });
-        });
-        describe('after a refresh', () => {
-            const getStepWithStringSchemaAndRefresh = () => {
-                const step = getStepWithStringSchema();
-                step.refreshUrl = '/refresh';
-                const objectSchema = step.schemas[0];
-                objectSchema.displayOrder = ['token', 'tnc'];
-                objectSchema.properties.tnc = {
-                    type: 'boolean',
-                    title: 'I agree to the terms and conditions',
-                    refreshStepOnChange: true,
-                };
-                return step;
-            };
-            it('should preserve the local value', async () => {
-                const initialStep = getStepWithStringSchemaAndRefresh();
-                const refreshedStep = Object.assign(Object.assign({}, initialStep), { model: { token: 'card-token-from-refresh', tnc: true } });
-                const mockHttpClient = vi.fn(async (input) => {
-                    switch (input) {
-                        case '/persist-async':
-                            return respondWith({ id: '##SOME-TOKEN##' }, { status: 200 });
-                        case '/submit':
-                            return respondWith({ success: true }, { headers: { 'X-Df-Response-Type': 'exit' } });
-                        case '/refresh':
-                            return respondWith(refreshedStep);
-                        default:
-                            return new Response(null, { status: 404 });
-                    }
-                });
-                renderDF(mockHttpClient, initialStep);
-                const input = screen.getByRole('textbox', { name: 'Credit Card Number' });
-                await user.type(input, '1111-1111-1111-1111');
-                await user.tab();
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                // click the checkbox
-                const checkbox = screen.getByRole('checkbox', {
-                    name: 'I agree to the terms and conditions',
-                });
-                await user.click(checkbox);
-                expect(mockHttpClient).toHaveBeenCalledTimes(2);
-                const submitButton = screen.getByRole('button', { name: 'Submit' });
-                await user.click(submitButton);
-                await waitFor(() => {
-                    expect(mockHttpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({
-                        body: JSON.stringify({ token: 'card-token-from-refresh', tnc: true }),
-                    }));
-                });
-                expect(screen.getByRole('textbox', { name: 'Credit Card Number' })).toHaveValue('1111-1111-1111-1111');
-            });
-        });
-        describe('retriggering', () => {
-            it('should perform two persist asyncs if called with different values', async () => {
-                const mockHttpClient = vi
-                    .fn()
-                    .mockResolvedValue(respondWith({ id: '##SOME-TOKEN##' }, { status: 200 }));
-                renderDF(mockHttpClient, getStepWithStringSchema());
-                const input = screen.getByRole('textbox', { name: 'Credit Card Number' });
-                await user.type(input, '1111-1111-1111-1111');
-                await user.tab();
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                await user.clear(input);
-                await user.type(input, '9999-9999-9999-9999');
-                await user.tab();
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(2));
-            });
-            it('should not perform a persist async if called with the same value twice', async () => {
-                const mockHttpClient = vi
-                    .fn()
-                    .mockResolvedValue(respondWith({ id: '##SOME-TOKEN##' }, { status: 200 }));
-                renderDF(mockHttpClient, getStepWithStringSchema());
-                const input = screen.getByRole('textbox', { name: 'Credit Card Number' });
-                await user.type(input, '1111-1111-1111-1111');
-                await user.tab();
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                await user.clear(input);
-                await user.type(input, '1111-1111-1111-1111');
-                await user.tab();
-                await act(async () => vi.advanceTimersByTimeAsync(100));
-                expect(mockHttpClient).toHaveBeenCalledTimes(1);
-            });
-            it('should ignore previous responses if a second persist has been triggered', async () => {
-                const mockHttpClient = vi.fn(async (input, init) => {
-                    var _a;
-                    switch (input) {
-                        case '/persist-async': {
-                            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                            const requestBodyValue = (_a = JSON.parse(init === null || init === void 0 ? void 0 : init.body)) === null || _a === void 0 ? void 0 : _a.value;
-                            switch (requestBodyValue) {
-                                case '1111-1111-1111-1111':
-                                    return abortableDelay(200, init === null || init === void 0 ? void 0 : init.signal).then(async () => respondWith({ id: `id-0001` }));
-                                case '2222-2222-2222-2222':
-                                    return abortableDelay(10, init === null || init === void 0 ? void 0 : init.signal).then(async () => respondWith({ id: `id-0002` }));
-                            }
-                            break;
-                        }
-                        case '/submit':
-                            return respondWith({ success: true });
-                        default:
-                            return new Response(null, { status: 404 });
-                    }
-                });
-                renderDF(mockHttpClient, getStepWithStringSchema());
-                const input = screen.getByRole('textbox', { name: 'Credit Card Number' });
-                await user.type(input, '1111-1111-1111-1111');
-                await user.tab();
-                await user.clear(input);
-                await user.type(input, '2222-2222-2222-2222');
-                const submitButton = screen.getByRole('button', { name: 'Submit' });
-                await user.click(submitButton);
-                await waitFor(() => {
-                    expect(mockHttpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({
-                        body: JSON.stringify({ token: 'id-0002' }),
-                    }));
-                });
-            });
-        });
-        describe('clearing submittable value', () => {
-            it('should clear persisted value if value is cleared', async () => {
-                const mockHttpClient = vi
-                    .fn()
-                    .mockResolvedValue(respondWith({ id: '123456' }, { status: 200 }));
-                renderDF(mockHttpClient, getStepWithStringSchema());
-                const input = screen.getByRole('textbox', { name: 'Credit Card Number' });
-                await user.type(input, '1111-1111-1111-1111');
-                await user.tab();
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                await user.clear(input);
-                const submitButton = screen.getByRole('button', { name: 'Submit' });
-                await user.click(submitButton);
-                expect(mockHttpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({
-                    body: JSON.stringify({}),
-                }));
-            });
-        });
-        describe('error handling', () => {
-            it('should set component errors if persist async fails (server error message)', async () => {
-                const mockHttpClient = vi
-                    .fn()
-                    .mockResolvedValue(respondWith({ validation: { value: 'Server-side error' } }, { status: 422 }));
-                renderDF(mockHttpClient, getStepWithStringSchema());
-                const input = screen.getByRole('textbox', { name: 'Credit Card Number' });
-                await user.type(input, '1111-1111-1111-1111');
-                await user.tab();
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                expect(screen.getByText('Server-side error')).toBeInTheDocument();
-            });
-            it('should set component errors if persist async fails (server error message) (schema not wrapped in object)', async () => {
-                const mockHttpClient = vi
-                    .fn()
-                    .mockResolvedValue(respondWith({ validation: { value: 'Server-side error' } }, { status: 422 }));
-                const step = getStepWithPersistAsyncNoObject({
-                    type: 'string',
-                    title: 'Credit Card Number',
-                });
-                renderDF(mockHttpClient, step);
-                const input = screen.getByRole('textbox', { name: 'Credit Card Number' });
-                await user.type(input, '1111-1111-1111-1111');
-                await user.tab();
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                expect(screen.getByText('Server-side error')).toBeInTheDocument();
-            });
-            test.each([
-                ['null, 404', new Response(null, { status: 404 })],
-                ['wrong, 200', new Response(JSON.stringify({ wrongId: 'wishful-token' }), { status: 200 })],
-            ])('should set component errors if persist async fails with %s (fallback error message)', async (_, mockedResponse) => {
-                const mockHttpClient = vi.fn().mockResolvedValue(mockedResponse);
-                renderDF(mockHttpClient, getStepWithStringSchema());
-                const input = screen.getByRole('textbox', { name: 'Credit Card Number' });
-                await user.type(input, '1111-1111-1111-1111');
-                await user.tab();
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                expect(screen.getByText('Something went wrong.')).toBeInTheDocument();
-            });
-        });
-    });
-    describe('with a string (format: date) schema', () => {
-        const getStepWithDateStringSchema = () => getStepWithPersisAsync({ type: 'string', format: 'date', title: 'Date of Birth' });
-        /**
-         * Selects 02 January 1999
-         */
-        const userInputDate = async () => {
-            const dayInput = screen.getByRole('textbox', { name: 'Day' });
-            await user.type(dayInput, '02');
-            const monthSelect = screen.getAllByText(/month/i)[1];
-            await user.click(monthSelect);
-            await user.click(screen.getByRole('option', { name: 'January' }));
-            await user.keyboard('{Escape}');
-            const yearInput = await screen.findByRole('textbox', { name: 'Year' });
-            await user.type(yearInput, '1999');
-        };
-        it('should submit the persisted token on submit', async () => {
-            const mockHttpClient = vi.fn().mockResolvedValue(respondWith({ id: '##SOME-TOKEN##' }));
-            renderDF(mockHttpClient, getStepWithDateStringSchema());
-            await userInputDate();
-            await user.tab();
-            expect(mockHttpClient).toHaveBeenCalledTimes(1);
-            const submitButton = screen.getByRole('button', { name: 'Submit' });
-            await user.click(submitButton);
-            expect(mockHttpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({
-                body: JSON.stringify({ token: '##SOME-TOKEN##' }),
-            }));
-        });
-        it('should display server-side validation errors', async () => {
-            const mockHttpClient = vi
-                .fn()
-                .mockResolvedValue(respondWith({ validation: { value: 'Server-side error' } }, { status: 422 }));
-            renderDF(mockHttpClient, getStepWithDateStringSchema());
-            await userInputDate();
-            expect(screen.getByText('Server-side error')).toBeInTheDocument();
-        });
-    });
-    describe('with a boolean schema', () => {
-        const getStepWithBooleanSchema = () => getStepWithPersisAsync({ type: 'boolean', title: 'Accept Terms and Conditions' });
-        it('should submit the persisted token on submit', async () => {
-            const mockHttpClient = vi.fn().mockResolvedValue(respondWith({ id: '##SOME-TOKEN##' }));
-            renderDF(mockHttpClient, getStepWithBooleanSchema());
-            const checkbox = screen.getByRole('checkbox', { name: 'Accept Terms and Conditions' });
-            await user.click(checkbox);
-            await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-            const submitButton = screen.getByRole('button', { name: 'Submit' });
-            await user.click(submitButton);
-            await waitFor(() => {
-                expect(mockHttpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({
-                    body: JSON.stringify({ token: '##SOME-TOKEN##' }),
-                }));
-            });
-        });
-    });
-    describe('with an integer schema', () => {
-        const getStepWithIntegerSchema = () => getStepWithPersisAsync({ type: 'integer', title: 'Enter your age' });
-        it('should submit the persisted token on submit', async () => {
-            const mockHttpClient = vi.fn().mockResolvedValue(respondWith({ id: '##SOME-TOKEN##' }));
-            renderDF(mockHttpClient, getStepWithIntegerSchema());
-            const input = screen.getByRole('spinbutton', { name: 'Enter your age' });
-            await user.type(input, '30');
-            await user.tab();
-            await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-            const submitButton = screen.getByRole('button', { name: 'Submit' });
-            await user.click(submitButton);
-            await waitFor(() => {
-                expect(mockHttpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({
-                    body: JSON.stringify({ token: '##SOME-TOKEN##' }),
-                }));
-            });
-        });
-        it('should display server-side validation errors', async () => {
-            const mockHttpClient = vi
-                .fn()
-                .mockResolvedValue(respondWith({ validation: { value: 'Server-side error' } }, { status: 422 }));
-            renderDF(mockHttpClient, getStepWithIntegerSchema());
-            const input = screen.getByRole('spinbutton', { name: 'Enter your age' });
-            await user.type(input, '30');
-            await user.tab();
-            await waitFor(() => {
-                expect(screen.getByText('Server-side error')).toBeInTheDocument();
-            });
-        });
-    });
-    describe('with a number schema', () => {
-        const getStepWithNumberSchema = () => getStepWithPersisAsync({ type: 'number', title: 'Enter an amount' });
-        it('should submit the persisted token on submit', async () => {
-            const mockHttpClient = vi.fn().mockResolvedValue(respondWith({ id: '##SOME-TOKEN##' }));
-            renderDF(mockHttpClient, getStepWithNumberSchema());
-            const input = screen.getByRole('spinbutton', { name: 'Enter an amount' });
-            await user.type(input, '99.99');
-            await user.tab();
-            await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-            const submitButton = screen.getByRole('button', { name: 'Submit' });
-            await user.click(submitButton);
-            await waitFor(() => {
-                expect(mockHttpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({
-                    body: JSON.stringify({ token: '##SOME-TOKEN##' }),
-                }));
-            });
-        });
-        it('should display server-side validation errors', async () => {
-            const mockHttpClient = vi
-                .fn()
-                .mockResolvedValue(respondWith({ validation: { value: 'Server-side error' } }, { status: 422 }));
-            renderDF(mockHttpClient, getStepWithNumberSchema());
-            const input = screen.getByRole('spinbutton', { name: 'Enter an amount' });
-            await user.type(input, '99.99');
-            await user.tab();
-            await waitFor(() => {
-                expect(screen.getByText('Server-side error')).toBeInTheDocument();
-            });
-        });
-    });
-    describe('with a const schema', () => {
-        const getStepWithConstSchema = () => getStepWithPersisAsync({ const: 'fixed-value' });
-        it('should submit the persisted token on submit', async () => {
-            const mockHttpClient = vi.fn().mockResolvedValue(respondWith({ id: '##SOME-TOKEN##' }));
-            renderDF(mockHttpClient, getStepWithConstSchema());
-            const submitButton = screen.getByRole('button', { name: 'Submit' });
-            await user.click(submitButton);
-            await waitFor(() => {
-                expect(mockHttpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({
-                    body: JSON.stringify({ token: '##SOME-TOKEN##' }),
-                }));
-            });
-        });
-    });
-    describe('with file upload schemas', () => {
-        describe('with a blob schema', () => {
-            const getStepWithBlobSchema = () => getStepWithPersisAsync({ type: 'blob', title: 'File Upload' });
-            it('should submit the persisted token on submit', async () => {
-                const mockHttpClient = vi.fn().mockResolvedValue(respondWith({ id: '##SOME-TOKEN##' }));
-                renderDF(mockHttpClient, getStepWithBlobSchema());
-                await user.upload(screen.getByTestId('uploadInput'), new File(['foo'], 'foo.png', { type: 'image/png' }));
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                const submitButton = screen.getByRole('button', { name: 'Submit' });
-                await user.click(submitButton);
-                await waitFor(() => {
-                    expect(mockHttpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({
-                        body: JSON.stringify({ token: '##SOME-TOKEN##' }),
-                    }));
-                });
-            });
-            it('should display server-side validation errors', async () => {
-                const mockHttpClient = vi
-                    .fn()
-                    .mockResolvedValue(respondWith({ validation: { value: 'Server-side error' } }, { status: 422 }));
-                renderDF(mockHttpClient, getStepWithBlobSchema());
-                await user.upload(screen.getByTestId('uploadInput'), new File(['foo'], 'foo.png', { type: 'image/png' }));
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                expect(screen.getByText('Server-side error')).toBeInTheDocument();
-                expect(screen.queryByText('Uploaded')).not.toBeInTheDocument();
-            });
-            test.each([
-                ['null, 404', new Response(null, { status: 404 })],
-                ['wrong, 200', new Response(JSON.stringify({ wrongId: 'wishful-token' }), { status: 200 })],
-            ])('should display generic validation error when response is: %s', async (_, mockedResponse) => {
-                const mockHttpClient = vi.fn().mockResolvedValue(mockedResponse);
-                renderDF(mockHttpClient, getStepWithBlobSchema());
-                await user.upload(screen.getByTestId('uploadInput'), new File(['foo'], 'foo.png', { type: 'image/png' }));
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                expect(screen.getByText('Something went wrong.')).toBeInTheDocument();
-                expect(screen.queryByText('Uploaded')).not.toBeInTheDocument();
-            });
-            it('should display a loading indication while persisting', async () => {
-                const mockHttpClient = vi
-                    .fn()
-                    .mockResolvedValue(respondWithDelay({ id: '##SOME-TOKEN##' }, 1000));
-                renderDF(mockHttpClient, getStepWithBlobSchema());
-                await user.upload(screen.getByTestId('uploadInput'), new File(['foo'], 'foo.png', { type: 'image/png' }));
-                expect(mockHttpClient).toHaveBeenCalledTimes(1);
-                expect(screen.getByText('Uploading...')).toBeInTheDocument();
-                await act(async () => vi.advanceTimersByTimeAsync(1000));
-                expect(screen.getByText('Uploaded')).toBeInTheDocument();
-                expect(screen.queryByText('Uploading...')).not.toBeInTheDocument();
-            });
-            it('should display the "required" validation error after clearing a failed upload and attempting to submit', async () => {
-                const mockHttpClient = vi.fn().mockResolvedValue(new Response(null, { status: 404 }));
-                const step = getStepWithBlobSchema();
-                step.schemas[0].required = ['token'];
-                renderDF(mockHttpClient, step);
-                await user.upload(screen.getByTestId('uploadInput'), new File(['foo'], 'foo.png', { type: 'image/png' }));
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                const removeButton = screen.getByRole('button', { name: /Remove file/i });
-                await user.click(removeButton);
-                const submitButton = screen.getByRole('button', { name: 'Submit' });
-                await user.click(submitButton);
-                await waitFor(() => {
-                    expect(screen.getByText('Please fill out this field.')).toBeInTheDocument();
-                });
-            });
-        });
-        describe('with a base64 encoded string schema', () => {
-            const getStepWithBase64Schema = () => getStepWithPersisAsync({
-                type: 'string',
-                format: 'base64url',
-                title: 'File Upload (Base64)',
-            });
-            it('should submit the persisted token on submit', async () => {
-                const mockHttpClient = vi.fn().mockResolvedValue(respondWith({ id: '##SOME-TOKEN##' }));
-                renderDF(mockHttpClient, getStepWithBase64Schema());
-                await user.upload(screen.getByTestId('uploadInput'), new File(['foo'], 'foo.png', { type: 'image/png' }));
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                const submitButton = screen.getByRole('button', { name: 'Submit' });
-                await user.click(submitButton);
-                await waitFor(() => {
-                    expect(mockHttpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({
-                        body: JSON.stringify({ token: '##SOME-TOKEN##' }),
-                    }));
-                });
-            });
-            it('should display server-side validation errors', async () => {
-                const mockHttpClient = vi
-                    .fn()
-                    .mockResolvedValue(respondWith({ validation: { value: 'Server-side error' } }, { status: 422 }));
-                renderDF(mockHttpClient, getStepWithBase64Schema());
-                await user.upload(screen.getByTestId('uploadInput'), new File(['foo'], 'foo.png', { type: 'image/png' }));
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                expect(screen.getByText('Server-side error')).toBeInTheDocument();
-            });
-        });
-    });
-    describe('with a multi-upload schema', () => {
-        describe('with a blob schema', () => {
-            const getStepWithMultiUploadBlobSchema = () => ({
-                id: 'step-id',
-                title: 'Blob Upload (Multiple, Persist Async)',
-                schemas: [
-                    {
-                        type: 'array',
-                        $id: '#schema',
-                        title: 'Upload label',
-                        maxItems: 5,
-                        addItemTitle: 'Add',
-                        editItemTitle: 'Edit',
-                        summary: {
-                            defaultTitle: 'File',
-                            defaultDescription: 'Click to edit or remove',
-                            defaultIcon: { name: 'document' },
-                        },
-                        items: {
-                            $id: '#id',
-                            type: 'string',
-                            persistAsync: {
-                                method: 'POST',
-                                url: '/persist-async',
-                                param: 'value',
-                                idProperty: 'id',
-                                schema: {
-                                    type: 'blob',
-                                    source: 'file',
-                                    title: 'Upload label',
-                                    description: 'PNG, JPG, or PDF, less than 5mb',
-                                    accepts: ['image/png', 'image/jpg', 'application/pdf'],
-                                    maxSize: 5242000,
-                                    validationMessages: {
-                                        maxSize: 'Your file is too large',
-                                    },
-                                },
-                            },
-                        },
-                    },
-                ],
-                layout: [{ type: 'form', schemaId: '#schema' }, submitButtonComponent],
-            });
-            it('should submit the persisted tokens on submit', async () => {
-                const mockHttpClient = vi.fn().mockResolvedValue(respondWith({ id: '##SOME-TOKEN##' }));
-                renderDF(mockHttpClient, getStepWithMultiUploadBlobSchema());
-                await user.upload(screen.getByTestId('uploadInput'), new File(['foo1'], 'foo1.png', { type: 'image/png' }));
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                const submitButton = screen.getByRole('button', { name: 'Submit' });
-                await user.click(submitButton);
-                await waitFor(() => {
-                    expect(mockHttpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({
-                        body: JSON.stringify(['##SOME-TOKEN##']),
-                    }));
-                });
-            });
-            it('should display server-side validation errors', async () => {
-                const mockHttpClient = vi
-                    .fn()
-                    .mockResolvedValue(respondWith({ validation: { value: 'Server-side error' } }, { status: 422 }));
-                renderDF(mockHttpClient, getStepWithMultiUploadBlobSchema());
-                await user.upload(screen.getByTestId('uploadInput'), new File(['foo1'], 'foo1.png', { type: 'image/png' }));
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                expect(screen.getByText('Server-side error')).toBeInTheDocument();
-            });
-        });
-        describe('with a base64 encoded string schema', () => {
-            const getStepWithMultiUploadBase64Schema = () => ({
-                id: 'step-id',
-                title: 'Base64 Upload (Multiple, Persist Async)',
-                schemas: [
-                    {
-                        $id: '#schema',
-                        type: 'array',
-                        title: 'Upload label',
-                        maxItems: 5,
-                        addItemTitle: 'Add',
-                        editItemTitle: 'Edit',
-                        summary: {
-                            defaultTitle: 'File',
-                            defaultDescription: 'Click to edit or remove',
-                            defaultIcon: { name: 'document' },
-                        },
-                        items: {
-                            $id: '#id',
-                            type: 'string',
-                            persistAsync: {
-                                method: 'POST',
-                                url: '/persist-async',
-                                param: 'value',
-                                idProperty: 'id',
-                                schema: {
-                                    type: 'string',
-                                    format: 'base64url',
-                                    title: 'Upload label',
-                                    description: 'PNG, JPG, or PDF, less than 5mb',
-                                    accepts: ['image/png', 'image/jpg', 'application/pdf'],
-                                    maxSize: 5242000,
-                                    validationMessages: {
-                                        maxSize: 'Your file is too large',
-                                    },
-                                },
-                            },
-                        },
-                    },
-                ],
-                layout: [{ type: 'form', schemaId: '#schema' }, submitButtonComponent],
-            });
-            it('should submit the persisted tokens on submit', async () => {
-                const mockHttpClient = vi.fn().mockResolvedValue(respondWith({ id: '##SOME-TOKEN##' }));
-                renderDF(mockHttpClient, getStepWithMultiUploadBase64Schema());
-                await user.upload(screen.getByTestId('uploadInput'), new File(['foo1'], 'foo1.png', { type: 'image/png' }));
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                const submitButton = screen.getByRole('button', { name: 'Submit' });
-                await user.click(submitButton);
-                await waitFor(() => {
-                    expect(mockHttpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({
-                        body: JSON.stringify(['##SOME-TOKEN##']),
-                    }));
-                });
-            });
-            it('should display server-side validation errors', async () => {
-                const mockHttpClient = vi
-                    .fn()
-                    .mockResolvedValue(respondWith({ validation: { value: 'Server-side error' } }, { status: 422 }));
-                renderDF(mockHttpClient, getStepWithMultiUploadBase64Schema());
-                await user.upload(screen.getByTestId('uploadInput'), new File(['foo1'], 'foo1.png', { type: 'image/png' }));
-                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
-                expect(screen.getByText('Server-side error')).toBeInTheDocument();
-            });
-        });
-    });
-    describe('with an unsupported schema type (ObjectSchema)', () => {
-        const getStepWithObjectSchema = () => ({
-            id: 'step-1',
-            title: 'Persist Async Step',
-            schemas: [
-                {
-                    $id: '#persist-async-schema',
-                    type: 'object',
-                    displayOrder: ['token'],
-                    properties: {
-                        token: {
-                            type: 'string',
-                            persistAsync: {
-                                idProperty: 'id',
-                                url: '/persist-async',
-                                method: 'POST',
-                                param: 'value',
-                                schema: {
-                                    type: 'object',
-                                    title: 'Enter your address',
-                                    displayOrder: ['street', 'city'],
-                                    properties: {
-                                        street: {
-                                            type: 'string',
-                                            title: 'Street',
-                                        },
-                                        city: {
-                                            type: 'string',
-                                            title: 'City',
-                                        },
-                                    },
-                                },
-                            },
-                        },
-                    },
-                },
-            ],
-            layout: [
-                {
-                    type: 'form',
-                    schemaId: '#persist-async-schema',
-                },
-                {
-                    type: 'button',
-                    title: 'Submit',
-                    behavior: {
-                        type: 'action',
-                        action: { url: '/submit' },
-                    },
-                },
-            ],
-        });
-        it(`renders the step`, async () => {
-            const mockHttpClient = vi
-                .fn()
-                .mockResolvedValue(respondWith({ id: '##SOME-TOKEN##' }, { status: 200 }));
-            renderDF(mockHttpClient, getStepWithObjectSchema());
-            expect(screen.getByText('Enter your address')).toBeInTheDocument();
-        });
-        it('submits the user input on submission', async () => {
-            const mockHttpClient = vi.fn(async (input) => {
-                switch (input) {
-                    case '/persist-async':
-                        return respondWith({ id: '##SOME-TOKEN##' }, { status: 200 });
-                    case '/submit':
-                        return respondWith({ success: true }, { headers: { 'X-Df-Response-Type': 'exit' } });
-                    default:
-                        return new Response(null, { status: 404 });
-                }
-            });
-            const onError = vi.fn();
-            renderDF(mockHttpClient, getStepWithObjectSchema(), onError);
-            expect(screen.getByText('Enter your address')).toBeInTheDocument();
-            const streetInput = screen.getByRole('textbox', { name: 'Street' });
-            await user.type(streetInput, '123 Main St');
-            const cityInput = screen.getByRole('textbox', { name: 'City' });
-            await user.type(cityInput, 'Springfield');
-            const submitButton = screen.getByRole('button', { name: 'Submit' });
-            await user.click(submitButton);
-            expect(mockHttpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({
-                body: JSON.stringify({ token: { street: '123 Main St', city: 'Springfield' } }),
-            }));
-        });
-    });
-});