@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/DateInput.test.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from '@testing-library/react';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('given a step with date input', () => {
+    const step = (required, defaultValue) => ({
+        id: 'step',
+        title: 'step title',
+        schemas: [
+            {
+                properties: {
+                    date: {
+                        format: 'date',
+                        title: 'This is a date',
+                        type: 'string',
+                        default: defaultValue,
+                    },
+                },
+                required: required ? ['date'] : undefined,
+                displayOrder: ['date'],
+                $id: '#schema',
+                type: 'object',
+            },
+        ],
+        layout: [
+            {
+                schemaId: '#schema',
+                type: 'form',
+            },
+            {
+                type: 'button',
+                title: 'Submit',
+                action: { url: '/submit' },
+            },
+        ],
+    });
+    describe('when a full date is provided', () => {
+        it('submits successfully', async () => {
+            vi.setSystemTime(new Date(2026, 1, 1, 12, 0));
+            const httpClient = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: step(true), onCompletion: vi.fn(), onError: vi.fn() }));
+            await user.click(screen.getAllByText('Month')[0]);
+            await waitFor(() => {
+                expect(screen.getByText('January')).toBeInTheDocument();
+            });
+            await user.click(screen.getByText('January'));
+            await user.type(screen.getByLabelText('Day'), '1');
+            await user.type(screen.getByLabelText('Year'), '2024');
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalled();
+            });
+            expect(screen.queryByText('Please fill out this field.')).not.toBeInTheDocument();
+        });
+    });
+    describe('when a partial date (YYYY-MM) is filled in', () => {
+        describe('and the field is required', () => {
+            it('blocks submission', async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: step(true), onCompletion: vi.fn(), onError: vi.fn() }));
+                await waitFor(() => {
+                    expect(screen.getByText('step title')).toBeInTheDocument();
+                });
+                await user.click(screen.getAllByText('Month')[0]);
+                await waitFor(() => {
+                    expect(screen.getByText('January')).toBeInTheDocument();
+                });
+                await user.click(screen.getByText('January'));
+                await user.type(screen.getByLabelText('Year'), '2024');
+                await user.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(httpClient).not.toHaveBeenCalled();
+                });
+                expect(screen.getByText('Please fill out this field.')).toBeInTheDocument();
+            });
+        });
+        describe('and the field is optional', () => {
+            it('submits null', async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: step(false), onCompletion: vi.fn(), onError: vi.fn() }));
+                await waitFor(() => {
+                    expect(screen.getByText('step title')).toBeInTheDocument();
+                });
+                await user.click(screen.getAllByText('Month')[0]);
+                await waitFor(() => {
+                    expect(screen.getByText('January')).toBeInTheDocument();
+                });
+                await user.click(screen.getByText('January'));
+                await user.type(screen.getByLabelText('Year'), '2024');
+                await user.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: '{}' }));
+                });
+                expect(screen.queryByText('Please fill out this field.')).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe('when a partial date (YYYY-MM) is provided in the model', () => {
+        describe('and the field is required', () => {
+            it('blocks submission', async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: Object.assign(Object.assign({}, step(true)), { model: { date: '2024-07' } }), onCompletion: vi.fn(), onError: vi.fn() }));
+                await user.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(httpClient).not.toHaveBeenCalled();
+                });
+                expect(screen.getByText('Please fill out this field.')).toBeInTheDocument();
+            });
+        });
+        describe('and the field is optional', () => {
+            it('submits null', async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: Object.assign(Object.assign({}, step(false)), { model: { date: '2024-07' } }), onCompletion: vi.fn(), onError: vi.fn() }));
+                await user.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: '{}' }));
+                });
+                expect(screen.queryByText('Please fill out this field.')).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe('when an invalid date is provided', () => {
+        const cases = [
+            { model: 'abcd-ef-gh', description: 'nonsense string in model' },
+            { model: '25-10-1985', description: 'wrong format in model' },
+            { default: 'abcd-ef-gh', description: 'nonsense string in default' },
+            { default: '25-10-1985', description: 'wrong format in default' },
+        ];
+        cases.forEach(({ model, default: defaultValue, description }) => {
+            it(`blocks submission for ${model !== null && model !== void 0 ? model : defaultValue} because "${description}"`, async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: Object.assign(Object.assign({}, step(true, defaultValue)), { model: { date: model !== null && model !== void 0 ? model : null } }), onCompletion: vi.fn(), onError: vi.fn() }));
+                await user.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(httpClient).not.toHaveBeenCalled();
+                });
+                expect(screen.getByText('Please fill out this field.')).toBeInTheDocument();
+            });
+        });
+    });
+    describe('when a date-time value is provided in the model', () => {
+        it('extracts and uses only the date portion', async () => {
+            const httpClient = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: Object.assign(Object.assign({}, step(true)), { model: { date: '1985-10-25T01:18:00.000-08:00' } }), onCompletion: vi.fn(), onError: vi.fn() }));
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: '{"date":"1985-10-25"}' }));
+            });
+        });
+    });
+    describe('when a date-time value is provided in the schema default', () => {
+        it('extracts and uses only the date portion', async () => {
+            const httpClient = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: Object.assign({}, step(true, '1985-10-25T01:18:00.000-08:00')), onCompletion: vi.fn(), onError: vi.fn() }));
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: '{"date":"1985-10-25"}' }));
+            });
+        });
+    });
+});

