@wise/dynamic-flow-client 3.5.0-experimental-6654c72 → 3.5.0-experimental-63c768d

package/build/legacy/jsonSchemaForm/JsonSchemaForm.end-to-end.spec.js

@@ -0,0 +1,563 @@
+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, fireEvent, waitFor } from '@testing-library/react';
+import { renderWithProviders } from '../test-utils';
+import JsonSchemaForm from './JsonSchemaForm';
+describe('E2E: Given a component for rendering a JSON schema form', function () {
+    var schema;
+    var errors;
+    var onChange;
+    var onPersistAsync;
+    var props;
+    var baseUrl = 'some-test-base-url';
+    var stringSchema = {
+        title: 'String',
+        type: 'string',
+        minLength: 2
+    };
+    var constSchema = {
+        "const": 'abcd'
+    };
+    var oneOfTwoConstsSchema = {
+        title: 'One Of Two Consts',
+        control: 'radio',
+        oneOf: [
+            { "const": 1, title: 'One' },
+            { "const": 2, title: 'Two' },
+        ]
+    };
+    var oneOfThreeConstsSchema = {
+        title: 'One Of Three Consts',
+        oneOf: [
+            { "const": 1, title: 'One' },
+            { "const": 2, title: 'Two' },
+            { "const": 3, title: 'Three' },
+        ]
+    };
+    var booleanSchema = {
+        title: 'Check',
+        type: 'boolean'
+    };
+    var numberSchema = {
+        title: 'Number',
+        type: 'number'
+    };
+    beforeEach(function () {
+        schema = {
+            allOf: [
+                {
+                    oneOf: [
+                        {
+                            title: 'Title',
+                            type: 'object',
+                            properties: {
+                                string: stringSchema,
+                                "const": constSchema,
+                                oneOf2Consts: oneOfTwoConstsSchema,
+                                boolean: booleanSchema,
+                                number: numberSchema,
+                                oneOf3Consts: oneOfThreeConstsSchema
+                            },
+                            displayOrder: [
+                                'string',
+                                'const',
+                                'oneOf2Consts',
+                                'boolean',
+                                'number',
+                                'oneOf3Consts',
+                            ]
+                        },
+                    ]
+                },
+            ]
+        };
+        onChange = jest.fn();
+        onPersistAsync = jest.fn();
+        errors = {
+            string: 'Error'
+        };
+        var model = { string: 'foo' };
+        var submitted = false;
+        var disabled = false;
+        props = {
+            schema: schema,
+            model: model,
+            errors: errors,
+            onChange: onChange,
+            submitted: submitted,
+            disabled: disabled,
+            onPersistAsync: onPersistAsync,
+            baseUrl: baseUrl
+        };
+    });
+    describe('when initialised', function () {
+        beforeEach(function () {
+            renderWithProviders(_jsx(JsonSchemaForm, __assign({}, props)));
+        });
+        it('should render text input control', function () {
+            var string = screen.getByLabelText('String');
+            expect(string.closest('input')).toHaveAttribute('type', 'text');
+        });
+        it('should render number input control', function () {
+            var number = screen.getByLabelText('Number');
+            expect(number.closest('input')).toHaveAttribute('type', 'number');
+        });
+        it('should render a checkbox for the boolean schema', function () {
+            var check = screen.getByLabelText('Check');
+            expect(check.parentElement).toHaveClass('np-checkbox-button');
+        });
+        it('should render radio buttons for the One Of Two Consts schema', function () {
+            expect(screen.getByText('One Of Two Consts')).toBeInTheDocument();
+            expect(screen.getAllByRole('radio')).toHaveLength(2);
+        });
+        it('should render a select for the One Of Three Consts schema', function () {
+            expect(screen.getByRole('button')).toBeInTheDocument();
+        });
+        it('should render the model value in the relevant control', function () {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+            expect(screen.getByLabelText('String').value).toBe('foo');
+        });
+        it('should render an error', function () {
+            expect(screen.getByRole('alert')).toHaveTextContent(/error/i);
+        });
+        it('should broadcast a change for the const and a change for the boolean schema', function () {
+            expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+                model: { string: 'foo', "const": 'abcd' },
+                triggerSchema: constSchema,
+                triggerModel: 'abcd',
+                lastTriggerModel: null
+            }));
+            expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+                model: { string: 'foo', "const": 'abcd', boolean: false },
+                triggerSchema: booleanSchema,
+                triggerModel: false,
+                lastTriggerModel: null
+            }));
+            expect(onChange).toHaveBeenCalledTimes(2);
+        });
+    });
+    describe('when the text input value changes', function () {
+        beforeEach(function () {
+            renderWithProviders(_jsx(JsonSchemaForm, __assign({}, props)));
+            fireEvent.change(screen.getByLabelText('String'), { target: { value: 'new' } });
+        });
+        it('should trigger the component onChange', function () {
+            expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+                model: { string: 'new', "const": 'abcd', boolean: false },
+                triggerSchema: stringSchema,
+                triggerModel: 'new',
+                lastTriggerModel: 'foo'
+            }));
+            expect(onChange).toHaveBeenCalledTimes(3);
+        });
+    });
+    describe('when the text input value changes to something invalid', function () {
+        beforeEach(function () {
+            renderWithProviders(_jsx(JsonSchemaForm, __assign({}, props)));
+            fireEvent.change(screen.getByLabelText('String'), { target: { value: 'x' } });
+        });
+        it('should NOT remove the value from the model', function () {
+            expect(onChange).toHaveBeenLastCalledWith(expect.objectContaining({
+                model: { "const": 'abcd', string: 'x', boolean: false },
+                triggerSchema: stringSchema,
+                triggerModel: 'x',
+                lastTriggerModel: 'foo'
+            }));
+        });
+        describe('and then to something else invalid', function () {
+            beforeEach(function () {
+                fireEvent.change(screen.getByLabelText('String'), { target: { value: 'y' } });
+            });
+            it('should call onChange again', function () {
+                expect(onChange).toHaveBeenCalledTimes(4);
+            });
+        });
+        describe('and then to something valid', function () {
+            beforeEach(function () {
+                fireEvent.change(screen.getByLabelText('String'), { target: { value: 'bar' } });
+            });
+            it('should call onChange with the new value', function () {
+                expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+                    model: { string: 'bar', "const": 'abcd', boolean: false },
+                    triggerSchema: stringSchema,
+                    triggerModel: 'bar',
+                    lastTriggerModel: 'x'
+                }));
+            });
+            it('should have called onChange again', function () {
+                expect(onChange).toHaveBeenCalledTimes(4);
+            });
+        });
+    });
+    describe('when disabled', function () {
+        it('should disable the controls', function () {
+            renderWithProviders(_jsx(JsonSchemaForm, __assign({}, props, { disabled: true })));
+            var controls = ['textbox', 'radio', 'spinbutton'];
+            controls.forEach(function (control) {
+                screen.getAllByRole(control).forEach(function (node) {
+                    expect(node).toBeDisabled();
+                });
+            });
+            var dropdowns = screen
+                .getAllByRole('button')
+                .filter(function (node) { var _a; return (_a = node.getAttribute('class')) === null || _a === void 0 ? void 0 : _a.split(' ').includes('np-dropdown-toggle'); });
+            dropdowns.forEach(function (node) {
+                expect(node).toBeDisabled();
+            });
+        });
+    });
+    describe('when a property becomes required after initialisation, and the form is submitted', function () {
+        var rerender;
+        var optionalSchema = {
+            type: 'object',
+            title: 'Option A',
+            properties: {
+                a: {
+                    title: 'A Number',
+                    type: 'number'
+                }
+            },
+            displayOrder: ['a']
+        };
+        var requiredSchema = __assign(__assign({}, optionalSchema), { required: ['a'] });
+        beforeEach(function () {
+            props = __assign(__assign({}, props), { schema: optionalSchema });
+            rerender = renderWithProviders(_jsx(JsonSchemaForm, __assign({}, props))).rerender;
+        });
+        it('should display validation errors', function () {
+            rerender(_jsx(JsonSchemaForm, __assign({}, props, { schema: requiredSchema, submitted: true })));
+            expect(screen.getByText('Please fill out this field.')).toBeInTheDocument();
+        });
+    });
+    describe('when initialising it with a schema containing a oneOf with two options', function () {
+        var makeSchemaWithOneOfTwoOptions = function (control, options) {
+            if (options === void 0) { options = {}; }
+            return ({
+                analyticsId: 'schema-with-two-options',
+                title: 'Recipient Bank Details',
+                placeholder: 'Please, choose an option.',
+                oneOf: [
+                    {
+                        analyticsId: 'SortCode',
+                        title: 'Sort Code Tab',
+                        type: 'object',
+                        required: options.everythingRequired ? ['name', 'sortcode', 'account'] : [],
+                        properties: {
+                            name: {
+                                title: 'Full name field',
+                                type: 'string'
+                            },
+                            sortcode: {
+                                title: 'Sort Code field',
+                                type: 'string'
+                            },
+                            account: {
+                                title: 'Account number field',
+                                type: 'string'
+                            },
+                            type: {
+                                type: 'string',
+                                "const": 'SortCode'
+                            }
+                        },
+                        displayOrder: ['name', 'sortcode', 'account', 'type']
+                    },
+                    {
+                        analyticsId: 'Iban',
+                        title: 'IBAN Tab',
+                        type: 'object',
+                        required: options.everythingRequired ? ['name', 'iban'] : [],
+                        properties: {
+                            name: {
+                                title: 'Full name field',
+                                type: 'string'
+                            },
+                            iban: {
+                                title: 'IBAN field',
+                                type: 'string'
+                            },
+                            type: {
+                                type: 'string',
+                                "const": 'Iban'
+                            }
+                        }
+                    },
+                ],
+                control: control
+            });
+        };
+        var renderComponent = function (props) {
+            var schema = props.schema, _a = props.onChange, onChange = _a === void 0 ? jest.fn() : _a, _b = props.initialModel, initialModel = _b === void 0 ? {} : _b, _c = props.onEvent, onEvent = _c === void 0 ? jest.fn() : _c, _d = props.submitted, submitted = _d === void 0 ? false : _d;
+            function JsonSchemaFormWithModelState() {
+                return (_jsx(JsonSchemaForm, { schema: schema, model: initialModel, errors: {}, submitted: submitted, baseUrl: "", onChange: onChange, onPersistAsync: jest.fn(), onEvent: onEvent }));
+            }
+            renderWithProviders(_jsx(JsonSchemaFormWithModelState, {}));
+        };
+        ['tab', 'radio', 'select'].forEach(function (control) {
+            describe("when using a \"".concat(control, "\" control type"), function () {
+                it("dispatches onChange immediately with the model corresponding to the selected oneOf", function () {
+                    //
+                    jest.useFakeTimers();
+                    var onChange = jest.fn();
+                    var schema = makeSchemaWithOneOfTwoOptions(control);
+                    var initialModel = {
+                        name: 'Bob Loblaw',
+                        sortcode: '111111',
+                        account: '22222222',
+                        iban: 'IT0000000000'
+                    };
+                    renderComponent({ schema: schema, onChange: onChange, initialModel: initialModel });
+                    expect(onChange).toHaveBeenLastCalledWith(expect.objectContaining({
+                        model: {
+                            type: 'SortCode',
+                            name: 'Bob Loblaw',
+                            sortcode: '111111',
+                            account: '22222222'
+                        }
+                    }));
+                    jest.useRealTimers();
+                });
+            });
+        });
+        describe('and switching schemas in the oneOf', function () {
+            it('triggers onEvent with the "Dynamic Flow - OneOf Selected" event name and the expected oneOfId and schemaId properties', function () {
+                //
+                jest.useFakeTimers();
+                var onEvent = jest.fn();
+                var schema = makeSchemaWithOneOfTwoOptions('radio');
+                var initialModel = {};
+                renderComponent({ schema: schema, onEvent: onEvent, initialModel: initialModel });
+                // switch to the other schema (IBAN Tab)
+                fireEvent.click(screen.getByText(/iban tab/i));
+                expect(onEvent).toHaveBeenLastCalledWith('Dynamic Flow - OneOf Selected', expect.objectContaining({
+                    oneOfId: 'schema-with-two-options',
+                    schemaId: 'Iban'
+                }));
+                onEvent.mockClear();
+                // enter name, sortcode and account number
+                fireEvent.change(screen.getByLabelText(/full name field/i), {
+                    target: { value: 'Robert Sortcode' }
+                });
+                expect(onEvent).not.toHaveBeenCalled();
+            });
+        });
+        describe('and switching between the two non-const schemas in the oneOf', function () {
+            it('keeps separate models for each schema in the oneOf', function () {
+                jest.useFakeTimers();
+                var onChange = jest.fn();
+                var schema = makeSchemaWithOneOfTwoOptions('tab');
+                var initialModel = {};
+                renderComponent({ schema: schema, onChange: onChange, initialModel: initialModel });
+                // enter name, sortcode and account number
+                fireEvent.change(screen.getByLabelText(/full name field/i), {
+                    target: { value: 'Robert Sortcode' }
+                });
+                fireEvent.change(screen.getByLabelText(/sort code field/i), {
+                    target: { value: '111111' }
+                });
+                fireEvent.change(screen.getByLabelText(/account number field/i), {
+                    target: { value: '22222222' }
+                });
+                // expect the values to be visible, of course
+                expect(screen.getByDisplayValue('Robert Sortcode')).toBeInTheDocument();
+                expect(screen.getByDisplayValue('111111')).toBeInTheDocument();
+                expect(screen.getByDisplayValue('22222222')).toBeInTheDocument();
+                // also expect the model to have been updated to the expected value
+                expect(onChange).toHaveBeenLastCalledWith(expect.objectContaining({
+                    model: {
+                        type: 'SortCode',
+                        name: 'Robert Sortcode',
+                        sortcode: '111111',
+                        account: '22222222'
+                    }
+                }));
+                // switch to the other schema (IBAN Tab)
+                fireEvent.click(screen.getByText(/iban tab/i));
+                // expect the values entered on the other schema to not be visible here
+                expect(screen.queryByDisplayValue('Robert Sortcode')).not.toBeInTheDocument();
+                expect(screen.queryByDisplayValue('111111')).not.toBeInTheDocument();
+                expect(screen.queryByDisplayValue('22222222')).not.toBeInTheDocument();
+                // also expect the model to be updated to the selected type: 'Iban'
+                expect(onChange).toHaveBeenLastCalledWith(expect.objectContaining({ model: { type: 'Iban' } }));
+                // now enter a different name and an IBAN
+                fireEvent.change(screen.getByLabelText(/full name field/i), {
+                    target: { value: 'Bob Iban' }
+                });
+                fireEvent.change(screen.getByLabelText(/iban field/i), {
+                    target: { value: 'IT000000000' }
+                });
+                // expect the model to be updated accordingly
+                expect(onChange).toHaveBeenLastCalledWith(expect.objectContaining({
+                    model: {
+                        type: 'Iban',
+                        name: 'Bob Iban',
+                        iban: 'IT000000000'
+                    }
+                }));
+                // now switch back to the first tab (Sort Code Tab)
+                fireEvent.click(screen.getByText(/sort code tab/i));
+                // expect the values initially entered in this tab to be visible again
+                expect(screen.getByDisplayValue('111111')).toBeInTheDocument();
+                expect(screen.getByDisplayValue('22222222')).toBeInTheDocument();
+                expect(screen.getByDisplayValue('Robert Sortcode')).toBeInTheDocument();
+                // also expect the model to be updated accordingly
+                expect(onChange).toHaveBeenLastCalledWith(expect.objectContaining({
+                    model: {
+                        type: 'SortCode',
+                        name: 'Robert Sortcode',
+                        sortcode: '111111',
+                        account: '22222222'
+                    }
+                }));
+                jest.useRealTimers();
+            });
+        });
+        describe('when the property containing a oneOf is required', function () {
+            var schema = {
+                type: 'object',
+                displayOrder: ['theOnlyProp'],
+                required: ['theOnlyProp'],
+                properties: {
+                    theOnlyProp: __assign(__assign({}, makeSchemaWithOneOfTwoOptions('select', { everythingRequired: true })), { validationMessages: { required: 'Custom required validation error' } })
+                }
+            };
+            describe('...but none of the oneOf is selected', function () {
+                it('should display the "required" validation error under the Select control', function () {
+                    renderComponent({ schema: schema, initialModel: {}, submitted: true });
+                    expect(screen.getByText(/please, choose/i)).toBeInTheDocument();
+                    expect(screen.getByText('Custom required validation error')).toBeInTheDocument();
+                    expect(screen.queryByText('Please fill out this field.')).not.toBeInTheDocument();
+                });
+                it('...only until one of the options is selected', function () { return __awaiter(void 0, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                renderComponent({ schema: schema, initialModel: {}, submitted: true });
+                                expect(screen.getByText(/please, choose/i)).toBeInTheDocument();
+                                expect(screen.getByText('Custom required validation error')).toBeInTheDocument();
+                                expect(screen.queryByText('Please fill out this field.')).not.toBeInTheDocument();
+                                fireEvent.click(screen.getByText(/please, choose an option/i));
+                                fireEvent.click(screen.getByText(/iban/i));
+                                return [4 /*yield*/, waitFor(function () {
+                                        expect(screen.queryByText(/please, choose an option/i)).not.toBeInTheDocument();
+                                    })];
+                            case 1:
+                                _a.sent();
+                                expect(screen.queryByText('Custom required validation error')).not.toBeInTheDocument();
+                                expect(screen.getAllByText('Please fill out this field.')).toHaveLength(2);
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+                it('...and if the oneOf is unselected, the validation message is back', function () { return __awaiter(void 0, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                renderComponent({ schema: schema, initialModel: {}, submitted: true });
+                                expect(screen.getByText(/please, choose/i)).toBeInTheDocument();
+                                expect(screen.getByText('Custom required validation error')).toBeInTheDocument();
+                                expect(screen.queryByText('Please fill out this field.')).not.toBeInTheDocument();
+                                fireEvent.click(screen.getByText(/please, choose an option/i));
+                                fireEvent.click(screen.getByText(/iban tab/i));
+                                return [4 /*yield*/, waitFor(function () {
+                                        expect(screen.queryByText(/please, choose an option/i)).not.toBeInTheDocument();
+                                    })];
+                            case 1:
+                                _a.sent();
+                                expect(screen.queryByText('Custom required validation error')).not.toBeInTheDocument();
+                                expect(screen.getAllByText('Please fill out this field.')).toHaveLength(2);
+                                fireEvent.click(screen.getByLabelText(/clear/i));
+                                expect(screen.getByText(/please, choose an option/i)).toBeInTheDocument();
+                                fireEvent.click(screen.getByText(/please, choose an option/i));
+                                return [4 /*yield*/, waitFor(function () {
+                                        expect(screen.getByText('Custom required validation error')).toBeInTheDocument();
+                                    })];
+                            case 2:
+                                _a.sent();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            });
+        });
+    });
+    describe('when initialised with an allOf with two schemas', function () {
+        var schema = {
+            allOf: [
+                {
+                    type: 'object',
+                    displayOrder: ['a'],
+                    properties: {
+                        a: { type: 'string', title: 'Label A' }
+                    }
+                },
+                {
+                    type: 'object',
+                    displayOrder: ['b'],
+                    properties: {
+                        b: { type: 'string', title: 'Label B' }
+                    }
+                },
+            ]
+        };
+        describe('when updating more than one schema', function () {
+            it('calls onChange with all changed models in all schemas', function () {
+                var onChange = jest.fn();
+                renderWithProviders(_jsx(JsonSchemaForm, __assign({}, props, { schema: schema, onChange: onChange })));
+                fireEvent.change(screen.getByLabelText(/Label A/), { target: { value: 'AAA' } });
+                expect(onChange).toHaveBeenCalledTimes(1);
+                expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ model: { a: 'AAA' } }));
+                onChange.mockClear();
+                fireEvent.change(screen.getByLabelText(/Label B/), { target: { value: 'BBB' } });
+                expect(onChange).toHaveBeenCalledTimes(1);
+                expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ model: { a: 'AAA', b: 'BBB' } }));
+            });
+        });
+    });
+});

package/build/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/index.js

@@ -0,0 +1 @@
+export { default } from './ArrayListSchema';