@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/Flow.test.js

@@ -0,0 +1,328 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { renderWithProviders, respondWithDelay } from '../test-utils';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('in a flow', () => {
+    describe('when started with an initial action', () => {
+        describe('and the initialLoader feature is provided', () => {
+            it('shows an initial loader while waiting for the initial action', async () => {
+                const httpClient = vi.fn().mockImplementation(async () => respondWithDelay({
+                    id: 'my-step',
+                    title: 'Step title',
+                    layout: [],
+                    schemas: [],
+                }, 1000));
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", features: { initialLoader: true }, initialAction: { url: '/step-please' }, httpClient: httpClient, onCompletion: vi.fn(), onError: vi.fn() }));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenCalled();
+                });
+                expect(screen.getByTestId('loading-state')).toBeInTheDocument();
+                await waitFor(() => {
+                    expect(screen.getByText('Step title')).toBeInTheDocument();
+                });
+                expect(screen.queryByTestId('loading-state')).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe('when two consecutive steps share the same structure', () => {
+        describe('and have the same ID', () => {
+            const step = (title) => ({
+                title,
+                id: 'NON_UNIQUE_STEP_ID',
+                layout: [
+                    {
+                        type: 'button',
+                        action: { url: '/next' },
+                        title: 'Submit',
+                    },
+                ],
+                schemas: [],
+            });
+            it('they have a differentiating bit in their uids', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step('First step'), httpClient: async () => Promise.resolve(new Response(JSON.stringify(step('Another step!')))), renderers: [
+                        {
+                            canRenderType: 'step',
+                            render: ({ title, uid, children }) => (_jsxs(_Fragment, { children: [_jsx("p", { children: title }), _jsx("p", { children: uid }), children] })),
+                        },
+                    ], onCompletion: vi.fn(), onError: vi.fn() }));
+                expect(screen.getByText('First step')).toBeInTheDocument();
+                expect(screen.getByText('root:0.NON_UNIQUE_STEP_ID')).toBeInTheDocument();
+                await user.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(screen.getByText('Another step!')).toBeInTheDocument();
+                });
+                expect(screen.getByText('root:1.NON_UNIQUE_STEP_ID')).toBeInTheDocument();
+                await user.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(screen.getByText('Another step!')).toBeInTheDocument();
+                });
+                expect(screen.getByText('root:2.NON_UNIQUE_STEP_ID')).toBeInTheDocument();
+            });
+        });
+        describe('when a step refreshes', () => {
+            it('the uid will remain the same as long as the step id does', async () => {
+                const step = (title) => ({
+                    title,
+                    id: 'step_id',
+                    layout: [
+                        {
+                            type: 'form',
+                            schemaId: '#form',
+                        },
+                    ],
+                    schemas: [
+                        {
+                            $id: '#form',
+                            type: 'boolean',
+                            refreshStepOnChange: true,
+                            title: 'Refresh here',
+                        },
+                    ],
+                    refreshUrl: '/',
+                });
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step('First step'), httpClient: async () => Promise.resolve(new Response(JSON.stringify(step('Refreshed step')))), renderers: [
+                        {
+                            canRenderType: 'step',
+                            render: ({ title, uid, children }) => (_jsxs(_Fragment, { children: [_jsx("p", { children: title }), _jsx("p", { children: uid }), children] })),
+                        },
+                    ], onCompletion: vi.fn(), onError: vi.fn() }));
+                expect(screen.getByText('First step')).toBeInTheDocument();
+                expect(screen.getByText('root:0.step_id')).toBeInTheDocument();
+                await user.click(screen.getByText('Refresh here'));
+                await waitFor(() => {
+                    expect(screen.getByText('Refreshed step')).toBeInTheDocument();
+                });
+                expect(screen.getByText('root:0.step_id')).toBeInTheDocument();
+            });
+        });
+        describe('and the step contains an upload', () => {
+            const step = (title) => ({
+                id: `step-id-${title}`,
+                title: 'Blob Upload (Multiple, Persist Async)',
+                schemas: [
+                    {
+                        $id: '#id',
+                        type: 'object',
+                        displayOrder: ['upload'],
+                        required: ['upload'],
+                        properties: {
+                            upload: {
+                                type: 'array',
+                                title,
+                                minItems: 1,
+                                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 carry the value forward to the second step', async () => {
+                const httpClient = vi.fn().mockImplementation((input, init) => {
+                    if (input === '/persist-async') {
+                        return new Response(JSON.stringify({ token: '12345' }));
+                    }
+                    return new Response(JSON.stringify(step('Upload B')));
+                });
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step('Upload A'), httpClient: httpClient, onCompletion: vi.fn(), onError: vi.fn() }));
+                await user.upload(screen.getByTestId('uploadInput'), new File([''], 'file.png', { type: 'image/png' }));
+                await user.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(screen.getByText('Upload B')).toBeInTheDocument();
+                });
+                await user.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(screen.getByText('Please fill out this field.')).toBeInTheDocument();
+                });
+            });
+        });
+        describe('and the step contains a persist-async string schema', () => {
+            const step = {
+                id: 'persist-async-string-test-step-id',
+                title: 'Persist Async Basic Test',
+                layout: [
+                    { type: 'form', schemaId: '#schema' },
+                    {
+                        type: 'button',
+                        title: 'Submit',
+                        action: { url: '/submit', method: 'POST' },
+                    },
+                ],
+                schemas: [
+                    {
+                        $id: '#schema',
+                        type: 'object',
+                        title: 'Payment Details',
+                        displayOrder: ['name', 'cardNumber'],
+                        required: ['cardNumber'],
+                        properties: {
+                            name: {
+                                title: 'Name on Card',
+                                type: 'string',
+                            },
+                            cardNumber: {
+                                type: 'string',
+                                persistAsync: {
+                                    method: 'POST',
+                                    url: '/persist-async',
+                                    param: 'card-number',
+                                    idProperty: 'token',
+                                    schema: {
+                                        title: 'Card Number',
+                                        type: 'string',
+                                        minLength: 15,
+                                        maxLength: 16,
+                                    },
+                                },
+                            },
+                        },
+                    },
+                ],
+            };
+            it('does not carry the old local value forward', async () => {
+                const localUser = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+                const httpClient = async (input, init) => {
+                    if (input === '/persist-async') {
+                        return new Response(JSON.stringify({ token: '123' }));
+                    }
+                    return new Response(JSON.stringify(Object.assign(Object.assign({}, step), { id: 'new-id' })));
+                };
+                const mockHttpClient = vi.fn(httpClient);
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: step, httpClient: mockHttpClient, onCompletion: vi.fn(), onError: vi.fn() }));
+                const input = screen.getByLabelText('Card Number');
+                await localUser.type(input, '1234567890123456');
+                await localUser.tab();
+                await localUser.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(screen.queryByText('1234567890123456')).not.toBeInTheDocument();
+                });
+                await localUser.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(mockHttpClient).toHaveBeenCalledTimes(2);
+                });
+                await localUser.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(screen.getByText('Please fill out this field.')).toBeInTheDocument();
+                });
+            });
+        });
+    });
+    describe('when an step with an upload refreshes with the same structure', () => {
+        const step = (title, model = undefined) => ({
+            id: `step-id-${title}`,
+            title: 'Blob Upload (Multiple, Persist Async)',
+            schemas: [
+                {
+                    $id: '#id',
+                    type: 'object',
+                    displayOrder: ['upload', 'checkbox'],
+                    required: ['upload'],
+                    properties: {
+                        checkbox: { type: 'boolean', title: 'Refresh me', refreshStepOnChange: true },
+                        upload: {
+                            type: 'array',
+                            title,
+                            minItems: 1,
+                            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',
+                    },
+                },
+            ],
+            refreshUrl: '/refresh',
+            model,
+        });
+        it('carries the value forward to the new step', async () => {
+            const httpClient = async (input, init) => {
+                if (input === '/persist-async') {
+                    return new Response(JSON.stringify({ token: '12345' }));
+                }
+                const { body } = init !== null && init !== void 0 ? init : {};
+                return new Response(JSON.stringify(step('Upload A', JSON.parse(typeof body === 'string' ? body : ''))));
+            };
+            const mockHttpClient = vi.fn().mockImplementation(httpClient);
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step('Upload A'), httpClient: mockHttpClient, onCompletion: vi.fn(), onError: vi.fn() }));
+            await user.upload(screen.getByTestId('uploadInput'), new File([''], 'file.png', { type: 'image/png' }));
+            await user.click(screen.getByText('Refresh me'));
+            expect(screen.getByText('Uploaded')).toBeInTheDocument();
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => {
+                expect(screen.queryByText('Please fill out this field.')).not.toBeInTheDocument();
+            });
+            expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
+                body: '{"upload":["12345"],"checkbox":true}',
+            }));
+        });
+    });
+});

