@wise/dynamic-flow-client 3.11.4-experiment-node20-aa45bc2 → 3.11.4

package/build/legacy/dynamicFlow/tests/RefreshStepOnChange.spec.js

@@ -1,588 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-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 DynamicFlow from '../DynamicFlow';
-var user = userEvent.setup({ advanceTimers: function (delay) { return jest.advanceTimersByTime(delay); } });
-var getFormStep = function (_a) {
-    var _b = _a === void 0 ? {} : _a, schema = _b.schema, model = _b.model;
-    return ({
-        type: 'form',
-        id: 'the-step-id',
-        analytics: { custom: 'property' },
-        title: 'Example',
-        description: 'Please enter all the information',
-        layout: [
-            { type: 'form', schema: schema },
-            {
-                type: 'button',
-                action: { type: 'primary', url: '/submit', title: 'Submit', method: 'POST' },
-            },
-        ],
-        model: model || { accountNumber: '1234567890' },
-    });
-};
-var asyncJsonResponse = function (response, init) {
-    if (init === void 0) { init = {}; }
-    return Promise.resolve(new Response(JSON.stringify(response), init));
-};
-var makeProps = function (overrides) {
-    return (__assign({ flowId: 'the-flow-id', initialAction: { method: 'GET', url: '/initial-step-request' }, httpClient: jest.fn(), onCompletion: jest.fn(), onError: jest.fn() }, overrides));
-};
-beforeEach(function () {
-    jest.clearAllMocks();
-    jest.useFakeTimers();
-});
-afterEach(function () {
-    jest.useRealTimers();
-});
-describe('When the model for a schema with refresh-on-change changes', function () {
-    var mockHttpClient = jest.fn(function () {
-        return asyncJsonResponse(getFormStep({
-            schema: {
-                $id: '#example',
-                type: 'object',
-                displayOrder: ['favouriteColor'],
-                properties: {
-                    favouriteColor: {
-                        title: 'Favourite color',
-                        type: 'string',
-                        oneOf: [
-                            { title: 'Red', const: 'red' },
-                            { title: 'Blue', const: 'blue' },
-                        ],
-                        control: 'radio',
-                        refreshStepOnChange: true,
-                        refreshUrl: '/example-color-refresh',
-                    },
-                },
-            },
-        }));
-    });
-    it('disables actions buttons while refreshing steps, and then re-enables them', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var redOption, submitButton;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    renderWithProviders(_jsx(DynamicFlow, __assign({}, makeProps({ httpClient: mockHttpClient }))));
-                    return [4 /*yield*/, screen.findByLabelText('Red')];
-                case 1:
-                    redOption = _a.sent();
-                    return [4 /*yield*/, user.click(redOption)];
-                case 2:
-                    _a.sent();
-                    submitButton = screen.getByText('Submit');
-                    return [4 /*yield*/, waitFor(function () {
-                            expect(submitButton).toBeDisabled();
-                        })];
-                case 3:
-                    _a.sent();
-                    return [4 /*yield*/, waitFor(function () {
-                            expect(submitButton).toBeEnabled();
-                        })];
-                case 4:
-                    _a.sent();
-                    return [2 /*return*/];
-            }
-        });
-    }); });
-    describe('and the refreshed step has an identical schema', function () {
-        it('the focused text input is kept in focus', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var mockHttpClient, inputBeforeRefresh;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        mockHttpClient = jest.fn(function () {
-                            return asyncJsonResponse(getFormStep({
-                                schema: {
-                                    $id: '#example',
-                                    type: 'object',
-                                    displayOrder: ['accountNumber'],
-                                    properties: {
-                                        accountNumber: {
-                                            title: 'Account number',
-                                            type: 'string',
-                                            refreshStepOnChange: true,
-                                            refreshUrl: '/refresh',
-                                        },
-                                    },
-                                },
-                            }));
-                        });
-                        renderWithProviders(_jsx(DynamicFlow, __assign({}, makeProps({ httpClient: mockHttpClient }))));
-                        return [4 /*yield*/, screen.findByLabelText('Account number')];
-                    case 1:
-                        inputBeforeRefresh = _a.sent();
-                        return [4 /*yield*/, user.click(inputBeforeRefresh)];
-                    case 2:
-                        _a.sent();
-                        expect(inputBeforeRefresh).toHaveFocus();
-                        return [4 /*yield*/, user.type(inputBeforeRefresh, '12345')];
-                    case 3:
-                        _a.sent();
-                        return [4 /*yield*/, waitFor(function () {
-                                var emailFieldAfterRefresh = screen.getByLabelText('Account number');
-                                expect(emailFieldAfterRefresh).toHaveFocus();
-                            })];
-                    case 4:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-    });
-    describe('and the refreshed step has an identical schema but contains different model', function () {
-        var schema = {
-            $id: '#example',
-            type: 'object',
-            displayOrder: ['accountNumber'],
-            properties: {
-                accountNumber: {
-                    title: 'Account number',
-                    type: 'string',
-                    refreshStepOnChange: true,
-                    refreshUrl: '/example-account-refresh',
-                },
-            },
-        };
-        var mockHttpClient = jest.fn(function (input, init) {
-            // eslint-disable-next-line jest/no-conditional-in-test
-            switch (input) {
-                case '/example':
-                    return asyncJsonResponse(getFormStep({ schema: schema, model: {} }));
-                case '/example-account-refresh':
-                    return asyncJsonResponse(getFormStep({
-                        schema: schema,
-                        model: {
-                            accountNumber: 'QWERTYUIOP',
-                        },
-                    }));
-                default:
-                    throw new Error('unexpected request');
-            }
-        });
-        it('displays the new model in the form', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var accountField;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        renderWithProviders(_jsx(DynamicFlow, __assign({}, makeProps({
-                            httpClient: mockHttpClient,
-                            initialAction: { method: 'GET', url: '/example' },
-                        }))));
-                        return [4 /*yield*/, screen.findByLabelText('Account number')];
-                    case 1:
-                        accountField = _a.sent();
-                        return [4 /*yield*/, user.type(accountField, 'qwertyuiop')];
-                    case 2:
-                        _a.sent();
-                        act(function () { return jest.runAllTimers(); }); // wait for debounce
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(screen.getByDisplayValue('QWERTYUIOP')).toBeInTheDocument();
-                            })];
-                    case 3:
-                        _a.sent();
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(mockHttpClient).toHaveBeenCalledTimes(2);
-                            })];
-                    case 4:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-    });
-    describe('and the refreshed step has a different schema and it contains data', function () {
-        var initialSchema = {
-            $id: '#example',
-            type: 'object',
-            displayOrder: ['email'],
-            properties: {
-                email: {
-                    type: 'string',
-                    title: 'Email',
-                    minLength: 5,
-                    refreshStepOnChange: true,
-                    refreshUrl: '/example-email-refresh',
-                },
-            },
-        };
-        var 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,
-                },
-            },
-        };
-        var mockHttpClient = function (input, init) {
-            // eslint-disable-next-line jest/no-conditional-in-test
-            switch (input) {
-                case '/example':
-                    return asyncJsonResponse(getFormStep({ schema: initialSchema }));
-                case '/example-email-refresh':
-                    return asyncJsonResponse(getFormStep({
-                        schema: refreshedSchema,
-                        model: __assign(__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', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var emailField;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        renderWithProviders(_jsx(DynamicFlow, __assign({}, makeProps({
-                            httpClient: mockHttpClient,
-                            initialAction: { method: 'GET', url: '/example' },
-                        }))));
-                        return [4 /*yield*/, screen.findByLabelText('Email')];
-                    case 1:
-                        emailField = _a.sent();
-                        return [4 /*yield*/, user.type(emailField, 'some@email.com')];
-                    case 2:
-                        _a.sent();
-                        act(function () { return jest.runAllTimers(); }); // wait for debounce
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(screen.getByDisplayValue('Prefilled Name from Server')).toBeInTheDocument();
-                            })];
-                    case 3:
-                        _a.sent();
-                        expect(screen.getByDisplayValue('some.other@email.com')).toBeInTheDocument();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-    });
-});
-describe('Tracking events', function () {
-    var getInitialResponse = function () {
-        return new Response(JSON.stringify(getFormStep({
-            schema: {
-                $id: '#example',
-                type: 'object',
-                displayOrder: ['favouriteColor'],
-                properties: {
-                    favouriteColor: {
-                        title: 'Favourite color',
-                        type: 'string',
-                        oneOf: [
-                            { title: 'Red', const: 'red' },
-                            { title: 'Blue', const: 'blue' },
-                        ],
-                        control: 'radio',
-                        refreshStepOnChange: true,
-                        refreshUrl: '/example-color-refresh',
-                    },
-                },
-            },
-        })));
-    };
-    var getErrorResponse = function () { return new Response(null, { status: 500 }); };
-    var mockHttpClient = jest.fn(function () { return Promise.resolve(getInitialResponse()); });
-    beforeEach(function () {
-        mockHttpClient.mockClear();
-    });
-    describe('when a refresh is requested', function () {
-        it('triggers the Step Refreshed tracking event, with status "pending" and flowId, stepId and custom props', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var onEvent, redOption;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        onEvent = jest.fn();
-                        renderWithProviders(_jsx(DynamicFlow, __assign({}, makeProps({ httpClient: mockHttpClient, onEvent: onEvent }))));
-                        return [4 /*yield*/, screen.findByLabelText('Red')];
-                    case 1:
-                        redOption = _a.sent();
-                        return [4 /*yield*/, user.click(redOption)];
-                    case 2:
-                        _a.sent();
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Step Refreshed', expect.objectContaining({
-                                    flowId: 'the-flow-id',
-                                    stepId: 'the-step-id',
-                                    custom: 'property',
-                                    status: 'pending',
-                                }));
-                            })];
-                    case 3:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-    });
-    describe('when a refresh is successful and the refreshed step contains a different stepId and custom props', function () {
-        it('triggers the Step Refreshed tracking event, with status "success" and flowId, stepId and custom props from the original step', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var onEvent, redOption;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        onEvent = jest.fn();
-                        renderWithProviders(_jsx(DynamicFlow, __assign({}, makeProps({ httpClient: mockHttpClient, onEvent: onEvent }))));
-                        return [4 /*yield*/, screen.findByLabelText('Red')];
-                    case 1:
-                        redOption = _a.sent();
-                        return [4 /*yield*/, user.click(redOption)];
-                    case 2:
-                        _a.sent();
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(onEvent).toHaveBeenLastCalledWith('Dynamic Flow - Step Refreshed', expect.objectContaining({
-                                    flowId: 'the-flow-id',
-                                    stepId: 'the-step-id',
-                                    custom: 'property',
-                                    status: 'success',
-                                }));
-                            })];
-                    case 3:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-    });
-    describe('when a refresh fails', function () {
-        var mockHttpClient = jest.fn(function (input) {
-            // eslint-disable-next-line jest/no-conditional-in-test
-            return input === '/initial-step-request'
-                ? Promise.resolve(getInitialResponse())
-                : Promise.resolve(getErrorResponse());
-        });
-        it('ends the flow in error, triggering the onError callback', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var onError, _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        onError = jest.fn();
-                        renderWithProviders(_jsx(DynamicFlow, __assign({}, makeProps({ httpClient: mockHttpClient, onError: onError }))));
-                        _b = (_a = user).click;
-                        return [4 /*yield*/, screen.findByLabelText('Red')];
-                    case 1: return [4 /*yield*/, _b.apply(_a, [_c.sent()])];
-                    case 2:
-                        _c.sent();
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(onError).toHaveBeenCalled();
-                            })];
-                    case 3:
-                        _c.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-        it('triggers the Step Refreshed tracking event, with status "failure"', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var onEvent, _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        onEvent = jest.fn();
-                        renderWithProviders(_jsx(DynamicFlow, __assign({}, makeProps({ httpClient: mockHttpClient, onEvent: onEvent }))));
-                        _b = (_a = user).click;
-                        return [4 /*yield*/, screen.findByLabelText('Red')];
-                    case 1: return [4 /*yield*/, _b.apply(_a, [_c.sent()])];
-                    case 2:
-                        _c.sent();
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Step Refreshed', expect.objectContaining({
-                                    flowId: 'the-flow-id',
-                                    stepId: 'the-step-id',
-                                    custom: 'property',
-                                    status: 'failure',
-                                }));
-                            })];
-                    case 3:
-                        _c.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-        it('triggers the Flow Finished tracking event, with status "failure"', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var onEvent, redOption;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        onEvent = jest.fn();
-                        renderWithProviders(_jsx(DynamicFlow, __assign({}, makeProps({ httpClient: mockHttpClient, onEvent: onEvent }))));
-                        return [4 /*yield*/, screen.findByLabelText('Red')];
-                    case 1:
-                        redOption = _a.sent();
-                        return [4 /*yield*/, user.click(redOption)];
-                    case 2:
-                        _a.sent();
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(onEvent).toHaveBeenLastCalledWith('Dynamic Flow - Flow Finished', expect.objectContaining({ status: 'failure' }));
-                            })];
-                    case 3:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-    });
-    describe('when a refresh is triggered with deprecated refresh properties', function () {
-        var makeMockHttpClient = function (schema) {
-            return jest.fn(function (input, init) {
-                // eslint-disable-next-line jest/no-conditional-in-test
-                switch (input) {
-                    case '/example':
-                        return asyncJsonResponse(getFormStep({ schema: schema, model: {} }));
-                    case '/example-account-refresh':
-                        return asyncJsonResponse(getFormStep({
-                            schema: schema,
-                            model: {
-                                accountNumber: 'QWERTYUIOP',
-                            },
-                        }));
-                    default:
-                        throw new Error('unexpected request');
-                }
-            });
-        };
-        it('refreshes successfully using the refreshFormUrl property', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var mockHttpClient, accountField;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        mockHttpClient = makeMockHttpClient({
-                            $id: '#example',
-                            type: 'object',
-                            displayOrder: ['accountNumber'],
-                            properties: {
-                                accountNumber: {
-                                    title: 'Account number',
-                                    type: 'string',
-                                    refreshStepOnChange: true,
-                                    refreshFormUrl: '/example-account-refresh',
-                                },
-                            },
-                        });
-                        renderWithProviders(_jsx(DynamicFlow, __assign({}, makeProps({
-                            httpClient: mockHttpClient,
-                            initialAction: { method: 'GET', url: '/example' },
-                        }))));
-                        return [4 /*yield*/, screen.findByLabelText('Account number')];
-                    case 1:
-                        accountField = _a.sent();
-                        return [4 /*yield*/, user.type(accountField, 'qwertyuiop')];
-                    case 2:
-                        _a.sent();
-                        act(function () { return jest.runAllTimers(); }); // wait for debounce
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(screen.getByDisplayValue('QWERTYUIOP')).toBeInTheDocument();
-                            })];
-                    case 3:
-                        _a.sent();
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(mockHttpClient).toHaveBeenCalledTimes(2);
-                            })];
-                    case 4:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-        it('refreshes successfully using the refreshFormOnChange property', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var mockHttpClient, accountField;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        mockHttpClient = makeMockHttpClient({
-                            $id: '#example',
-                            type: 'object',
-                            displayOrder: ['accountNumber'],
-                            properties: {
-                                accountNumber: {
-                                    title: 'Account number',
-                                    type: 'string',
-                                    refreshFormOnChange: true,
-                                    refreshUrl: '/example-account-refresh',
-                                },
-                            },
-                        });
-                        renderWithProviders(_jsx(DynamicFlow, __assign({}, makeProps({
-                            httpClient: mockHttpClient,
-                            initialAction: { method: 'GET', url: '/example' },
-                        }))));
-                        return [4 /*yield*/, screen.findByLabelText('Account number')];
-                    case 1:
-                        accountField = _a.sent();
-                        return [4 /*yield*/, user.type(accountField, 'qwertyuiop')];
-                    case 2:
-                        _a.sent();
-                        act(function () { return jest.runAllTimers(); }); // wait for debounce
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(screen.getByDisplayValue('QWERTYUIOP')).toBeInTheDocument();
-                            })];
-                    case 3:
-                        _a.sent();
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(mockHttpClient).toHaveBeenCalledTimes(2);
-                            })];
-                    case 4:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-    });
-});