@wise/dynamic-flow-client 5.12.1 → 5.13.0-experimental-13d828c

package/build/tests/Prefetching.test.js

@@ -1,230 +0,0 @@
-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 { createFlowController } from '../controller/FlowController';
-import { FeatureFlags } from '../domain/mappers/utils/FeatureFlags';
-import { renderWithProviders } from '../test-utils';
-import DynamicFlowWise from '../test-utils/DynamicFlowWise';
-import { respondWith } from '../test-utils/fetch-utils';
-const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-describe('Prefetching actions in a step', () => {
-    const initialStep = () => ({
-        id: 'step',
-        title: 'Step Title',
-        schemas: [
-            {
-                $id: 'schema-1',
-                type: 'string',
-                title: 'A string schema',
-                default: 'a string value',
-            },
-        ],
-        layout: [
-            {
-                type: 'form',
-                schemaId: 'schema-1',
-            },
-            {
-                type: 'review',
-                callToAction: {
-                    title: 'Edit',
-                    behavior: { type: 'action', action: { url: '/edit', prefetch: true } },
-                },
-                fields: [
-                    {
-                        label: 'Field A',
-                        value: 'A value',
-                        callToAction: {
-                            title: 'Edit Field A',
-                            behavior: { type: 'action', action: { url: '/edit-field-a', prefetch: true } },
-                        },
-                    },
-                ],
-            },
-            {
-                type: 'button',
-                title: 'Button 1',
-                behavior: {
-                    type: 'action',
-                    action: { url: '/button-1', prefetch: true },
-                },
-            },
-            {
-                type: 'button',
-                title: 'Button 2',
-                behavior: {
-                    type: 'action',
-                    action: { url: '/button-2' },
-                },
-            },
-        ],
-    });
-    const secondStep = () => ({
-        id: 'second-step',
-        title: 'Second Step',
-        schemas: [],
-        layout: [],
-    });
-    it('prefetches actions marked for prefetching', async () => {
-        const mockHttpClient = vi.fn(async () => {
-            return respondWith(secondStep());
-        });
-        const eventCountByName = {};
-        const onEvent = vi.fn((eventName) => {
-            var _a;
-            eventCountByName[eventName] = ((_a = eventCountByName[eventName]) !== null && _a !== void 0 ? _a : 0) + 1;
-        });
-        const onError = vi.fn();
-        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "prefetching-flow", httpClient: mockHttpClient, initialStep: initialStep(), onEvent: onEvent, onCompletion: () => { }, onError: onError }));
-        expect(eventCountByName['Dynamic Flow - Step Shown']).toBe(1); // the initial step shown
-        expect(mockHttpClient).toHaveBeenCalledTimes(3); // three prefetches
-        await user.click(screen.getByRole('button', { name: 'Edit' })); // trigger prefetched action
-        expect(mockHttpClient).toHaveBeenCalledTimes(3); // no extra requests
-        expect(eventCountByName['Dynamic Flow - Step Shown']).toBe(2); // the second step shown
-        expect(onError).not.toHaveBeenCalled();
-    });
-    it('does not prefetch actions not marked for prefetching', async () => {
-        const mockHttpClient = vi.fn(async () => {
-            return respondWith(secondStep());
-        });
-        const eventCountByName = {};
-        const onEvent = vi.fn((eventName) => {
-            var _a;
-            eventCountByName[eventName] = ((_a = eventCountByName[eventName]) !== null && _a !== void 0 ? _a : 0) + 1;
-        });
-        const onError = vi.fn();
-        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "prefetching-flow", httpClient: mockHttpClient, initialStep: initialStep(), onEvent: onEvent, onCompletion: () => { }, onError: onError }));
-        expect(eventCountByName['Dynamic Flow - Step Shown']).toBe(1); // the initial step shown
-        expect(mockHttpClient).toHaveBeenCalledTimes(3); // three prefetches
-        await user.click(screen.getByRole('button', { name: 'Button 2' })); // trigger non-prefetched action
-        expect(mockHttpClient).toHaveBeenCalledTimes(4); // one extra request
-        expect(eventCountByName['Dynamic Flow - Step Shown']).toBe(2); // the second step shown
-        expect(onError).not.toHaveBeenCalled();
-    });
-    it('includes schema values and headers in prefetching requests', async () => {
-        const mockHttpClient = vi.fn(async () => {
-            return respondWith(secondStep());
-        });
-        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "prefetching-flow", httpClient: mockHttpClient, initialStep: initialStep(), onCompletion: () => { }, onError: () => { } }));
-        const expectedRequestInit = {
-            method: 'POST',
-            body: '"a string value"',
-            headers: { 'Content-Type': 'application/json' },
-        };
-        expect(mockHttpClient).toHaveBeenCalledWith('/edit', expectedRequestInit);
-        expect(mockHttpClient).toHaveBeenCalledWith('/edit-field-a', expectedRequestInit);
-        expect(mockHttpClient).toHaveBeenCalledWith('/button-1', expectedRequestInit);
-    });
-    it('does not use cached responses when their status code is not OK', async () => {
-        const step = {
-            id: 'initial-step',
-            title: 'Initial Step Title',
-            schemas: [],
-            layout: [
-                {
-                    type: 'button',
-                    title: 'Button 1',
-                    behavior: {
-                        type: 'action',
-                        action: { url: '/button-1', prefetch: true },
-                    },
-                },
-            ],
-        };
-        const mockHttpClient = vi
-            .fn()
-            .mockResolvedValueOnce(await respondWith(null, { status: 500 }))
-            .mockResolvedValueOnce(await respondWith(secondStep()));
-        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "prefetching-flow", httpClient: mockHttpClient, initialStep: step, onCompletion: () => { }, onError: () => { } }));
-        expect(mockHttpClient).toHaveBeenCalledTimes(1); // one prefetch attempt
-        await user.click(screen.getByRole('button', { name: 'Button 1' })); // trigger action from initial step
-        expect(mockHttpClient).toHaveBeenCalledTimes(2); // one extra request due to non-OK cached response
-    });
-    it('only performs one request for identical actions', () => {
-        const step = Object.assign(Object.assign({}, initialStep()), { layout: [
-                ...initialStep().layout,
-                {
-                    type: 'button',
-                    title: 'Button 1 again',
-                    behavior: {
-                        type: 'action',
-                        action: { url: '/button-1', prefetch: true },
-                    },
-                },
-            ] });
-        const mockHttpClient = vi.fn().mockImplementation(() => respondWith((Object.assign(Object.assign({}, initialStep()), { title: 'This is a new step' }))));
-        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "prefetching-flow", httpClient: mockHttpClient, initialStep: step, onCompletion: () => { }, onError: () => { } }));
-        expect(mockHttpClient).toHaveBeenCalledTimes(3);
-    });
-    describe('Prefetching scope is constrained to the step', () => {
-        it('does not use prefetched actions from previous steps', async () => {
-            const secondStepLocal = () => ({
-                id: 'step',
-                title: 'Second Step Title',
-                schemas: [
-                    {
-                        $id: 'schema-1',
-                        type: 'string',
-                        title: 'A string schema',
-                        default: 'a string value',
-                    },
-                ],
-                layout: [
-                    {
-                        type: 'form',
-                        schemaId: 'schema-1',
-                    },
-                    {
-                        type: 'button',
-                        title: 'Button 1',
-                        behavior: {
-                            type: 'action',
-                            action: { url: '/button-1' },
-                        },
-                    },
-                ],
-            });
-            const mockHttpClient = vi.fn(async () => {
-                return respondWith(secondStepLocal());
-            });
-            const eventCountByName = {};
-            const onEvent = vi.fn((eventName) => {
-                var _a;
-                eventCountByName[eventName] = ((_a = eventCountByName[eventName]) !== null && _a !== void 0 ? _a : 0) + 1;
-            });
-            const onError = vi.fn();
-            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "prefetching-flow", httpClient: mockHttpClient, initialStep: initialStep(), onEvent: onEvent, onCompletion: () => { }, onError: onError }));
-            expect(eventCountByName['Dynamic Flow - Step Shown']).toBe(1); // the initial step shown
-            expect(mockHttpClient).toHaveBeenCalledTimes(3); // three prefetches
-            await user.click(screen.getByRole('button', { name: 'Button 1' })); // trigger action from initial step
-            expect(mockHttpClient).toHaveBeenCalledTimes(3); // no extra requests
-            expect(eventCountByName['Dynamic Flow - Step Shown']).toBe(2); // the second step shown
-            await user.click(screen.getByRole('button', { name: 'Button 1' })); // trigger action from second step
-            expect(mockHttpClient).toHaveBeenCalledTimes(4); // one extra request -- no prefetching from previous step
-            expect(onError).not.toHaveBeenCalled(); // no errors
-        });
-    });
-    describe('Initialisation', () => {
-        it('does not prefetch before the DF controller is started', async () => {
-            const mockHttpClient = vi.fn();
-            const df = createFlowController({
-                flowId: 'prefetching-flow',
-                backConfig: { isNativeBackEnabled: true, isFlowCancellable: true },
-                features: new FeatureFlags({}),
-                initialStep: initialStep(),
-                httpClient: mockHttpClient,
-                scrollToTop: vi.fn(),
-                onCompletion: vi.fn(),
-                onError: vi.fn(),
-                onLink: vi.fn(),
-                getErrorMessageFunctions: vi.fn(),
-                onChange: vi.fn(),
-                onValueChange: vi.fn(),
-            });
-            expect(mockHttpClient).not.toHaveBeenCalled();
-            df.start();
-            expect(mockHttpClient).toHaveBeenCalledTimes(3); // prefetches after starting
-        });
-    });
-});

