@wise/dynamic-flow-client 5.11.0 → 5.12.0

package/build/tests/MultiUpload.test.js

@@ -1,293 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { screen, waitFor } from '@testing-library/react';
-import { arraySchemaToMultiUploadComponent } from '../domain/mappers/schema/arraySchemaToComponent/arraySchemaToMultiUploadComponent';
-import { getMockMapperProps, getMockSchemaMapperProps, getUpdateFunctionMock, } from '../domain/mappers/schema/tests/test-utils';
-import { renderWithProviders, respondWith } from '../test-utils';
-import DynamicFlowWise from '../test-utils/DynamicFlowWise';
-import userEvent from '@testing-library/user-event';
-import { vi } from 'vitest';
-const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-describe('given a multi-file upload schema', () => {
-    describe('that has a per-file validation (accepts/maxSize)', () => {
-        const schema = {
-            type: 'array',
-            addItemTitle: '',
-            editItemTitle: '',
-            validationMessages: {
-                accepts: 'This should not be used',
-            },
-            items: {
-                type: 'string',
-                accepts: ['application/pdf'],
-                title: 'Upload your passport',
-                validationMessages: {
-                    accepts: 'Sorry, that file format is not supported. Please upload a different file',
-                },
-                format: 'base64url',
-                maxSize: 10,
-            },
-        };
-        describe('and the uploaded file is valid', () => {
-            it('does not set an error message in the error map', async () => {
-                const mockUpdateFn = getUpdateFunctionMock(() => component);
-                const component = arraySchemaToMultiUploadComponent(Object.assign(Object.assign({}, getMockSchemaMapperProps({ schema })), { model: null }), Object.assign(Object.assign({}, getMockMapperProps()), { onComponentUpdate: mockUpdateFn }));
-                const file = new File(['fooo'], 'file.pdf', {
-                    type: 'application/pdf',
-                });
-                await component.onInsertFile(0, file);
-                expect(component.files[0].errors).toStrictEqual([]);
-            });
-        });
-        describe('and the uploaded file is invalid', () => {
-            it('because it is the wrong type, sets the file errors in the in the error map', async () => {
-                const mockUpdateFn = getUpdateFunctionMock(() => component);
-                const component = arraySchemaToMultiUploadComponent(Object.assign(Object.assign({}, getMockSchemaMapperProps({ schema })), { model: null }), Object.assign(Object.assign({}, getMockMapperProps()), { onComponentUpdate: mockUpdateFn }));
-                const file = new File(['foo'], 'file.png', { type: 'image/png' });
-                await component.onInsertFile(0, file);
-                expect(component.files[0].errors).toStrictEqual(['accepts']);
-            });
-            it('because it is too big, sets the file errors in the in the error map', async () => {
-                const mockUpdateFn = getUpdateFunctionMock(() => component);
-                const component = arraySchemaToMultiUploadComponent(Object.assign(Object.assign({}, getMockSchemaMapperProps({ schema })), { model: null }), Object.assign(Object.assign({}, getMockMapperProps()), { onComponentUpdate: mockUpdateFn }));
-                const file = new File(['foooooooooo'], 'file.pdf', {
-                    type: 'application/pdf',
-                });
-                await component.onInsertFile(0, file);
-                expect(component.files[0].errors).toStrictEqual(['maxSize']);
-            });
-            it('uses validationMessages from the items schema, not the array schema', async () => {
-                const mockUpdateFn = getUpdateFunctionMock(() => component);
-                const getErrorMessageFunctions = vi
-                    .fn()
-                    .mockImplementation((validationMessages) => ({
-                    accepts: () => {
-                        return validationMessages.accepts;
-                    },
-                }));
-                const component = arraySchemaToMultiUploadComponent(Object.assign(Object.assign({}, getMockSchemaMapperProps({ schema })), { model: null }), Object.assign(Object.assign({}, getMockMapperProps()), { onComponentUpdate: mockUpdateFn, getErrorMessageFunctions }));
-                getErrorMessageFunctions.mockClear();
-                const file = new File(['foo'], 'file.png', { type: 'image/png' });
-                await component.onInsertFile(0, file);
-                expect(component.files[0].errors).toStrictEqual([
-                    'Sorry, that file format is not supported. Please upload a different file',
-                ]);
-            });
-        });
-    });
-    describe('that has persist-async', () => {
-        describe('when deleting an uploaded file, while there are multiple', () => {
-            it('deleting an uploaded file should remove only that file, leaving the others intact', async () => {
-                const step = {
-                    id: 'step-id',
-                    title: 'Blob Upload (Multiple, Persist Async)',
-                    schemas: [
-                        {
-                            $id: '#id',
-                            type: 'array',
-                            title: 'Upload label',
-                            maxItems: 5,
-                            addItemTitle: 'Add',
-                            editItemTitle: 'Edit',
-                            items: {
-                                type: 'string',
-                                persistAsync: {
-                                    method: 'POST',
-                                    url: '/persist-async',
-                                    param: 'param',
-                                    idProperty: 'token',
-                                    schema: {
-                                        type: 'blob',
-                                        source: 'file',
-                                        title: 'Upload label',
-                                        description: 'PNG, JPG, or PDF, less than 5mb',
-                                        accepts: ['image/png', 'image/jpeg', 'application/pdf'],
-                                        maxSize: 5242000,
-                                        validationMessages: {
-                                            maxSize: 'Your file is too large',
-                                        },
-                                    },
-                                },
-                            },
-                        },
-                    ],
-                    layout: [
-                        {
-                            type: 'form',
-                            schemaId: '#id',
-                        },
-                        {
-                            type: 'button',
-                            title: 'Submit',
-                            action: {
-                                url: '/submit',
-                                method: 'POST',
-                            },
-                        },
-                    ],
-                };
-                const httpClient = vi
-                    .fn()
-                    .mockImplementationOnce(async () => {
-                    return respondWith({ token: '123' });
-                })
-                    .mockImplementationOnce(async () => {
-                    return respondWith({ token: '456' });
-                })
-                    .mockImplementationOnce(async () => {
-                    return respondWith({ token: '789' });
-                })
-                    .mockImplementationOnce(async () => {
-                    return respondWith(null, { headers: { 'X-DF-Response-Type': 'exit' } });
-                });
-                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step, httpClient: httpClient, onCompletion: vi.fn(), onError: vi.fn() }));
-                await user.upload(screen.getByTestId('uploadInput'), new File([''], 'file.png', { type: 'image/png' }));
-                await waitFor(() => {
-                    expect(screen.getByText('Uploaded')).toBeInTheDocument();
-                });
-                await user.upload(screen.getByTestId('uploadInput'), new File([''], 'file.jpg', { type: 'image/jpeg' }));
-                await user.upload(screen.getByTestId('uploadInput'), new File([''], 'file.pdf', { type: 'application/pdf' }));
-                await waitFor(() => {
-                    expect(screen.getAllByText('Uploaded')).toHaveLength(3);
-                });
-                await user.click(screen.getAllByTestId('bin-icon')[1]);
-                httpClient.mockClear();
-                await waitFor(() => {
-                    expect(screen.getByRole('button', { name: 'Remove' })).toBeInTheDocument();
-                });
-                await user.click(screen.getByRole('button', { name: 'Remove' }));
-                await waitFor(() => {
-                    expect(screen.getAllByText('Uploaded')).toHaveLength(2);
-                });
-                await user.click(screen.getByRole('button', { name: 'Submit' }));
-                await waitFor(() => {
-                    expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: '["123","789"]' }));
-                });
-            });
-        });
-    });
-    describe('and the first file upload fails server validation, and then a second file is uploaded', () => {
-        const step = {
-            id: 'step-id',
-            title: 'Blob Upload (Multiple, Persist Async)',
-            schemas: [
-                {
-                    $id: '#id',
-                    type: 'array',
-                    title: 'Upload label',
-                    maxItems: 5,
-                    addItemTitle: 'Add',
-                    editItemTitle: 'Edit',
-                    items: {
-                        type: 'string',
-                        persistAsync: {
-                            method: 'POST',
-                            url: '/persist-async',
-                            param: 'param',
-                            idProperty: 'token',
-                            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: '#id',
-                },
-                {
-                    type: 'button',
-                    title: 'Submit',
-                    action: {
-                        url: '/submit',
-                        method: 'POST',
-                    },
-                },
-            ],
-        };
-        it('correctly uploads the second file, and has removed the first', async () => {
-            const httpClient = vi
-                .fn()
-                .mockImplementationOnce(async () => {
-                return respondWith({}, { status: 422 });
-            })
-                .mockImplementationOnce(async () => {
-                return respondWith({ token: '12345' });
-            });
-            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step, httpClient: httpClient, onCompletion: vi.fn(), onError: vi.fn() }));
-            await user.upload(screen.getByTestId('uploadInput'), new File([''], 'file.png', { type: 'image/png' }));
-            await waitFor(() => {
-                expect(screen.getByText('Something went wrong.')).toBeInTheDocument();
-            });
-            await user.click(screen.getByTestId('bin-icon'));
-            await user.upload(screen.getByTestId('uploadInput'), new File([''], 'file.png', { type: 'image/png' }));
-            await waitFor(() => {
-                expect(screen.getByText('Uploaded')).toBeInTheDocument();
-            });
-        });
-    });
-    describe('and the array schema has hidden: true', () => {
-        const step = {
-            id: 'step-id',
-            title: 'Blob Upload (Multiple, Persist Async)',
-            schemas: [
-                {
-                    $id: '#id',
-                    type: 'array',
-                    hidden: true,
-                    title: 'Upload label',
-                    maxItems: 5,
-                    addItemTitle: 'Add',
-                    editItemTitle: 'Edit',
-                    items: {
-                        type: 'string',
-                        persistAsync: {
-                            method: 'POST',
-                            url: '/persist-async',
-                            param: 'param',
-                            idProperty: 'token',
-                            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: '#id',
-                },
-                {
-                    type: 'button',
-                    title: 'Submit',
-                    action: {
-                        url: '/submit',
-                        method: 'POST',
-                    },
-                },
-            ],
-        };
-        it('does not render the upload', () => {
-            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step, httpClient: vi.fn(), onCompletion: vi.fn(), onError: vi.fn() }));
-            expect(screen.queryByLabelText('Upload label')).not.toBeInTheDocument();
-        });
-    });
-});

