@wise/dynamic-flow-client 5.12.0 → 5.12.1

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/SchemaReferences.test.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen } 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('Schema References', () => {
+    const getDefaultProps = () => ({
+        flowId: 'flow-id',
+        httpClient: vi.fn(),
+        onCompletion: vi.fn(),
+        onError: vi.fn(),
+        onEvent: vi.fn(),
+        onLog: vi.fn(),
+    });
+    const getInitialStep = () => ({
+        id: 'step-id',
+        title: 'Step Title',
+        schemas: [
+            {
+                $id: '#root-schema-id',
+                title: 'Select an account',
+                oneOf: [
+                    {
+                        $id: '#root-schema-id',
+                        type: 'object',
+                        title: 'Object Schema Title',
+                        displayOrder: ['accountId'],
+                        properties: {
+                            accountId: {
+                                title: 'Current account',
+                                type: 'string',
+                            },
+                        },
+                    },
+                ],
+            },
+        ],
+        layout: [
+            {
+                type: 'form',
+                schemaId: '#root-schema-id',
+            },
+            {
+                type: 'button',
+                title: 'Submit',
+                behavior: { type: 'action', action: { url: '/submit' } },
+            },
+        ],
+    });
+    describe('Given a step with a root-level oneOf schema containing only one option', () => {
+        const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep: getInitialStep() });
+        it('should render without failing', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(props.onError).not.toHaveBeenCalled();
+            expect(screen.getByText('Step Title')).toBeInTheDocument();
+        });
+        it('should skip the oneOf schema and show the single-option schema directly', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.queryByText('Object Schema Title')).not.toBeInTheDocument();
+            expect(screen.getByText('Current account')).toBeInTheDocument();
+        });
+        it('should trigger an analytics event for auto-selecting the single option', async () => {
+            const onEvent = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { onAnalytics: onEvent })));
+            expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - OneOf Option Selected - Auto-select single-option', expect.objectContaining({
+                integrationId: 'flow-id',
+                flowId: 'flow-id',
+                stepId: 'step-id',
+            }));
+        });
+        describe('when entering a value and attempting to submit', () => {
+            it('should submit the form successfully', async () => {
+                const mockHttpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { httpClient: mockHttpClient })));
+                const input = screen.getByLabelText('Current account');
+                await user.type(input, 'test-account');
+                const submitButton = screen.getByRole('button', { name: 'Submit' });
+                await user.click(submitButton);
+                expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
+                    method: 'POST',
+                    body: JSON.stringify({ accountId: 'test-account' }),
+                }));
+            });
+        });
+    });
+});

package/build/tests/ScrollToBottom.test.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+/*
+This test mocks the IntersectionObserver API, because,
+unfortunately, jsdom doesn't implement real layout, scrolling, or visibility.
+
+- IntersectionObserver doesn't exist (hence why we mock it)
+- scrollIntoView() does nothing — it's a no-op
+- getBoundingClientRect() always returns all zeros
+- There is no actual viewport or rendering engine
+*/
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+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 mockIntersectionObserver = (isIntersecting) => {
+    vi.stubGlobal('IntersectionObserver', class {
+        get root() {
+            return null;
+        }
+        get rootMargin() {
+            return '';
+        }
+        get thresholds() {
+            return [];
+        }
+        constructor(callback) {
+            this.observe = vi.fn().mockImplementation((el) => {
+                this.callback([{ isIntersecting, target: el }], this);
+            });
+            this.unobserve = vi.fn();
+            this.disconnect = vi.fn();
+            this.takeRecords = vi.fn().mockReturnValue([]);
+            this.callback = callback;
+        }
+    });
+};
+describe('Scroll to bottom', () => {
+    afterEach(() => {
+        vi.unstubAllGlobals();
+    });
+    const stepWithoutFooter = makeStep({
+        layout: [{ type: 'markdown', content: 'Some very long terms and conditions content.' }],
+        tags: ['scroll-to-bottom'],
+    });
+    const stepWithFooter = makeStep({
+        layout: [{ type: 'markdown', content: 'Some very long terms and conditions content.' }],
+        footer: [
+            {
+                type: 'button',
+                title: 'Accept',
+                behavior: { type: 'action', action: { url: '/accept' } },
+            },
+        ],
+        tags: ['scroll-to-bottom'],
+    });
+    describe('given a step with a long markdown content without a footer', () => {
+        it('shows a scroll to bottom button if the end of the step is not visible', async () => {
+            mockIntersectionObserver(false);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: stepWithoutFooter, httpClient: vi.fn() }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByRole('button', { name: 'Scroll to bottom' })).toBeInTheDocument();
+            });
+        });
+        it('scrolls to the bottom of the step when the scroll to bottom button is clicked', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            mockIntersectionObserver(false);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: stepWithoutFooter, httpClient: vi.fn() }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByRole('button', { name: 'Scroll to bottom' })).toBeInTheDocument();
+            });
+            await user.click(screen.getByRole('button', { name: 'Scroll to bottom' }));
+            expect(scrollIntoViewMock).toHaveBeenCalled();
+        });
+        it('does not show a scroll to bottom button if the end of the step is visible', async () => {
+            mockIntersectionObserver(true);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: stepWithoutFooter, httpClient: vi.fn() }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.queryByRole('button', { name: 'Scroll to bottom' })).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe('given a step with a long markdown content and a footer', () => {
+        it('shows a scroll to bottom button in the footer, along with the footer content, if the end of the step is not visible', async () => {
+            mockIntersectionObserver(false);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: stepWithFooter, httpClient: vi.fn() }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByRole('button', { name: 'Scroll to bottom' })).toBeInTheDocument();
+            });
+            expect(screen.getByRole('button', { name: 'Accept' })).toBeInTheDocument();
+        });
+        it('scrolls to the bottom of the step when the scroll to bottom button is clicked', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            mockIntersectionObserver(false);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: stepWithFooter, httpClient: vi.fn() }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByRole('button', { name: 'Scroll to bottom' })).toBeInTheDocument();
+            });
+            await user.click(screen.getByRole('button', { name: 'Scroll to bottom' }));
+            expect(scrollIntoViewMock).toHaveBeenCalled();
+        });
+        it('does not show a scroll to bottom button in the footer, if the end of the step is visible', async () => {
+            mockIntersectionObserver(true);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: stepWithFooter, httpClient: vi.fn() }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.queryByRole('button', { name: 'Scroll to bottom' })).not.toBeInTheDocument();
+            });
+            expect(screen.getByRole('button', { name: 'Accept' })).toBeInTheDocument();
+        });
+    });
+});