@wise/dynamic-flow-client 5.30.0-experimental-18a8b47 → 5.30.0

package/build/tests/UpdatableLayout.test.js

@@ -0,0 +1,343 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { renderWithProviders, respondWith, respondWithDelay } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const getDefaultProps = () => ({
+    flowId: 'flow-id',
+    httpClient: vi.fn(),
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+const getUpdatableLayout = (overrides = {}) => (Object.assign({ type: 'updatable', baseRequest: {
+        url: '/update-content',
+        method: 'POST',
+        body: { source: 'updatable-layout' },
+    }, trigger: {
+        type: 'on-event',
+        eventName: 'update-content',
+    }, initialState: {
+        components: [{ type: 'paragraph', text: 'Initial content' }],
+    } }, overrides));
+const getInitialStep = (updatableLayout = getUpdatableLayout(), dispatchedEventName = 'update-content') => ({
+    id: 'step-id',
+    title: 'Step with updatable content',
+    model: { name: 'Ada' },
+    schemas: [
+        {
+            $id: '#details',
+            type: 'object',
+            displayOrder: ['name'],
+            properties: {
+                name: { type: 'string', title: 'Name' },
+            },
+        },
+    ],
+    layout: [
+        { type: 'form', schemaId: '#details' },
+        updatableLayout,
+        {
+            type: 'button',
+            title: 'Update content',
+            behavior: { type: 'dispatch-event', eventName: dispatchedEventName },
+        },
+    ],
+});
+const rejectOnAbort = async ({ signal }) => new Promise((resolve, reject) => {
+    signal === null || signal === void 0 ? void 0 : signal.addEventListener('abort', () => {
+        reject(new DOMException('Aborted', 'AbortError'));
+    });
+});
+describe('UpdatableLayout', () => {
+    it('renders its initial state', () => {
+        const props = getDefaultProps();
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: getInitialStep() })));
+        expect(screen.getByText('Initial content')).toBeInTheDocument();
+        expect(props.httpClient).not.toHaveBeenCalled();
+    });
+    it('replaces its content with the response when its event is dispatched', async () => {
+        const httpClient = vi.fn().mockResolvedValue(respondWith({
+            components: [{ type: 'paragraph', text: 'Updated content' }],
+        }));
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: getInitialStep() })));
+        await user.click(screen.getByRole('button', { name: 'Update content' }));
+        await waitFor(() => {
+            expect(screen.getByText('Updated content')).toBeInTheDocument();
+        });
+        expect(screen.queryByText('Initial content')).not.toBeInTheDocument();
+        expect(httpClient).toHaveBeenCalledWith('/update-content', expect.objectContaining({
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ source: 'updatable-layout', name: 'Ada' }),
+        }));
+    });
+    describe('when a fallback layout is provided', () => {
+        it('renders the fallback layout when an update fails (server error)', async () => {
+            const httpClient = vi.fn().mockResolvedValueOnce(respondWith({}, { status: 400 }));
+            const updatableLayout = getUpdatableLayout({
+                onError: {
+                    fallbackLayout: [{ type: 'paragraph', text: 'Unable to update content' }],
+                },
+            });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: getInitialStep(updatableLayout) })));
+            await user.click(screen.getByRole('button', { name: 'Update content' }));
+            await waitFor(() => {
+                expect(screen.getByText('Unable to update content')).toBeInTheDocument();
+            });
+            expect(screen.queryByText('Initial content')).not.toBeInTheDocument();
+        });
+        it('renders the fallback layout when an update fails (network error)', async () => {
+            const httpClient = vi.fn().mockRejectedValue(new Error('Request failed'));
+            const updatableLayout = getUpdatableLayout({
+                onError: {
+                    fallbackLayout: [{ type: 'paragraph', text: 'Unable to update content' }],
+                },
+            });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: getInitialStep(updatableLayout) })));
+            await user.click(screen.getByRole('button', { name: 'Update content' }));
+            await waitFor(() => {
+                expect(screen.getByText('Unable to update content')).toBeInTheDocument();
+            });
+            expect(screen.queryByText('Initial content')).not.toBeInTheDocument();
+        });
+        it('uses its fallback layout when a successful response is invalid', async () => {
+            const httpClient = vi.fn().mockResolvedValue(respondWith({
+                components: [{ type: 'unknown-layout' }],
+            }));
+            const updatableLayout = getUpdatableLayout({
+                onError: {
+                    fallbackLayout: [{ type: 'paragraph', text: 'Invalid response fallback' }],
+                },
+            });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: getInitialStep(updatableLayout) })));
+            await user.click(screen.getByRole('button', { name: 'Update content' }));
+            await waitFor(() => {
+                expect(screen.getByText('Invalid response fallback')).toBeInTheDocument();
+            });
+            expect(screen.queryByText('Initial content')).not.toBeInTheDocument();
+        });
+    });
+    it('ignores events with a different name', async () => {
+        const props = getDefaultProps();
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: getInitialStep(getUpdatableLayout(), 'unrelated-event') })));
+        await user.click(screen.getByRole('button', { name: 'Update content' }));
+        expect(props.httpClient).not.toHaveBeenCalled();
+        expect(screen.getByText('Initial content')).toBeInTheDocument();
+    });
+    describe('when no fallback layout is provided', () => {
+        it('preserves its content when an update fails (network error)', async () => {
+            const httpClient = vi.fn().mockRejectedValue(new Error('Request failed'));
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: getInitialStep() })));
+            await user.click(screen.getByRole('button', { name: 'Update content' }));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledOnce();
+            });
+            expect(screen.getByText('Initial content')).toBeInTheDocument();
+        });
+        it('preserves its content when an update fails (server error)', async () => {
+            const httpClient = vi.fn().mockResolvedValueOnce(respondWith({}, { status: 400 }));
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: getInitialStep() })));
+            await user.click(screen.getByRole('button', { name: 'Update content' }));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledOnce();
+            });
+            expect(screen.getByText('Initial content')).toBeInTheDocument();
+        });
+        it('preserves its content when a successful response is invalid', async () => {
+            const httpClient = vi.fn().mockResolvedValue(respondWith({
+                components: [{ type: 'unknown-layout' }],
+            }));
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: getInitialStep() })));
+            await user.click(screen.getByRole('button', { name: 'Update content' }));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledOnce();
+            });
+            expect(screen.getByText('Initial content')).toBeInTheDocument();
+        });
+    });
+    it('preserves its content when the response omits components', async () => {
+        const httpClient = vi.fn().mockResolvedValue(respondWith({}));
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: getInitialStep() })));
+        await user.click(screen.getByRole('button', { name: 'Update content' }));
+        await waitFor(() => {
+            expect(httpClient).toHaveBeenCalledOnce();
+        });
+        expect(screen.getByText('Initial content')).toBeInTheDocument();
+    });
+    it('clears its content when the response contains an empty components array', async () => {
+        const httpClient = vi.fn().mockResolvedValue(respondWith({ components: [] }));
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: getInitialStep() })));
+        await user.click(screen.getByRole('button', { name: 'Update content' }));
+        await waitFor(() => {
+            expect(screen.queryByText('Initial content')).not.toBeInTheDocument();
+        });
+    });
+    it('recursively merges the base request body with the current step value', async () => {
+        const httpClient = vi.fn().mockResolvedValue(respondWith({ components: [] }));
+        const updatableLayout = getUpdatableLayout({
+            baseRequest: {
+                url: '/update-content',
+                method: 'POST',
+                body: {
+                    requestId: 'request-id',
+                    profile: { name: 'Base name', source: 'base-request' },
+                },
+            },
+        });
+        const initialStep = Object.assign(Object.assign({}, getInitialStep(updatableLayout)), { model: { profile: { name: 'Ada' } }, schemas: [
+                {
+                    $id: '#details',
+                    type: 'object',
+                    displayOrder: ['profile'],
+                    properties: {
+                        profile: {
+                            type: 'object',
+                            displayOrder: ['name'],
+                            properties: {
+                                name: { type: 'string', title: 'Name' },
+                            },
+                        },
+                    },
+                },
+            ] });
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: initialStep })));
+        await user.click(screen.getByRole('button', { name: 'Update content' }));
+        await waitFor(() => {
+            expect(httpClient).toHaveBeenCalledWith('/update-content', expect.objectContaining({
+                body: JSON.stringify({
+                    requestId: 'request-id',
+                    profile: { name: 'Ada', source: 'base-request' },
+                }),
+            }));
+        });
+    });
+    it('does not include a request body for methods that do not support one', async () => {
+        const httpClient = vi.fn().mockResolvedValue(respondWith({ components: [] }));
+        const updatableLayout = getUpdatableLayout({
+            baseRequest: {
+                url: '/update-content',
+                method: 'GET',
+                body: { ignored: true },
+            },
+        });
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: getInitialStep(updatableLayout) })));
+        await user.click(screen.getByRole('button', { name: 'Update content' }));
+        await waitFor(() => {
+            expect(httpClient).toHaveBeenCalledWith('/update-content', expect.objectContaining({ body: undefined, method: 'GET' }));
+        });
+    });
+    it('aborts the previous request and ignores its response when another event is dispatched', async () => {
+        const httpClient = vi
+            .fn()
+            .mockImplementationOnce(() => respondWithDelay({ components: [{ type: 'paragraph', text: 'Stale content' }] }, 1000))
+            .mockImplementationOnce(() => respondWithDelay({ components: [{ type: 'paragraph', text: 'Latest content' }] }, 100));
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: getInitialStep() })));
+        const updateButton = screen.getByRole('button', { name: 'Update content' });
+        await user.click(updateButton);
+        await user.click(updateButton);
+        await act(async () => vi.advanceTimersByTimeAsync(100));
+        expect(screen.getByText('Latest content')).toBeInTheDocument();
+        await act(async () => vi.advanceTimersByTimeAsync(900));
+        expect(screen.getByText('Latest content')).toBeInTheDocument();
+        expect(screen.queryByText('Stale content')).not.toBeInTheDocument();
+    });
+    it('passes the loading state to the renderer while an update is in progress', async () => {
+        const httpClient = vi
+            .fn()
+            .mockImplementation(() => respondWithDelay({ components: [{ type: 'paragraph', text: 'Updated content' }] }, 1000));
+        const updatableRenderer = {
+            canRenderType: 'updatable',
+            render: vi.fn(),
+        };
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: getInitialStep(), renderers: [updatableRenderer] })));
+        expect(updatableRenderer.render).toHaveBeenLastCalledWith(expect.objectContaining({ isLoading: false }));
+        await user.click(screen.getByRole('button', { name: 'Update content' }));
+        await waitFor(() => {
+            expect(updatableRenderer.render).toHaveBeenLastCalledWith(expect.objectContaining({ isLoading: true }));
+        });
+        await act(async () => vi.advanceTimersByTimeAsync(1000));
+        expect(updatableRenderer.render).toHaveBeenLastCalledWith(expect.objectContaining({ isLoading: false }));
+    });
+    describe('when an update is aborted by another event', () => {
+        it('keeps the loading state when the aborted request resolves before the latest one', async () => {
+            const httpClient = vi
+                .fn()
+                .mockImplementationOnce(() => respondWithDelay({ components: [{ type: 'paragraph', text: 'Stale content' }] }, 100))
+                .mockImplementationOnce(() => respondWithDelay({ components: [{ type: 'paragraph', text: 'Latest content' }] }, 1000));
+            const updatableRenderer = {
+                canRenderType: 'updatable',
+                render: vi.fn(),
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: getInitialStep(), renderers: [updatableRenderer] })));
+            const updateButton = screen.getByRole('button', { name: 'Update content' });
+            await user.click(updateButton);
+            await user.click(updateButton);
+            await act(async () => vi.advanceTimersByTimeAsync(100));
+            expect(updatableRenderer.render).toHaveBeenLastCalledWith(expect.objectContaining({ isLoading: true }));
+            await act(async () => vi.advanceTimersByTimeAsync(900));
+            expect(updatableRenderer.render).toHaveBeenLastCalledWith(expect.objectContaining({ isLoading: false }));
+        });
+        it('keeps the loading state when the aborted request rejects', async () => {
+            const httpClient = vi
+                .fn()
+                .mockImplementationOnce(async (url, init) => rejectOnAbort(init))
+                .mockImplementationOnce(() => respondWithDelay({ components: [{ type: 'paragraph', text: 'Latest content' }] }, 1000));
+            const updatableRenderer = {
+                canRenderType: 'updatable',
+                render: vi.fn(),
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: getInitialStep(), renderers: [updatableRenderer] })));
+            const updateButton = screen.getByRole('button', { name: 'Update content' });
+            await user.click(updateButton);
+            await user.click(updateButton);
+            await act(async () => vi.advanceTimersByTimeAsync(100));
+            expect(updatableRenderer.render).toHaveBeenLastCalledWith(expect.objectContaining({ isLoading: true }));
+            await act(async () => vi.advanceTimersByTimeAsync(900));
+            expect(updatableRenderer.render).toHaveBeenLastCalledWith(expect.objectContaining({ isLoading: false }));
+        });
+    });
+    it('updates multiple layouts that listen to the same event independently', async () => {
+        const httpClient = vi.fn(async (input) => {
+            const url = String(input);
+            return respondWith({
+                components: [
+                    {
+                        type: 'paragraph',
+                        text: url === '/first-update' ? 'First updated content' : 'Second updated content',
+                    },
+                ],
+            });
+        });
+        const firstLayout = getUpdatableLayout({
+            baseRequest: { url: '/first-update', method: 'POST' },
+            initialState: { components: [{ type: 'paragraph', text: 'First initial content' }] },
+        });
+        const secondLayout = getUpdatableLayout({
+            baseRequest: { url: '/second-update', method: 'POST' },
+            initialState: { components: [{ type: 'paragraph', text: 'Second initial content' }] },
+        });
+        const initialStep = Object.assign(Object.assign({}, getInitialStep()), { layout: [
+                { type: 'form', schemaId: '#details' },
+                firstLayout,
+                secondLayout,
+                {
+                    type: 'button',
+                    title: 'Update content',
+                    behavior: { type: 'dispatch-event', eventName: 'update-content' },
+                },
+            ] });
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { httpClient: httpClient, initialStep: initialStep })));
+        await user.click(screen.getByRole('button', { name: 'Update content' }));
+        await waitFor(() => {
+            expect(screen.getByText('First updated content')).toBeInTheDocument();
+            expect(screen.getByText('Second updated content')).toBeInTheDocument();
+        });
+        expect(httpClient).toHaveBeenCalledTimes(2);
+        expect(httpClient).toHaveBeenCalledWith('/first-update', expect.any(Object));
+        expect(httpClient).toHaveBeenCalledWith('/second-update', expect.any(Object));
+    });
+});

