@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/ReviewLayout.test.js

@@ -0,0 +1,274 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { Fragment } from 'react/jsx-runtime';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { vi } from 'vitest';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('ReviewLayout 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: 'review',
+                title: 'Review Title',
+                analyticsId: 'review-layout-aid',
+                fields: [
+                    {
+                        analyticsId: 'review-field-1-aid',
+                        label: 'Label 1',
+                        value: 'Value 1',
+                        rawValue: 'Raw value 1',
+                        tag: 'tag1',
+                        inlineAlert: { content: 'Inline alert 1', context: 'positive' },
+                        additionalInfo: { text: 'Additional info 1' },
+                        callToAction: {
+                            title: 'Call to Action 1',
+                            behavior: { type: 'action', action: { url: '/call-to-action', method: 'GET' } },
+                        },
+                    },
+                    {
+                        analyticsId: 'review-field-2-aid',
+                        label: 'Label 2',
+                        value: 'Value 2',
+                        rawValue: 'Raw value 2',
+                        tag: 'tag2',
+                        inlineAlert: { content: 'Inline alert 2', context: 'negative' },
+                        additionalInfo: {
+                            text: 'Additional info 2',
+                            behavior: { type: 'action', action: { url: '/additional-info', method: 'GET' } },
+                        },
+                    },
+                ],
+                callToAction: Object.assign({ title: 'Call to Action', action: {} }, (behavior ? { behavior } : {})),
+            },
+        ],
+        schemas: [],
+    });
+    describe('Behavior / Call to Action', () => {
+        describe('Old "container" behavior type', () => {
+            describe('Given a review 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 a review 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', { name: 'Call to Action' })).toBeInTheDocument();
+                    });
+                    await user.click(screen.getByRole('button', { name: 'Call to Action' }));
+                    expect(props.httpClient).toHaveBeenCalledWith('/action', expect.any(Object));
+                });
+            });
+        });
+        describe('New "union type" behavior type', () => {
+            describe('Given a review 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 a review 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', { name: 'Call to Action' })).toBeInTheDocument();
+                    });
+                    await user.click(screen.getByRole('button', { name: 'Call to Action' }));
+                    expect(props.httpClient).toHaveBeenCalledWith('/action', expect.any(Object));
+                });
+            });
+        });
+        describe('Deprecated "action" support', () => {
+            describe('Given a review layout component with an action', () => {
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                        id: 'step-id',
+                        title: 'Step with alert',
+                        layout: [
+                            {
+                                type: 'review',
+                                title: 'Review Title',
+                                fields: [],
+                                action: { url: '/action', title: 'Old Action with Title' },
+                            },
+                        ],
+                        schemas: [],
+                    } });
+                it('should trigger the action on click', async () => {
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                    await waitFor(() => {
+                        expect(screen.getByRole('button')).toHaveTextContent('Old Action with Title');
+                    });
+                    await user.click(screen.getByRole('button'));
+                    expect(props.httpClient).toHaveBeenCalledWith('/action', expect.any(Object));
+                });
+            });
+        });
+        describe('Deprecated "calltoAction" with "action" support', () => {
+            describe('Given a review layout component with an action', () => {
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: {
+                        id: 'step-id',
+                        title: 'Step with alert',
+                        layout: [
+                            {
+                                type: 'review',
+                                title: 'Review Title',
+                                fields: [],
+                                callToAction: {
+                                    title: 'Call to Action',
+                                    action: { url: '/action' },
+                                },
+                            },
+                        ],
+                        schemas: [],
+                    } });
+                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('Extra props', () => {
+        describe('Given a review layout component with extra properties in its fields', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep() });
+            it('should pass the tag to the the renderer', async () => {
+                const customRenderer = {
+                    canRenderType: 'review',
+                    render: vi.fn(),
+                };
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [customRenderer] })));
+                expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                    fields: expect.arrayContaining([
+                        expect.objectContaining({ tag: 'tag1' }),
+                        expect.objectContaining({ tag: 'tag2' }),
+                    ]),
+                }));
+            });
+            it('should pass the rawValue to the the renderer', async () => {
+                const customRenderer = {
+                    canRenderType: 'review',
+                    render: vi.fn(),
+                };
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [customRenderer] })));
+                expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                    fields: expect.arrayContaining([
+                        expect.objectContaining({ rawValue: 'Raw value 1' }),
+                        expect.objectContaining({ rawValue: 'Raw value 2' }),
+                    ]),
+                }));
+            });
+            it('should pass the inlineAlert to the the renderer', async () => {
+                const customRenderer = {
+                    canRenderType: 'review',
+                    render: vi.fn(),
+                };
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [customRenderer] })));
+                expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                    fields: expect.arrayContaining([
+                        expect.objectContaining({
+                            inlineAlert: { content: 'Inline alert 1', context: 'positive' },
+                        }),
+                        expect.objectContaining({
+                            inlineAlert: { content: 'Inline alert 2', context: 'negative' },
+                        }),
+                    ]),
+                }));
+            });
+            it('should pass the additionalInfo to the the renderer', async () => {
+                const customRenderer = {
+                    canRenderType: 'review',
+                    render: vi.fn(),
+                };
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [customRenderer] })));
+                expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                    fields: expect.arrayContaining([
+                        expect.objectContaining({
+                            additionalInfo: expect.objectContaining({ text: 'Additional info 1' }),
+                        }),
+                        expect.objectContaining({
+                            additionalInfo: expect.objectContaining({ text: 'Additional info 2' }),
+                        }),
+                    ]),
+                }));
+            });
+            it('should pass the callToAction to the the renderer', async () => {
+                const customRenderer = {
+                    canRenderType: 'review',
+                    render: vi.fn(),
+                };
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [customRenderer] })));
+                expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                    fields: expect.arrayContaining([
+                        expect.objectContaining({
+                            callToAction: expect.objectContaining({ title: 'Call to Action 1' }),
+                        }),
+                    ]),
+                }));
+            });
+            it('should pass the analyticsId to the renderer', async () => {
+                const customRenderer = {
+                    canRenderType: 'review',
+                    render: vi.fn(),
+                };
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [customRenderer] })));
+                expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                    analyticsId: 'review-layout-aid',
+                    fields: expect.arrayContaining([
+                        expect.objectContaining({ analyticsId: 'review-field-1-aid' }),
+                        expect.objectContaining({ analyticsId: 'review-field-2-aid' }),
+                    ]),
+                }));
+            });
+            describe('interactivity', () => {
+                const customRenderer = {
+                    canRenderType: 'review',
+                    render: (review) => (_jsx(_Fragment, { children: review.fields.map((field) => {
+                            var _a, _b, _c, _d;
+                            return (_jsxs(Fragment, { children: [_jsx("button", { type: "button", onClick: (_a = field.additionalInfo) === null || _a === void 0 ? void 0 : _a.onClick, children: (_b = field.additionalInfo) === null || _b === void 0 ? void 0 : _b.text }), _jsx("button", { type: "button", onClick: (_c = field.callToAction) === null || _c === void 0 ? void 0 : _c.onClick, children: (_d = field.callToAction) === null || _d === void 0 ? void 0 : _d.title })] }, field.label));
+                        }) })),
+                };
+                it('should call httpClient when clicking on an additionalInfo', async () => {
+                    const localProps = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep() });
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, localProps, { renderers: [customRenderer] })));
+                    await user.click(screen.getByText('Additional info 2'));
+                    expect(localProps.httpClient).toHaveBeenCalledWith('/additional-info', expect.any(Object));
+                });
+                it('should call httpClient when clicking on an items  callToAction', async () => {
+                    const localProps = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep() });
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, localProps, { renderers: [customRenderer] })));
+                    await user.click(screen.getByText('Call to Action 1'));
+                    expect(localProps.httpClient).toHaveBeenCalledWith('/call-to-action', expect.any(Object));
+                });
+            });
+        });
+    });
+});