package/build/tests/RefreshAfter.test.js

@@ -1,63 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { act, waitFor } from '@testing-library/react';
-import { renderWithProviders } from '../test-utils';
-import DynamicFlowWise from '../test-utils/DynamicFlowWise';
-import { vi } from 'vitest';
-describe('given a step with a refreshAfter value', () => {
-    const getStep = (refreshAfter) => ({
-        id: 'step',
-        title: 'Step',
-        layout: [
-            {
-                type: 'paragraph',
-                text: refreshAfter
-                    ? `This step will refresh at ${refreshAfter}`
-                    : 'This step will not refresh',
-            },
-        ],
-        schemas: [],
-        refreshUrl: '/refresh',
-        refreshAfter,
-    });
-    describe('when refreshAfter is in the future', () => {
-        it('triggers a refresh when the time is reached', async () => {
-            const httpClient = vi.fn();
-            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: getStep(new Date(Date.now() + 3000).toISOString()), httpClient: httpClient, onCompletion: () => { }, onError: () => { } }));
-            await act(async () => {
-                vi.advanceTimersByTime(2900);
-            });
-            await waitFor(() => {
-                expect(httpClient).not.toHaveBeenCalled();
-            });
-            await act(async () => {
-                vi.advanceTimersByTime(100); // 2900ms + 100ms = 3000ms
-            });
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/refresh', expect.anything());
-            });
-        });
-    });
-    describe('when refreshAfter is in the past', () => {
-        it('triggers a refresh after one second, not immediately', async () => {
-            const httpClient = vi.fn();
-            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: getStep(new Date(Date.now() - 2000).toISOString()), httpClient: httpClient, onCompletion: () => { }, onError: () => { } }));
-            await act(async () => {
-                vi.advanceTimersByTime(900);
-            });
-            expect(httpClient).not.toHaveBeenCalled();
-            await act(async () => {
-                vi.advanceTimersByTime(100); // 900ms + 100ms = 1 second
-            });
-            expect(httpClient).toHaveBeenCalledWith('/refresh', expect.anything());
-        });
-    });
-    describe('when refreshAfter is invalid', () => {
-        it('fails the flow, triggering onError', async () => {
-            const onError = vi.fn();
-            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: getStep('banana'), httpClient: vi.fn(), onCompletion: () => { }, onError: onError }));
-            await waitFor(() => {
-                expect(onError).toHaveBeenCalledWith(new Error('Invalid refreshAfter value: banana'), undefined);
-            });
-        });
-    });
-});

