@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/MultiUpload.test.js

@@ -0,0 +1,293 @@
+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

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