package/build/tests/SchemaOnChange.test.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { act, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { renderWithProviders, respondWith } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { vi } from 'vitest';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('SchemaOnChange', () => {
+    const getStep = (schema) => ({
+        id: 'step-1',
+        title: 'SchemaOnChange Test',
+        schemas: [schema],
+        layout: [{ type: 'form', schemaId: schema.$id }],
+    });
+    const renderDF = (props) => {
+        var _a, _b, _c;
+        const flowId = (_a = props.flowId) !== null && _a !== void 0 ? _a : 'persist-async-test-flow';
+        const onError = (_b = props.onError) !== null && _b !== void 0 ? _b : vi.fn();
+        const onCompletion = (_c = props.onCompletion) !== null && _c !== void 0 ? _c : vi.fn();
+        return renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, Object.assign({ onError, onCompletion, flowId }, props))));
+    };
+    describe('StringSchema & ActionBehavior', () => {
+        it('should submit the step on string schema change', async () => {
+            const initialStep = getStep({
+                $id: '#name',
+                type: 'string',
+                title: 'Name',
+                onChange: { type: 'action', action: { url: '/submit' } },
+            });
+            const httpClient = vi.fn();
+            renderDF({ initialStep, httpClient });
+            const nameInput = screen.getByLabelText('Name');
+            await user.type(nameInput, 'John Doe');
+            await act(async () => vi.advanceTimersByTimeAsync(1000)); // wait for debounce
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
+                    body: '"John Doe"',
+                }));
+            });
+        });
+    });
+    describe('OneOfSchema & ModalBehavior', () => {
+        it('should open a modal on oneOf schema change', async () => {
+            const initialStep = getStep({
+                $id: '#name',
+                title: 'Currency',
+                control: 'radio',
+                oneOf: [
+                    { const: 'USD', title: 'USD' },
+                    { const: 'EUR', title: 'EUR' },
+                    { const: 'GBP', title: 'GBP' },
+                ],
+                onChange: {
+                    type: 'modal',
+                    title: 'Currency Selected',
+                    content: [
+                        {
+                            type: 'paragraph',
+                            text: 'You have selected a currency, but this modal doesnt know which one.',
+                        },
+                    ],
+                },
+            });
+            renderDF({ initialStep });
+            await user.click(screen.getByText('GBP'));
+            await waitFor(() => {
+                expect(screen.getByText('Currency Selected')).toBeInTheDocument();
+            });
+        });
+    });
+    describe('BooleanSchema & LinkBehavior', () => {
+        it('should open a link on boolean schema change', async () => {
+            const initialStep = getStep({
+                $id: '#terms',
+                type: 'boolean',
+                title: 'Accept Terms',
+                onChange: {
+                    type: 'link',
+                    url: 'https://example.com/terms',
+                },
+            });
+            const onLink = vi.fn();
+            renderDF({ initialStep, onLink });
+            const termsCheckbox = screen.getByLabelText('Accept Terms');
+            await user.click(termsCheckbox);
+            await waitFor(() => {
+                expect(onLink).toHaveBeenCalledWith('https://example.com/terms');
+            });
+        });
+    });
+    describe('File Upload Schema with PersistAsync & ActionBehavior', () => {
+        it('should submit the step on file upload schema change', async () => {
+            const initialStep = getStep({
+                $id: '#file-upload',
+                type: 'string',
+                title: 'Upload File Outer Schema',
+                persistAsync: {
+                    url: '/upload',
+                    method: 'POST',
+                    idProperty: 'id',
+                    param: 'value',
+                    schema: {
+                        type: 'blob',
+                        title: 'Upload File',
+                        description: 'Upload a file',
+                    },
+                },
+                onChange: { type: 'action', action: { url: '/submit' } },
+            });
+            const httpClient = vi.fn(async (input) => {
+                switch (input) {
+                    case '/upload':
+                        return respondWith({ id: '###ttoken###' });
+                    default:
+                        return respondWith({});
+                }
+            });
+            renderDF({ initialStep, httpClient });
+            const file = new File(['file content'], 'test.txt', { type: 'text/plain' });
+            await user.upload(screen.getByTestId('uploadInput'), file);
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledWith('/upload', expect.objectContaining({
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                    body: expect.any(FormData),
+                }));
+            });
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenLastCalledWith('/submit', expect.objectContaining({}));
+            });
+        });
+    });
+});