package/build/tests/RefreshOnChange.ResponseHandling.test.js

@@ -1,205 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable testing-library/render-result-naming-convention */
-import { act, 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';
-import { abortableDelay } from '../test-utils/fetch-utils';
-const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-const getProps = () => ({
-    flowId: 'flow-id',
-    onCompletion: vi.fn(),
-    onError: vi.fn(),
-    onEvent: vi.fn(),
-    onLog: vi.fn(),
-});
-const initialStep = {
-    id: 'step-id',
-    title: 'Submission test',
-    schemas: [
-        {
-            $id: '#form',
-            type: 'object',
-            displayOrder: ['color'],
-            properties: {
-                color: {
-                    title: 'Color',
-                    control: 'radio',
-                    analyticsId: '#color-schema',
-                    oneOf: [
-                        { const: 'red', title: 'Red' },
-                        { const: 'blue', title: 'Blue' },
-                        { const: 'green', title: 'Green' },
-                    ],
-                    refreshStepOnChange: true,
-                },
-            },
-        },
-    ],
-    layout: [
-        {
-            type: 'form',
-            schemaId: '#form',
-        },
-        {
-            type: 'button',
-            title: 'Submit',
-            action: { id: 'action-id', url: '/submit', method: 'POST' },
-        },
-    ],
-    refreshUrl: '/refresh',
-};
-const renderAndRefresh = async (httpClient) => {
-    const props = Object.assign(Object.assign({}, getProps()), { initialStep, httpClient });
-    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-    await waitFor(() => {
-        expect(screen.getByText(initialStep.title)).toBeInTheDocument();
-    });
-    await user.click(screen.getByText('Red'));
-    return props;
-};
-describe('RefreshOnChange response handling', () => {
-    describe('When the fetch call throws', () => {
-        it('should trigger onError and the "Action Failed" and "Failed" events', async () => {
-            const httpClient = vi.fn().mockRejectedValue(new Error('Network error'));
-            const props = await renderAndRefresh(httpClient);
-            await waitFor(() => {
-                expect(props.onError).toHaveBeenCalledWith(expect.any(Error), undefined);
-            });
-            expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Refresh Failed', expect.objectContaining({
-                flowId: 'flow-id',
-                stepId: 'step-id',
-                stepCount: 0,
-                schema: '#color-schema',
-            }));
-            expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Failed', expect.objectContaining({
-                flowId: 'flow-id',
-                stepId: 'step-id',
-                stepCount: 0,
-            }));
-        });
-    });
-    describe('Status 2xx (response.ok)', () => {
-        describe('when the response is a valid step', () => {
-            it('should render the new step, and trigger the "Refresh Succeeded" event', async () => {
-                const httpClient = vi
-                    .fn()
-                    .mockResolvedValue(respondWith(Object.assign(Object.assign({}, initialStep), { title: 'Refreshed', model: { color: 'red' } })));
-                const props = await renderAndRefresh(httpClient);
-                await waitFor(() => {
-                    expect(screen.getByText('Refreshed')).toBeInTheDocument();
-                });
-                expect(screen.queryByText(props.initialStep.title)).not.toBeInTheDocument();
-                expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Refresh Succeeded', expect.objectContaining({
-                    flowId: 'flow-id',
-                    stepId: 'step-id',
-                    stepCount: 0,
-                    schema: '#color-schema',
-                }));
-            });
-        });
-        describe('when the response is an invalid step', () => {
-            it('should trigger onError and the "Action Failed" and "Failed" events', async () => {
-                const httpClient = vi.fn().mockResolvedValue(respondWith('not a step, just a string'));
-                const props = await renderAndRefresh(httpClient);
-                await waitFor(() => {
-                    expect(props.onError).toHaveBeenCalledWith(expect.any(Error), undefined);
-                });
-                expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Refresh Failed', expect.objectContaining({
-                    flowId: 'flow-id',
-                    stepId: 'step-id',
-                    stepCount: 0,
-                    schema: '#color-schema',
-                }));
-                expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Failed', expect.objectContaining({
-                    flowId: 'flow-id',
-                    stepId: 'step-id',
-                    stepCount: 0,
-                }));
-            });
-        });
-    });
-    describe('Status 304', () => {
-        it('should trigger the "Refresh Succeeded" event and not change the step', async () => {
-            const httpClient = vi.fn().mockResolvedValue(respondWith(null, { status: 304 }));
-            const props = await renderAndRefresh(httpClient);
-            await waitFor(() => {
-                expect(screen.getByText(initialStep.title)).toBeInTheDocument();
-            });
-            expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Refresh Succeeded', expect.objectContaining({
-                flowId: 'flow-id',
-                stepId: 'step-id',
-                stepCount: 0,
-                schema: '#color-schema',
-            }));
-        });
-    });
-    describe('Status 4xx or 5xx', () => {
-        describe('When the response body can be parsed as an ErrorResponseBody', () => {
-            const getHttpClient = () => vi.fn().mockResolvedValue(respondWith({
-                analytics: { shopping: 'list' },
-            }, { status: 422 }));
-            it('should trigger a "Refresh failed" and "Failed" events with analytics', async () => {
-                const props = await renderAndRefresh(getHttpClient());
-                expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Refresh Failed', expect.objectContaining({
-                    flowId: 'flow-id',
-                    stepId: 'step-id',
-                    schema: '#color-schema',
-                    shopping: 'list',
-                    statusCode: 422,
-                }));
-                expect(props.onEvent).toHaveBeenLastCalledWith('Dynamic Flow - Failed', expect.objectContaining({
-                    flowId: 'flow-id',
-                    stepId: 'step-id',
-                    shopping: 'list',
-                }));
-            });
-        });
-        describe('When the response body can NOT be parsed as an ErrorResponseBody', () => {
-            const getHttpClient = () => vi.fn().mockResolvedValue(respondWith('', { status: 422 }));
-            it('should trigger a "Refresh failed" and "Failed" events', async () => {
-                const props = await renderAndRefresh(getHttpClient());
-                expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Refresh Failed', expect.objectContaining({
-                    flowId: 'flow-id',
-                    stepId: 'step-id',
-                    schema: '#color-schema',
-                    statusCode: 422,
-                }));
-                expect(props.onEvent).toHaveBeenLastCalledWith('Dynamic Flow - Failed', expect.objectContaining({
-                    flowId: 'flow-id',
-                    stepId: 'step-id',
-                }));
-            });
-        });
-    });
-    describe('Aborting a refresh request', () => {
-        describe('When a second refresh request is made', () => {
-            it('should abort the first request and only use the response from the second request', async () => {
-                // The first request takes 100ms to respond
-                // The second request takes only 10ms to respond
-                const httpClient = vi
-                    .fn()
-                    .mockImplementationOnce(async (input, init) => {
-                    var _a;
-                    return abortableDelay(200, (_a = init === null || init === void 0 ? void 0 : init.signal) !== null && _a !== void 0 ? _a : null).then(async () => respondWith(Object.assign(Object.assign({}, initialStep), { title: 'Refreshed One', model: { color: 'red' } })));
-                })
-                    .mockImplementationOnce(async (input, init) => {
-                    var _a;
-                    return abortableDelay(100, (_a = init === null || init === void 0 ? void 0 : init.signal) !== null && _a !== void 0 ? _a : null).then(async () => respondWith(Object.assign(Object.assign({}, initialStep), { title: 'Refreshed Two', model: { color: 'blue' } })));
-                });
-                await renderAndRefresh(httpClient);
-                await user.click(screen.getByText('Blue'));
-                await waitFor(() => {
-                    expect(screen.getByText('Refreshed Two')).toBeInTheDocument();
-                });
-                // wait enough time for the first request to finish
-                // had it not been cancelled, it would have resolved after 100ms
-                await act(async () => vi.advanceTimersByTimeAsync(100));
-                // We expect the first request to be cancelled and not to have updated the UI
-                expect(screen.queryByText('Refreshed One')).not.toBeInTheDocument();
-                expect(screen.getByText('Refreshed Two')).toBeInTheDocument();
-            });
-        });
-    });
-});