package/build/tests/NativeBack.test.js

@@ -1,267 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { renderWithProviders, respondWith } from '../test-utils';
-import DynamicFlowWise from '../test-utils/DynamicFlowWise';
-import { act, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { respondWithDelay } from '../test-utils/fetch-utils';
-import { vi } from 'vitest';
-const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-describe('native back', () => {
-    const getDefaultProps = () => ({
-        flowId: 'flow-id',
-        features: {
-            nativeBack: true,
-        },
-        httpClient: vi.fn(),
-        onCompletion: vi.fn(),
-        onError: vi.fn(),
-        onEvent: vi.fn(),
-        onLog: vi.fn(),
-    });
-    const step = {
-        id: 'step-id',
-        title: 'Initial step',
-        layout: [
-            {
-                type: 'button',
-                title: 'Submit',
-                behavior: {
-                    type: 'action',
-                    action: {
-                        url: '/submit',
-                    },
-                },
-            },
-        ],
-        schemas: [],
-    };
-    describe('given no stack behavior', () => {
-        const getMockHttpClient = () => {
-            let stepCount = 1;
-            return vi.fn().mockImplementation(async (input) => {
-                if (input === '/upload') {
-                    return respondWith({ token: '123' });
-                }
-                stepCount += 1;
-                return respondWith(Object.assign(Object.assign({}, step), { title: `Step ${stepCount}` }));
-            });
-        };
-        it('shows a back button on the initial step that cancels the flow if onCancellation is provided', async () => {
-            const onCancellation = vi.fn();
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: step }, getDefaultProps(), { httpClient: getMockHttpClient(), onCancellation: onCancellation })));
-            expect(screen.getByText('Initial step')).toBeInTheDocument();
-            expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: 'Back' }));
-            expect(onCancellation).toHaveBeenCalled();
-        });
-        it('does not show a back button on the initial step if onCancellation is not provided', async () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: step }, getDefaultProps(), { httpClient: getMockHttpClient() })));
-            expect(screen.getByText('Initial step')).toBeInTheDocument();
-            expect(screen.queryByRole('button', { name: 'Back' })).not.toBeInTheDocument();
-        });
-        it('adds new steps that can be navigated back from', async () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: step }, getDefaultProps(), { httpClient: getMockHttpClient() })));
-            expect(screen.getByText('Initial step')).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: 'Submit' }));
-            expect(screen.getByText('Step 2')).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: 'Submit' }));
-            expect(screen.getByText('Step 3')).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: 'Back' }));
-            expect(screen.getByText('Step 2')).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: 'Back' }));
-            expect(screen.getByText('Initial step')).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: 'Submit' }));
-            await waitFor(() => {
-                expect(screen.getByText('Step 4')).toBeInTheDocument();
-            });
-        });
-        it('restores state from the previous step', async () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: Object.assign(Object.assign({}, step), { schemas: [
-                        {
-                            $id: '#schema',
-                            type: 'string',
-                            title: 'Name',
-                        },
-                    ], layout: [
-                        {
-                            type: 'form',
-                            schemaId: '#schema',
-                        },
-                        ...step.layout,
-                    ] }) }, getDefaultProps(), { httpClient: getMockHttpClient() })));
-            expect(screen.getByText('Initial step')).toBeInTheDocument();
-            await user.type(screen.getByLabelText('Name'), 'John Doe');
-            await user.click(screen.getByRole('button', { name: 'Submit' }));
-            expect(screen.getByText('Step 2')).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: 'Back' }));
-            expect(screen.getByDisplayValue('John Doe')).toBeInTheDocument();
-        });
-        it('restores (visual) state from the previous step when there is an upload', async () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: Object.assign(Object.assign({}, step), { schemas: [
-                        {
-                            $id: '#schema',
-                            type: 'string',
-                            persistAsync: {
-                                param: 'file',
-                                idProperty: 'token',
-                                method: 'POST',
-                                url: '/upload',
-                                schema: {
-                                    type: 'blob',
-                                },
-                            },
-                        },
-                    ], layout: [
-                        {
-                            type: 'form',
-                            schemaId: '#schema',
-                        },
-                        ...step.layout,
-                    ] }) }, getDefaultProps(), { httpClient: getMockHttpClient() })));
-            expect(screen.getByText('Initial step')).toBeInTheDocument();
-            await user.upload(screen.getByTestId('uploadInput'), new File([''], 'my_file.png', { type: 'image/png' }));
-            expect(screen.getByText('my_file.png')).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: 'Submit' }));
-            await waitFor(() => {
-                expect(screen.getByText('Step 2')).toBeInTheDocument();
-            });
-            await user.click(screen.getByRole('button', { name: 'Back' }));
-            expect(screen.getByText('my_file.png')).toBeInTheDocument();
-        });
-        it('removes previous step if it has polling', async () => {
-            const httpClient = vi
-                .fn()
-                .mockImplementationOnce(async () => {
-                return respondWith(Object.assign(Object.assign({}, step), { title: 'Polling step', polling: {
-                        delay: 1,
-                        url: '/poll',
-                        maxAttempts: 5,
-                        onError: { behavior: { type: 'action', action: {} } },
-                    } }));
-            })
-                .mockImplementationOnce(async () => {
-                return respondWithDelay(Object.assign(Object.assign({}, step), { title: 'Step after polling' }), 1000, {
-                    headers: { 'X-DF-Response-Type': 'step' },
-                });
-            });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: step }, getDefaultProps(), { httpClient: httpClient })));
-            expect(screen.getByText('Initial step')).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: 'Submit' }));
-            expect(screen.getByText('Polling step')).toBeInTheDocument();
-            await act(async () => {
-                await vi.advanceTimersByTimeAsync(1000);
-            });
-            await waitFor(() => {
-                expect(screen.getByText('Step after polling')).toBeInTheDocument();
-            });
-            await user.click(screen.getByRole('button', { name: 'Back' }));
-            expect(screen.getByText('Initial step')).toBeInTheDocument();
-        });
-        it('restores refreshAfter from previous step', async () => {
-            const httpClient = vi.fn().mockImplementation(async (input) => {
-                if (input === '/refresh') {
-                    return respondWith(Object.assign(Object.assign({}, step), { title: 'Refreshed step' }));
-                }
-                return respondWith(Object.assign(Object.assign({}, step), { title: 'Next step' }));
-            });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: Object.assign(Object.assign({}, step), { refreshAfter: new Date(Date.now() + 5000).toISOString(), refreshUrl: '/refresh' }) }, getDefaultProps(), { httpClient: httpClient })));
-            expect(screen.getByText('Initial step')).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: 'Submit' }));
-            expect(screen.getByText('Next step')).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: 'Back' }));
-            expect(screen.getByText('Initial step')).toBeInTheDocument();
-            await act(async () => {
-                await vi.advanceTimersByTimeAsync(6000);
-            });
-            expect(screen.getByText('Refreshed step')).toBeInTheDocument();
-        });
-    });
-    describe('given stack behavior', () => {
-        describe('replace-current', () => {
-            const getMockHttpClient = () => {
-                let stepCount = 1;
-                return vi.fn().mockImplementation(async () => {
-                    stepCount += 1;
-                    return respondWith(Object.assign(Object.assign({}, step), { title: `Step ${stepCount}`, navigation: { stackBehavior: stepCount > 2 ? 'replace-current' : undefined } }));
-                });
-            };
-            it('adds new steps that replace the current step', async () => {
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: step }, getDefaultProps(), { httpClient: getMockHttpClient() })));
-                // initial step
-                expect(screen.getByText('Initial step')).toBeInTheDocument();
-                await user.click(screen.getByRole('button', { name: 'Submit' }));
-                await waitFor(async () => {
-                    // no stack behavior
-                    expect(screen.getByText('Step 2')).toBeInTheDocument();
-                });
-                await user.click(screen.getByRole('button', { name: 'Submit' }));
-                await waitFor(async () => {
-                    // replace-current step
-                    expect(screen.getByText('Step 3')).toBeInTheDocument();
-                });
-                await user.click(screen.getByRole('button', { name: 'Back' }));
-                await waitFor(async () => {
-                    expect(screen.getByText('Initial step')).toBeInTheDocument();
-                });
-            });
-        });
-        describe('remove-previous', () => {
-            const getMockHttpClient = () => {
-                let stepCount = 1;
-                return vi.fn().mockImplementation(async () => {
-                    stepCount += 1;
-                    return respondWith(Object.assign(Object.assign({}, step), { title: `Step ${stepCount}`, navigation: { stackBehavior: stepCount > 2 ? 'remove-previous' : undefined } }));
-                });
-            };
-            it('adds new steps that replace the current step', async () => {
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: step }, getDefaultProps(), { httpClient: getMockHttpClient() })));
-                // initial step
-                expect(screen.getByText('Initial step')).toBeInTheDocument();
-                await user.click(screen.getByRole('button', { name: 'Submit' }));
-                // no stack behavior
-                expect(screen.getByText('Step 2')).toBeInTheDocument();
-                await user.click(screen.getByRole('button', { name: 'Submit' }));
-                // remove-previous step
-                expect(screen.getByText('Step 3')).toBeInTheDocument();
-                await user.click(screen.getByRole('button', { name: 'Back' }));
-                expect(screen.getByText('Initial step')).toBeInTheDocument();
-            });
-        });
-        describe('remove-all', () => {
-            const getMockHttpClient = () => {
-                let stepCount = 1;
-                return vi.fn().mockImplementation(async () => {
-                    stepCount += 1;
-                    return respondWith(Object.assign(Object.assign({}, step), { title: `Step ${stepCount}`, navigation: { stackBehavior: stepCount > 2 ? 'remove-all' : undefined } }));
-                });
-            };
-            it('adds new steps that replace the current step', async () => {
-                const onCancellation = vi.fn();
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: step }, getDefaultProps(), { httpClient: getMockHttpClient(), onCancellation: onCancellation })));
-                // initial step
-                expect(screen.getByText('Initial step')).toBeInTheDocument();
-                await user.click(screen.getByRole('button', { name: 'Submit' }));
-                // no stack behavior
-                expect(screen.getByText('Step 2')).toBeInTheDocument();
-                await user.click(screen.getByRole('button', { name: 'Submit' }));
-                // remove-all step
-                expect(screen.getByText('Step 3')).toBeInTheDocument();
-                await user.click(screen.getByRole('button', { name: 'Back' }));
-                expect(onCancellation).toHaveBeenCalled();
-                expect(screen.getByText('Step 3')).toBeInTheDocument();
-            });
-            it('does not show back button on initial step after clearing the stack if no onCancellation is provided', async () => {
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: step }, getDefaultProps(), { httpClient: getMockHttpClient() })));
-                // initial step
-                expect(screen.getByText('Initial step')).toBeInTheDocument();
-                await user.click(screen.getByRole('button', { name: 'Submit' }));
-                // no stack behavior
-                expect(screen.getByText('Step 2')).toBeInTheDocument();
-                await user.click(screen.getByRole('button', { name: 'Submit' }));
-                // remove-all step
-                expect(screen.getByText('Step 3')).toBeInTheDocument();
-                expect(screen.queryByRole('button', { name: 'Back' })).not.toBeInTheDocument();
-            });
-        });
-    });
-});