package/build/tests/ScrollToError.test.js

@@ -0,0 +1,217 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWithProviders, respondWith, respondWithDelay } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import { act } from 'react';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const WINDOW_HEIGHT = 768;
+const WINDOW_WIDTH = 1024;
+const ELEMENT_HEIGHT = 100;
+const getDefaultProps = () => ({
+    flowId: 'flow-id',
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+const makeStep = (overrides = {}) => (Object.assign({ id: 'step-id', title: 'Step', schemas: [], layout: [] }, overrides));
+const getMockBoundingClientRect = (top) => vi.fn(() => ({
+    top,
+    bottom: top + ELEMENT_HEIGHT,
+    left: 0,
+    right: WINDOW_WIDTH,
+    width: WINDOW_WIDTH,
+    height: ELEMENT_HEIGHT,
+    x: 0,
+    y: top,
+    toJSON: () => { },
+}));
+describe('Scrolling to global error', () => {
+    beforeEach(() => {
+        // Mock window height
+        Object.defineProperty(window, 'innerHeight', {
+            writable: true,
+            configurable: true,
+            value: WINDOW_HEIGHT,
+        });
+    });
+    describe('when loading the initial step', () => {
+        it('does not attempt to scroll to the top of the step (initialStep)', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            // Element is not visible
+            window.HTMLElement.prototype.getBoundingClientRect = getMockBoundingClientRect(WINDOW_HEIGHT + 100);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: makeStep({ id: 'initial-step', title: 'Initial Step' }), httpClient: vi.fn() }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByText('Initial Step')).toBeInTheDocument();
+            });
+            expect(scrollIntoViewMock).not.toHaveBeenCalled();
+        });
+        it('does not attempt to scroll to the top of the step (initialAction)', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            // Element is not visible
+            window.HTMLElement.prototype.getBoundingClientRect = getMockBoundingClientRect(WINDOW_HEIGHT + 100);
+            const httpClient = vi
+                .fn()
+                .mockImplementation(async () => respondWith(makeStep({ id: 'first-loaded-step', title: 'First Loaded Step' })));
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialAction: { url: '/' }, httpClient: httpClient }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByText('First Loaded Step')).toBeInTheDocument();
+            });
+            expect(scrollIntoViewMock).not.toHaveBeenCalled();
+        });
+    });
+    describe('when loading a step', () => {
+        it('attempts to scroll back up to the top of the step', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            // Element is not visible
+            window.HTMLElement.prototype.getBoundingClientRect = getMockBoundingClientRect(WINDOW_HEIGHT + 100);
+            const httpClient = vi
+                .fn()
+                .mockImplementation(async () => respondWith(makeStep({ id: 'second-step', title: 'Second Step' })));
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: makeStep({
+                    id: 'initial-step',
+                    title: 'Initial Step',
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'Next',
+                            behavior: { type: 'action', action: { url: '/next', method: 'POST' } },
+                        },
+                    ],
+                }), httpClient: httpClient }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByText('Initial Step')).toBeInTheDocument();
+            });
+            await user.click(screen.getByRole('button', { name: 'Next' }));
+            await waitFor(() => {
+                expect(screen.getByText('Second Step')).toBeInTheDocument();
+            });
+            expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+        });
+        it('does not attempt to scroll if the top of the step is already visible inside the viewport', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            // Element is visible
+            window.HTMLElement.prototype.getBoundingClientRect = getMockBoundingClientRect(WINDOW_HEIGHT / 2);
+            const httpClient = vi
+                .fn()
+                .mockImplementation(async () => respondWith(makeStep({ id: 'second-step', title: 'Second Step' })));
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: makeStep({
+                    id: 'initial-step',
+                    title: 'Initial Step',
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'Next',
+                            behavior: { type: 'action', action: { url: '/next', method: 'POST' } },
+                        },
+                    ],
+                }), httpClient: httpClient }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByText('Initial Step')).toBeInTheDocument();
+            });
+            await user.click(screen.getByRole('button', { name: 'Next' }));
+            await waitFor(() => {
+                expect(screen.getByText('Second Step')).toBeInTheDocument();
+            });
+            expect(scrollIntoViewMock).not.toHaveBeenCalled();
+        });
+    });
+    describe('when an action results in an error', () => {
+        const httpClient = vi
+            .fn()
+            .mockImplementation(async () => respondWithDelay({ error: 'There was a problem' }, 100, { status: 400 }));
+        const initialStep = makeStep({
+            layout: [
+                {
+                    type: 'button',
+                    title: 'Submit',
+                    behavior: {
+                        type: 'action',
+                        action: { url: '/submit', method: 'POST' },
+                    },
+                },
+            ],
+        });
+        it('shows a global error which is scrolled into view', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            // Element is not visible
+            window.HTMLElement.prototype.getBoundingClientRect = getMockBoundingClientRect(WINDOW_HEIGHT + 100);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: initialStep, httpClient: httpClient }, getDefaultProps())));
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            await waitFor(() => {
+                expect(screen.getByText('There was a problem')).toBeInTheDocument();
+            });
+            expect(scrollIntoViewMock).toHaveBeenCalled();
+        });
+        it('does not scroll to the error again if the button is clicked but the message does not change', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            // Element is not visible
+            window.HTMLElement.prototype.getBoundingClientRect = getMockBoundingClientRect(WINDOW_HEIGHT + 100);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: initialStep, httpClient: httpClient }, getDefaultProps())));
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            await waitFor(() => {
+                expect(screen.getByText('There was a problem')).toBeInTheDocument();
+            });
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            await waitFor(() => {
+                expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+            });
+        });
+    });
+    describe('when refresh on change returns a step with an error', () => {
+        const httpClient = vi
+            .fn()
+            .mockImplementation(async () => respondWith(Object.assign(Object.assign({}, step), { errors: { error: 'There was a problem' } }), { status: 200 }));
+        const step = {
+            id: 'step-id',
+            title: 'Step',
+            refreshUrl: '/refresh',
+            schemas: [
+                {
+                    $id: '#iban',
+                    type: 'string',
+                    title: 'IBAN',
+                    refreshStepOnChange: true,
+                },
+            ],
+            layout: [
+                {
+                    type: 'form',
+                    schemaId: '#iban',
+                },
+                {
+                    type: 'button',
+                    title: 'Submit',
+                    behavior: {
+                        type: 'action',
+                        action: {
+                            url: '/submit',
+                            method: 'POST',
+                        },
+                    },
+                },
+            ],
+        };
+        it('shows a global error which is scrolled into view', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            // Element is not visible
+            window.HTMLElement.prototype.getBoundingClientRect = getMockBoundingClientRect(WINDOW_HEIGHT + 100);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: step, httpClient: httpClient }, getDefaultProps())));
+            await user.type(screen.getByLabelText('IBAN'), '12345');
+            await act(async () => vi.advanceTimersByTimeAsync(1000)); // wait for debounce
+            await waitFor(() => {
+                expect(screen.getByText('There was a problem')).toBeInTheDocument();
+            });
+            expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+        });
+    });
+});

