@wise/dynamic-flow-client 5.12.1 → 5.13.0

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

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