@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/RendererProps.test.js

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

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

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