@wise/dynamic-flow-client 3.9.0-experimental-90bdf26 → 3.9.0

package/build/revamp/tests/legacy/ValidationAsync.spec.js

@@ -1,452 +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 { screen, waitFor } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import DynamicFlowWise from '../../DynamicFlowWise';
-import { renderWithProviders } from '../../../test-utils';
-var user = userEvent.setup();
-describe('Validation Async', function () {
-    var getRootSchema = function (validationAsync) { return ({
-        $id: '#schema',
-        type: 'object',
-        displayOrder: ['iban'],
-        properties: {
-            iban: {
-                $id: '#iban-string-schema',
-                type: 'string',
-                maxLength: 18,
-                title: 'IBAN',
-                validationAsync: validationAsync,
-            },
-        },
-    }); };
-    var getInitialStep = function (validationAsync) { return ({
-        id: 'validation-async-step-id',
-        title: 'Validation Async',
-        schemas: [getRootSchema(validationAsync)],
-        layout: [
-            { type: 'form', schemaId: '#schema' },
-            {
-                type: 'button',
-                title: 'Submit',
-                action: { url: '/submit', method: 'POST' },
-            },
-        ],
-    }); };
-    var getProps = function (initialStep) { return ({
-        flowId: 'flow-id',
-        initialStep: initialStep,
-        httpClient: jest.fn(),
-        onCompletion: jest.fn(),
-        onError: jest.fn(),
-        onEvent: jest.fn(),
-        onLog: jest.fn(),
-    }); };
-    describe('when the input is blurred and has null value', function () {
-        it('does NOT trigger validation async', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var props, httpClient, input;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        props = getProps(getInitialStep({ method: 'POST', url: '/validate', param: 'myParameter' }));
-                        httpClient = props.httpClient;
-                        renderWithProviders(_jsx(DynamicFlowWise, __assign({}, props)));
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(screen.getByLabelText('IBAN')).toBeInTheDocument();
-                            })];
-                    case 1:
-                        _a.sent();
-                        input = screen.getByLabelText('IBAN');
-                        return [4 /*yield*/, user.clear(input)];
-                    case 2:
-                        _a.sent();
-                        return [4 /*yield*/, user.tab()];
-                    case 3:
-                        _a.sent();
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(httpClient).not.toHaveBeenCalled();
-                            })];
-                    case 4:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-    });
-    describe('when the input is blurred and has an invalid value', function () {
-        it('does NOT trigger validation async', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var props, httpClient, input;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        props = getProps(getInitialStep({ method: 'POST', url: '/validate', param: 'myParameter' }));
-                        httpClient = props.httpClient;
-                        renderWithProviders(_jsx(DynamicFlowWise, __assign({}, props)));
-                        input = screen.getByLabelText('IBAN');
-                        return [4 /*yield*/, user.type(input, '12345678901234567890')];
-                    case 1:
-                        _a.sent(); // longer than 18 characters
-                        return [4 /*yield*/, user.tab()];
-                    case 2:
-                        _a.sent();
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(httpClient).not.toHaveBeenCalled();
-                            })];
-                    case 3:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-    });
-    describe('when the input is blurred and has a valid value', function () {
-        it('triggers validation async with the specified method, url and parameter', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var httpClient, props, input;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        httpClient = jest
-                            .fn()
-                            .mockResolvedValue(new Response(JSON.stringify({ message: 'IBAN is valid' })));
-                        props = getProps(getInitialStep({ method: 'POST', url: '/validate', param: 'myParameter' }));
-                        renderWithProviders(_jsx(DynamicFlowWise, __assign({}, props, { httpClient: httpClient })));
-                        input = screen.getByLabelText('IBAN');
-                        return [4 /*yield*/, user.type(input, '123456789012345678')];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, user.tab()];
-                    case 2:
-                        _a.sent();
-                        return [4 /*yield*/, waitFor(function () {
-                                expect(httpClient).toHaveBeenCalledWith('/validate', expect.objectContaining({ body: "{\"myParameter\":\"123456789012345678\"}" }));
-                            })];
-                    case 3:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-        describe.skip('when the validation-async config does not provide a method property', function () {
-            // I've removed these tests as zod will barf if method is not provided
-        });
-        describe('when the validation-async config specifies the "GET" method', function () {
-            it('calls fetch without a "body" payload', function () { return __awaiter(void 0, void 0, void 0, function () {
-                var props, input;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            props = getProps(getInitialStep({ method: 'GET', url: '/validate', param: 'myParameter' }));
-                            renderWithProviders(_jsx(DynamicFlowWise, __assign({}, props)));
-                            input = screen.getByLabelText('IBAN');
-                            return [4 /*yield*/, user.type(input, '123456789012345678')];
-                        case 1:
-                            _a.sent();
-                            return [4 /*yield*/, user.tab()];
-                        case 2:
-                            _a.sent();
-                            return [4 /*yield*/, waitFor(function () {
-                                    expect(props.httpClient).toHaveBeenCalledWith('/validate', expect.objectContaining({ method: "GET" }));
-                                })];
-                        case 3:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); });
-        });
-        describe('when the validation response is successful with a "message" property', function () {
-            it('displays the validation success message', function () { return __awaiter(void 0, void 0, void 0, function () {
-                var httpClient, props, input;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            httpClient = jest
-                                .fn()
-                                .mockResolvedValue(new Response(JSON.stringify({ message: 'IBAN is valid' })));
-                            props = getProps(getInitialStep({ method: 'POST', url: '/validate', param: 'myParameter' }));
-                            renderWithProviders(_jsx(DynamicFlowWise, __assign({}, props, { httpClient: httpClient })));
-                            input = screen.getByLabelText('IBAN');
-                            return [4 /*yield*/, user.type(input, '123456789012345678')];
-                        case 1:
-                            _a.sent();
-                            return [4 /*yield*/, user.tab()];
-                        case 2:
-                            _a.sent();
-                            return [4 /*yield*/, waitFor(function () {
-                                    expect(screen.getByText('IBAN is valid')).toBeInTheDocument();
-                                })];
-                        case 3:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); });
-        });
-        describe('when the validation response fails with 422', function () {
-            it('displays the validation error message', function () { return __awaiter(void 0, void 0, void 0, function () {
-                var httpClient, props, input;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            httpClient = jest.fn().mockResolvedValue(new Response(JSON.stringify({ message: 'Invalid IBAN (422)' }), {
-                                status: 422,
-                            }));
-                            props = getProps(getInitialStep({ method: 'POST', url: '/validate', param: 'myParameter' }));
-                            renderWithProviders(_jsx(DynamicFlowWise, __assign({}, props, { httpClient: httpClient })));
-                            input = screen.getByLabelText('IBAN');
-                            return [4 /*yield*/, user.type(input, '123456789012345678')];
-                        case 1:
-                            _a.sent();
-                            return [4 /*yield*/, user.tab()];
-                        case 2:
-                            _a.sent();
-                            return [4 /*yield*/, waitFor(function () {
-                                    expect(screen.getByText('Invalid IBAN (422)')).toBeInTheDocument();
-                                })];
-                        case 3:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); });
-        });
-        describe('when the value is changed after a successful validation async request', function () {
-            it('does not display any messages', function () { return __awaiter(void 0, void 0, void 0, function () {
-                var httpClient, props, input;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            httpClient = jest
-                                .fn()
-                                .mockResolvedValue(new Response(JSON.stringify({ message: 'IBAN is valid' })));
-                            props = getProps(getInitialStep({ method: 'POST', url: '/validate', param: 'myParameter' }));
-                            renderWithProviders(_jsx(DynamicFlowWise, __assign({}, props, { httpClient: httpClient })));
-                            input = screen.getByLabelText('IBAN');
-                            return [4 /*yield*/, user.type(input, '12345678901234567')];
-                        case 1:
-                            _a.sent();
-                            return [4 /*yield*/, user.tab()];
-                        case 2:
-                            _a.sent();
-                            return [4 /*yield*/, waitFor(function () {
-                                    expect(screen.getByText('IBAN is valid')).toBeInTheDocument();
-                                })];
-                        case 3:
-                            _a.sent();
-                            return [4 /*yield*/, user.type(input, '8')];
-                        case 4:
-                            _a.sent();
-                            return [4 /*yield*/, user.tab()];
-                        case 5:
-                            _a.sent();
-                            return [4 /*yield*/, waitFor(function () {
-                                    expect(screen.queryByText('IBAN is valid')).not.toBeInTheDocument();
-                                })];
-                        case 6:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); });
-            describe('when the new value is the same as before', function () {
-                it('does not trigger another validation async call', function () { return __awaiter(void 0, void 0, void 0, function () {
-                    var httpClient, props, input;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                httpClient = jest
-                                    .fn()
-                                    .mockResolvedValue(new Response(JSON.stringify({ message: 'IBAN is valid' })));
-                                props = getProps(getInitialStep({ method: 'POST', url: '/validate', param: 'myParameter' }));
-                                renderWithProviders(_jsx(DynamicFlowWise, __assign({}, props, { httpClient: httpClient })));
-                                input = screen.getByLabelText('IBAN');
-                                return [4 /*yield*/, user.type(input, '123456789012345678')];
-                            case 1:
-                                _a.sent();
-                                return [4 /*yield*/, user.tab()];
-                            case 2:
-                                _a.sent();
-                                return [4 /*yield*/, waitFor(function () {
-                                        expect(httpClient).toHaveBeenCalledTimes(1);
-                                    })];
-                            case 3:
-                                _a.sent();
-                                return [4 /*yield*/, user.click(input)];
-                            case 4:
-                                _a.sent();
-                                return [4 /*yield*/, user.tab()];
-                            case 5:
-                                _a.sent();
-                                return [4 /*yield*/, waitFor(function () {
-                                        expect(httpClient).toHaveBeenCalledTimes(1);
-                                    })];
-                            case 6:
-                                _a.sent();
-                                return [2 /*return*/];
-                        }
-                    });
-                }); });
-            });
-        });
-        describe('other server responses', function () {
-            var otherCases = [
-                {
-                    description: 'when the validation response is successful without a body',
-                    httpClient: jest.fn(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-                        return [2 /*return*/, Promise.resolve(new Response(null))];
-                    }); }); }),
-                    // Original:
-                    // expectedTrackingEvent: 'failure',
-                    // Modification:
-                    expectedTrackingEvent: 'Dynamic Flow - ValidationAsync Succeeded',
-                    doNotExpect: 'Error',
-                },
-                {
-                    description: 'when the validation response is successful with a string body',
-                    httpClient: jest.fn(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-                        return [2 /*return*/, Promise.resolve(new Response("Everything is fine"))];
-                    }); }); }),
-                    // Original:
-                    // expectedTrackingEvent: 'failure',
-                    // Modification:
-                    expectedTrackingEvent: 'Dynamic Flow - ValidationAsync Succeeded',
-                    doNotExpect: 'Everything is fine',
-                },
-                {
-                    description: 'when the validation response fails with 500',
-                    httpClient: jest.fn(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-                        return [2 /*return*/, Promise.resolve(new Response("Internal server error", { status: 500 }))];
-                    }); }); }),
-                    expectedTrackingEvent: 'Dynamic Flow - ValidationAsync Failed',
-                    doNotExpect: 'Internal server error',
-                },
-                {
-                    description: 'when the validation response fails with 403',
-                    httpClient: jest.fn(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-                        return [2 /*return*/, Promise.resolve(new Response("{ \"messsage\": \"Forbidden\" }", { status: 403 }))];
-                    }); }); }),
-                    // Original:
-                    // expectedTrackingEvent: 'success',
-                    // Modification:
-                    expectedTrackingEvent: 'Dynamic Flow - ValidationAsync Failed',
-                    doNotExpect: 'Forbidden',
-                },
-                {
-                    description: 'when the validation response JSON does not parse as an object',
-                    httpClient: jest.fn(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-                        return [2 /*return*/, Promise.resolve(new Response("1234567890", { status: 422 }))];
-                    }); }); }),
-                    expectedTrackingEvent: 'Dynamic Flow - ValidationAsync Failed',
-                    doNotExpect: '1234567890',
-                },
-                {
-                    description: 'when the validation response does not even parse as JSON',
-                    httpClient: jest.fn(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-                        return [2 /*return*/, Promise.resolve(new Response("non-json-string", { status: 422 }))];
-                    }); }); }),
-                    expectedTrackingEvent: 'Dynamic Flow - ValidationAsync Failed',
-                    doNotExpect: 'non-json-string',
-                },
-            ];
-            describe.each(otherCases)('$description', function (_a) {
-                var httpClient = _a.httpClient, expectedTrackingEvent = _a.expectedTrackingEvent, doNotExpect = _a.doNotExpect;
-                it('does NOT display a validation message', function () { return __awaiter(void 0, void 0, void 0, function () {
-                    var props, input;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                props = getProps(getInitialStep({ method: 'POST', url: '/validate', param: 'myParameter' }));
-                                renderWithProviders(_jsx(DynamicFlowWise, __assign({}, props, { httpClient: httpClient })));
-                                input = screen.getByLabelText('IBAN');
-                                return [4 /*yield*/, user.type(input, '123456789012345678')];
-                            case 1:
-                                _a.sent();
-                                return [4 /*yield*/, user.tab()];
-                            case 2:
-                                _a.sent();
-                                return [4 /*yield*/, waitFor(function () {
-                                        expect(screen.queryByText(doNotExpect)).not.toBeInTheDocument();
-                                    })];
-                            case 3:
-                                _a.sent();
-                                return [2 /*return*/];
-                        }
-                    });
-                }); });
-                it("triggers analytics event with {status: \"".concat(expectedTrackingEvent, "\"}"), function () { return __awaiter(void 0, void 0, void 0, function () {
-                    var props, input;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                props = getProps(getInitialStep({ method: 'POST', url: '/validate', param: 'myParameter' }));
-                                renderWithProviders(_jsx(DynamicFlowWise, __assign({}, props, { httpClient: httpClient })));
-                                input = screen.getByLabelText('IBAN');
-                                return [4 /*yield*/, user.type(input, '123456789012345678')];
-                            case 1:
-                                _a.sent();
-                                return [4 /*yield*/, user.tab()];
-                            case 2:
-                                _a.sent();
-                                return [4 /*yield*/, waitFor(function () {
-                                        expect(props.onEvent).toHaveBeenLastCalledWith(expectedTrackingEvent, expect.objectContaining({
-                                            flowId: 'flow-id',
-                                            schema: '#iban-string-schema',
-                                            stepId: 'validation-async-step-id',
-                                        }));
-                                    })];
-                            case 3:
-                                _a.sent();
-                                return [2 /*return*/];
-                        }
-                    });
-                }); });
-            });
-        });
-    });
-});