@wise/dynamic-flow-client 5.25.2 → 5.25.3

package/build/tests/RendererProps.test.js

@@ -1,372 +0,0 @@
-import { componentToRendererProps } from '../renderers/mappers/componentToRendererProps';
-import { mapLayoutToComponent } from '../domain/mappers/mapLayoutToComponent';
-import { mapSchemaToComponent } from '../domain/mappers/mapSchemaToComponent';
-import { getMockMapperProps, getMockRendererMapperProps, getMockSchemaMapperProps, } from '../domain/mappers/schema/tests/test-utils';
-describe('when mapping to renderer props', () => {
-    describe('given a primitive schema', () => {
-        it.each([
-            ['boolean', 'input-checkbox'],
-            ['integer', 'input-integer'],
-            ['number', 'input-number'],
-            ['string', 'input-text'],
-        ])('maps %s schema props into the renderer props', (schemaType, propType) => {
-            const schema = {
-                type: schemaType,
-                title: 'This is a title',
-                description: 'This is a description',
-                icon: { name: 'flag-usd' },
-                image: { url: 'some/url' },
-            };
-            const props = componentToRendererProps(mapSchemaToComponent(getMockSchemaMapperProps({ schema }), getMockMapperProps()), getMockRendererMapperProps());
-            expect(props).toMatchObject({
-                type: propType,
-                title: 'This is a title',
-                description: 'This is a description',
-                media: { type: 'legacy', icon: { name: 'flag-usd' }, image: { uri: 'some/url' } },
-            });
-        });
-    });
-    describe('given a string schema', () => {
-        describe('that has minLength, maxLength, and pattern validation properties', () => {
-            const schema = {
-                type: 'string',
-                title: 'String schema with validation',
-                minLength: 5,
-                maxLength: 10,
-                pattern: '^[a-zA-Z]+$',
-            };
-            it('maps validation props into the renderer props', () => {
-                const props = componentToRendererProps(mapSchemaToComponent(getMockSchemaMapperProps({ schema }), getMockMapperProps()), getMockRendererMapperProps());
-                expect(props).toMatchObject({
-                    type: 'input-text',
-                    title: 'String schema with validation',
-                    minLength: 5,
-                    maxLength: 10,
-                    pattern: '^[a-zA-Z]+$',
-                });
-            });
-        });
-        describe('that has suggested values', () => {
-            const schema = {
-                type: 'string',
-                title: 'String schema with suggestions',
-                suggestions: {
-                    values: [
-                        {
-                            value: 'Suggestion A',
-                            label: 'Suggestion A',
-                            icon: { name: 'flag-aud' },
-                            image: { uri: '/image-a' },
-                            tag: 'option-a',
-                        },
-                        {
-                            value: 'Suggestion B',
-                            label: 'Suggestion B',
-                            icon: { name: 'flag-brl' },
-                            image: { uri: '/image-b' },
-                            tag: 'option-b',
-                        },
-                    ],
-                },
-            };
-            it('maps suggestions into renderer props', () => {
-                const props = componentToRendererProps(mapSchemaToComponent(getMockSchemaMapperProps({ schema }), getMockMapperProps()), getMockRendererMapperProps());
-                expect(props).toMatchObject({
-                    type: 'input-text',
-                    title: 'String schema with suggestions',
-                    suggestions: {
-                        values: [
-                            {
-                                value: 'Suggestion A',
-                                label: 'Suggestion A',
-                                media: { type: 'legacy', icon: { name: 'flag-aud' }, image: { uri: '/image-a' } },
-                                tag: 'option-a',
-                            },
-                            {
-                                value: 'Suggestion B',
-                                label: 'Suggestion B',
-                                media: { type: 'legacy', icon: { name: 'flag-brl' }, image: { uri: '/image-b' } },
-                                tag: 'option-b',
-                            },
-                        ],
-                    },
-                });
-            });
-        });
-    });
-    describe('given a date schema', () => {
-        it('maps date availability into the renderer props', () => {
-            const availability = {
-                message: 'Choose an available date',
-                unavailable: [{ type: 'weekdays', weekdays: ['sun'], reason: 'Closed on Sundays' }],
-            };
-            const schema = { type: 'date', availability };
-            const props = componentToRendererProps(mapSchemaToComponent(getMockSchemaMapperProps({ schema }), getMockMapperProps()), getMockRendererMapperProps());
-            expect(props).toMatchObject({ type: 'input-date', availability });
-        });
-    });
-    describe('given an object schema', () => {
-        const schema = {
-            type: 'object',
-            title: 'This is an object schema',
-            description: 'This is a description',
-            properties: {
-                type: {
-                    const: true,
-                },
-            },
-            displayOrder: ['type'],
-            icon: { name: 'flag-usd' },
-            image: { url: 'some/url' },
-        };
-        it('maps schema props into the renderer props', () => {
-            const props = componentToRendererProps(mapSchemaToComponent(getMockSchemaMapperProps({ schema }), getMockMapperProps()), getMockRendererMapperProps());
-            expect(props).toMatchObject({
-                type: 'form-section',
-                title: 'This is an object schema',
-                description: 'This is a description',
-                media: { type: 'legacy', icon: { name: 'flag-usd' }, image: { uri: 'some/url' } },
-            });
-        });
-    });
-    describe('given a tuple schema', () => {
-        const schema = {
-            type: 'array',
-            items: [
-                {
-                    type: 'string',
-                },
-            ],
-            title: 'This is a repeatable schema',
-            description: 'This is a description',
-            icon: { name: 'flag-usd' },
-            image: { url: 'some/url' },
-        };
-        it('maps schema props into the renderer props', () => {
-            const props = componentToRendererProps(mapSchemaToComponent(getMockSchemaMapperProps({ schema }), getMockMapperProps()), getMockRendererMapperProps());
-            expect(props).toMatchObject({
-                type: 'form-section',
-                title: 'This is a repeatable schema',
-                description: 'This is a description',
-                media: { type: 'legacy', icon: { name: 'flag-usd' }, image: { uri: 'some/url' } },
-            });
-        });
-    });
-    describe('given a repeatable schema', () => {
-        const schema = {
-            type: 'array',
-            items: {
-                type: 'string',
-                icon: { name: 'flag-usd' },
-                summary: {
-                    providesIcon: true,
-                },
-            },
-            summary: {
-                defaultIcon: { name: 'flag-gbp' },
-            },
-            title: 'This is a repeatable schema',
-            description: 'This is a description',
-            addItemTitle: '',
-            editItemTitle: '',
-            icon: { name: 'flag-usd' },
-            image: { url: 'some/url' },
-        };
-        it('maps schema props into the renderer props', () => {
-            const props = componentToRendererProps(mapSchemaToComponent(getMockSchemaMapperProps({ schema }), getMockMapperProps()), getMockRendererMapperProps());
-            expect(props).toMatchObject({
-                type: 'repeatable',
-                title: 'This is a repeatable schema',
-                description: 'This is a description',
-                media: { type: 'legacy', icon: { name: 'flag-usd' }, image: { uri: 'some/url' } },
-            });
-        });
-        it('correctly handles media/icon/image back compat when icon is provided and default is given', () => {
-            const props = componentToRendererProps(mapSchemaToComponent(getMockSchemaMapperProps({ schema, model: ['hello'] }), getMockMapperProps()), getMockRendererMapperProps());
-            expect(props.items[0]).toMatchObject({
-                media: {
-                    type: 'legacy',
-                    icon: { name: 'flag-usd' },
-                },
-            });
-        });
-        it('correctly handles media/icon/image back compat when icon not is provided and default is given', () => {
-            const props = componentToRendererProps(mapSchemaToComponent(getMockSchemaMapperProps({
-                schema: Object.assign(Object.assign({}, schema), { items: { type: 'string' } }),
-                model: ['hello'],
-            }), getMockMapperProps()), getMockRendererMapperProps());
-            expect(props.items[0]).toMatchObject({
-                media: {
-                    type: 'legacy',
-                    icon: { name: 'flag-gbp' },
-                },
-            });
-        });
-    });
-    describe('given an allOf schema', () => {
-        const schema = {
-            title: 'This is an allOf schema',
-            description: 'This is a description',
-            allOf: [],
-            icon: { name: 'flag-usd' },
-            image: { url: 'some/url' },
-        };
-        it('maps schema props into the renderer props', () => {
-            const props = componentToRendererProps(mapSchemaToComponent(getMockSchemaMapperProps({ schema }), getMockMapperProps()), getMockRendererMapperProps());
-            expect(props).toMatchObject({
-                type: 'form-section',
-                title: 'This is an allOf schema',
-                description: 'This is a description',
-                media: { type: 'legacy', icon: { name: 'flag-usd' }, image: { uri: 'some/url' } },
-            });
-        });
-    });
-    describe('given a oneOf schema', () => {
-        const schema = {
-            title: 'This is a oneOf schema',
-            description: 'This is a description',
-            oneOf: [],
-            icon: { name: 'flag-usd' },
-            image: { url: 'some/url' },
-        };
-        it('maps schema props into the renderer props', () => {
-            const props = componentToRendererProps(mapSchemaToComponent(getMockSchemaMapperProps({ schema }), getMockMapperProps()), getMockRendererMapperProps());
-            expect(props).toMatchObject({
-                type: 'input-select',
-                title: 'This is a oneOf schema',
-                description: 'This is a description',
-                media: { type: 'legacy', icon: { name: 'flag-usd' }, image: { uri: 'some/url' } },
-            });
-        });
-    });
-    describe('given a multi-select schema', () => {
-        const schema = {
-            type: 'array',
-            items: {
-                oneOf: [],
-            },
-            title: 'This is a multi-select schema',
-            description: 'This is a description',
-            addItemTitle: '',
-            editItemTitle: '',
-            icon: { name: 'flag-usd' },
-            image: { url: 'some/url' },
-        };
-        it('maps schema props into the renderer props', () => {
-            const props = componentToRendererProps(mapSchemaToComponent(getMockSchemaMapperProps({ schema }), getMockMapperProps()), getMockRendererMapperProps());
-            expect(props).toMatchObject({
-                type: 'input-multi-select',
-                title: 'This is a multi-select schema',
-                description: 'This is a description',
-                media: { type: 'legacy', icon: { name: 'flag-usd' }, image: { uri: 'some/url' } },
-            });
-        });
-    });
-    describe('given an image layout', () => {
-        it('maps image component to props, including any null encoded values', () => {
-            const image = {
-                type: 'image',
-                content: {
-                    uri: 'urn:wise:illustrations:globe',
-                },
-                margin: null,
-                align: null,
-            };
-            const props = componentToRendererProps(mapLayoutToComponent('fake-uid', image, getMockMapperProps(), []), getMockRendererMapperProps());
-            expect(props).toMatchObject({
-                type: 'image',
-                uri: 'urn:wise:illustrations:globe',
-                margin: 'md',
-                size: 'md',
-                align: 'center',
-            });
-        });
-    });
-    describe('given a review layout', () => {
-        it('maps review component props into the renderer props, including the unused rawValue property', () => {
-            const reviewLayout = {
-                type: 'review',
-                fields: [
-                    {
-                        label: 'IBAN',
-                        value: 'DE 2650 0105 1741 9113 6539',
-                        rawValue: 'DE26500105174191136539',
-                        help: { markdown: 'Iban is a unique identifier for a bank account' },
-                    },
-                ],
-            };
-            const props = componentToRendererProps(mapLayoutToComponent('fake-uid', reviewLayout, getMockMapperProps(), []), getMockRendererMapperProps());
-            expect(props).toMatchObject({
-                type: 'review',
-                fields: [
-                    {
-                        label: 'IBAN',
-                        value: 'DE 2650 0105 1741 9113 6539',
-                        rawValue: 'DE26500105174191136539',
-                        help: 'Iban is a unique identifier for a bank account',
-                    },
-                ],
-            });
-        });
-    });
-    describe('given a decision layout', () => {
-        it('maps decision component props into the renderer props', () => {
-            const decisionLayout = {
-                type: 'decision',
-                options: [
-                    {
-                        title: 'Option A',
-                        icon: { name: 'flag-usd' },
-                        action: {},
-                    },
-                    {
-                        title: 'Option B',
-                        image: { uri: 'some/url' },
-                        action: {},
-                    },
-                    {
-                        title: 'Option C',
-                        icon: { name: 'flag-usd' },
-                        image: { uri: 'some/url' },
-                        action: {},
-                    },
-                    {
-                        title: 'Option D',
-                        icon: { name: 'flag-usd' },
-                        image: { uri: 'some/url' },
-                        media: { type: 'image', uri: 'some/other/url' },
-                        action: {},
-                    },
-                ],
-            };
-            const props = componentToRendererProps(mapLayoutToComponent('fake-uid', decisionLayout, getMockMapperProps(), []), getMockRendererMapperProps());
-            expect(props).toMatchObject({
-                type: 'decision',
-                options: [
-                    {
-                        title: 'Option A',
-                        icon: { name: 'flag-usd' },
-                        media: { type: 'legacy', icon: { name: 'flag-usd' } },
-                        action: {},
-                    },
-                    {
-                        title: 'Option B',
-                        image: { uri: 'some/url' },
-                        media: { type: 'legacy', image: { uri: 'some/url' } },
-                        action: {},
-                    },
-                    {
-                        title: 'Option C',
-                        media: { type: 'legacy', icon: { name: 'flag-usd' }, image: { uri: 'some/url' } },
-                        action: {},
-                    },
-                    {
-                        title: 'Option D',
-                        media: { type: 'image', uri: 'some/other/url' },
-                        action: {},
-                    },
-                ],
-            });
-        });
-    });
-});

