@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/AlertLayout.test.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { 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 });
+describe('AlertLayout component', () => {
+    const getDefaultProps = () => ({
+        flowId: 'flow-id',
+        httpClient: vi.fn(),
+        onCompletion: vi.fn(),
+        onError: vi.fn(),
+        onEvent: vi.fn(),
+        onLog: vi.fn(),
+    });
+    const getInitialStep = (behavior) => ({
+        id: 'step-id',
+        title: 'Step with alert',
+        layout: [
+            {
+                type: 'alert',
+                markdown: 'This is an alert',
+                callToAction: {
+                    title: 'Call to Action',
+                    behavior,
+                },
+            },
+        ],
+        schemas: [],
+    });
+    describe('Old "container" behavior type', () => {
+        describe('Given an alert layout component with a link behavior', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep({ link: { url: 'https://google.com' } }) });
+            it('should render a link that opens the url on click', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(screen.getByRole('link')).toHaveTextContent('Call to Action');
+                });
+                expect(screen.getByRole('link')).toHaveAttribute('href', 'https://google.com');
+            });
+        });
+        describe('Given an alert layout component with an action behavior', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep({ action: { url: '/action' } }) });
+            it('should trigger the action on click', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(screen.getByRole('button')).toHaveTextContent('Call to Action');
+                });
+                await user.click(screen.getByRole('button'));
+                expect(props.httpClient).toHaveBeenCalledWith('/action', expect.any(Object));
+            });
+        });
+    });
+    describe('New "union type" behavior type', () => {
+        describe('Given an alert layout component with a link behavior', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep({ type: 'link', url: 'https://google.com' }) });
+            it('should render a link that opens the url on click', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(screen.getByRole('link')).toHaveTextContent('Call to Action');
+                });
+                expect(screen.getByRole('link')).toHaveAttribute('href', 'https://google.com');
+            });
+        });
+        describe('Given an alert layout component with an action behavior', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep({ type: 'action', action: { url: '/action' } }) });
+            it('should trigger the action on click', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(screen.getByRole('button')).toHaveTextContent('Call to Action');
+                });
+                await user.click(screen.getByRole('button'));
+                expect(props.httpClient).toHaveBeenCalledWith('/action', expect.any(Object));
+            });
+        });
+    });
+});

package/build/tests/ArrayTuple.test.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { userEvent } from '@testing-library/user-event';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const tupleSchema = {
+    $id: '#schema',
+    type: 'array',
+    items: [
+        {
+            type: 'string',
+            title: 'name',
+        },
+        {
+            type: 'integer',
+            title: 'age',
+        },
+    ],
+};
+const step = {
+    id: 'array-schema-step',
+    title: 'Array Schema Text',
+    schemas: [tupleSchema],
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#schema',
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: {
+                url: '/submit',
+            },
+        },
+    ],
+};
+describe('given a array tuple schema', () => {
+    it('will render all items', () => {
+        renderWithProviders(_jsx(DynamicFlowWise, { initialStep: step, flowId: "array-schema-test", httpClient: vi.fn(), onError: () => { }, onCompletion: () => { } }));
+        expect(screen.getByLabelText('name')).toBeInTheDocument();
+        expect(screen.getByLabelText('age')).toBeInTheDocument();
+    });
+    it('will submit an array of nulls when children are not filled in and schema is not required (in an object)', async () => {
+        const mockHttpClient = vi.fn();
+        renderWithProviders(_jsx(DynamicFlowWise, { initialStep: Object.assign(Object.assign({}, step), { schemas: [
+                    {
+                        type: 'object',
+                        $id: '#schema',
+                        displayOrder: ['schema'],
+                        properties: {
+                            schema: tupleSchema,
+                        },
+                    },
+                ] }), flowId: "array-schema-test", httpClient: mockHttpClient, onError: () => { }, onCompletion: () => { } }));
+        await user.click(screen.getByRole('button', { name: 'Submit' }));
+        await waitFor(() => {
+            expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
+                body: JSON.stringify({ schema: [null, null] }),
+            }));
+        });
+    });
+    it('will submit an array of the children items when filled in', async () => {
+        const mockHttpClient = vi.fn();
+        renderWithProviders(_jsx(DynamicFlowWise, { initialStep: step, flowId: "array-schema-test", httpClient: mockHttpClient, onError: () => { }, onCompletion: () => { } }));
+        await user.type(screen.getByLabelText('name'), 'Jon Snow');
+        await user.type(screen.getByLabelText('age'), '25');
+        await user.click(screen.getByRole('button', { name: 'Submit' }));
+        await waitFor(() => {
+            expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
+                body: JSON.stringify(['Jon Snow', 25]),
+            }));
+        });
+    });
+    describe('when the schema is explicitly required (i.e. a required child of an object schema)', () => {
+        const tupleInObjectSchema = {
+            $id: '#schema',
+            type: 'object',
+            displayOrder: ['tuple'],
+            required: ['tuple'],
+            properties: {
+                tuple: tupleSchema,
+            },
+        };
+        it('ensures that all items are required', async () => {
+            const mockHttpClient = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, { initialStep: Object.assign(Object.assign({}, step), { schemas: [tupleInObjectSchema] }), flowId: "array-schema-test", httpClient: mockHttpClient, onError: () => { }, onCompletion: () => { } }));
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            await waitFor(() => {
+                expect(screen.getAllByText(/please fill out this field/i)).toHaveLength(2);
+            });
+            expect(mockHttpClient).not.toHaveBeenCalled();
+        });
+    });
+    describe('when the step has errors in an array that match the schema', () => {
+        it('passes down the errors into the child components', () => {
+            renderWithProviders(_jsx(DynamicFlowWise, { initialStep: Object.assign(Object.assign({}, step), { errors: { validation: ['This name is NOT allowed', 'This is TOO old'] } }), flowId: "array-schema-test", httpClient: vi.fn(), onError: () => { }, onCompletion: () => { } }));
+            expect(screen.getByText(/this name is not allowed/i)).toBeInTheDocument();
+            expect(screen.getByText(/this is too old/i)).toBeInTheDocument();
+        });
+    });
+    describe('when a model is provided', () => {
+        it('correctly fills the fields', async () => {
+            const mockHttpClient = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, { initialStep: Object.assign(Object.assign({}, step), { model: ['Colin Robinson', 103] }), flowId: "array-schema-test", httpClient: mockHttpClient, onError: () => { }, onCompletion: () => { } }));
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            expect(screen.getByDisplayValue('Colin Robinson')).toBeInTheDocument();
+            expect(screen.getByDisplayValue('103')).toBeInTheDocument();
+            await waitFor(() => {
+                expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
+                    body: JSON.stringify(['Colin Robinson', 103]),
+                }));
+            });
+        });
+    });
+});