package/build/tests/FormLayout.test.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen } from '@testing-library/react';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { vi } from 'vitest';
+describe('given a step with a form layout', () => {
+    describe('if the form layout does not contain a schemaId or schemaRef', () => {
+        const step = {
+            title: 'step title',
+            schemas: [
+                {
+                    type: 'string',
+                    title: 'String schema title',
+                },
+            ],
+            id: 'my-step-id',
+            layout: [
+                {
+                    type: 'form',
+                },
+            ],
+        };
+        it('does not render any schema', () => {
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step, httpClient: vi.fn(), onCompletion: vi.fn(), onError: vi.fn() }));
+            expect(screen.queryByText('String schema title')).not.toBeInTheDocument();
+        });
+    });
+});

package/build/tests/FormattedValue.test.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('given a step with an object schema containing no properties and a non-nullish format', () => {
+    const getInitialStep = (onChange) => ({
+        id: 'step',
+        title: 'step title',
+        schemas: [
+            {
+                type: 'object',
+                $id: '#schema',
+                displayOrder: ['thing'],
+                properties: {
+                    thing: {
+                        type: 'object',
+                        format: 'banana',
+                        properties: {},
+                        displayOrder: [],
+                        onChange,
+                    },
+                },
+            },
+        ],
+        layout: [
+            {
+                schemaId: '#schema',
+                type: 'form',
+            },
+            {
+                type: 'button',
+                title: 'Submit',
+                action: { url: '/submit' },
+            },
+        ],
+        model: {
+            thing: {
+                modelKey: 'modelValue',
+            },
+        },
+    });
+    describe('when the step loads without a custom renderer', () => {
+        it('the flow fails immediately', async () => {
+            const onError = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: vi.fn(), initialStep: getInitialStep(), onCompletion: vi.fn(), onError: onError }));
+            await waitFor(() => {
+                expect(onError).toHaveBeenCalledWith(new Error('Could not find a renderer for formatted-value'));
+            });
+        });
+    });
+    describe('when the step loads with a custom renderer', () => {
+        const FormattedValueRenderer = {
+            canRenderType: 'formatted-value',
+            render: (props) => {
+                return (_jsxs("div", { children: [_jsxs("p", { children: ["Format: ", _jsx("strong", { children: props.format })] }), _jsx("button", { type: "button", onClick: () => {
+                                props.onChange({ updatedKey: 'updatedValue' });
+                            }, children: "Update Value" })] }));
+            },
+        };
+        it('the format is passed to the renderer, and submissions work correctly', async () => {
+            const onError = vi.fn();
+            const httpClient = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: getInitialStep(), renderers: [FormattedValueRenderer], onCompletion: vi.fn(), onError: onError }));
+            expect(onError).not.toHaveBeenCalled();
+            expect(screen.getByText('banana')).toBeInTheDocument();
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
+                method: 'POST',
+                body: JSON.stringify({ thing: { modelKey: 'modelValue' } }),
+            }));
+        });
+        it('the onChange updates the value in the model, and submissions work correctly', async () => {
+            const onError = vi.fn();
+            const httpClient = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: getInitialStep(), renderers: [FormattedValueRenderer], onCompletion: vi.fn(), onError: onError }));
+            expect(onError).not.toHaveBeenCalled();
+            const button = screen.getByRole('button', { name: 'Update Value' });
+            await user.click(button);
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
+                method: 'POST',
+                body: JSON.stringify({ thing: { updatedKey: 'updatedValue' } }),
+            }));
+        });
+        describe('and an onChange behavior is defined in the schema', () => {
+            it('the onChange behavior is executed when the value changes', async () => {
+                const onError = vi.fn();
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: getInitialStep({
+                        type: 'action',
+                        action: { url: '/auto-submit' },
+                    }), renderers: [FormattedValueRenderer], onCompletion: vi.fn(), onError: onError }));
+                expect(onError).not.toHaveBeenCalled();
+                const button = screen.getByRole('button', { name: 'Update Value' });
+                await user.click(button);
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenCalledWith('/auto-submit', expect.objectContaining({
+                        method: 'POST',
+                        body: JSON.stringify({ thing: { updatedKey: 'updatedValue' } }),
+                    }));
+                });
+            });
+        });
+    });
+});