package/build/tests/Repeatable.test.js

@@ -1,104 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { renderWithProviders } from '../test-utils';
-import DynamicFlowWise from '../test-utils/DynamicFlowWise';
-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 });
-const getDefaultProps = () => ({
-    flowId: 'flow-id',
-    httpClient: vi.fn(),
-    onCompletion: vi.fn(),
-    onError: vi.fn(),
-    onEvent: vi.fn(),
-    onLog: vi.fn(),
-});
-describe('Repeatable', () => {
-    const makeBasicSchema = () => ({
-        $id: '#basic',
-        type: 'object',
-        displayOrder: ['wrapper'],
-        properties: {
-            wrapper: {
-                type: 'array',
-                title: 'Basic',
-                addItemTitle: 'Add',
-                editItemTitle: 'Edit',
-                items: {
-                    title: 'Email',
-                    type: 'string',
-                    summary: {
-                        providesTitle: true,
-                        providesIcon: true,
-                    },
-                    icon: {
-                        name: 'email',
-                    },
-                },
-            },
-        },
-    });
-    const makeStep = (schema, model) => { var _a; return ({
-        id: 'Schemas/Array',
-        title: 'Array Schema',
-        actions: [],
-        schemas: [schema],
-        layout: [
-            {
-                type: 'form',
-                schemaId: (_a = schema.$id) !== null && _a !== void 0 ? _a : '',
-            },
-            {
-                type: 'button',
-                title: 'Submit',
-                action: { url: '/submit', method: 'POST' },
-            },
-        ],
-        model,
-    }); };
-    it('should add the new component on save', async () => {
-        const props = getDefaultProps();
-        const step = makeStep(makeBasicSchema(), null);
-        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: step }, props)));
-        await user.click(screen.getByText('Add'));
-        await user.type(screen.getByRole('textbox'), 'bobloblaw@law.blog');
-        await user.click(screen.getByText('Save'));
-        await waitFor(() => {
-            expect(screen.getByText('bobloblaw@law.blog')).toBeInTheDocument();
-        });
-    });
-    it('should NOT add the new component on save if it is invalid', async () => {
-        const props = getDefaultProps();
-        const step = makeStep(makeBasicSchema(), null);
-        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: step }, props)));
-        await user.click(screen.getByText('Add'));
-        await user.click(screen.getByText('Save'));
-        // an error is shown because the field is required by default
-        await waitFor(() => {
-            expect(screen.getByText('Please fill out this field.')).toBeInTheDocument();
-        });
-        // the modal is still open
-        expect(screen.getByText('Save')).toBeInTheDocument();
-    });
-    it('should edit the new component on save', async () => {
-        const props = getDefaultProps();
-        const step = makeStep(makeBasicSchema(), { wrapper: ['bobloblaw@law'] });
-        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: step }, props)));
-        await user.click(screen.getByText('bobloblaw@law'));
-        await user.type(screen.getByRole('textbox'), '.blog');
-        await user.click(screen.getByText('Save'));
-        await waitFor(() => {
-            expect(screen.getByText('bobloblaw@law.blog')).toBeInTheDocument();
-        });
-    });
-    it('should remove the component on remove', async () => {
-        const props = getDefaultProps();
-        const step = makeStep(makeBasicSchema(), { wrapper: ['bobloblaw@law'] });
-        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: step }, props)));
-        await user.click(screen.getByText('bobloblaw@law'));
-        await user.click(screen.getByText('Remove'));
-        await waitFor(() => {
-            expect(screen.queryByText('bobloblaw@law')).not.toBeInTheDocument();
-        });
-    });
-});