package/build/tests/DecisionLayout.test.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx } 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 { vi } from 'vitest';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('DecisionLayout component', () => {
+    const getDefaultProps = () => ({
+        flowId: 'flow-id',
+        httpClient: vi.fn(),
+        onCompletion: vi.fn(),
+        onError: vi.fn(),
+        onEvent: vi.fn(),
+        onLog: vi.fn(),
+    });
+    const initialStep = {
+        id: 'step-id',
+        title: 'Step with decision',
+        layout: [
+            {
+                type: 'decision',
+                analyticsId: 'decision-layout-aid',
+                options: [
+                    {
+                        analyticsId: 'action-option-1-aid',
+                        title: 'Action Option',
+                        action: { url: '/action-option' },
+                        tag: 'action-option',
+                        additionalText: 'Additional text',
+                        inlineAlert: {
+                            context: 'warning',
+                            content: 'This is an inline alert',
+                        },
+                    },
+                    {
+                        analyticsId: 'action-option-2-aid',
+                        title: 'Behavior Action Option',
+                        behavior: {
+                            type: 'action',
+                            action: { url: '/behavior-action' },
+                        },
+                        tag: 'behavior-action-option',
+                    },
+                    {
+                        analyticsId: 'action-option-3-aid',
+                        title: 'Behavior Link Option',
+                        behavior: {
+                            type: 'link',
+                            url: '/behavior-link',
+                        },
+                        tag: 'behavior-link-option',
+                    },
+                ],
+            },
+        ],
+        schemas: [],
+    };
+    describe('Legacy action', () => {
+        describe('Given a decision layout component with an action', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep });
+            it('should render a button that triggers the action on click', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(screen.getByRole('button', { name: 'Action Option' })).toBeInTheDocument();
+                });
+                await user.click(screen.getByRole('button', { name: 'Action Option' }));
+                expect(props.httpClient).toHaveBeenCalledWith('/action-option', expect.any(Object));
+            });
+        });
+    });
+    describe('New "union type" behavior type', () => {
+        describe('Given a decision layout component with a link behavior', () => {
+            const onLink = vi.fn();
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { onLink,
+                initialStep });
+            it('should render a link that opens the url on click', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(screen.getByRole('link', { name: 'Behavior Link Option' })).toBeInTheDocument();
+                });
+                expect(screen.getByRole('link', { name: 'Behavior Link Option' })).toHaveAttribute('href', '/behavior-link');
+            });
+        });
+        describe('Given a decision layout component with an action behavior', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep });
+            it('should trigger the action on click', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(screen.getByRole('button', { name: 'Behavior Action Option' })).toBeInTheDocument();
+                });
+                await user.click(screen.getByRole('button', { name: 'Behavior Action Option' }));
+                expect(props.httpClient).toHaveBeenCalledWith('/behavior-action', expect.any(Object));
+            });
+        });
+    });
+    describe('Extra props', () => {
+        const customRenderer = {
+            canRenderType: 'decision',
+            render: vi.fn(),
+        };
+        it('should pass the tag in each option to the renderer', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [customRenderer] })));
+            expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                options: expect.arrayContaining([
+                    expect.objectContaining({ tag: 'action-option' }),
+                    expect.objectContaining({ tag: 'behavior-action-option' }),
+                    expect.objectContaining({ tag: 'behavior-link-option' }),
+                ]),
+            }));
+        });
+        it('should pass the additional text, supporting values, and inline alert in each option to the renderer', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [customRenderer] })));
+            expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                options: expect.arrayContaining([
+                    expect.objectContaining({ additionalText: 'Additional text' }),
+                ]),
+            }));
+            expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                options: expect.arrayContaining([
+                    expect.objectContaining({
+                        inlineAlert: {
+                            context: 'warning',
+                            content: 'This is an inline alert',
+                        },
+                    }),
+                ]),
+            }));
+        });
+        it('should pass the analyticsId in each option to the renderer', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [customRenderer] })));
+            expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                analyticsId: 'decision-layout-aid',
+                options: expect.arrayContaining([
+                    expect.objectContaining({ analyticsId: 'action-option-1-aid' }),
+                    expect.objectContaining({ analyticsId: 'action-option-2-aid' }),
+                    expect.objectContaining({ analyticsId: 'action-option-3-aid' }),
+                ]),
+            }));
+        });
+    });
+});

