@wise/dynamic-flow-client 5.13.1 → 5.13.2

package/build/tests/Subflow.test.js

@@ -0,0 +1,887 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { act } from 'react';
+import { renderWithProviders, respondWith, respondWithDelay, wait } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTimeAsync });
+describe('Subflow', () => {
+    const getDefaultProps = () => ({
+        flowId: 'flow-id',
+        httpClient: vi.fn(),
+        onCompletion: vi.fn(),
+        onError: vi.fn(),
+        onEvent: vi.fn(),
+        onLog: vi.fn(),
+    });
+    const cases = [
+        [
+            'given a subflow behavior on a button',
+            (subflow) => ({
+                mockHttpClient: vi.fn(),
+                initialStep: {
+                    id: 'my-step',
+                    title: 'Step',
+                    schemas: [],
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'Open subflow',
+                            behavior: subflow,
+                        },
+                    ],
+                },
+            }),
+        ],
+        [
+            'given a subflow behavior on a call-to-action',
+            (subflow) => ({
+                mockHttpClient: vi.fn(),
+                initialStep: {
+                    id: 'my-step',
+                    title: 'Step',
+                    schemas: [],
+                    layout: [
+                        {
+                            type: 'alert',
+                            markdown: 'An alert with a CTA that contains a subflow behavior.',
+                            callToAction: {
+                                title: 'Open subflow',
+                                behavior: subflow,
+                            },
+                        },
+                    ],
+                },
+            }),
+        ],
+        [
+            'given a subflow response',
+            (subflow) => ({
+                mockHttpClient: vi
+                    .fn()
+                    .mockImplementationOnce(async () => respondWith(subflow, { headers: [['X-DF-Response-Type', 'subflow']] })),
+                initialStep: {
+                    id: 'my-step',
+                    title: 'Step',
+                    schemas: [],
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'Open subflow',
+                            behavior: {
+                                type: 'action',
+                                action: {
+                                    url: '/start-subflow',
+                                    method: 'POST',
+                                },
+                            },
+                        },
+                    ],
+                },
+            }),
+        ],
+    ];
+    const modallyPresentedSubflow = {
+        type: 'subflow',
+        referrerId: 'flow-a',
+        launchConfig: {
+            type: 'dynamic',
+            request: {
+                url: '/subflow-url',
+                method: 'GET',
+            },
+            presentation: {
+                type: 'modal',
+            },
+        },
+        onCompletion: {
+            type: 'action',
+            action: { url: '/subflow-completion' },
+        },
+        onError: {
+            type: 'action',
+            action: { url: '/error-in-subflow' },
+        },
+    };
+    const pushPresentedSubflow = {
+        type: 'subflow',
+        referrerId: 'flow-a',
+        launchConfig: {
+            type: 'dynamic',
+            request: {
+                url: '/subflow-url',
+                method: 'GET',
+            },
+            presentation: {
+                type: 'push',
+            },
+        },
+    };
+    describe.each(cases)('%s', (name, getProps) => {
+        describe('given the subflow is modally presented', () => {
+            const subflow = modallyPresentedSubflow;
+            it('displays the subflow modally with the correct events', async () => {
+                const onEvent = vi.fn();
+                const { initialStep, mockHttpClient } = getProps(subflow);
+                const httpClient = mockHttpClient.mockResolvedValueOnce(respondWith({
+                    id: 'subflow-step',
+                    title: 'Subflow Step',
+                    schemas: [],
+                    layout: [],
+                }));
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                await user.click(screen.getByText('Open subflow'));
+                await waitFor(() => {
+                    expect(screen.getByText('Subflow Step')).toBeInTheDocument();
+                });
+                // content is still behind the modal
+                expect(screen.getByText('Open subflow')).toBeInTheDocument();
+                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Initiated', expect.objectContaining({
+                    integrationId: 'flow-id',
+                    referrerId: 'flow-a',
+                }));
+            });
+            it('the modal close button cancels the subflow', async () => {
+                const onEvent = vi.fn();
+                const { initialStep, mockHttpClient } = getProps(subflow);
+                const httpClient = mockHttpClient.mockResolvedValueOnce(respondWith({
+                    id: 'subflow-step',
+                    title: 'Subflow Step',
+                    schemas: [],
+                    layout: [],
+                }));
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                await user.click(screen.getByText('Open subflow'));
+                await waitFor(() => {
+                    expect(screen.getByText('Subflow Step')).toBeInTheDocument();
+                });
+                await user.click(screen.getByRole('button', { name: /close/i }));
+                await waitFor(() => {
+                    expect(screen.queryByText('Subflow Step')).not.toBeInTheDocument();
+                });
+            });
+            it('refreshAfter is suspended when the subflow modal is open', async () => {
+                const refreshAfter = new Date(Date.now() + 1000).toISOString();
+                const onEvent = vi.fn();
+                const { initialStep, mockHttpClient } = getProps(subflow);
+                const httpClient = mockHttpClient.mockImplementation(async (input) => {
+                    if (input === '/polling-url') {
+                        return respondWith('', { status: 200 });
+                    }
+                    return respondWith({
+                        id: 'subflow-step',
+                        title: 'Subflow Step',
+                        schemas: [],
+                        layout: [],
+                    });
+                });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: Object.assign(Object.assign({}, initialStep), { refreshAfter, refreshUrl: '/refresh' }), httpClient: httpClient, onEvent: onEvent })));
+                await user.click(screen.getByText('Open subflow'));
+                await act(async () => vi.advanceTimersByTimeAsync(1100));
+                expect(httpClient).not.toHaveBeenCalledWith('/refresh', expect.anything());
+                httpClient.mockClear();
+                await user.click(screen.getByRole('button', { name: /close/i }));
+            });
+            it('refreshAfter is resumed when the subflow modal is closed', async () => {
+                const refreshAfter = new Date(Date.now() + 2000).toISOString();
+                const onEvent = vi.fn();
+                const { initialStep, mockHttpClient } = getProps(subflow);
+                const httpClient = mockHttpClient.mockReturnValueOnce(respondWith({
+                    id: 'subflow-step',
+                    title: 'Subflow Step',
+                    schemas: [],
+                    layout: [],
+                }));
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: Object.assign(Object.assign({}, initialStep), { refreshAfter, refreshUrl: '/refresh' }), httpClient: httpClient, onEvent: onEvent })));
+                await user.click(screen.getByText('Open subflow'));
+                await act(async () => vi.advanceTimersByTimeAsync(5000));
+                await user.click(screen.getByRole('button', { name: /close/i }));
+                // the timer isn't being started reliably in before the assertions
+                // (i.e. there are no fake timers to advance yet), so adding a manual wait
+                await act(async () => wait(500));
+                await waitFor(() => {
+                    expect(screen.queryByText('Subflow Step')).not.toBeInTheDocument();
+                });
+                await act(async () => {
+                    await vi.advanceTimersByTimeAsync(1000);
+                });
+                await waitFor(async () => {
+                    expect(httpClient).toHaveBeenCalledWith('/refresh', expect.anything());
+                });
+            });
+            it('when the initial request to load the subflow fails, the onError behavior is triggered', async () => {
+                const { initialStep, mockHttpClient } = getProps(subflow);
+                const httpClient = mockHttpClient.mockResolvedValueOnce(respondWith({}, { status: 400 }));
+                const onEvent = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { flowId: "flow-id-local", initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                onEvent.mockClear();
+                await user.click(screen.getByText('Open subflow'));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenCalledWith('/error-in-subflow', expect.anything());
+                });
+                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Initiated', expect.objectContaining({
+                    integrationId: 'flow-id-local',
+                    referrerId: 'flow-a',
+                }));
+                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Failed', expect.objectContaining({
+                    integrationId: 'flow-id-local',
+                    referrerId: 'flow-a',
+                }));
+            });
+            it('when the initial request to load the subflow is a successful exit response', async () => {
+                const { initialStep, mockHttpClient } = getProps(subflow);
+                const httpClient = mockHttpClient.mockResolvedValueOnce(respondWith({}, { status: 200, headers: [['X-DF-Response-Type', 'exit']] }));
+                const onEvent = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { flowId: "flow-id-local", initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                onEvent.mockClear();
+                await user.click(screen.getByText('Open subflow'));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenCalledWith('/subflow-completion', expect.anything());
+                });
+                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Initiated', expect.objectContaining({
+                    integrationId: 'flow-id-local',
+                    referrerId: 'flow-a',
+                }));
+                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Succeeded', expect.objectContaining({
+                    integrationId: 'flow-id-local',
+                    referrerId: 'flow-a',
+                }));
+            });
+        });
+        describe('given the subflow is push presented', () => {
+            const subflow = pushPresentedSubflow;
+            it('displays the subflow with the correct events', async () => {
+                const onEvent = vi.fn();
+                const { initialStep, mockHttpClient } = getProps(subflow);
+                const httpClient = mockHttpClient.mockResolvedValueOnce(respondWith({
+                    id: 'subflow-step',
+                    title: 'Subflow Step',
+                    schemas: [],
+                    layout: [],
+                }));
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                await user.click(screen.getByText('Open subflow'));
+                expect(screen.getByText('Subflow Step')).toBeInTheDocument();
+                // parent content is gone
+                expect(screen.queryByText('Open subflow')).not.toBeInTheDocument();
+                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Initiated', expect.objectContaining({
+                    integrationId: 'flow-id',
+                    referrerId: 'flow-a',
+                }));
+            });
+            it('displays the back button which cancels the subflow', async () => {
+                const onEvent = vi.fn();
+                const { initialStep, mockHttpClient } = getProps(subflow);
+                const httpClient = mockHttpClient.mockResolvedValueOnce(respondWith({
+                    id: 'subflow-step',
+                    title: 'Subflow Step',
+                    schemas: [],
+                    layout: [],
+                }));
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                await user.click(screen.getByText('Open subflow'));
+                expect(screen.getByText('Subflow Step')).toBeInTheDocument();
+                await user.click(screen.getByRole('button', { name: /back/i }));
+                expect(screen.queryByText('Subflow Step')).not.toBeInTheDocument();
+            });
+        });
+        describe('when a subflow completes', () => {
+            describe('the onCompletion behavior is an action', () => {
+                const subflow = {
+                    type: 'subflow',
+                    referrerId: 'flow-a',
+                    launchConfig: {
+                        type: 'dynamic',
+                        request: {
+                            url: '/subflow-url',
+                            method: 'GET',
+                        },
+                        presentation: {
+                            type: 'push',
+                        },
+                    },
+                    onCompletion: {
+                        type: 'action',
+                        action: {
+                            url: '/subflow-completion',
+                            data: {
+                                parentData: 'asdf',
+                                duplicatedData: 'abc',
+                            },
+                        },
+                    },
+                };
+                it('removes the subflow and the action is triggered merging the parent content with the subflow result', async () => {
+                    const onEvent = vi.fn();
+                    const { initialStep, mockHttpClient } = getProps(subflow);
+                    const httpClient = mockHttpClient
+                        .mockResolvedValueOnce(respondWith({
+                        id: 'subflow-step',
+                        title: 'Subflow Step',
+                        schemas: [],
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'Complete subflow',
+                                behavior: {
+                                    type: 'action',
+                                    action: {
+                                        exit: true,
+                                        result: {
+                                            subflowData: 'asdf',
+                                            duplicatedData: 'def',
+                                        },
+                                    },
+                                },
+                            },
+                        ],
+                    }))
+                        .mockResolvedValueOnce(respondWith({
+                        id: 'step-2',
+                        title: 'Step 2',
+                        schemas: [],
+                        layout: [],
+                    }));
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { features: { nativeBack: true }, initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                    await user.click(screen.getByText('Open subflow'));
+                    expect(screen.getByText('Subflow Step')).toBeInTheDocument();
+                    await user.click(screen.getByRole('button', { name: 'Complete subflow' }));
+                    expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Succeeded', expect.objectContaining({
+                        referrerId: 'flow-a',
+                        integrationId: 'flow-id',
+                    }));
+                    expect(httpClient).toHaveBeenCalledWith('/subflow-completion', expect.objectContaining({
+                        body: JSON.stringify({
+                            parentData: 'asdf',
+                            duplicatedData: 'def',
+                            subflowData: 'asdf',
+                        }),
+                    }));
+                    expect(screen.queryByText('Subflow Step')).not.toBeInTheDocument();
+                });
+                it('shows the loader on the final step of the subflow, while the onCompletion behavior is running', async () => {
+                    const onEvent = vi.fn();
+                    const { initialStep, mockHttpClient } = getProps(subflow);
+                    const httpClient = mockHttpClient
+                        .mockResolvedValueOnce(respondWith({
+                        id: 'subflow-step',
+                        title: 'Subflow Step',
+                        schemas: [],
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'Complete subflow',
+                                behavior: {
+                                    type: 'action',
+                                    action: {
+                                        exit: true,
+                                        result: {
+                                            subflowData: 'asdf',
+                                            duplicatedData: 'def',
+                                        },
+                                    },
+                                },
+                            },
+                        ],
+                    }))
+                        .mockImplementationOnce(async () => {
+                        return respondWithDelay({ id: 'second-step', title: 'Next parent step', layout: [], schemas: [] }, 1000);
+                    });
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                    await user.click(screen.getByText('Open subflow'));
+                    await waitFor(() => {
+                        expect(screen.getByText('Subflow Step')).toBeInTheDocument();
+                    });
+                    await user.click(screen.getByRole('button', { name: 'Complete subflow' }));
+                    // the button label is replaced with 'loading' when it's loading...
+                    expect(screen.getByRole('button', { name: 'loading' })).toBeDisabled();
+                    expect(screen.getByText('Subflow Step')).toBeInTheDocument();
+                    await waitFor(() => {
+                        expect(screen.getByText('Next parent step')).toBeInTheDocument();
+                    });
+                    expect(screen.queryByText('Subflow Step')).not.toBeInTheDocument();
+                });
+            });
+            describe('when the behavior is a refresh', () => {
+                const subflow = {
+                    type: 'subflow',
+                    referrerId: 'flow-a',
+                    launchConfig: {
+                        type: 'dynamic',
+                        request: {
+                            url: '/subflow-url',
+                            method: 'GET',
+                        },
+                        presentation: {
+                            type: 'push',
+                        },
+                    },
+                    onCompletion: {
+                        type: 'refresh',
+                    },
+                };
+                it('removes the subflow and does not merge the result into the request', async () => {
+                    const onEvent = vi.fn();
+                    const { initialStep, mockHttpClient } = getProps(subflow);
+                    const httpClient = mockHttpClient
+                        .mockResolvedValueOnce(respondWith({
+                        id: 'subflow-step',
+                        title: 'Subflow Step',
+                        schemas: [],
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'Complete subflow',
+                                behavior: {
+                                    type: 'action',
+                                    action: {
+                                        exit: true,
+                                        result: {
+                                            subflowData: 'asdf',
+                                            duplicatedData: 'def',
+                                        },
+                                    },
+                                },
+                            },
+                        ],
+                    }))
+                        .mockResolvedValueOnce(respondWith({
+                        id: 'step-2',
+                        title: 'Step 2',
+                        schemas: [],
+                        layout: [],
+                    }));
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { features: { nativeBack: true }, initialStep: Object.assign(Object.assign({}, initialStep), { refreshUrl: '/refresh' }), httpClient: httpClient, onEvent: onEvent })));
+                    await user.click(screen.getByText('Open subflow'));
+                    expect(screen.getByText('Subflow Step')).toBeInTheDocument();
+                    await user.click(screen.getByRole('button', { name: 'Complete subflow' }));
+                    expect(httpClient).toHaveBeenCalledWith('/refresh', expect.objectContaining({
+                        body: 'null',
+                    }));
+                });
+                it('immediately closes the subflow, and shows the loader on the parent', async () => {
+                    const onEvent = vi.fn();
+                    const { initialStep, mockHttpClient } = getProps(subflow);
+                    const httpClient = mockHttpClient
+                        .mockResolvedValueOnce(respondWith({
+                        id: 'subflow-step',
+                        title: 'Subflow Step',
+                        schemas: [],
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'Complete subflow',
+                                behavior: {
+                                    type: 'refresh',
+                                },
+                            },
+                        ],
+                    }))
+                        .mockImplementationOnce(async () => {
+                        return respondWithDelay({ id: 'second-step', title: 'Next parent step', layout: [], schemas: [] }, 1000);
+                    });
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                    await user.click(screen.getByText('Open subflow'));
+                    expect(screen.getByText('Subflow Step')).toBeInTheDocument();
+                    await user.click(screen.getByRole('button', { name: 'Complete subflow' }));
+                    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+                    await waitFor(() => {
+                        expect(screen.getByText('Next parent step')).toBeInTheDocument();
+                    });
+                    expect(screen.queryByText('Subflow Step')).not.toBeInTheDocument();
+                });
+            });
+        });
+        describe('when a subflow fails', () => {
+            describe('and the onError behavior is an action', () => {
+                const subflow = {
+                    type: 'subflow',
+                    referrerId: 'flow-a',
+                    launchConfig: {
+                        type: 'dynamic',
+                        request: {
+                            url: '/subflow-url',
+                            method: 'GET',
+                        },
+                        presentation: {
+                            type: 'push',
+                        },
+                    },
+                    onError: {
+                        type: 'action',
+                        action: {
+                            url: '/subflow-error',
+                        },
+                    },
+                };
+                it('removes the subflow and triggers the behavior', async () => {
+                    const onEvent = vi.fn();
+                    const { initialStep, mockHttpClient } = getProps(subflow);
+                    const httpClient = mockHttpClient
+                        .mockResolvedValueOnce(respondWith({
+                        id: 'subflow-step',
+                        title: 'Subflow Step',
+                        schemas: [],
+                        refreshUrl: '/bad-refresh',
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'Trigger flow error',
+                                behavior: {
+                                    type: 'refresh',
+                                },
+                            },
+                        ],
+                    }))
+                        .mockResolvedValueOnce(respondWith({}, { status: 400 }))
+                        .mockResolvedValueOnce(respondWith({
+                        id: 'step-2',
+                        title: 'Step 2',
+                        schemas: [],
+                        layout: [],
+                    }));
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { features: { nativeBack: true }, initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                    await user.click(screen.getByText('Open subflow'));
+                    expect(screen.getByText('Subflow Step')).toBeInTheDocument();
+                    await user.click(screen.getByRole('button', { name: 'Trigger flow error' }));
+                    expect(httpClient).toHaveBeenCalledWith('/subflow-error', expect.objectContaining({
+                        body: undefined,
+                    }));
+                    expect(screen.queryByText('Subflow Step')).not.toBeInTheDocument();
+                });
+            });
+        });
+        describe('when that subflow launches another subflow', () => {
+            const subflow = {
+                type: 'subflow',
+                referrerId: 'flow-a',
+                resultKey: 'child-data',
+                launchConfig: {
+                    type: 'dynamic',
+                    request: {
+                        url: '/subflow-url',
+                        method: 'GET',
+                    },
+                    presentation: {
+                        type: 'modal',
+                    },
+                },
+                onCompletion: {
+                    type: 'action',
+                    action: {
+                        url: '/subflow-submit',
+                        data: { subflow1: 'abc' },
+                    },
+                },
+                onError: {
+                    type: 'action',
+                    action: {
+                        url: '/subflow-error',
+                    },
+                },
+            };
+            const subflow2 = {
+                type: 'subflow',
+                referrerId: 'flow-b',
+                launchConfig: {
+                    type: 'dynamic',
+                    request: {
+                        url: '/subflow-url',
+                        method: 'GET',
+                    },
+                    presentation: {
+                        type: 'modal',
+                    },
+                },
+                onCompletion: {
+                    type: 'action',
+                    action: {
+                        exit: true,
+                        result: { subflow2: 'def' },
+                    },
+                },
+                onError: {
+                    type: 'action',
+                    action: {
+                        url: '/subflow-error',
+                    },
+                },
+            };
+            it('uses correct referrerId and merges data according to the resultKey', async () => {
+                const onEvent = vi.fn();
+                const { initialStep, mockHttpClient } = getProps(subflow);
+                const httpClient = mockHttpClient
+                    .mockResolvedValueOnce(respondWith({
+                    id: 'subflow-step',
+                    title: 'Subflow Step',
+                    schemas: [],
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'Another subflow',
+                            behavior: {
+                                type: 'action',
+                                action: {
+                                    url: '/test',
+                                },
+                            },
+                        },
+                    ],
+                }))
+                    .mockResolvedValueOnce(respondWith(subflow2, { headers: [['X-DF-Response-Type', 'subflow']] }))
+                    .mockResolvedValueOnce(respondWith({
+                    id: 'subflow-step',
+                    title: 'Subflow Step 2',
+                    schemas: [],
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'Close subflow',
+                            behavior: {
+                                type: 'action',
+                                action: {
+                                    exit: true,
+                                },
+                            },
+                        },
+                    ],
+                }))
+                    .mockResolvedValueOnce(respondWith({ value1: 'abc' }, { headers: [['X-DF-Response-Type', 'exit']] }));
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                await user.click(screen.getByText('Open subflow'));
+                await waitFor(() => {
+                    expect(screen.getByText('Subflow Step')).toBeInTheDocument();
+                });
+                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Initiated', expect.objectContaining({
+                    referrerId: 'flow-a',
+                }));
+                await user.click(screen.getByRole('button', { name: 'Another subflow' }));
+                await waitFor(() => {
+                    expect(screen.getByText('Subflow Step 2')).toBeInTheDocument();
+                });
+                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Initiated', expect.objectContaining({
+                    referrerId: 'flow-b',
+                }));
+                await user.click(screen.getByRole('button', { name: 'Close subflow' }));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenLastCalledWith('/subflow-submit', expect.objectContaining({
+                        body: JSON.stringify({ subflow1: 'abc', 'child-data': { subflow2: 'def' } }),
+                    }));
+                });
+            });
+        });
+        describe('when the onCompletion is a subflow behavior', () => {
+            describe.each(['modal', 'push'])('given a %s presentation', (presentation) => {
+                const subflow = {
+                    type: 'subflow',
+                    referrerId: 'flow-a',
+                    launchConfig: {
+                        type: 'dynamic',
+                        request: {
+                            url: '/subflow-url',
+                            method: 'GET',
+                        },
+                        presentation: {
+                            type: presentation,
+                        },
+                    },
+                    onCompletion: {
+                        type: 'subflow',
+                        referrerId: 'flow-b',
+                        launchConfig: {
+                            type: 'dynamic',
+                            request: {
+                                url: '/second-subflow-url',
+                                method: 'GET',
+                            },
+                            presentation: {
+                                type: presentation,
+                            },
+                        },
+                        onCompletion: {
+                            type: 'action',
+                            action: {
+                                url: '/second-subflow-completion',
+                            },
+                        },
+                    },
+                    onError: {
+                        type: 'action',
+                        action: {
+                            url: '/subflow-error',
+                        },
+                    },
+                };
+                it('correctly launches the second subflow from onCompletion', async () => {
+                    const { initialStep, mockHttpClient } = getProps(subflow);
+                    const httpClient = mockHttpClient
+                        .mockResolvedValueOnce(respondWith({
+                        id: 'subflow-step',
+                        title: 'First Subflow Step',
+                        schemas: [],
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'Exit first subflow',
+                                behavior: {
+                                    type: 'action',
+                                    action: {
+                                        exit: true,
+                                    },
+                                },
+                            },
+                        ],
+                    }))
+                        .mockResolvedValueOnce(respondWith({
+                        id: 'second-subflow-step',
+                        title: 'Second Subflow Step',
+                        schemas: [],
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'Exit second subflow',
+                                behavior: {
+                                    type: 'action',
+                                    action: {
+                                        exit: true,
+                                    },
+                                },
+                            },
+                        ],
+                    }));
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: initialStep, httpClient: httpClient })));
+                    await user.click(screen.getByText('Open subflow'));
+                    await waitFor(() => {
+                        expect(screen.getByText('First Subflow Step')).toBeInTheDocument();
+                    });
+                    await user.click(screen.getByText('Exit first subflow'));
+                    await waitFor(() => {
+                        expect(screen.getByText('Second Subflow Step')).toBeInTheDocument();
+                    });
+                });
+            });
+        });
+        describe('when the onCompletion is an action that launches a second subflow', () => {
+            describe.each(['modal', 'push'])('given a %s presentation', (presentation) => {
+                const subflow = {
+                    type: 'subflow',
+                    referrerId: 'flow-a',
+                    launchConfig: {
+                        type: 'dynamic',
+                        request: {
+                            url: '/subflow-url',
+                            method: 'GET',
+                        },
+                        presentation: {
+                            type: presentation,
+                        },
+                    },
+                    onCompletion: {
+                        type: 'action',
+                        action: {
+                            url: '/subflow-submit',
+                            data: { subflow1: 'abc' },
+                        },
+                    },
+                    onError: {
+                        type: 'action',
+                        action: {
+                            url: '/subflow-error',
+                        },
+                    },
+                };
+                it('correctly continues to the second subflow', async () => {
+                    const { initialStep, mockHttpClient } = getProps(subflow);
+                    const httpClient = mockHttpClient
+                        .mockResolvedValueOnce(respondWith({
+                        id: 'subflow-step',
+                        title: 'Subflow Step',
+                        schemas: [],
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'Close subflow',
+                                behavior: {
+                                    type: 'action',
+                                    action: {
+                                        exit: true,
+                                    },
+                                },
+                            },
+                        ],
+                    }))
+                        .mockResolvedValueOnce(respondWith(subflow, { headers: [['X-DF-Response-Type', 'subflow']] }))
+                        .mockResolvedValueOnce(respondWith({
+                        id: 'subflow-step',
+                        title: 'Subflow Step 2',
+                        schemas: [],
+                        layout: [
+                            {
+                                type: 'button',
+                                title: 'Close subflow',
+                                behavior: {
+                                    type: 'action',
+                                    action: {
+                                        exit: true,
+                                    },
+                                },
+                            },
+                        ],
+                    }));
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: initialStep, httpClient: httpClient })));
+                    await user.click(screen.getByText('Open subflow'));
+                    await waitFor(() => {
+                        expect(screen.getByText('Subflow Step')).toBeInTheDocument();
+                    });
+                    await user.click(screen.getByText('Close subflow'));
+                    await waitFor(() => {
+                        expect(screen.getByText('Subflow Step 2')).toBeInTheDocument();
+                    });
+                });
+            });
+        });
+    });
+    describe.each([cases[0], cases[1]])('%s', (_, getProps) => {
+        describe('given the subflow is modally presented', () => {
+            const subflow = modallyPresentedSubflow;
+            it('any polling requests are paused when the subflow modal is open, and resumed when the subflow modal is closed', async () => {
+                const polling = {
+                    url: '/polling-url',
+                    maxAttempts: 100,
+                    interval: 200,
+                    onError: { behavior: { type: 'link', url: '/error' } },
+                };
+                const onEvent = vi.fn();
+                const { initialStep, mockHttpClient } = getProps(subflow);
+                const httpClient = mockHttpClient.mockImplementation(async (input) => {
+                    if (input === '/polling-url') {
+                        return respondWith('', { status: 200 });
+                    }
+                    if (input === '/start-subflow') {
+                        return respondWith(subflow, { headers: [['X-DF-Response-Type', 'subflow']] });
+                    }
+                    return respondWith({
+                        id: 'subflow-step',
+                        title: 'Subflow Step',
+                        schemas: [],
+                        layout: [],
+                    });
+                });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: Object.assign(Object.assign({}, initialStep), { polling }), httpClient: httpClient, onEvent: onEvent })));
+                await act(async () => vi.advanceTimersByTimeAsync(200));
+                expect(httpClient).toHaveBeenCalledWith('/polling-url', expect.anything());
+                httpClient.mockClear();
+                await user.click(screen.getByText('Open subflow'));
+                // await act(async () => vi.advanceTimersByTimeAsync(400));
+                expect(httpClient).not.toHaveBeenCalledWith('/polling-url', expect.anything());
+                httpClient.mockClear();
+                await user.click(screen.getByRole('button', { name: /close/i }));
+                await waitFor(() => {
+                    expect(screen.queryByText('Subflow Step')).not.toBeInTheDocument();
+                });
+                await act(async () => vi.advanceTimersByTimeAsync(200));
+                expect(httpClient).toHaveBeenCalledWith('/polling-url', expect.anything());
+            });
+        });
+    });
+});