package/build/tests/Rerendering.test.js

@@ -1,67 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { act, screen, waitFor } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import { vi } from 'vitest';
-import { renderWithProviders } from '../test-utils';
-import DynamicFlowWise from '../test-utils/DynamicFlowWise';
-const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-const getDefaultProps = () => ({
-    flowId: 'flow-id',
-    onCompletion: vi.fn(),
-    httpClient: vi.fn(),
-    onError: vi.fn(),
-    onEvent: vi.fn(),
-    onLog: vi.fn(),
-});
-describe('When the component is re-rendered', () => {
-    const initialStep = {
-        id: 'name-step',
-        title: 'Name Step',
-        schemas: [
-            {
-                $id: '#form',
-                type: 'string',
-                title: 'Name',
-            },
-        ],
-        layout: [
-            {
-                type: 'form',
-                schemaId: '#form',
-            },
-        ],
-    };
-    describe('and the "initialStep" props DOES NOT HAVE the same stable reference', () => {
-        it('does NOT re-initialise, hence the "Initiated" tracking event is not triggered a second time', async () => {
-            const props = getDefaultProps();
-            const { rerender } = renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep })));
-            await waitFor(() => expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Initiated', expect.anything()));
-            props.onEvent.mockClear();
-            rerender(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: Object.assign({}, initialStep) })));
-            await waitFor(() => expect(props.onEvent).not.toHaveBeenCalled());
-        });
-    });
-    describe('and the "initialAction" props DOES NOT HAVE the same stable reference', () => {
-        it('does NOT re-initialise, and it keeps focus on the input field', async () => {
-            const props = getDefaultProps();
-            const httpClient = vi.fn(async () => Promise.resolve(new Response(JSON.stringify(initialStep))));
-            const { rerender } = renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { httpClient: httpClient, initialAction: { url: '/initial-step', method: 'GET' } })));
-            await waitFor(() => expect(httpClient).toHaveBeenCalledTimes(1));
-            rerender(_jsx(DynamicFlowWise, Object.assign({}, props, { httpClient: httpClient, initialAction: { url: '/initial-step', method: 'GET' } })));
-            await act(async () => vi.advanceTimersByTimeAsync(10)); // wait for the re-render to complete, give it a chance to fail
-            await waitFor(() => expect(httpClient).toHaveBeenCalledTimes(1));
-        });
-    });
-    describe('and the "renderers" prop has the same stable reference', () => {
-        it('keeps focus on the input field', async () => {
-            const props = getDefaultProps();
-            const stableRenderers = [];
-            const { rerender } = renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep, renderers: stableRenderers })));
-            await user.click(screen.getByLabelText('Name'));
-            expect(screen.getByLabelText('Name')).toHaveFocus();
-            rerender(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep, renderers: stableRenderers })));
-            // focus should be kept after re-render
-            expect(screen.getByLabelText('Name')).toHaveFocus();
-        });
-    });
-});