package/build/tests/DynamicFlow.test.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import { vi, beforeEach } from 'vitest';
+import { getMockHttpClient, renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import userEvent from '@testing-library/user-event';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('DynamicFlow', () => {
+    const makeDefaultProps = () => ({
+        httpClient: getMockHttpClient({}),
+        onCompletion: vi.fn(),
+        onError: vi.fn(),
+        onEvent: vi.fn(),
+        onLog: vi.fn(),
+    });
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('initial step with initial model', () => {
+        it('renders the step with relevant fields filled in', () => {
+            const step = {
+                id: 'new-df-initial-step',
+                title: 'Dynamic Flow',
+                schemas: [
+                    {
+                        $id: '#schema',
+                        type: 'object',
+                        title: 'Object schema title',
+                        description: 'Object schema description',
+                        displayOrder: ['name', 'occupation'],
+                        properties: {
+                            name: {
+                                title: 'Full name',
+                                type: 'string',
+                            },
+                            occupation: {
+                                title: 'Occupation',
+                                type: 'string',
+                            },
+                        },
+                    },
+                ],
+                layout: [{ type: 'form', schemaId: '#schema' }],
+                model: { name: 'John Smith' },
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ flowId: "new-df-flow-id" }, makeDefaultProps(), { initialStep: step })));
+            expect(screen.getByDisplayValue('John Smith')).toBeInTheDocument();
+        });
+    });
+    describe('events', () => {
+        describe('when the flow starts with flowId and stepId', () => {
+            it('emits a flow started event containing those values', () => {
+                const props = Object.assign(Object.assign({}, makeDefaultProps()), { initialStep: {
+                        id: 'ny-initial-step-id',
+                        title: 'Dynamic Flow',
+                        schemas: [],
+                        layout: [],
+                    } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ flowId: "my-flow-id" }, props)));
+                expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Initiated', expect.objectContaining({
+                    flowId: 'my-flow-id',
+                    stepId: 'ny-initial-step-id',
+                }));
+            });
+            it('emits a step shown event containing those values', () => {
+                const props = Object.assign(Object.assign({}, makeDefaultProps()), { initialStep: {
+                        id: 'ny-initial-step-id',
+                        title: 'Dynamic Flow',
+                        schemas: [],
+                        layout: [],
+                    } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ flowId: "my-flow-id" }, props)));
+                expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Step Shown', expect.objectContaining({
+                    flowId: 'my-flow-id',
+                    stepId: 'ny-initial-step-id',
+                }));
+            });
+        });
+    });
+    describe('onCopy', () => {
+        const textToCopy = 'Sample text';
+        const step = {
+            id: 'new-df-initial-step',
+            title: 'Dynamic Flow',
+            schemas: [],
+            layout: [
+                {
+                    type: 'button',
+                    title: 'Click to copy',
+                    control: 'primary',
+                    behavior: {
+                        type: 'copy',
+                        content: textToCopy,
+                    },
+                },
+            ],
+        };
+        it('calls onCopy when content is copied', async () => {
+            const props = makeDefaultProps();
+            const onCopy = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ flowId: "my-flow-id" }, props, { initialStep: step, onCopy: onCopy })));
+            const copyButton = screen.getByText('Click to copy');
+            await user.click(copyButton);
+            await waitFor(() => {
+                expect(onCopy).toHaveBeenCalledWith(textToCopy);
+            });
+        });
+        it('calls onCopy with null when copy fails', async () => {
+            const props = makeDefaultProps();
+            const onCopy = vi.fn();
+            Object.defineProperty(navigator, 'clipboard', {
+                value: {
+                    writeText: vi.fn(async () => Promise.reject(new Error('Copy failed'))),
+                },
+                writable: true,
+            });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ flowId: "my-flow-id" }, props, { initialStep: step, onCopy: onCopy })));
+            const copyButton = screen.getByText('Click to copy');
+            await user.click(copyButton);
+            await waitFor(() => {
+                expect(onCopy).toHaveBeenCalledWith(null);
+            });
+        });
+    });
+    describe('hideStepTitle feature flag', () => {
+        it('hides the step title when the feature flag is enabled', () => {
+            const step = {
+                id: 'step-with-title',
+                title: 'Hidden Title',
+                schemas: [],
+                layout: [],
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ flowId: "flow-with-hide-title" }, makeDefaultProps(), { initialStep: step, features: { hideStepTitle: true } })));
+            expect(screen.queryByText('Hidden Title')).not.toBeInTheDocument();
+        });
+        it('shows the step title when the feature flag is disabled', () => {
+            const step = {
+                id: 'step-with-title',
+                title: 'Visible Title',
+                schemas: [],
+                layout: [],
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ flowId: "flow-with-show-title" }, makeDefaultProps(), { initialStep: step, features: { hideStepTitle: false } })));
+            expect(screen.getByText('Visible Title')).toBeInTheDocument();
+        });
+    });
+});

