@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/Prefetching.test.js

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

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

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