package/build/tests/SegmentedControl.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { screen } from '@testing-library/react';
+import { vi } from 'vitest';
+describe('given a step with a oneOf schema with control segmented', () => {
+    const makeConstSchema = (options) => ({
+        oneOf: Array(options)
+            .fill(0)
+            .map((value, index) => ({
+            const: String(index),
+            title: `Option ${index + 1}`,
+        })),
+        title: '',
+        control: 'segmented',
+    });
+    const initialStep = (options) => ({
+        id: 'step-id',
+        title: 'title',
+        layout: [
+            {
+                type: 'form',
+                schemaId: '#schema',
+            },
+        ],
+        schemas: [
+            {
+                $id: '#schema',
+                type: 'object',
+                displayOrder: ['paymentMethod'],
+                properties: {
+                    paymentMethod: makeConstSchema(options),
+                },
+            },
+        ],
+    });
+    it('when it has 3 or fewer children, a SegmentedControl is rendered', () => {
+        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow", initialStep: initialStep(3), httpClient: vi.fn(), onError: vi.fn(), onCompletion: vi.fn() }));
+        expect(screen.getByText('Option 1')).toBeInTheDocument();
+        expect(screen.getByText('Option 2')).toBeInTheDocument();
+        expect(screen.getByText('Option 3')).toBeInTheDocument();
+    });
+    it('when it has more than 3 children, a select is rendered', () => {
+        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow", initialStep: initialStep(4), httpClient: vi.fn(), onError: vi.fn(), onCompletion: vi.fn() }));
+        expect(screen.queryByText('Option 1')).not.toBeInTheDocument();
+        expect(screen.queryByText('Option 2')).not.toBeInTheDocument();
+        expect(screen.queryByText('Option 3')).not.toBeInTheDocument();
+    });
+});