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

package/build/tests/legacy/RefreshStepOnChange.test.js

@@ -0,0 +1,421 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { act, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { renderWithProviders } from '../../test-utils';
+import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
+import { vi } from 'vitest';
+import { abortableDelay } from '../../test-utils/fetch-utils';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const getFormStep = ({ schema, model }) => { var _a; return ({
+    type: 'form',
+    id: 'the-step-id',
+    analytics: { custom: 'property' },
+    title: 'Example',
+    schemas: [schema],
+    layout: [
+        { type: 'form', schemaId: (_a = schema.$id) !== null && _a !== void 0 ? _a : '' },
+        {
+            type: 'button',
+            action: { type: 'primary', url: '/submit', title: 'Submit', method: 'POST' },
+        },
+    ],
+    model: model || { accountNumber: '1234567890' },
+}); };
+const asyncJsonResponse = async (response, init = {}) => Promise.resolve(new Response(JSON.stringify(response), init));
+const makeProps = (overrides) => (Object.assign({ flowId: 'the-flow-id', httpClient: vi.fn(), onCompletion: vi.fn(), onError: vi.fn() }, overrides));
+beforeEach(() => {
+    vi.clearAllMocks();
+});
+describe('When the model for a schema with refresh-on-change changes', () => {
+    it('disables actions buttons while refreshing steps, and then re-enables them', async () => {
+        const mockHttpClient = vi.fn(async () => {
+            await abortableDelay(1000, null);
+            return asyncJsonResponse(getFormStep({
+                schema: {
+                    $id: '#example',
+                    type: 'object',
+                    displayOrder: ['favouriteColor'],
+                    properties: {
+                        favouriteColor: {
+                            title: 'Favourite color',
+                            oneOf: [
+                                { title: 'Red', const: 'red' },
+                                { title: 'Blue', const: 'blue' },
+                            ],
+                            control: 'radio',
+                            refreshStepOnChange: true,
+                            refreshUrl: '/example-color-refresh',
+                        },
+                    },
+                },
+            }));
+        });
+        // Modification:
+        const initialStep = getFormStep({
+            schema: {
+                $id: '#example',
+                type: 'object',
+                displayOrder: ['favouriteColor'],
+                properties: {
+                    favouriteColor: {
+                        title: 'Favourite color',
+                        oneOf: [
+                            { title: 'Red', const: 'red' },
+                            { title: 'Blue', const: 'blue' },
+                        ],
+                        control: 'radio',
+                        refreshStepOnChange: true,
+                        refreshUrl: '/example-color-refresh',
+                    },
+                },
+            },
+        });
+        // Original
+        // renderWithProviders(<DynamicFlowWise {...makeProps({ httpClient: mockHttpClient })} />);
+        // Modification
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, makeProps({ httpClient: mockHttpClient }), { initialStep: initialStep })));
+        const redOption = screen.getByLabelText('Red');
+        const submitButton = screen.getByRole('button', { name: 'Submit' });
+        await user.click(redOption);
+        expect(mockHttpClient).toHaveBeenCalledWith('/example-color-refresh', expect.any(Object));
+        await vi.advanceTimersByTimeAsync(500);
+        expect(submitButton).toBeDisabled();
+        await waitFor(() => {
+            expect(submitButton).toBeEnabled();
+        });
+    });
+    describe('and the refreshed step has an identical schema', () => {
+        it('the focused text input is kept in focus', async () => {
+            const initialStep = getFormStep({
+                schema: {
+                    $id: '#example',
+                    type: 'object',
+                    displayOrder: ['accountNumber'],
+                    properties: {
+                        accountNumber: {
+                            title: 'Account number',
+                            type: 'string',
+                            refreshStepOnChange: true,
+                            refreshUrl: '/refresh',
+                        },
+                    },
+                },
+            });
+            const httpClient = vi.fn(async () => asyncJsonResponse(initialStep));
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, makeProps({ httpClient }), { initialStep: initialStep })));
+            const inputBeforeRefresh = await screen.findByLabelText('Account number');
+            await user.click(inputBeforeRefresh);
+            expect(inputBeforeRefresh).toHaveFocus();
+            await user.type(inputBeforeRefresh, '12345');
+            await waitFor(() => {
+                const emailFieldAfterRefresh = screen.getByLabelText('Account number');
+                expect(emailFieldAfterRefresh).toHaveFocus();
+            });
+        });
+    });
+    describe('and the refreshed step has an identical schema but contains different model', () => {
+        const schema = {
+            $id: '#example',
+            type: 'object',
+            displayOrder: ['accountNumber'],
+            properties: {
+                accountNumber: {
+                    title: 'Account number',
+                    type: 'string',
+                    refreshStepOnChange: true,
+                    refreshUrl: '/example-account-refresh',
+                },
+            },
+        };
+        const initialStep = getFormStep({ schema, model: {} });
+        const httpClient = vi.fn(async (input) => {
+            switch (input) {
+                case '/example':
+                    return asyncJsonResponse(initialStep);
+                case '/example-account-refresh':
+                    return asyncJsonResponse(getFormStep({
+                        schema,
+                        model: {
+                            accountNumber: 'QWERTYUIOP',
+                        },
+                    }));
+                default:
+                    throw new Error('unexpected request');
+            }
+        });
+        it('displays the new model in the form', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, makeProps({
+                httpClient,
+            }), { initialStep: initialStep })));
+            const accountField = await screen.findByLabelText('Account number');
+            await user.type(accountField, 'qwertyuiop');
+            await act(async () => vi.advanceTimersByTimeAsync(1000)); // wait for debounce
+            await waitFor(() => {
+                expect(screen.getByDisplayValue('QWERTYUIOP')).toBeInTheDocument();
+            });
+            await waitFor(() => {
+                // Modification
+                expect(httpClient).toHaveBeenCalledTimes(1);
+                // Original - why twice?!
+                // expect(httpClient).toHaveBeenCalledTimes(2);
+            });
+        });
+    });
+    describe('and the refreshed step has a different schema and it contains data', () => {
+        const initialSchema = {
+            $id: '#example',
+            type: 'object',
+            displayOrder: ['email'],
+            properties: {
+                email: {
+                    type: 'string',
+                    title: 'Email',
+                    minLength: 5,
+                    refreshStepOnChange: true,
+                    refreshUrl: '/example-email-refresh',
+                },
+            },
+        };
+        const refreshedSchema = {
+            $id: '#example',
+            type: 'object',
+            displayOrder: ['email', 'name'],
+            properties: {
+                email: {
+                    type: 'string',
+                    title: 'Email',
+                    minLength: 5,
+                    refreshStepOnChange: true,
+                    refreshUrl: '/example-email-refresh',
+                },
+                name: {
+                    type: 'string',
+                    title: 'Name',
+                    minLength: 2,
+                },
+            },
+        };
+        const initialStep = getFormStep({ schema: initialSchema });
+        const httpClient = async (input, init) => {
+            switch (input) {
+                case '/example':
+                    return asyncJsonResponse(initialStep);
+                case '/example-email-refresh':
+                    return asyncJsonResponse(getFormStep({
+                        schema: refreshedSchema,
+                        model: Object.assign(Object.assign({}, JSON.parse(init === null || init === void 0 ? void 0 : init.body)), { name: 'Prefilled Name from Server', email: 'some.other@email.com' }),
+                    }));
+                default:
+                    throw new Error('unexpected request');
+            }
+        };
+        it('displays the new data in the form', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, makeProps({
+                httpClient,
+            }), { initialStep: initialStep })));
+            const emailField = await screen.findByLabelText('Email');
+            await user.type(emailField, 'some@email.com');
+            await act(async () => vi.advanceTimersByTimeAsync(1000)); // wait for debounce
+            await waitFor(() => {
+                expect(screen.getByDisplayValue('Prefilled Name from Server')).toBeInTheDocument();
+            });
+            expect(screen.getByDisplayValue('some.other@email.com')).toBeInTheDocument();
+        });
+    });
+});
+describe('Tracking events', () => {
+    const initialStep = getFormStep({
+        schema: {
+            $id: '#example',
+            type: 'object',
+            displayOrder: ['favouriteColor'],
+            properties: {
+                favouriteColor: {
+                    title: 'Favourite color',
+                    oneOf: [
+                        { title: 'Red', const: 'red' },
+                        { title: 'Blue', const: 'blue' },
+                    ],
+                    control: 'radio',
+                    refreshStepOnChange: true,
+                    refreshUrl: '/example-color-refresh',
+                },
+            },
+        },
+    });
+    const getInitialResponse = () => new Response(JSON.stringify(initialStep));
+    const getErrorResponse = () => new Response(null, { status: 500 });
+    const mockHttpClient = vi.fn(async () => Promise.resolve(getInitialResponse()));
+    beforeEach(() => {
+        mockHttpClient.mockClear();
+    });
+    describe('when a refresh is requested', () => {
+        it('triggers the Step Refreshed tracking event, with status "pending" and flowId, stepId and custom props', async () => {
+            const onEvent = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, makeProps({ httpClient: mockHttpClient, onEvent }), { initialStep: initialStep })));
+            const redOption = await screen.findByLabelText('Red');
+            await user.click(redOption);
+            // Original
+            // await waitFor(() => {
+            //   expect(onEvent).toHaveBeenCalledWith(
+            //     'Dynamic Flow - Step Refreshed',
+            //     expect.objectContaining({
+            //       flowId: 'the-flow-id',
+            //       stepId: 'the-step-id',
+            //       custom: 'property',
+            //       status: 'pending',
+            //     }),
+            //   );
+            // });
+            await waitFor(() => {
+                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Refresh Triggered', expect.objectContaining({
+                    custom: 'property',
+                    flowId: 'the-flow-id',
+                    stepId: 'the-step-id',
+                }));
+            });
+        });
+    });
+    describe('when a refresh is successful and the refreshed step contains a different stepId and custom props', () => {
+        it('triggers the Step Refreshed tracking event, with status "success" and flowId, stepId and custom props from the original step', async () => {
+            const onEvent = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, makeProps({ httpClient: mockHttpClient, onEvent }), { initialStep: initialStep })));
+            const redOption = await screen.findByLabelText('Red');
+            await user.click(redOption);
+            await waitFor(() => {
+                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Refresh Succeeded', expect.objectContaining({
+                    custom: 'property',
+                    flowId: 'the-flow-id',
+                    stepId: 'the-step-id',
+                }));
+            });
+            // Original
+            // await waitFor(() => {
+            //   expect(onEvent).toHaveBeenLastCalledWith(
+            //     'Dynamic Flow - Step Refreshed',
+            //     expect.objectContaining({
+            //       flowId: 'the-flow-id',
+            //       stepId: 'the-step-id',
+            //       custom: 'property',
+            //       status: 'success',
+            //     }),
+            //   );
+            // });
+        });
+    });
+    describe('when a refresh fails', () => {
+        const httpClient = vi.fn(async (input) => input === '/initial-step-request'
+            ? Promise.resolve(getInitialResponse())
+            : Promise.resolve(getErrorResponse()));
+        it('triggers the Step Refreshed tracking event, with status "failure"', async () => {
+            const onEvent = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, makeProps({ httpClient, onEvent }), { initialStep: initialStep })));
+            await user.click(await screen.findByLabelText('Red'));
+            await waitFor(() => {
+                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Refresh Failed', expect.objectContaining({
+                    custom: 'property',
+                    flowId: 'the-flow-id',
+                    stepId: 'the-step-id',
+                }));
+            });
+            // Original
+            // await waitFor(() => {
+            //   expect(onEvent).toHaveBeenCalledWith(
+            //     'Dynamic Flow - Step Refreshed',
+            //     expect.objectContaining({
+            //       flowId: 'the-flow-id',
+            //       stepId: 'the-step-id',
+            //       custom: 'property',
+            //       status: 'failure',
+            //     }),
+            //   );
+            // });
+        });
+        it('triggers the Finished tracking event, with status "failure"', async () => {
+            const onEvent = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, makeProps({ httpClient, onEvent }), { initialStep: initialStep })));
+            const redOption = await screen.findByLabelText('Red');
+            await user.click(redOption);
+            // Modification
+            await waitFor(() => {
+                expect(onEvent).toHaveBeenLastCalledWith('Dynamic Flow - Failed', expect.objectContaining({
+                    custom: 'property',
+                    flowId: 'the-flow-id',
+                    stepId: 'the-step-id',
+                }));
+            });
+            // Original
+            // await waitFor(() => {
+            //   expect(onEvent).toHaveBeenLastCalledWith(
+            //     'Dynamic Flow - Flow Finished',
+            //     expect.objectContaining({ status: 'failure' }),
+            //   );
+            // });
+        });
+    });
+    describe('when a refresh is triggered with deprecated refresh properties', () => {
+        const schema = {
+            $id: '#example',
+            type: 'object',
+            displayOrder: ['accountNumber'],
+            properties: {
+                accountNumber: {
+                    title: 'Account number',
+                    type: 'string',
+                    refreshStepOnChange: true,
+                    refreshFormUrl: '/example-account-refresh',
+                },
+            },
+        };
+        const httpClient = vi.fn(async (input) => {
+            switch (input) {
+                case '/example':
+                    return asyncJsonResponse(getFormStep({ schema, model: {} }));
+                case '/example-account-refresh':
+                    return asyncJsonResponse(getFormStep({
+                        schema,
+                        model: {
+                            accountNumber: 'QWERTYUIOP',
+                        },
+                    }));
+                default:
+                    throw new Error('unexpected request');
+            }
+        });
+        it('refreshes successfully using the refreshFormUrl property', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, makeProps({
+                httpClient,
+            }), { initialStep: getFormStep({ schema, model: {} }) })));
+            const accountField = await screen.findByLabelText('Account number');
+            await user.type(accountField, 'qwertyuiop');
+            await act(() => vi.runAllTimers()); // wait for debounce
+            await waitFor(() => {
+                expect(screen.getByDisplayValue('QWERTYUIOP')).toBeInTheDocument();
+            });
+            await waitFor(() => {
+                // Modification
+                expect(httpClient).toHaveBeenCalledTimes(1);
+                // Original
+                // expect(httpClient).toHaveBeenCalledTimes(2);
+            });
+        });
+        it('refreshes successfully using the refreshFormOnChange property', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, makeProps({
+                httpClient,
+            }), { initialStep: getFormStep({ schema, model: {} }) })));
+            const accountField = await screen.findByLabelText('Account number');
+            await user.type(accountField, 'qwertyuiop');
+            await act(() => vi.runAllTimers()); // wait for debounce
+            await waitFor(() => {
+                expect(screen.getByDisplayValue('QWERTYUIOP')).toBeInTheDocument();
+            });
+            await waitFor(() => {
+                // Modification
+                expect(httpClient).toHaveBeenCalledTimes(1);
+                // Original
+                // expect(httpClient).toHaveBeenCalledTimes(2);
+            });
+        });
+    });
+});