package/build/tests/ButtonLayout.test.js

@@ -0,0 +1,308 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { 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',
+    httpClient: vi.fn(),
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+describe('ButtonLayout component', () => {
+    describe('Given a button layout component with a referenced action', () => {
+        it('should render a button that triggers the action on click', async () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Step with button',
+                    actions: [
+                        {
+                            $id: '#action-id',
+                            url: '/referenced-action-url',
+                        },
+                    ],
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'My Button',
+                            action: { $ref: '#action-id' },
+                        },
+                    ],
+                    schemas: [],
+                } });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByRole('button')).toHaveTextContent('My Button');
+            });
+            await user.click(screen.getByRole('button'));
+            expect(props.httpClient).toHaveBeenCalledWith('/referenced-action-url', expect.any(Object));
+        });
+    });
+    describe('Given a button layout component which is missing both action and behavior', () => {
+        it('when the strict feature is not set, it just render a button that does nothing', async () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Step with button',
+                    layout: [{ type: 'button', title: 'My Button' }],
+                    schemas: [],
+                } });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByRole('button')).toHaveTextContent('My Button');
+            });
+            await user.click(screen.getByRole('button'));
+            expect(props.httpClient).not.toHaveBeenCalled();
+        });
+        it('when the strict feature is set, it should call onError', async () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Step with button',
+                    layout: [{ type: 'button', title: 'My Button' }],
+                    schemas: [],
+                } });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { features: { strictButtonOperations: true } })));
+            await waitFor(() => {
+                expect(props.onError).toHaveBeenCalled();
+            });
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            expect(props.onError.mock.calls[0][0].message).toBe('ButtonLayout must have either a behavior or an action');
+        });
+    });
+    describe('New "discriminated union" behavior type', () => {
+        describe('Given a button component with an action behaviour', () => {
+            it('should render a button that triggers the action on click', async () => {
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                        id: 'step-id',
+                        title: 'Step with button',
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'My Button',
+                                behavior: { type: 'action', action: { url: '/behaviour-action-url' } },
+                            },
+                        ],
+                        schemas: [],
+                    } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(screen.getByRole('button')).toHaveTextContent('My Button');
+                });
+                await user.click(screen.getByRole('button'));
+                expect(props.httpClient).toHaveBeenCalledWith('/behaviour-action-url', expect.any(Object));
+            });
+        });
+        describe('Given a button component with an link behaviour', () => {
+            const getProps = () => (Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Step with button',
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'Open in new tab',
+                            behavior: {
+                                type: 'link',
+                                url: 'http://foo.bar',
+                            },
+                        },
+                    ],
+                    schemas: [],
+                } }));
+            describe('when onLink prop is provided', () => {
+                it('should render a button that triggers onLink on click', async () => {
+                    const onLink = vi.fn();
+                    const props = Object.assign(Object.assign({}, getProps()), { onLink });
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                    await waitFor(() => {
+                        expect(screen.getByRole('button')).toHaveTextContent('Open in new tab');
+                    });
+                    await user.click(screen.getByRole('button'));
+                    expect(props.httpClient).not.toHaveBeenCalled();
+                    expect(onLink).toHaveBeenCalledWith('http://foo.bar');
+                });
+            });
+            describe('when the onLink prop is NOT provided', () => {
+                it('should render a button that calls window.open on click', async () => {
+                    const props = getProps();
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                    await waitFor(() => {
+                        expect(screen.getByRole('button')).toHaveTextContent('Open in new tab');
+                    });
+                    // Mock window.open
+                    const originalWindowOpenFn = window.open;
+                    window.open = vi.fn();
+                    await user.click(screen.getByRole('button'));
+                    expect(props.httpClient).not.toHaveBeenCalled();
+                    expect(window.open).toHaveBeenCalledWith('http://foo.bar', '_blank');
+                    // Restore mocked window.open
+                    window.open = originalWindowOpenFn;
+                });
+            });
+        });
+    });
+    describe('Deprecated "container" behavior type', () => {
+        describe('Given a button component with an link behaviour', () => {
+            const getProps = () => (Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                    id: 'step-id',
+                    title: 'Step with button',
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'Open in new tab',
+                            behavior: {
+                                link: { url: 'http://foo.bar' },
+                            },
+                        },
+                    ],
+                    schemas: [],
+                } }));
+            describe('when onLink prop is provided', () => {
+                it('should render a button that triggers onLink on click', async () => {
+                    const onLink = vi.fn();
+                    const props = Object.assign(Object.assign({}, getProps()), { onLink });
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                    await waitFor(() => {
+                        expect(screen.getByRole('button')).toHaveTextContent('Open in new tab');
+                    });
+                    await user.click(screen.getByRole('button'));
+                    expect(props.httpClient).not.toHaveBeenCalled();
+                    expect(onLink).toHaveBeenCalledWith('http://foo.bar');
+                });
+            });
+            describe('when the onLink prop is NOT provided', () => {
+                it('should render a button that calls window.open on click', async () => {
+                    const props = getProps();
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                    await waitFor(() => {
+                        expect(screen.getByRole('button')).toHaveTextContent('Open in new tab');
+                    });
+                    // Mock window.open
+                    const originalWindowOpenFn = window.open;
+                    window.open = vi.fn();
+                    await user.click(screen.getByRole('button'));
+                    expect(props.httpClient).not.toHaveBeenCalled();
+                    expect(window.open).toHaveBeenCalledWith('http://foo.bar', '_blank');
+                    // Restore mocked window.open
+                    window.open = originalWindowOpenFn;
+                });
+            });
+        });
+        describe('Given a button component with an action behaviour', () => {
+            it('should render a button that triggers the action on click', async () => {
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                        id: 'step-id',
+                        title: 'Step with button',
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'My Button',
+                                behavior: { action: { url: '/behaviour-action-url' } },
+                            },
+                        ],
+                        schemas: [],
+                    } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(screen.getByRole('button')).toHaveTextContent('My Button');
+                });
+                await user.click(screen.getByRole('button'));
+                expect(props.httpClient).toHaveBeenCalledWith('/behaviour-action-url', expect.any(Object));
+            });
+        });
+    });
+    describe('Loading states', () => {
+        describe('When a button is clicked and submission triggers', () => {
+            it('that button shows a loading state', async () => {
+                const mockHttpClient = vi.fn().mockImplementation(async () => {
+                    return new Response(JSON.stringify({
+                        id: 'step-id',
+                        title: 'Second step',
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'My Button',
+                                behavior: { action: { url: '/behaviour-action-url' } },
+                            },
+                            {
+                                type: 'button',
+                                title: 'My Other Button',
+                                behavior: { action: { url: '/behaviour-action-url' } },
+                            },
+                        ],
+                        schemas: [],
+                    }));
+                });
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { httpClient: mockHttpClient, initialStep: {
+                        id: 'step-id',
+                        title: 'Step with button',
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'My Button',
+                                behavior: { action: { url: '/behaviour-action-url' } },
+                            },
+                            {
+                                type: 'button',
+                                title: 'My Other Button',
+                                behavior: { action: { url: '/behaviour-action-url' } },
+                            },
+                        ],
+                        schemas: [],
+                    } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                const button = screen.getByRole('button', { name: 'My Button' });
+                const otherButton = screen.getByRole('button', { name: 'My Other Button' });
+                expect(button).toBeInTheDocument();
+                await user.click(button);
+                expect(button).toHaveAttribute('aria-busy', 'true');
+                expect(otherButton).not.toHaveAttribute('aria-busy', 'true');
+                await waitFor(() => {
+                    expect(screen.getByText('Second step')).toBeInTheDocument();
+                });
+                const step2button = screen.getByRole('button', { name: 'My Button' });
+                const step2otherButton = screen.getByRole('button', { name: 'My Other Button' });
+                await user.click(step2otherButton);
+                expect(step2otherButton).toHaveAttribute('aria-busy', 'true');
+                expect(step2button).not.toHaveAttribute('aria-busy', 'true');
+            });
+        });
+        describe('When a button is clicked and submission does not trigger', () => {
+            it('shows no loading state', async () => {
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                        id: 'step-id',
+                        title: 'Step with button',
+                        layout: [
+                            {
+                                type: 'form',
+                                schemaId: '#form',
+                            },
+                            {
+                                type: 'button',
+                                title: 'My Button',
+                                behavior: { action: { url: '/behaviour-action-url' } },
+                            },
+                            {
+                                type: 'button',
+                                title: 'My Other Button',
+                                behavior: { action: { url: '/behaviour-action-url' } },
+                            },
+                        ],
+                        schemas: [
+                            {
+                                $id: '#form',
+                                type: 'string',
+                            },
+                        ],
+                    } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                const button = screen.getByText('My Button');
+                expect(button).toBeInTheDocument();
+                await user.click(button);
+                expect(screen.getByText('My Button')).not.toHaveAttribute('aria-busy', 'true');
+            });
+        });
+    });
+});

