@wise/dynamic-flow-client 5.28.0 → 5.29.0-experimental-f7c2300

package/build/tests/UpdatableLayout.test.js

@@ -1,343 +0,0 @@
-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

@@ -1,154 +0,0 @@
-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();
-        });
-    });
-});