@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/PersistAsync.test.js

@@ -0,0 +1,653 @@
+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 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();
+            });
+            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.getByText(/January/));
+            const yearInput = screen.getByRole('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' } }),
+            }));
+        });
+    });
+});