@wise/dynamic-flow-client 5.25.2-experimental-a8a898e → 5.25.2

package/build/tests/Download.test.js

@@ -0,0 +1,201 @@
+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';
+import * as useSnackBarModule from '../test-utils/useSnackBar';
+const createSnackBarMock = vi.fn();
+const useSnackBarSpy = vi
+    .spyOn(useSnackBarModule, 'useSnackBar')
+    .mockReturnValue(createSnackBarMock);
+beforeAll(() => {
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => { });
+});
+afterAll(() => {
+    var _a, _b;
+    (_b = (_a = HTMLAnchorElement.prototype.click).mockRestore) === null || _b === void 0 ? void 0 : _b.call(_a);
+    useSnackBarSpy.mockRestore();
+});
+const step = {
+    id: 'download',
+    title: 'Download Behavior',
+    schemas: [],
+    layout: [
+        {
+            type: 'decision',
+            control: 'with-avatar',
+            options: [
+                {
+                    title: 'Download PDF',
+                    behavior: {
+                        type: 'download',
+                        request: {
+                            url: '/download/pdf',
+                            method: 'POST',
+                            body: { foo: 'bar' },
+                            headers: {
+                                'X-Custom': 'yes',
+                                Authorization: 'should-be-filtered',
+                                Cookie: 'should-be-filtered',
+                                Host: 'should-be-filtered',
+                            },
+                        },
+                    },
+                },
+                {
+                    title: 'Download TXT',
+                    behavior: {
+                        type: 'download',
+                        request: {
+                            url: '/download/text',
+                            method: 'POST',
+                            body: { hello: 'world' },
+                            headers: { 'X-Another': 'ok' },
+                        },
+                    },
+                },
+                {
+                    title: 'Download 404',
+                    behavior: {
+                        type: 'download',
+                        request: {
+                            url: '/download/404',
+                            method: 'POST',
+                        },
+                    },
+                },
+            ],
+        },
+    ],
+};
+const renderWithDownloadStep = ({ httpClient, onEvent, }) => {
+    renderWithProviders(_jsx(DynamicFlowWise, { flowId: "test-flow", initialStep: step, httpClient: httpClient, onCompletion: vi.fn(), onError: vi.fn(), onEvent: onEvent, onLog: vi.fn() }));
+};
+describe('DownloadBehavior', () => {
+    const httpClient = vi.fn(async (input) => {
+        switch (input) {
+            case '/download/pdf':
+                return new Response('PDF', {
+                    headers: {
+                        'Content-Disposition': 'attachment; filename="file.pdf"',
+                        'Content-Type': 'application/pdf',
+                    },
+                });
+            case '/download/text':
+                return new Response('Hello world', {
+                    headers: {
+                        'Content-Disposition': 'attachment; filename="hello.txt"',
+                        'Content-Type': 'text/plain',
+                    },
+                });
+            case '/download/404':
+            default:
+                return new Response('Not found', { status: 404 });
+        }
+    });
+    beforeEach(() => {
+        httpClient.mockClear();
+        createSnackBarMock.mockClear();
+    });
+    describe('for a PDF download', () => {
+        it('makes a fetch request to the correct URL with the correct options', async () => {
+            renderWithDownloadStep({ httpClient, onEvent: vi.fn() });
+            await userEvent.click(screen.getByRole('button', { name: /download pdf/i }));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalled();
+            });
+            const [input, init] = httpClient.mock.calls[0];
+            expect(input).toBe('/download/pdf');
+            expect(init === null || init === void 0 ? void 0 : init.method).toBe('POST');
+            expect(init === null || init === void 0 ? void 0 : init.body).toBe(JSON.stringify({ foo: 'bar' }));
+        });
+        it('shows a snackbar on successful PDF download', async () => {
+            renderWithDownloadStep({ httpClient, onEvent: vi.fn() });
+            await userEvent.click(screen.getByRole('button', { name: /download pdf/i }));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalled();
+                expect(createSnackBarMock).toHaveBeenCalledWith({ text: 'Downloading...' });
+            });
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalled();
+                expect(createSnackBarMock).toHaveBeenCalledWith({ text: 'Download successful' });
+            });
+        });
+        it('sends custom headers as specified in the request', async () => {
+            renderWithDownloadStep({ httpClient, onEvent: vi.fn() });
+            await userEvent.click(screen.getByRole('button', { name: /download pdf/i }));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalled();
+            });
+            const [, init] = httpClient.mock.calls[0];
+            const sentHeaders = (init === null || init === void 0 ? void 0 : init.headers) instanceof Headers
+                ? Object.fromEntries(init.headers.entries())
+                : init === null || init === void 0 ? void 0 : init.headers;
+            expect(sentHeaders['x-custom']).toBe('yes');
+        });
+        it('filters out forbidden headers (authorization, cookie, host)', async () => {
+            renderWithDownloadStep({ httpClient, onEvent: vi.fn() });
+            await userEvent.click(screen.getByRole('button', { name: /download pdf/i }));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalled();
+            });
+            const [, init] = httpClient.mock.calls[0];
+            const sentHeaders = (init === null || init === void 0 ? void 0 : init.headers) instanceof Headers
+                ? Object.fromEntries(init.headers.entries())
+                : init === null || init === void 0 ? void 0 : init.headers;
+            ['authorization', 'cookie', 'host'].forEach((h) => {
+                expect(Object.keys(sentHeaders)).not.toContain(h);
+            });
+        });
+    });
+    describe('for a TXT download', () => {
+        it('makes a fetch request to the correct URL with the correct options', async () => {
+            renderWithDownloadStep({ httpClient, onEvent: vi.fn() });
+            await userEvent.click(screen.getByRole('button', { name: /download txt/i }));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalled();
+            });
+            const [input, init] = httpClient.mock.calls[0];
+            expect(input).toBe('/download/text');
+            expect(init === null || init === void 0 ? void 0 : init.method).toBe('POST');
+            expect(init === null || init === void 0 ? void 0 : init.body).toBe(JSON.stringify({ hello: 'world' }));
+        });
+        it('shows a snackbar on successful TXT download', async () => {
+            renderWithDownloadStep({ httpClient, onEvent: vi.fn() });
+            await userEvent.click(screen.getByRole('button', { name: /download txt/i }));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalled();
+                expect(createSnackBarMock).toHaveBeenCalledWith({ text: 'Downloading...' });
+            });
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalled();
+                expect(createSnackBarMock).toHaveBeenCalledWith({ text: 'Download successful' });
+            });
+        });
+    });
+    describe('for a 404 download', () => {
+        it('makes a fetch request to the correct URL with the correct options', async () => {
+            renderWithDownloadStep({ httpClient, onEvent: vi.fn() });
+            await userEvent.click(screen.getByRole('button', { name: /download 404/i }));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalled();
+            });
+            const [input, init] = httpClient.mock.calls[0];
+            expect(input).toBe('/download/404');
+            expect(init === null || init === void 0 ? void 0 : init.method).toBe('POST');
+        });
+        it('shows a snackbar on download error', async () => {
+            renderWithDownloadStep({ httpClient, onEvent: vi.fn() });
+            await userEvent.click(screen.getByRole('button', { name: /download 404/i }));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalled();
+                expect(createSnackBarMock).toHaveBeenCalledWith({ text: 'Downloading...' });
+            });
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalled();
+                expect(createSnackBarMock).toHaveBeenCalledWith({ text: 'Download failed' });
+            });
+        });
+    });
+});

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();
+            });
+        });
+    });
+});