@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/legacy/MultipleFileUploadSchema.test.js

@@ -0,0 +1,341 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { renderWithProviders } from '../../test-utils';
+import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+// This file is a copy of the E2E test in legacy. It should remain as unchanged
+// as possible, to ensure the new client functionality matches the old one.
+const accepts = ['image/png', 'image/jpg', 'application/pdf'];
+const maxSize = 5242000;
+const description = 'PNG, JPG, or PDF, less than 5mb';
+const idProperty = 'responseKey';
+const param = 'bodyAttribute';
+const uploadTitle = 'Invoice (optional)';
+describe('Given a multiple file upload schema with persist-async', () => {
+    const getArraySchema = (overrides) => (Object.assign({ type: 'array', title: 'upload schema title', minItems: 1, maxItems: 2, addItemTitle: '', editItemTitle: '', items: {
+            type: 'string',
+            persistAsync: {
+                url: 'http://localhost:3001/v1/save-file/',
+                method: 'POST',
+                param,
+                idProperty,
+                schema: {
+                    // Modification: we now read the analytics id from the inner schema
+                    $id: 'upload-id',
+                    type: 'string',
+                    format: 'base64url',
+                    title: uploadTitle,
+                    description,
+                    maxSize,
+                    accepts,
+                    validationMessages: {
+                        maxSize: 'Your file is too large',
+                    },
+                },
+            },
+        } }, overrides));
+    const getMultipleFileUploadSchemaObject = (arraySchema = getArraySchema({})) => ({
+        type: 'object',
+        $id: '#schema',
+        displayOrder: ['files'],
+        required: ['files'],
+        title: 'upload schema title',
+        properties: {
+            files: Object.assign({ $id: 'upload-id' }, arraySchema),
+        },
+    });
+    const getMultipleFileUploadSchemaObjectWithoutId = () => ({
+        type: 'object',
+        $id: '#schema',
+        displayOrder: ['files'],
+        required: ['files'],
+        title: 'upload schema title',
+        properties: {
+            files: Object.assign(Object.assign({}, getArraySchema({})), { minItems: 2, maxItems: 3, validationMessages: {
+                    minItems: 'minimum items not met error (from schema)',
+                    maxItems: 'maximum items uploaded already (from schema)',
+                } }),
+        },
+        validationMessages: {
+            minItems: 'minimum items not met error (from schema)',
+            maxItems: 'maximum items uploaded already (from schema)',
+        },
+    });
+    const testFile = new File([], 'test-file.pdf', { type: 'application/pdf' });
+    const mockHttpClient = vi.fn();
+    const initialStep = {
+        id: 'multiple-file-upload-schema-test-step-id',
+        title: 'OneOf Schema Step Title',
+        layout: [
+            { type: 'form', schemaId: '#schema' },
+            {
+                type: 'button',
+                title: 'Submit',
+                action: { url: '/submit', method: 'POST' },
+            },
+        ],
+        schemas: [getMultipleFileUploadSchemaObject()],
+        model: {},
+        errors: {},
+    };
+    const onEvent = vi.fn();
+    const getProps = (overrides = {}) => (Object.assign({ flowId: 'multiple-file-upload-schema-test-flow-id', initialStep, httpClient: mockHttpClient, onCompletion: vi.fn(), onError: vi.fn(), onEvent, onLog: vi.fn() }, overrides));
+    // We have some duplicate key warnings because we're mocking the random id generator
+    // But I want to keep this file as close to the original as possible, so I'm not going to fix it
+    const originalError = console.error;
+    beforeEach(() => {
+        mockHttpClient.mockResolvedValue({
+            ok: true,
+            status: 200,
+            json: vi.fn().mockResolvedValue({ [idProperty]: 'mockFileId' }),
+        });
+        console.error = vi.fn();
+    });
+    afterEach(() => {
+        vi.clearAllMocks();
+        onEvent.mockClear();
+        console.error = originalError;
+    });
+    describe('and the schema has an $id prop', () => {
+        // We use the inner id now (and it doesn't really matter anyway)
+        it.skip('should be the $id given to the input component', () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps())));
+            expect(screen.getByLabelText('upload schema title')).toBeInTheDocument();
+            expect(screen.getByLabelText('upload schema title')).toHaveAttribute('id', 'upload-id');
+        });
+    });
+    describe('and the schema has no $id prop', () => {
+        it.skip('should be a generated id given to the input component', () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps({
+                initialStep: Object.assign(Object.assign({}, initialStep), { schemas: [getMultipleFileUploadSchemaObjectWithoutId()] }),
+            }))));
+            expect(screen.getByLabelText('upload schema title')).toBeInTheDocument();
+            expect(screen.getByLabelText('upload schema title')).toHaveAttribute('id', 'DUMMY_GENERATED_UNIQUE_ID');
+        });
+    });
+    it('should render the file input', () => {
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps())));
+        expect(screen.getByLabelText('upload schema title')).toHaveAttribute('type', 'file');
+    });
+    describe('when upload successful', () => {
+        it('the files should show as uploaded', async () => {
+            const props = getProps();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            onEvent.mockClear();
+            await user.upload(screen.getByLabelText('upload schema title'), testFile);
+            await waitFor(() => expect(onEvent).toHaveBeenCalledTimes(2));
+            // Modification (we've changed the events):
+            expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - PersistAsync Triggered', expect.objectContaining({
+                flowId: 'multiple-file-upload-schema-test-flow-id',
+                stepId: 'multiple-file-upload-schema-test-step-id',
+                schema: 'upload-id',
+            }));
+            expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - PersistAsync Succeeded', expect.objectContaining({
+                flowId: 'multiple-file-upload-schema-test-flow-id',
+                stepId: 'multiple-file-upload-schema-test-step-id',
+                schema: 'upload-id',
+            }));
+            // Original:
+            // expect(onEvent).toHaveBeenCalledWith(
+            //   'Dynamic Flow - PersistAsync',
+            //   expect.objectContaining({ status: 'pending' }),
+            // );
+            // expect(onEvent).toHaveBeenCalledWith(
+            //   'Dynamic Flow - PersistAsync',
+            //   expect.objectContaining({ status: 'success' }),
+            // );
+            expect(screen.getByText('test-file.pdf')).toBeInTheDocument();
+            expect(screen.getByText('Uploaded')).toBeInTheDocument();
+        });
+        it('the file IDs should be in the payload on submission', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps())));
+            onEvent.mockClear();
+            await user.upload(screen.getByLabelText('upload schema title'), testFile);
+            await waitFor(() => expect(onEvent).toHaveBeenCalledTimes(2));
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: JSON.stringify({ files: ['mockFileId'] }) })));
+        });
+    });
+    describe('when upload fails', () => {
+        it('shows error message to the user', async () => {
+            const errorMessage = 'Error uploading';
+            mockHttpClient.mockResolvedValueOnce({
+                ok: false,
+                status: 401,
+                json: vi.fn().mockResolvedValue({ validation: { [param]: errorMessage } }),
+            });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps())));
+            onEvent.mockClear();
+            await user.upload(screen.getByLabelText('upload schema title'), testFile);
+            await waitFor(() => expect(onEvent).toHaveBeenCalledTimes(2));
+            // Modification (we've changed the events):
+            expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - PersistAsync Triggered', expect.objectContaining({
+                flowId: 'multiple-file-upload-schema-test-flow-id',
+                stepId: 'multiple-file-upload-schema-test-step-id',
+                schema: 'upload-id',
+            }));
+            expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - PersistAsync Failed', expect.objectContaining({
+                flowId: 'multiple-file-upload-schema-test-flow-id',
+                stepId: 'multiple-file-upload-schema-test-step-id',
+                schema: 'upload-id',
+            }));
+            // Original
+            // expect(onEvent).toHaveBeenCalledWith(
+            //   'Dynamic Flow - PersistAsync',
+            //   expect.objectContaining({ status: 'pending' }),
+            // );
+            // expect(onEvent).toHaveBeenCalledWith(
+            //   'Dynamic Flow - PersistAsync',
+            //   expect.objectContaining({ status: 'failure' }),
+            // );
+            expect(screen.getByText('test-file.pdf')).toBeInTheDocument();
+            expect(screen.getByText('Error uploading')).toBeInTheDocument();
+        });
+        it('model is NOT updated', async () => {
+            const errorMessage = 'Error uploading';
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps())));
+            onEvent.mockClear();
+            await user.upload(screen.getByLabelText('upload schema title'), testFile);
+            mockHttpClient.mockResolvedValueOnce({
+                ok: false,
+                status: 401,
+                json: vi.fn().mockResolvedValue({ validation: { [param]: errorMessage } }),
+            });
+            await user.upload(screen.getByLabelText('upload schema title'), new File([], 'test-file2.pdf', { type: 'application/pdf' }));
+            await waitFor(() => expect(onEvent).toHaveBeenCalledTimes(4));
+            await user.click(screen.getByText('Submit'));
+            // only valid file is added to model
+            await waitFor(() => expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: JSON.stringify({ files: ['mockFileId'] }) })));
+        });
+    });
+    describe('when uploading fewer files than required', () => {
+        it('should show default min items error when submitted with no. of files less than expected if no custom validation message is given', async () => {
+            const props = getProps({
+                initialStep: {
+                    id: 'multiple-file-upload-schema-test-step-id',
+                    title: 'OneOf Schema Step Title',
+                    layout: [
+                        { type: 'form', schemaId: '#schema' },
+                        {
+                            type: 'button',
+                            title: 'Submit',
+                            action: { url: '/submit', method: 'POST' },
+                        },
+                    ],
+                    schemas: [
+                        getMultipleFileUploadSchemaObject(getArraySchema({ minItems: 2, maxItems: 2 })),
+                    ],
+                    model: {},
+                    errors: {},
+                },
+            });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await user.upload(screen.getByLabelText('upload schema title'), testFile);
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => {
+                expect(screen.getByText('Please upload at least 2 file(s).')).toBeInTheDocument();
+            });
+        });
+        it('should show min items error from schema, when submitted with no. of files less than expected', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps({
+                initialStep: Object.assign(Object.assign({}, initialStep), { schemas: [getMultipleFileUploadSchemaObjectWithoutId()] }),
+            }))));
+            await user.upload(screen.getByLabelText('upload schema title'), testFile);
+            await user.click(screen.getByText('Submit'));
+            expect(screen.getByText('minimum items not met error (from schema)')).toBeInTheDocument();
+        });
+    });
+    // Currently Neptune's UploadInput handles all the max upload errors on drag-drop, bulk upload cases.
+    describe('when trying to upload more files than are allowed', () => {
+        it('should show the maximum allowed number of file uploads', async () => {
+            let it = 0;
+            const httpClient = vi.fn().mockImplementation(() => ({
+                ok: true,
+                status: 200,
+                // eslint-disable-next-line no-plusplus
+                json: vi.fn().mockResolvedValue({ [idProperty]: `mockFileId${it++}` }),
+            }));
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps({
+                initialStep: Object.assign(Object.assign({}, initialStep), { schemas: [getMultipleFileUploadSchemaObjectWithoutId()] }),
+                httpClient,
+            }))));
+            onEvent.mockClear();
+            // upload 4 items
+            await user.upload(screen.getByLabelText('upload schema title'), new File([], 'test-file1.pdf', { type: 'application/pdf' }));
+            await user.upload(screen.getByLabelText('upload schema title'), new File([], 'test-file2.pdf', { type: 'application/pdf' }));
+            await user.upload(screen.getByLabelText('upload schema title'), new File([], 'test-file3.pdf', { type: 'application/pdf' }));
+            await user.upload(screen.getByLabelText('upload schema title'), new File([], 'test-file4.pdf', { type: 'application/pdf' }));
+            // only 3 shown
+            await expect(waitFor(async () => screen.findAllByText('Uploaded'))).resolves.toHaveLength(3);
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
+                body: JSON.stringify({ files: ['mockFileId0', 'mockFileId1', 'mockFileId2'] }),
+            })));
+        });
+    });
+});
+describe('Given a multiple file upload schema without persist-async', () => {
+    const initialStep = {
+        id: 'multiple-file-upload-schema-test-step-id',
+        title: 'OneOf Schema Step Title',
+        layout: [
+            { type: 'form', schemaId: '#schema' },
+            {
+                type: 'button',
+                title: 'Refresh',
+                behavior: { type: 'refresh' },
+            },
+        ],
+        refreshUrl: '/refresh',
+        schemas: [
+            {
+                type: 'object',
+                $id: '#schema',
+                displayOrder: ['files'],
+                required: ['files'],
+                title: 'upload schema title',
+                properties: {
+                    files: {
+                        $id: 'upload-id',
+                        type: 'array',
+                        title: 'upload schema title',
+                        minItems: 1,
+                        maxItems: 2,
+                        addItemTitle: '',
+                        editItemTitle: '',
+                        items: {
+                            type: 'string',
+                            $id: 'upload-id',
+                            format: 'base64url',
+                            title: uploadTitle,
+                            description,
+                            maxSize,
+                            accepts,
+                            validationMessages: {
+                                maxSize: 'Your file is too large',
+                            },
+                        },
+                    },
+                },
+            },
+        ],
+        model: {},
+        errors: {},
+    };
+    const getProps = (overrides = {}) => (Object.assign({ flowId: 'multiple-file-upload-schema-test-flow-id', initialStep, httpClient: vi.fn(), onCompletion: vi.fn(), onError: vi.fn(), onEvent: vi.fn(), onLog: vi.fn() }, overrides));
+    it('should contain the base64uri of the selected files in the payload for a refresh request', async () => {
+        const props = getProps();
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+        // first upload 2 files
+        await user.upload(screen.getByLabelText('upload schema title'), new File([], 'mockFile0.pdf', { type: 'application/pdf' }));
+        await user.upload(screen.getByLabelText('upload schema title'), new File([], 'mockFile1.pdf', { type: 'application/pdf' }));
+        await user.click(screen.getByText('Refresh'));
+        await waitFor(() => expect(props.httpClient).toHaveBeenCalledWith('/refresh', expect.objectContaining({
+            body: JSON.stringify({
+                files: ['data:application/pdf;base64,', 'data:application/pdf;base64,'],
+            }),
+        })));
+    });
+});