package/build/tests/ImageRenderer.test.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { renderWithProviders } from '../test-utils';
+import { screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+describe('ImageRenderer', () => {
+    const getDefaultProps = () => ({
+        flowId: 'flow-id',
+        httpClient: vi.fn(),
+        onCompletion: vi.fn(),
+        onError: vi.fn(),
+        onEvent: vi.fn(),
+        onLog: vi.fn(),
+    });
+    describe('Given a layout with an image with a relative path', () => {
+        it('should fetch the image using the provided httpClient', async () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Step with image',
+                    layout: [{ type: 'image', url: '/image.png' }],
+                    schemas: [],
+                } });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(props.httpClient).toHaveBeenCalledWith('/image.png', expect.objectContaining({ method: 'GET' }));
+            });
+        });
+    });
+    describe('Given a layout with an image with an absolute path', () => {
+        it('should NOT fetch the image, but instead, render an <a> tag with the image source', async () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Step with image',
+                    layout: [{ type: 'image', url: 'https://example.com/image.png' }],
+                    schemas: [],
+                } });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByRole('presentation')).toHaveAttribute('src', 'https://example.com/image.png');
+            });
+            expect(props.httpClient).not.toHaveBeenCalled();
+        });
+    });
+    describe('Given a layout with a content property', () => {
+        it('should render the url provided', async () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Step with image',
+                    layout: [{ type: 'image', content: { url: 'https://example.com/image.png' } }],
+                    schemas: [],
+                } });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByRole('presentation')).toHaveAttribute('src', 'https://example.com/image.png');
+            });
+            expect(props.httpClient).not.toHaveBeenCalled();
+        });
+        it('should take priority over the root url property', async () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Step with image',
+                    layout: [
+                        {
+                            type: 'image',
+                            url: 'https://dontgoto.thisurl',
+                            content: { url: 'https://example.com/image.png' },
+                        },
+                    ],
+                    schemas: [],
+                } });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByRole('presentation')).toHaveAttribute('src', 'https://example.com/image.png');
+            });
+            expect(props.httpClient).not.toHaveBeenCalled();
+        });
+    });
+});