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

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

@@ -0,0 +1,773 @@
+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";
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { 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();
+jest.mock('../../common/utils/id-utils', function () { return ({
+    generateRandomId: function () { return 'DUMMY_GENERATED_UNIQUE_ID'; },
+}); });
+describe('Given a oneOfSchema component!', function () {
+    var threeOptionsSchema = function (overrides) {
+        if (overrides === void 0) { overrides = {}; }
+        return (__assign({ $id: '#schema', title: 'OneOf Schema Test', oneOf: [
+                {
+                    type: 'object',
+                    title: 'Option A',
+                    properties: {
+                        a: { type: 'number' },
+                    },
+                    required: ['a'],
+                    displayOrder: ['a'],
+                },
+                {
+                    type: 'object',
+                    title: 'Option B',
+                    properties: {
+                        b: { type: 'number' },
+                    },
+                    required: ['b'],
+                    displayOrder: ['b'],
+                },
+                {
+                    type: 'object',
+                    title: 'Option C',
+                    properties: {
+                        c: { type: 'number' },
+                    },
+                    required: ['c'],
+                    displayOrder: ['c'],
+                },
+            ] }, overrides));
+    };
+    var oneOptionSchema = function (overrides) {
+        if (overrides === void 0) { overrides = {}; }
+        return (__assign({ $id: '#schema', title: 'Choose schema', oneOf: [
+                {
+                    type: 'object',
+                    title: 'Option A',
+                    properties: {
+                        firstName: {
+                            title: 'First name',
+                            type: 'string',
+                        },
+                        lastName: {
+                            $id: 'last-name-id',
+                            title: 'Last name',
+                            type: 'string',
+                        },
+                    },
+                    required: ['firstName'],
+                    displayOrder: ['firstName', 'lastName'],
+                },
+            ] }, overrides));
+    };
+    var childConstSchema = function (overrides) {
+        if (overrides === void 0) { overrides = {}; }
+        return (__assign({ $id: '#schema', title: 'Choose schema', oneOf: [
+                {
+                    type: 'object',
+                    title: 'Option Zero (0)',
+                    properties: {
+                        a: { type: 'string', const: 'AAAA' },
+                        b: { type: 'string' },
+                    },
+                    required: ['a', 'b'],
+                    displayOrder: ['a', 'b'],
+                },
+                {
+                    type: 'object',
+                    title: 'Option One (1)',
+                    properties: {
+                        b: { type: 'string' },
+                        c: { type: 'string' },
+                        z: { type: 'string' },
+                    },
+                    required: ['b', 'c', 'z'],
+                    displayOrder: ['b', 'c', 'z'],
+                },
+                {
+                    type: 'object',
+                    title: 'Option Two (2)',
+                    properties: {
+                        a: { type: 'string', const: 'BBBB' },
+                        c: { type: 'string' },
+                    },
+                    required: ['a', 'c'],
+                    displayOrder: ['a', 'c'],
+                },
+                {
+                    type: 'object',
+                    title: 'Option Three (3)',
+                    properties: {
+                        d: { type: 'string', const: 'DDDD' },
+                        e: { type: 'string' },
+                    },
+                    required: ['d', 'e'],
+                    displayOrder: ['d', 'e'],
+                },
+            ] }, overrides));
+    };
+    var currencySchema = function (overrides) {
+        if (overrides === void 0) { overrides = {}; }
+        return (__assign({ $id: '#schema', title: 'Currency', type: 'string', oneOf: [
+                { title: 'EUR', description: 'Euro', const: 'EUR' },
+                {
+                    title: 'GBP',
+                    description: 'British pound',
+                    const: 'GBP',
+                },
+                {
+                    title: 'USD',
+                    description: 'United States dollar',
+                    const: 'USD',
+                },
+            ], validationMessages: { required: 'Please enter currency.' } }, overrides));
+    };
+    var nameAddressSchema = function (overrides) {
+        if (overrides === void 0) { overrides = {}; }
+        return (__assign({ $id: '#schema', title: 'Choose schema', control: 'radio', oneOf: [
+                {
+                    type: 'object',
+                    title: 'Option A',
+                    properties: {
+                        firstName: {
+                            title: 'First name',
+                            type: 'string',
+                        },
+                        lastName: {
+                            title: 'Last name',
+                            type: 'string',
+                        },
+                    },
+                    required: ['firstName'],
+                    displayOrder: ['firstName', 'lastName'],
+                },
+                {
+                    type: 'object',
+                    title: 'Option B',
+                    properties: {
+                        address: {
+                            type: 'string',
+                            title: 'Address',
+                        },
+                        city: {
+                            type: 'string',
+                            title: 'City',
+                        },
+                    },
+                    required: [],
+                    displayOrder: ['address', 'city'],
+                },
+            ] }, overrides));
+    };
+    var initialStep = function (schema, model, errors) { return ({
+        id: 'oneof-schema-test-step-id',
+        title: 'OneOf Schema Step Title',
+        layout: [
+            { type: 'form', schemaId: '#schema' },
+            {
+                type: 'button',
+                title: 'Submit',
+                action: { url: '/submit', method: 'POST' },
+            },
+        ],
+        schemas: [schema],
+        model: model || {},
+        errors: errors || { validation: { a: 'error' } },
+    }); };
+    var mockHttpClient = jest.fn();
+    beforeEach(function () { return mockHttpClient.mockClear(); });
+    var getProps = function (schema, model, overrides) {
+        if (model === void 0) { model = undefined; }
+        if (overrides === void 0) { overrides = {}; }
+        return ({
+            flowId: 'oneof-schema-test-flow-id',
+            initialStep: initialStep(schema, model, overrides === null || overrides === void 0 ? void 0 : overrides.errors),
+            httpClient: mockHttpClient,
+            onCompletion: jest.fn(),
+            onError: jest.fn(),
+            onEvent: jest.fn(),
+            onLog: jest.fn(),
+        });
+    };
+    describe('id prop', function () {
+        it('should be the $id in the schema', function () {
+            var props = getProps(oneOptionSchema());
+            renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+            expect(screen.getByLabelText('Last name')).toHaveAttribute('id', 'last-name-id');
+        });
+        it('should be random number if $id is not present in schema', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        props = getProps(nameAddressSchema());
+                        renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                        return [4 /*yield*/, user.click(screen.getByText('Option A'))];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByLabelText('Last name')).toHaveAttribute('id', 'DUMMY_GENERATED_UNIQUE_ID');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('when initialised with multiple schemas', function () {
+        it('should render the schema title in a h4', function () {
+            var props = getProps(threeOptionsSchema(), {}, {});
+            renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+            expect(screen.getByRole('heading', { name: 'OneOf Schema Test' })).toHaveTextContent(threeOptionsSchema().title);
+        });
+        it('should render a select trigger', function () {
+            var props = getProps(threeOptionsSchema(), {}, {});
+            renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+            expect(screen.getByRole('button', { expanded: false })).toBeInTheDocument();
+        });
+        it('should render the schema with a valid model', function () {
+            var props = getProps(threeOptionsSchema(), { c: 45 }, {});
+            renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+            expect(screen.getByText('Option C')).toBeInTheDocument();
+        });
+        describe('when some of the child schemas contain const properties', function () {
+            describe('all child object schemas are identical except for their const schema', function () {
+                var objectSchema = function (type) { return ({
+                    type: 'object',
+                    title: "Option ".concat(type),
+                    required: ['name', 'type'],
+                    displayOrder: ['name', 'type'],
+                    properties: {
+                        name: { title: "Name for ".concat(type), type: 'string' },
+                        type: { const: type },
+                    },
+                }); };
+                var props = getProps({
+                    $id: '#schema',
+                    title: 'Options are AAAA, BBBB, CCCC, DDDD',
+                    oneOf: ['AAAA', 'BBBB', 'CCCC'].map(objectSchema),
+                    control: 'tab',
+                }, { name: 'Bob', type: 'CCCC' });
+                it('should select the schema that is best matched by the model', function () {
+                    renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                    expect(screen.getByText('Name for CCCC')).toBeInTheDocument();
+                    expect(screen.queryByText('Name for AAAA')).not.toBeInTheDocument();
+                    expect(screen.queryByText('Name for BBBB')).not.toBeInTheDocument();
+                });
+            });
+            describe('when the model partially matches one of the child schemas with a const property', function () {
+                var props = getProps(childConstSchema(), { a: 'BBBB' });
+                it('should select the schema that is best matched by the model', function () {
+                    renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                    expect(screen.getByText('Option Two (2)')).toBeInTheDocument();
+                    expect(screen.queryByText('Option Zero (0)')).not.toBeInTheDocument();
+                    expect(screen.queryByText('Option One (1)')).not.toBeInTheDocument();
+                });
+            });
+            describe('when the model partially matches a child schema without a const property', function () {
+                var props = getProps(childConstSchema(), { b: 'whatever', c: 'whatever' });
+                it('should select the schema that is best matched by the model', function () {
+                    renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                    expect(screen.getByText('Option One (1)')).toBeInTheDocument();
+                    expect(screen.queryByText('Option Zero (0)')).not.toBeInTheDocument();
+                    expect(screen.queryByText('Option Two (2)')).not.toBeInTheDocument();
+                });
+            });
+            describe('when the model does not partially match any of the child schemas', function () {
+                var props = getProps(childConstSchema(), { d: 'EEEE' });
+                it('should not select a schema', function () {
+                    renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                    expect(screen.queryByText('Option Zero (0)')).not.toBeInTheDocument();
+                    expect(screen.queryByText('Option One (1)')).not.toBeInTheDocument();
+                    expect(screen.queryByText('Option Two (2)')).not.toBeInTheDocument();
+                    expect(screen.queryByText('Option Three (3)')).not.toBeInTheDocument();
+                });
+            });
+        });
+        describe('when no model is present', function () {
+            describe('and children schemas are non-const', function () {
+                it('should not select a schema', function () {
+                    var props = getProps(threeOptionsSchema());
+                    renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                    expect(screen.queryByText('Option A')).not.toBeInTheDocument();
+                    expect(screen.queryByText('Option B')).not.toBeInTheDocument();
+                    expect(screen.queryByText('Option C')).not.toBeInTheDocument();
+                });
+                describe('and there is a valid default value', function () {
+                    var props = getProps(threeOptionsSchema({ default: { b: 123 } }), {});
+                    it('selects the schema with the valid default value', function () {
+                        renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                        expect(screen.queryByText('Option A')).not.toBeInTheDocument();
+                        expect(screen.getByText('Option B')).toBeInTheDocument();
+                        expect(screen.queryByText('Option C')).not.toBeInTheDocument();
+                    });
+                });
+            });
+            describe('and children schemas are const', function () {
+                describe('and there is a valid default value', function () {
+                    var props = getProps(currencySchema({ default: 'USD' }), {});
+                    it('selects the schema with the valid default value', function () {
+                        renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                        expect(screen.getByText('USD')).toBeInTheDocument();
+                        expect(screen.queryByText('GBP')).not.toBeInTheDocument();
+                        expect(screen.queryByText('EUR')).not.toBeInTheDocument();
+                    });
+                });
+                describe('and there is no valid default value', function () {
+                    var props = getProps(currencySchema(), {});
+                    it('does not select a schema', function () {
+                        renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                        expect(screen.queryByText('USD')).not.toBeInTheDocument();
+                        expect(screen.queryByText('GBP')).not.toBeInTheDocument();
+                        expect(screen.queryByText('EUR')).not.toBeInTheDocument();
+                    });
+                });
+            });
+            describe('and the children schemas are const and hidden, and there is a valid default value', function () {
+                describe('and the control is "select"', function () {
+                    var props = getProps({
+                        $id: '#schema',
+                        type: 'object',
+                        displayOrder: ['currency'],
+                        properties: {
+                            currency: {
+                                title: 'Currency',
+                                oneOf: [
+                                    { title: 'EUR', const: 'EUR', hidden: true },
+                                    { title: 'GBP', const: 'GBP', hidden: true },
+                                    { title: 'USD', const: 'USD', hidden: true },
+                                ],
+                                control: 'select',
+                                default: 'USD',
+                            },
+                        },
+                    }, {});
+                    it('selects the default', function () {
+                        renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                        expect(screen.getByText('USD')).toBeInTheDocument();
+                        expect(screen.queryByText('GBP')).not.toBeInTheDocument();
+                        expect(screen.queryByText('EUR')).not.toBeInTheDocument();
+                    });
+                });
+                describe('and the control is "radio"', function () {
+                    var props = getProps({
+                        $id: '#schema',
+                        type: 'object',
+                        displayOrder: ['currency'],
+                        properties: {
+                            currency: {
+                                title: 'Currency',
+                                oneOf: [
+                                    { title: 'EUR', const: 'EUR', hidden: true },
+                                    { title: 'GBP', const: 'GBP', hidden: true },
+                                ],
+                                control: 'radio',
+                                default: 'GBP',
+                            },
+                        },
+                    }, {});
+                    it('selects the default', function () { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                                    return [4 /*yield*/, waitFor(function () {
+                                            expect(screen.getByLabelText('GBP')).toBeChecked();
+                                        })];
+                                case 1:
+                                    _a.sent();
+                                    expect(screen.getByLabelText('EUR')).not.toBeChecked();
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                });
+            });
+            describe('and the children schemas are const and hidden', function () {
+                describe('and the control is "select"', function () {
+                    var props = getProps({
+                        $id: '#schema',
+                        type: 'object',
+                        displayOrder: ['currency'],
+                        properties: {
+                            currency: {
+                                title: 'Currency',
+                                oneOf: [
+                                    { title: 'EUR', const: 'EUR', hidden: true },
+                                    { title: 'GBP', const: 'GBP', hidden: true },
+                                    { title: 'USD', const: 'USD', hidden: true },
+                                ],
+                                control: 'select',
+                            },
+                        },
+                    }, {});
+                    it('does not select an option', function () {
+                        renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                        expect(screen.queryByText('USD')).not.toBeInTheDocument();
+                        expect(screen.queryByText('GBP')).not.toBeInTheDocument();
+                        expect(screen.queryByText('EUR')).not.toBeInTheDocument();
+                    });
+                });
+                describe('and the control is "radio"', function () {
+                    var props = getProps({
+                        $id: '#schema',
+                        type: 'object',
+                        displayOrder: ['currency'],
+                        properties: {
+                            currency: {
+                                title: 'Currency',
+                                oneOf: [
+                                    { title: 'EUR', const: 'EUR', hidden: true },
+                                    { title: 'GBP', const: 'GBP', hidden: true },
+                                ],
+                                control: 'radio',
+                            },
+                        },
+                    }, {});
+                    it('does not select any of the radio buttons', function () {
+                        renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                        expect(screen.getByLabelText('EUR')).not.toBeChecked();
+                        expect(screen.getByLabelText('GBP')).not.toBeChecked();
+                    });
+                });
+            });
+        });
+        describe('when another schema is selected', function () {
+            var props = getProps(nameAddressSchema(), { firstName: 'Colin', city: 'New York' });
+            it('should updated the rendered schema', function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                            return [4 /*yield*/, user.click(screen.getByText('Option A'))];
+                        case 1:
+                            _a.sent();
+                            expect(screen.getByText('First name')).toBeInTheDocument();
+                            expect(screen.queryByText('Address')).not.toBeInTheDocument();
+                            return [4 /*yield*/, user.click(screen.getByText('Option B'))];
+                        case 2:
+                            _a.sent();
+                            expect(screen.getByText('Address')).toBeInTheDocument();
+                            expect(screen.queryByText('First name')).not.toBeInTheDocument();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should update the model with only the properties in the selected schema', function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                            return [4 /*yield*/, user.click(screen.getByText('Option B'))];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                        case 2:
+                            _a.sent();
+                            return [4 /*yield*/, waitFor(function () {
+                                    expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: JSON.stringify({ city: 'New York' }) }));
+                                })];
+                        case 3:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        describe('when the placeholder or no schema is selected', function () {
+            it('should update the model with null/undefined', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var props;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            props = getProps(nameAddressSchema(), {});
+                            renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                            return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, waitFor(function () { return expect(mockHttpClient).toHaveBeenCalledTimes(1); })];
+                        case 2:
+                            _a.sent();
+                            expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: '{}' }));
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        describe('when the user updates the model in one of the schemas', function () {
+            describe('when the user toggles to another schema, and back again', function () {
+                it('should remember and pass down the changed value', function () { return __awaiter(void 0, void 0, void 0, function () {
+                    var schema, props;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                schema = {
+                                    $id: '#schema',
+                                    title: 'Choose schema',
+                                    control: 'radio',
+                                    oneOf: [
+                                        {
+                                            type: 'object',
+                                            title: 'Option A',
+                                            properties: {
+                                                firstName: {
+                                                    title: 'First name',
+                                                    type: 'string',
+                                                },
+                                                lastName: {
+                                                    title: 'Last name',
+                                                    type: 'string',
+                                                },
+                                            },
+                                            required: ['firstName'],
+                                            displayOrder: ['firstName', 'lastName'],
+                                        },
+                                        {
+                                            type: 'object',
+                                            title: 'Option B',
+                                            properties: {
+                                                address: {
+                                                    type: 'string',
+                                                    title: 'Address',
+                                                },
+                                                city: {
+                                                    type: 'string',
+                                                    title: 'City',
+                                                },
+                                            },
+                                            required: ['address'],
+                                            displayOrder: ['address', 'city'],
+                                        },
+                                    ],
+                                };
+                                props = getProps(schema, { firstName: 'Colin', city: 'New York' });
+                                renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                                return [4 /*yield*/, user.type(screen.getByLabelText('First name'), ' Robinson')];
+                            case 1:
+                                _a.sent();
+                                return [4 /*yield*/, user.click(screen.getByText('Option B'))];
+                            case 2:
+                                _a.sent();
+                                return [4 /*yield*/, user.click(screen.getByText('Option A'))];
+                            case 3:
+                                _a.sent();
+                                expect(screen.getByDisplayValue('Colin Robinson')).toBeInTheDocument();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            });
+        });
+    });
+    describe('when only one schema is supplied', function () {
+        var props = getProps(oneOptionSchema(), {});
+        it('should not render a component to choose between schemas', function () {
+            renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+            expect(screen.queryByText('Option A')).not.toBeInTheDocument();
+            expect(screen.getByText('First name')).toBeInTheDocument();
+            expect(screen.getByText('Last name')).toBeInTheDocument();
+        });
+    });
+    describe('when the choice is from a set of constant values', function () {
+        var props = getProps(currencySchema({ required: ['Currency'], default: 'EUR' }), {});
+        it('should render the schema title in a label', function () {
+            renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+            expect(screen.getByLabelText('Currency')).toBeInTheDocument();
+        });
+        describe('when one option is supplied', function () {
+            var schema = {
+                $id: '#schema',
+                title: 'Choose schema',
+                oneOf: [{ title: 'One', const: 1 }],
+            };
+            var props = getProps(schema);
+            it('should render a select trigger', function () {
+                renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                expect(screen.getByRole('button', { expanded: false })).toBeInTheDocument();
+            });
+        });
+        describe('when the schema is not required', function () {
+            var props = getProps(nameAddressSchema(), {}, { errors: {} });
+            describe('when value exists', function () {
+                it('should not display validation errors', function () { return __awaiter(void 0, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                                return [4 /*yield*/, user.click(screen.getByText('Option B'))];
+                            case 1:
+                                _a.sent();
+                                return [4 /*yield*/, user.type(screen.getByLabelText('City'), 'New York')];
+                            case 2:
+                                _a.sent();
+                                return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                            case 3:
+                                _a.sent();
+                                return [4 /*yield*/, waitFor(function () {
+                                        return expect(screen.queryByText('Please fill out this field.')).not.toBeInTheDocument();
+                                    })];
+                            case 4:
+                                _a.sent();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            });
+            describe('when no value exists', function () {
+                it('should not display validation errors', function () { return __awaiter(void 0, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                                return [4 /*yield*/, user.click(screen.getByText('Option B'))];
+                            case 1:
+                                _a.sent();
+                                return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                            case 2:
+                                _a.sent();
+                                return [4 /*yield*/, waitFor(function () {
+                                        return expect(screen.queryByText('Please fill out this field.')).not.toBeInTheDocument();
+                                    })];
+                            case 3:
+                                _a.sent();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            });
+        });
+        describe('when the schema is required', function () {
+            var props = getProps(nameAddressSchema(), {}, { errors: {} });
+            describe('when no value exists', function () {
+                it('should display validation errors', function () { return __awaiter(void 0, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                                return [4 /*yield*/, user.click(screen.getByText('Option A'))];
+                            case 1:
+                                _a.sent();
+                                return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                            case 2:
+                                _a.sent();
+                                return [4 /*yield*/, expect(screen.findByText('Please fill out this field.')).resolves.toBeInTheDocument()];
+                            case 3:
+                                _a.sent();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            });
+        });
+        describe('when alert exists', function () {
+            var props = getProps(nameAddressSchema({ alert: { context: 'info', markdown: 'some text' } }), {}, {});
+            it('should render the alert above', function () {
+                renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                var title = screen.getByText('Choose schema');
+                var alertText = screen.getByText('some text');
+                expect(alertText).toBeInTheDocument();
+                expect(alertText.compareDocumentPosition(title)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+            });
+        });
+        describe('when help exists', function () {
+            var props = getProps(nameAddressSchema({ help: { markdown: 'This is help!' } }), {}, {});
+            it('should render help popover', function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+                            return [4 /*yield*/, user.click(screen.getByTestId('question-mark-circle-icon'))];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, expect(screen.findByText('This is help!')).resolves.toBeInTheDocument()];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+    });
+    describe('when the schema is rendered as a radio group', function () {
+        it('shows both schema title and description text', function () {
+            var props = getProps(currencySchema({ control: 'radio' }));
+            renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+            expect(screen.getByText('EUR')).toBeInTheDocument();
+            expect(screen.getByText('Euro')).toBeInTheDocument();
+            expect(screen.getByText('USD')).toBeInTheDocument();
+            expect(screen.getByText('United States dollar')).toBeInTheDocument();
+        });
+        it('...even if the length of title + description is longer than 50 chars', function () {
+            var props = getProps({
+                $id: '#schema',
+                title: 'Currency',
+                type: 'string',
+                oneOf: [
+                    {
+                        title: 'A - Title',
+                        description: 'A - Normal length description',
+                        const: 'A',
+                    },
+                    {
+                        title: 'B - Long title long title long title',
+                        description: 'B - Normal length description',
+                        const: 'B',
+                    },
+                ],
+                control: 'radio',
+            });
+            renderWithProviders(_jsx(DynamicFlow, __assign({}, props)));
+            expect(screen.getByText('A - Title')).toBeInTheDocument();
+            expect(screen.getByText('A - Normal length description')).toBeInTheDocument();
+            expect(screen.getByText('B - Long title long title long title')).toBeInTheDocument();
+            expect(screen.getByText('B - Normal length description')).toBeInTheDocument();
+        });
+    });
+});