package/build/tests/legacy/PersistAsync.blob-schema.test.js

@@ -0,0 +1,224 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { renderWithProviders } from '../../test-utils';
+import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ applyAccept: false });
+// This file is a copy of the E2E test in legacy. It should remain as unchanged
+// as possible, to ensure the new client functionality matches the old one.
+describe('PersistAsync with blob schema', () => {
+    const schema = {
+        $id: '#schema',
+        type: 'object',
+        title: 'File Upload',
+        displayOrder: ['file'],
+        properties: {
+            file: {
+                $id: '#file-upload-schema',
+                type: 'integer',
+                title: 'File Upload',
+                description: 'Upload a JPG or PNG file (max 150kb)',
+                persistAsync: {
+                    method: 'POST',
+                    url: '/upload-file-url',
+                    param: 'file',
+                    idProperty: 'token',
+                    schema: {
+                        $id: '#persist-async-schema',
+                        type: 'blob',
+                        maxSize: 150000,
+                        accepts: ['image/png', 'image/jpg'],
+                    },
+                },
+            },
+        },
+    };
+    const model = {};
+    const initialStep = {
+        id: 'persist-async-blob-step-id',
+        title: 'Persist Async Blob Test',
+        layout: [
+            { type: 'form', schemaId: '#schema' },
+            {
+                type: 'button',
+                title: 'Submit',
+                action: { url: '/submit', method: 'POST' },
+            },
+        ],
+        schemas: [schema],
+        model,
+    };
+    const getProps = (overrides = {}) => (Object.assign({ flowId: 'flow-id', initialStep, httpClient: vi.fn(), onCompletion: vi.fn(), onError: vi.fn(), onEvent: vi.fn(), onLog: vi.fn() }, overrides));
+    describe('when initialised', () => {
+        it('renders a file upload control', () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps())));
+            const input = screen.getByTestId('uploadInput');
+            expect(input).toBeInTheDocument();
+            expect(input.tagName).toBe('INPUT');
+            expect(input).toHaveAttribute('type', 'file');
+        });
+        describe('when the schema has an $id property', () => {
+            // We don't care about this - we're only going to use the inner ID
+            it.skip('renders the UploadInput with an id prop based on the schema $id', () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps())));
+                expect(screen.getByTestId('uploadInput')).toHaveAttribute('id', '#file-upload-schema');
+            });
+        });
+        describe('when the main schema has no $id, but the persist async schema has an $id property', () => {
+            it('renders the UploadInput with an id prop based on the persist async schema $id', () => {
+                const schemaWithNoId = {
+                    $id: '#schema',
+                    type: 'object',
+                    title: 'File Upload',
+                    displayOrder: ['file'],
+                    properties: {
+                        file: {
+                            type: 'integer',
+                            title: 'File Upload',
+                            description: 'Upload a JPG or PNG file (max 150kb)',
+                            persistAsync: {
+                                method: 'POST',
+                                url: '/upload-file-url',
+                                param: 'file',
+                                idProperty: 'token',
+                                schema: {
+                                    $id: '#persist-async-schema',
+                                    type: 'blob',
+                                    maxSize: 150000,
+                                    accepts: ['image/png', 'image/jpg'],
+                                },
+                            },
+                        },
+                    },
+                };
+                const props = getProps({ initialStep: Object.assign(Object.assign({}, initialStep), { schemas: [schemaWithNoId] }) });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                expect(screen.getByTestId('uploadInput')).toHaveAttribute('id', '#persist-async-schema');
+            });
+        });
+        describe('when none of the schemas have an $id', () => {
+            // This is strange behaviour which we're not going to replicate
+            it.skip('renders the UploadInput with an id prop based on the idProperty', () => {
+                const schemaWithNoId = {
+                    $id: '#schema',
+                    type: 'object',
+                    title: 'File Upload',
+                    displayOrder: ['file'],
+                    properties: {
+                        file: {
+                            type: 'integer',
+                            title: 'File Upload',
+                            description: 'Upload a JPG or PNG file (max 150kb)',
+                            persistAsync: {
+                                method: 'POST',
+                                url: '/upload-file-url',
+                                param: 'file',
+                                idProperty: 'token',
+                                schema: {
+                                    type: 'blob',
+                                    maxSize: 150000,
+                                    accepts: ['image/png', 'image/jpg'],
+                                },
+                            },
+                        },
+                    },
+                };
+                const props = getProps({ initialStep: Object.assign(Object.assign({}, initialStep), { schemas: [schemaWithNoId] }) });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                expect(screen.getByTestId('uploadInput')).toHaveAttribute('id', 'token');
+            });
+        });
+    });
+    describe('when a file is selected', () => {
+        it('calls the httpClient to upload the file with a FormData body containing the file', async () => {
+            var _a, _b;
+            const httpClient = vi.fn(async () => Promise.resolve(new Response(JSON.stringify({ token: 123 }))));
+            const props = getProps({ httpClient });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            const file = new File(['foo'], 'foo.png', { type: 'image/png' });
+            await user.upload(screen.getByTestId('uploadInput'), file);
+            await waitFor(() => expect(httpClient).toHaveBeenCalledTimes(1));
+            // Modification (call now has headers and signal):
+            expect(httpClient).toHaveBeenCalledWith('/upload-file-url', expect.objectContaining({ method: 'POST', body: expect.any(FormData) }));
+            // Original:
+            // expect(httpClient).toHaveBeenCalledWith('/upload-file-url', {
+            //   method: 'POST',
+            //   body: expect.any(FormData) as FormData,
+            // });
+            const formData = (_b = (_a = httpClient.mock.calls[0]) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.body;
+            expect(formData.get('file')).toBe(file);
+        });
+        describe('when the file is too large', () => {
+            it('does not call the httpClient and displays an error message', async () => {
+                const httpClient = vi.fn();
+                const props = getProps({ httpClient });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                const file = new File(['foo'], 'foo.png', { type: 'image/png' });
+                // eslint-disable-next-line functional/immutable-data
+                Object.defineProperty(file, 'size', { value: 150001 });
+                await user.upload(screen.getByTestId('uploadInput'), file);
+                await waitFor(() => {
+                    expect(screen.getByText('File is too large')).toBeInTheDocument();
+                });
+                expect(httpClient).not.toHaveBeenCalled();
+            });
+        });
+        describe('when the file is not of the correct type', () => {
+            it('does not call the httpClient and displays an error message', async () => {
+                const httpClient = vi.fn();
+                const props = getProps({ httpClient });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                const file = new File(['foo'], 'foo.gif', { type: 'image/gif' });
+                await user.upload(screen.getByTestId('uploadInput'), file);
+                await waitFor(() => {
+                    expect(screen.getByText('File type not supported')).toBeInTheDocument();
+                });
+                expect(httpClient).not.toHaveBeenCalled();
+            });
+        });
+        describe('when a file is successfully uploaded', () => {
+            it('displays the file name on screen with the "Uploaded" tag', async () => {
+                const httpClient = vi.fn(async () => Promise.resolve(new Response(JSON.stringify({ token: 123 }))));
+                const props = getProps({ httpClient });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await user.upload(screen.getByTestId('uploadInput'), new File(['foo'], 'foo.png', { type: 'image/png' }));
+                await waitFor(() => {
+                    expect(screen.getByText('Uploaded')).toBeInTheDocument();
+                });
+                expect(screen.getByText('foo.png')).toBeInTheDocument();
+            });
+        });
+        describe('when a file fails to upload', () => {
+            describe('when there is a general failure', () => {
+                it('displays an error message', async () => {
+                    const httpClient = vi.fn(async () => Promise.resolve(new Response(null, { status: 500 })));
+                    const props = getProps({ httpClient });
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                    await user.upload(screen.getByTestId('uploadInput'), new File(['foo'], 'foo.png', { type: 'image/png' }));
+                    // Modification (we now use our general error message, not Neptune's):
+                    await waitFor(() => {
+                        expect(screen.getByText('Something went wrong.')).toBeInTheDocument();
+                    });
+                    // Original:
+                    // await waitFor(() => {
+                    //   expect(screen.getByText('Uploading failed')).toBeInTheDocument();
+                    // });
+                });
+            });
+            describe('when there is a validation error', () => {
+                it('displays the validation error message provided in the response', async () => {
+                    const httpClient = vi.fn(async () => Promise.resolve(new Response(JSON.stringify({
+                        validation: { file: 'The server overlords dislike the uploaded file.' },
+                    }), { status: 401 })));
+                    const props = getProps({ httpClient });
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                    await user.upload(screen.getByTestId('uploadInput'), new File(['foo'], 'foo.png', { type: 'image/png' }));
+                    await waitFor(() => {
+                        expect(screen.getByText('The server overlords dislike the uploaded file.')).toBeInTheDocument();
+                    });
+                });
+            });
+        });
+    });
+});