package/build/tests/Upsell.test.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { renderWithProviders, respondWith } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const getProps = (initialStep) => ({
+    flowId: 'flow-id',
+    initialStep,
+    httpClient: vi.fn(),
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+const getCloseButton = () => screen.queryByRole('button', { name: /close/i });
+describe('Upsell component', () => {
+    describe('when upsell does not contain onDismiss', () => {
+        const props = getProps({
+            id: 'step-1',
+            title: 'Step 1',
+            schemas: [],
+            layout: [
+                {
+                    type: 'upsell',
+                    text: 'Try our premium features!',
+                    callToAction: {
+                        title: 'Upgrade now',
+                        behavior: {
+                            type: 'link',
+                            url: '/upgrade',
+                        },
+                    },
+                },
+            ],
+        });
+        it('renders upsell without a close button', () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.getByText('Try our premium features!')).toBeInTheDocument();
+            expect(screen.getByText('Upgrade now')).toBeInTheDocument();
+            expect(getCloseButton()).not.toBeInTheDocument();
+        });
+        describe('when the call to action is clicked', () => {
+            it('triggers the specified behavior (or for a link, has the correct attributes)', () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                const link = screen.getByRole('link', { name: /upgrade now/i });
+                expect(link).toHaveAttribute('href', '/upgrade');
+                expect(link).toHaveAttribute('target', '_blank');
+            });
+        });
+    });
+    describe('when the upsell has onDismiss', () => {
+        const props = getProps({
+            id: 'step-1',
+            title: 'Step 1',
+            schemas: [],
+            layout: [
+                {
+                    type: 'upsell',
+                    text: 'Try our premium features!',
+                    callToAction: {
+                        title: 'Upgrade now',
+                        behavior: {
+                            type: 'link',
+                            url: '/upgrade',
+                        },
+                    },
+                    onDismiss: {
+                        url: '/dismiss-upsell',
+                        method: 'POST',
+                        body: { upsellId: 'upsell-123' },
+                    },
+                },
+                {
+                    type: 'button',
+                    title: 'Submit',
+                    control: 'primary',
+                    behavior: {
+                        type: 'action',
+                        action: { url: '/submit-step', method: 'POST' },
+                    },
+                },
+            ],
+        });
+        it('can be dismissed using the close button, and it becomes hidden', async () => {
+            const httpClient = vi.fn().mockResolvedValue({ status: 200 });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { httpClient: httpClient })));
+            await user.click(getCloseButton());
+            await waitFor(() => {
+                expect(screen.queryByText('Try our premium features!')).not.toBeInTheDocument();
+            });
+            expect(httpClient).toHaveBeenCalledWith('/dismiss-upsell', {
+                method: 'POST',
+                body: JSON.stringify({ upsellId: 'upsell-123' }),
+            });
+            expect(screen.queryByText('Try our premium features!')).not.toBeInTheDocument();
+        });
+        describe('when displaying errors after upsell dismissal', () => {
+            it('does not show the upsell again after it has been dismissed', async () => {
+                const httpClient = async (url) => {
+                    if (url === '/dismiss-upsell') {
+                        return respondWith(null, { status: 200 });
+                    }
+                    if (url === '/submit-step') {
+                        return respondWith({ error: 'There was an error' }, { status: 422 });
+                    }
+                    return respondWith(null, { status: 404 });
+                };
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { httpClient: httpClient })));
+                await user.click(getCloseButton());
+                await waitFor(() => {
+                    expect(screen.queryByText('Try our premium features!')).not.toBeInTheDocument();
+                });
+                await user.click(screen.getByRole('button', { name: /submit/i }));
+                await waitFor(() => {
+                    expect(screen.getByText('There was an error')).toBeInTheDocument();
+                });
+                // Ensure the upsell does not re-appear when displaying errors
+                expect(screen.queryByText('Try our premium features!')).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe('when the upsell has a link behavior', () => {
+        it('does not trigger twice (the renderer handles the href, so the onLink is not called)', async () => {
+            const onLink = vi.fn();
+            const props = getProps({
+                id: 'step-1',
+                title: 'Step 1',
+                schemas: [],
+                layout: [
+                    {
+                        type: 'upsell',
+                        text: 'Try our premium features!',
+                        callToAction: {
+                            title: 'Upgrade now',
+                            behavior: {
+                                type: 'link',
+                                url: '/upgrade',
+                            },
+                        },
+                    },
+                ],
+            });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { onLink: onLink })));
+            const link = screen.getByRole('link');
+            expect(link).toHaveAttribute('href', '/upgrade');
+            expect(link).toHaveAttribute('target', '_blank');
+            await user.click(link);
+            expect(onLink).not.toHaveBeenCalled();
+        });
+    });
+});