package/build/tests/External.test.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import { act } from 'react';
+import { getMockHttpClient, renderWithProviders, respondWith } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const mockWindowOpenSuccess = () => vi.mocked(window.open).mockImplementation(() => ({}));
+const mockWindowOpenFail = () => vi.mocked(window.open).mockImplementation(() => null);
+describe('External', () => {
+    const mockHttpClient = vi.fn(async () => Promise.resolve(new Response('')));
+    const onError = vi.fn();
+    const onCompletion = vi.fn();
+    const renderComponent = (step) => renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", initialStep: step, httpClient: mockHttpClient, onCompletion: onCompletion, onError: onError }));
+    afterEach(() => {
+        mockHttpClient.mockClear();
+        vi.restoreAllMocks();
+    });
+    describe('Given a step with an "external" property', () => {
+        const step = {
+            type: 'form',
+            id: 'external',
+            title: 'Step Title',
+            external: { url: 'https://third-party.website' },
+            layout: [{ type: 'paragraph', text: 'This is a paragraph in the step layout' }],
+            schemas: [],
+        };
+        it('attempts to open the specified URL, but ONLY ONCE', async () => {
+            vi.spyOn(window, 'open');
+            mockWindowOpenSuccess();
+            renderComponent(step);
+            expect(window.open).toHaveBeenCalledTimes(1);
+            expect(window.open).toHaveBeenCalledWith('https://third-party.website', '_blank');
+            await waitFor(() => {
+                expect(window.open).toHaveBeenCalledTimes(1);
+            });
+        });
+        describe('when the window/tab fails to open', () => {
+            it('displays a confirmation UI (ExternalConfirmationStep)', async () => {
+                vi.spyOn(window, 'open');
+                mockWindowOpenFail();
+                renderComponent(step);
+                await expect(screen.findByText('Please confirm')).resolves.toBeInTheDocument();
+            });
+            describe('when the confirmation button is clicked', () => {
+                it('opens the external url and displays the step layout', () => {
+                    vi.spyOn(window, 'open');
+                    mockWindowOpenFail();
+                    renderComponent(step);
+                    expect(screen.getByText('Please confirm')).toBeInTheDocument();
+                    const confirmButton = screen.getByText('Open in new tab');
+                    vi.mocked(window.open).mockClear();
+                    fireEvent.click(confirmButton);
+                    expect(window.open).toHaveBeenCalledTimes(1);
+                    expect(screen.getByText('This is a paragraph in the step layout')).toBeInTheDocument();
+                });
+            });
+            describe('when the cancel button is clicked', () => {
+                it('does not open the external url and displays the step layout', () => {
+                    vi.spyOn(window, 'open');
+                    mockWindowOpenFail();
+                    renderComponent(step);
+                    expect(screen.getByText('Please confirm')).toBeInTheDocument();
+                    const confirmButton = screen.getByText('Cancel');
+                    vi.mocked(window.open).mockClear();
+                    fireEvent.click(confirmButton);
+                    expect(window.open).toHaveBeenCalledTimes(0);
+                    expect(screen.getByText('This is a paragraph in the step layout')).toBeInTheDocument();
+                });
+            });
+            describe('when a subsequent step with external is loaded using the same URL', () => {
+                const mockClient = getMockHttpClient({
+                    '/external': async () => respondWith({
+                        id: 'external',
+                        title: 'External Step',
+                        external: { url: 'https://third-party.website' },
+                        layout: [
+                            { type: 'paragraph', text: 'This is a paragraph in the external step layout' },
+                            { type: 'button', action: { url: '/layout', title: 'Continue to layout step' } },
+                        ],
+                        schemas: [],
+                    }),
+                    '/layout': async () => respondWith({
+                        id: 'layout',
+                        title: 'Layout Step',
+                        layout: [
+                            { type: 'paragraph', text: 'This is a paragraph in the layout step layout' },
+                            {
+                                type: 'button',
+                                action: { url: '/external', title: 'Continue to external step' },
+                            },
+                        ],
+                        schemas: [],
+                    }),
+                });
+                it('displays the confirmation UI (ExternalConfirmationStep) a second time', async () => {
+                    vi.spyOn(window, 'open');
+                    mockWindowOpenFail();
+                    renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", initialAction: { method: 'GET', url: '/external' }, httpClient: mockClient, onCompletion: onCompletion, onError: onError }));
+                    await expect(screen.findByText('Please confirm')).resolves.toBeInTheDocument();
+                    const confirmButton = screen.getByText('Cancel');
+                    vi.mocked(window.open).mockClear();
+                    fireEvent.click(confirmButton);
+                    expect(window.open).toHaveBeenCalledTimes(0);
+                    expect(screen.getByText('This is a paragraph in the external step layout')).toBeInTheDocument();
+                    fireEvent.click(screen.getByText(/continue to layout step/i));
+                    await expect(screen.findByText('Layout Step')).resolves.toBeInTheDocument();
+                    fireEvent.click(screen.getByText(/continue to external step/i));
+                    await expect(screen.findByText('Please confirm')).resolves.toBeInTheDocument();
+                });
+            });
+        });
+        describe('when the window/tab opens successfully', () => {
+            it('displays the step normally', async () => {
+                vi.spyOn(window, 'open');
+                mockWindowOpenSuccess();
+                renderComponent(step);
+                await expect(screen.findByText('This is a paragraph in the step layout')).resolves.toBeInTheDocument();
+                expect(screen.queryByText('Please confirm')).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe('Given a step with an "external" property and "refreshAfter"', () => {
+        const step = {
+            type: 'form',
+            id: 'external',
+            title: 'Step Title',
+            external: { url: 'https://third-party.website' },
+            layout: [{ type: 'paragraph', text: 'This is a paragraph in the step layout' }],
+            schemas: [],
+            refreshAfter: new Date(Date.now() + 1000).toISOString(),
+            refreshUrl: '/refresh',
+        };
+        it('attempts to open the specified URL, but ONLY ONCE, even after the refresh', async () => {
+            vi.spyOn(window, 'open');
+            mockWindowOpenSuccess();
+            const httpClient = vi.fn(async (input) => {
+                return input === '/refresh'
+                    ? respondWith(Object.assign(Object.assign({}, step), { title: 'Refreshed Title' }), { status: 200 })
+                    : respondWith(null, { status: 404 });
+            });
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", initialStep: step, httpClient: httpClient, onCompletion: onCompletion, onError: onError }));
+            expect(window.open).toHaveBeenCalledTimes(1);
+            expect(window.open).toHaveBeenCalledWith('https://third-party.website', '_blank');
+            expect(screen.getByText('Step Title')).toBeInTheDocument();
+            await act(async () => vi.advanceTimersByTimeAsync(1100));
+            expect(httpClient).toHaveBeenCalledWith('/refresh', expect.any(Object));
+            expect(screen.getByText('Refreshed Title')).toBeInTheDocument();
+            expect(window.open).toHaveBeenCalledTimes(1);
+        });
+    });
+    describe('Given a step with a malformed "external" property', () => {
+        const step = {
+            type: 'form',
+            id: 'external',
+            title: 'Step Title',
+            external: { wrong: 'banana' },
+            layout: [{ type: 'paragraph', text: 'This is a paragraph in the step layout' }],
+            schemas: [],
+        };
+        it('does not attempt to open a new tab', async () => {
+            vi.spyOn(window, 'open');
+            mockWindowOpenSuccess();
+            renderComponent(step);
+            await waitFor(() => {
+                expect(window.open).not.toHaveBeenCalled();
+            });
+        });
+    });
+});