@wise/dynamic-flow-client 5.12.1 → 5.13.0

package/build/tests/AlertLayout.test.js

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

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

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

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