package/build/tests/ConstLayout.test.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { 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 });
+describe('ConstSchemaLayout', () => {
+    const getDefaultProps = () => ({
+        flowId: 'flow-id',
+        httpClient: vi.fn(),
+        onCompletion: vi.fn(),
+        onError: vi.fn(),
+        onEvent: vi.fn(),
+        onLog: vi.fn(),
+    });
+    const getInitialStep = (control, model) => ({
+        id: 'const-layout-step',
+        title: 'Const Schemas with Layout',
+        schemas: [
+            {
+                $id: '#schema',
+                control,
+                oneOf: [
+                    {
+                        title: 'Option A',
+                        const: 'A',
+                        layout: [
+                            {
+                                type: 'heading',
+                                text: 'This is Option A heading',
+                            },
+                            {
+                                type: 'paragraph',
+                                text: 'Option A is a great choice because, it offers unique benefits and features that are tailored to your needs.',
+                            },
+                        ],
+                    },
+                    {
+                        title: 'Option B',
+                        const: 'B',
+                        layout: [
+                            {
+                                type: 'heading',
+                                text: 'This is Option B heading',
+                            },
+                            {
+                                type: 'paragraph',
+                                text: 'Option B stands out due to its innovative approach and user-friendly design, making it an excellent choice for those seeking simplicity and efficiency.',
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+        layout: [
+            {
+                type: 'box',
+                width: 'md',
+                control: 'bordered',
+                components: [
+                    {
+                        type: 'form',
+                        schemaId: '#schema',
+                    },
+                ],
+            },
+        ],
+        model,
+    });
+    describe.each(['tab', 'select', 'radio'])('When using %s', (control) => {
+        it.each(['A', 'B'])('should render the layout for the pre-selected option %s', async (option) => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep(control, option) });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByText('Const Schemas with Layout')).toBeInTheDocument();
+            });
+            expect(screen.getByText(`This is Option ${option} heading`)).toBeInTheDocument();
+        });
+    });
+    describe.each(['tab', 'radio'])('When using %s, and then selecting the other option', (control) => {
+        it('renders the other option layout', async () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep(control, 'A') });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByText('Const Schemas with Layout')).toBeInTheDocument();
+            });
+            expect(screen.getByText('This is Option A heading')).toBeInTheDocument();
+            await user.click(screen.getByText('Option B'));
+            await waitFor(() => {
+                expect(screen.getByText('This is Option B heading')).toBeInTheDocument();
+            });
+        });
+    });
+});