@wise/dynamic-flow-client 5.9.1 → 5.9.2-logging-bf0bd22

package/build/tests/Flow.test.js

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

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

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

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