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

package/build/legacy/jsonSchemaForm/schemaFormControl/SchemaFormControl.spec.js

@@ -0,0 +1,312 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/prefer-stateless-function */
+import { fireEvent, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import * as loggingModule from '../../common/contexts/logContext/LogContext';
+import { mockUseLogger, renderWithProviders } from '../../test-utils';
+import SchemaFormControl from './SchemaFormControl';
+var user = userEvent.setup();
+var mockLogger = mockUseLogger();
+jest.spyOn(loggingModule, 'useLogger').mockImplementation(function () { return mockLogger; });
+beforeEach(function () {
+    Object.values(mockLogger).forEach(function (logger) { return logger.mockClear(); });
+});
+jest.mock('../../formControl/FormControl', function () { return ({
+    __esModule: true,
+    default: function (props) {
+        var keys = [
+            'id',
+            'type',
+            'autoComplete',
+            'displayPattern',
+            'value',
+            'disabled',
+        ];
+        return (_jsxs("div", { "data-testid": "form-control", children: [keys.map(function (key) {
+                    var value = typeof props[key] === 'boolean' ? (props[key] ? 'true' : 'false') : props[key];
+                    return _jsx("div", { children: "".concat(key, ": ").concat(String(value)) }, key);
+                }), _jsx("input", { "data-testid": props.id, type: "text", value: String(props.value), onChange: function (e) { return props.onChange(e.target.value); }, onFocus: props.onFocus, onBlur: props.onBlur })] }));
+    },
+}); });
+var getProps = function () { return ({
+    id: 'id',
+    onChange: jest.fn(),
+    onFocus: jest.fn(),
+    onBlur: jest.fn(),
+    schema: { type: 'string' },
+    value: null,
+}); };
+describe('Given a SchemaFormControl component', function () {
+    var cases = [
+        // String text format
+        [{ type: 'string' }, 'text'],
+        [{ type: 'string', control: 'password' }, 'password'],
+        [{ type: 'string', control: 'textarea' }, 'textarea'],
+        [{ type: 'string', control: 'email' }, 'email'],
+        [{ type: 'string', control: 'numeric' }, 'numeric'],
+        [{ type: 'string', control: 'phone-number' }, 'tel'],
+        // String date format
+        [{ type: 'string', format: 'date' }, 'date'],
+        [{ type: 'string', format: 'date', control: 'date-lookup' }, 'date-lookup'],
+        [{ type: 'string', control: 'date-lookup' }, 'date-lookup'],
+        // Legacy string formats
+        [{ type: 'string', format: 'uri' }, 'text'],
+        [{ type: 'string', format: 'email' }, 'email'],
+        [{ type: 'string', format: 'base64url' }, 'file'],
+        [{ type: 'string', format: 'phone-number' }, 'tel'],
+        [{ type: 'string', format: 'password' }, 'password'],
+        // Legacy string controls
+        [{ type: 'string', control: 'tel' }, 'tel'],
+        [{ type: 'string', control: 'date' }, 'date'],
+        [{ type: 'string', control: 'date-time' }, 'date-time'],
+        [{ type: 'string', control: 'file' }, 'file'],
+        [{ type: 'string', control: 'upload' }, 'upload'],
+        [{ type: 'boolean' }, 'checkbox'],
+        [{ type: 'number' }, 'number'],
+        [{ type: 'integer' }, 'number'],
+        [{ oneOf: [], control: 'tab' }, 'tab'],
+    ];
+    describe.each(cases)('when rendering it with a schema like %s', function (schema, expectedType) {
+        it("renders a FormControl with type: \"".concat(expectedType, "\""), function () {
+            var props = __assign(__assign({}, getProps()), { schema: schema });
+            renderWithProviders(_jsx(SchemaFormControl, __assign({}, props)));
+            expect(screen.getByText("type: ".concat(expectedType))).toBeInTheDocument();
+        });
+    });
+    it('renders a FormControl and pass the id property', function () {
+        var props = __assign(__assign({}, getProps()), { id: 'id_1' });
+        renderWithProviders(_jsx(SchemaFormControl, __assign({}, props)));
+        expect(screen.getByText("id: id_1")).toBeInTheDocument();
+    });
+    it('renders a FormControl with autoComplete=true', function () {
+        var props = __assign({}, getProps());
+        renderWithProviders(_jsx(SchemaFormControl, __assign({}, props)));
+        expect(screen.getByText("autoComplete: true")).toBeInTheDocument();
+    });
+    it('renders a FormControl with displayPattern, if present in the schema', function () {
+        var schema = { type: 'string', displayFormat: '**-**-*' };
+        var props = __assign(__assign({}, getProps()), { schema: schema });
+        renderWithProviders(_jsx(SchemaFormControl, __assign({}, props)));
+        expect(screen.getByText("displayPattern: **-**-*")).toBeInTheDocument();
+    });
+});
+describe('when a schema with oneOf consts is supplied', function () {
+    var cases = [
+        [1, undefined, 'select'],
+        [2, undefined, 'select'],
+        [3, undefined, 'select'],
+        [4, undefined, 'select'],
+        [5, undefined, 'select'],
+        [1, 'radio', 'radio'],
+        [2, 'radio', 'radio'],
+        [3, 'radio', 'radio'],
+        [4, 'radio', 'radio'],
+        [5, 'radio', 'radio'],
+        [1, 'tab', 'tab'],
+        [2, 'tab', 'tab'],
+        [3, 'tab', 'tab'],
+        [4, 'tab', 'select'],
+        [5, 'tab', 'select'],
+    ];
+    describe.each(cases)('when rendering a oneOf schema with %s options and a control: "%s"', function (options, control, expectedType) {
+        it("renders a FormControl with type: \"".concat(expectedType, "\""), function () {
+            var schema = {
+                control: control,
+                oneOf: Array(options)
+                    .fill(null)
+                    .map(function (_, i) { return ({ const: i + 1, title: String(i + 1) }); }),
+            };
+            var props = __assign(__assign({}, getProps()), { schema: schema });
+            renderWithProviders(_jsx(SchemaFormControl, __assign({}, props)));
+            expect(screen.getByText("type: ".concat(expectedType))).toBeInTheDocument();
+        });
+    });
+});
+describe('when a schema with a oneOf with only 2 options and no control property is supplied', function () {
+    var getSchema = function () { return ({
+        $id: 'one-of',
+        oneOf: [
+            { type: 'string', const: 'A' },
+            { type: 'string', const: 'B' },
+        ],
+    }); };
+    it('logs a warning', function () {
+        renderWithProviders(_jsx(SchemaFormControl, __assign({}, getProps(), { schema: getSchema() })));
+        expect(mockLogger.warning).toHaveBeenCalledWith('Deprecation warning', expect.anything());
+        expect(mockLogger.warning).toHaveBeenCalledTimes(1);
+    });
+    describe('when the component is re-rendered with an identical schema', function () {
+        it('only logs a warning one time', function () {
+            var rerender = renderWithProviders(_jsx(SchemaFormControl, __assign({}, getProps(), { schema: getSchema() }))).rerender;
+            expect(mockLogger.warning).toHaveBeenCalledTimes(1);
+            rerender(_jsx(SchemaFormControl, __assign({}, getProps(), { schema: getSchema() })));
+            expect(mockLogger.warning).toHaveBeenCalledTimes(1);
+        });
+    });
+});
+describe('schema control property', function () {
+    describe('when a schema has a control value', function () {
+        it('overrides the default and renders FormControl with the specified control as type prop', function () {
+            var schema = {
+                oneOf: [
+                    { const: 1, title: '1' },
+                    { const: 2, title: '2' },
+                ],
+                control: 'select',
+            };
+            var props = __assign(__assign({}, getProps()), { schema: schema });
+            renderWithProviders(_jsx(SchemaFormControl, __assign({}, props)));
+            expect(screen.getByText('type: select')).toBeInTheDocument();
+        });
+    });
+});
+describe('when the schema contains help information', function () {
+    it('disables autoComplete', function () {
+        var schema = { type: 'string', help: { markdown: 'help!' } };
+        var props = __assign(__assign({}, getProps()), { schema: schema });
+        renderWithProviders(_jsx(SchemaFormControl, __assign({}, props)));
+        expect(screen.getByText('autoComplete: false')).toBeInTheDocument();
+    });
+});
+describe('when a null value is passed in', function () {
+    it('passes an empty string to FormControl', function () {
+        var props = __assign(__assign({}, getProps()), { value: null });
+        renderWithProviders(_jsx(SchemaFormControl, __assign({}, props)));
+        expect(screen.getByText('value:')).toBeInTheDocument();
+    });
+});
+describe('disabled property', function () {
+    describe('when props contain disabled property', function () {
+        describe('when disabled through component props', function () {
+            it('passes down disabled to the FormControl', function () {
+                var props = __assign(__assign({}, getProps()), { disabled: true });
+                renderWithProviders(_jsx(SchemaFormControl, __assign({}, props)));
+                expect(screen.getByText('disabled: true')).toBeInTheDocument();
+            });
+        });
+        describe('when disabled through schema', function () {
+            it('passes down disabled to the FormControl', function () {
+                var schema = { type: 'string', disabled: true };
+                var props = __assign(__assign({}, getProps()), { schema: schema });
+                renderWithProviders(_jsx(SchemaFormControl, __assign({}, props)));
+                expect(screen.getByText('disabled: true')).toBeInTheDocument();
+            });
+        });
+        describe('when disabled both through component props and schema', function () {
+            it('passes down disabled to the FormControl', function () {
+                var schema = { type: 'string', disabled: true };
+                var props = __assign(__assign({}, getProps()), { schema: schema, disabled: true });
+                renderWithProviders(_jsx(SchemaFormControl, __assign({}, props)));
+                expect(screen.getByText('disabled: true')).toBeInTheDocument();
+            });
+        });
+    });
+});
+describe('onChange', function () {
+    describe('when the FormControl triggers onChange', function () {
+        it('should trigger the components onChange handler', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onChange, props;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onChange = jest.fn();
+                        props = __assign(__assign({}, getProps()), { onChange: onChange });
+                        renderWithProviders(_jsx(SchemaFormControl, __assign({}, props)));
+                        return [4 /*yield*/, user.click(screen.getByRole('textbox'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.paste('test')];
+                    case 2:
+                        _a.sent();
+                        expect(onChange).toHaveBeenCalledWith('test', undefined, undefined);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('when the FormControl triggers onChange with an invalid value', function () {
+        it('should trigger the components onChange handler with null', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onChange, schema, props;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onChange = jest.fn();
+                        schema = { type: 'number' };
+                        props = __assign(__assign({}, getProps()), { schema: schema, onChange: onChange });
+                        renderWithProviders(_jsx(SchemaFormControl, __assign({}, props)));
+                        return [4 /*yield*/, user.type(screen.getByRole('textbox'), 'test')];
+                    case 1:
+                        _a.sent();
+                        expect(onChange).toHaveBeenCalledWith(null, undefined, undefined);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('when the FormControl trigger onFocus', function () {
+        it('should trigger the components onFocus handler', function () {
+            var onFocus = jest.fn();
+            var props = __assign(__assign({}, getProps()), { onFocus: onFocus });
+            renderWithProviders(_jsx(SchemaFormControl, __assign({}, props)));
+            fireEvent.focus(screen.getByRole('textbox'));
+            expect(onFocus).toHaveBeenCalledTimes(1);
+        });
+    });
+    describe('when the FormControl trigger onBlur', function () {
+        it('should trigger the components onBlur handler', function () {
+            var onBlur = jest.fn();
+            var props = __assign(__assign({}, getProps()), { onBlur: onBlur });
+            renderWithProviders(_jsx(SchemaFormControl, __assign({}, props)));
+            fireEvent.blur(screen.getByRole('textbox'));
+            expect(onBlur).toHaveBeenCalledTimes(1);
+        });
+    });
+});

package/build/legacy/jsonSchemaForm/schemaFormControl/index.js

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

package/build/legacy/jsonSchemaForm/schemaFormControl/utils/index.js

@@ -0,0 +1 @@
+export * from './mapping-utils';

package/build/legacy/jsonSchemaForm/schemaFormControl/utils/mapping-utils.js

@@ -0,0 +1,107 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar, AvatarType } from '@transferwise/components';
+import { Flag } from '@wise/art';
+import { isArray, isNull, isUndefined } from '../../../common/validators';
+import DynamicIcon, { isValidIconName } from '../../../layout/icon/DynamicIcon';
+import { isFlagIcon } from '../../../layout/icon/FlagIcon';
+var mapConstSchemaToOption = function (schema, controlType) {
+    switch (controlType) {
+        case 'select':
+            return mapConstSchemaToSelectOption(schema);
+        case 'radio':
+        default:
+            return mapConstSchemaToRadioOption(schema);
+    }
+};
+var mapConstSchemaToRadioOption = function (schema) { return (__assign(__assign(__assign({ 
+    // TODO: LOW avoid type assertion -- using || '' would fail some tests
+    label: schema.title, value: schema.const }, getRadioOptionDescription(schema.title, schema.description)), getAvatarPropertyForRadioOption(schema)), getDisabled(schema.disabled))); };
+var mapConstSchemaToSelectOption = function (schema) { return (__assign(__assign(__assign(__assign(__assign({ 
+    // TODO: LOW avoid type assertion -- using || '' would fail some tests
+    label: schema.title, value: schema.const }, getOptionDescription(schema.title, schema.description)), getIconPropertyForSelectOption(schema.icon)), mapImage(schema.image)), getDisabled(schema.disabled)), mapKeywordsToSearchStrings(schema.keywords))); };
+var mapKeywordsToSearchStrings = function (searchStrings) {
+    return isArray(searchStrings) ? { searchStrings: searchStrings } : {};
+};
+var mapImage = function (image) {
+    if (image === null || image === void 0 ? void 0 : image.url) {
+        return {
+            icon: (_jsx("div", { className: "media", children: _jsx("div", { className: "np-option__no-media-circle", children: _jsx("img", { src: image.url, alt: image.name || '' }) }) })),
+            hideIconInTrigger: true,
+        };
+    }
+    return null;
+};
+var getIconPropertyForSelectOption = function (icon) {
+    if ((icon === null || icon === void 0 ? void 0 : icon.name) && isFlagIcon(icon.name)) {
+        return {
+            icon: _jsx(Flag, { code: icon.name.substring(5), intrinsicSize: 24 }),
+        };
+    }
+    if ((icon === null || icon === void 0 ? void 0 : icon.name) && isValidIconName(icon.name)) {
+        return {
+            icon: _jsx(DynamicIcon, { type: icon.name }),
+        };
+    }
+    if (icon === null || icon === void 0 ? void 0 : icon.text) {
+        return {
+            icon: _jsx("span", { children: icon.text }),
+        };
+    }
+    return null;
+};
+var getAvatarPropertyForRadioOption = function (_a) {
+    var image = _a.image, icon = _a.icon;
+    if (image === null || image === void 0 ? void 0 : image.url) {
+        return {
+            avatar: (_jsx(Avatar, { type: AvatarType.THUMBNAIL, children: _jsx("img", { src: image.url, alt: "" }) })),
+        };
+    }
+    if ((icon === null || icon === void 0 ? void 0 : icon.name) && isValidIconName(icon.name)) {
+        return {
+            avatar: (_jsx(Avatar, { type: AvatarType.ICON, children: _jsx(DynamicIcon, { type: icon.name }) })),
+        };
+    }
+    if (icon === null || icon === void 0 ? void 0 : icon.text) {
+        return {
+            avatar: _jsx(Avatar, { type: AvatarType.INITIALS, children: icon.text }),
+        };
+    }
+    return null;
+};
+var mapSchemaToUploadOptions = function (_a) {
+    var accepts = _a.accepts;
+    return (__assign({}, (isArray(accepts) && { usAccept: accepts.join(',') })));
+};
+var getOptionDescription = function (title, description) {
+    if (title && description) {
+        if ((title + description).length > 50) {
+            return { secondary: description };
+        }
+        return { note: description };
+    }
+    return undefined;
+};
+var getRadioOptionDescription = function (title, description) {
+    if (title && description) {
+        return { note: description };
+    }
+    return undefined;
+};
+var getDisabled = function (disabled) {
+    if (!isUndefined(disabled) && !isNull(disabled)) {
+        return { disabled: disabled };
+    }
+    return undefined;
+};
+export { mapConstSchemaToOption, getAvatarPropertyForRadioOption, mapSchemaToUploadOptions };

package/build/legacy/jsonSchemaForm/schemaFormControl/utils/mapping-utils.spec.js

@@ -0,0 +1,220 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { render } from '@testing-library/react';
+import { Avatar } from '@transferwise/components';
+import { Flag } from '@wise/art';
+import { DynamicIcon } from '../../../layout';
+import { mapConstSchemaToOption, getAvatarPropertyForRadioOption, } from './mapping-utils';
+describe('mapConstSchemaToOption', function () {
+    describe('when mapping a schema with an icon', function () {
+        var schema = {
+            title: 'Emoji Option',
+            icon: {
+                name: 'emoji',
+                type: 'icon',
+            },
+            const: 'emoji-option',
+        };
+        describe('when the controlType is "radio"', function () {
+            it('maps the "icon" to the "avatar" property', function () {
+                var mapped = mapConstSchemaToOption(schema, 'radio');
+                expect(mapped).toMatchObject({
+                    label: 'Emoji Option',
+                    value: 'emoji-option',
+                    avatar: expect.anything(),
+                });
+            });
+            describe('and when the icon has a "name" property', function () {
+                it('uses an Avatar of type "icon" with an Avatar and a DynamicIcon', function () {
+                    var mapped = mapConstSchemaToOption(schema, 'radio');
+                    expect(mapped).toMatchObject({
+                        label: 'Emoji Option',
+                        value: 'emoji-option',
+                        avatar: expect.anything(),
+                    });
+                    expect(mapped.avatar).toStrictEqual(_jsx(Avatar, { type: "icon", children: _jsx(DynamicIcon, { type: "emoji" }) }));
+                });
+            });
+            describe('and when the icon has a "text" property', function () {
+                it('uses an Avatar of type "initials" with the string text', function () {
+                    var mapped = mapConstSchemaToOption(__assign(__assign({}, schema), { icon: { text: 'JJ' } }), 'radio');
+                    expect(mapped.avatar).toStrictEqual(_jsx(Avatar, { type: "initials", children: "JJ" }));
+                });
+            });
+        });
+        describe('when the controlType is "select"', function () {
+            it('maps the "icon" to the "icon" property', function () {
+                var mapped = mapConstSchemaToOption(schema, 'select');
+                expect(mapped).toMatchObject({
+                    label: 'Emoji Option',
+                    value: 'emoji-option',
+                    icon: expect.anything(),
+                });
+            });
+            describe('and when the icon has a "name" property and the controlType is "select"', function () {
+                it('uses a DynamicIcon', function () {
+                    var mapped = mapConstSchemaToOption(schema, 'select');
+                    expect(mapped.icon).toStrictEqual(_jsx(DynamicIcon, { type: "emoji" }));
+                });
+            });
+            describe('and when the icon has a "text" property', function () {
+                it('uses a <span> with the string text', function () {
+                    var mapped = mapConstSchemaToOption(__assign(__assign({}, schema), { icon: { text: 'JJ' } }), 'select');
+                    expect(mapped.icon).toStrictEqual(_jsx("span", { children: "JJ" }));
+                });
+            });
+            describe('when icon name is a supported currency flag and the controlType is "select"', function () {
+                it('converts to a Flag component', function () {
+                    var schema = {
+                        title: 'GBP',
+                        icon: { name: 'flag-gbp' },
+                        const: 'GBP',
+                    };
+                    var mapped = mapConstSchemaToOption(schema, 'select');
+                    expect(mapped).toMatchObject({ icon: _jsx(Flag, { code: "gbp", intrinsicSize: 24 }) });
+                });
+            });
+            describe('when the title and description are longer than 50 characters', function () {
+                it('maps "description" to the "secondary" property', function () {
+                    var mapped = mapConstSchemaToOption({
+                        title: 'Some Very Long Title',
+                        description: 'The description here is even longer.',
+                        const: 'option-2',
+                    }, 'select');
+                    expect(mapped).toMatchObject({
+                        label: 'Some Very Long Title',
+                        secondary: 'The description here is even longer.',
+                        value: 'option-2',
+                    });
+                });
+            });
+            describe('when the title and description are 50 characters or less', function () {
+                it('maps "description" to the "note" property', function () {
+                    var mapped = mapConstSchemaToOption({
+                        title: "Title's 16 chars",
+                        description: 'This description is not too short.',
+                        const: 'option-1',
+                    }, 'select');
+                    expect(mapped).toMatchObject({
+                        label: "Title's 16 chars",
+                        note: 'This description is not too short.',
+                        value: 'option-1',
+                    });
+                });
+            });
+        });
+    });
+    describe('when mapping a schema with an image', function () {
+        var schema = {
+            title: 'Emoji Option',
+            image: {
+                url: 'https://placeholder.pic/',
+                type: 'image',
+            },
+            const: 'emoji-option',
+        };
+        describe('when the controlType is "radio"', function () {
+            it('maps the "icon" to the "avatar" property', function () {
+                var mapped = mapConstSchemaToOption(schema, 'radio');
+                expect(mapped).toMatchObject({
+                    label: 'Emoji Option',
+                    value: 'emoji-option',
+                    avatar: expect.anything(),
+                });
+            });
+        });
+        describe('when the controlType is "select"', function () {
+            it('maps the "icon" to the "icon" property', function () {
+                var mapped = mapConstSchemaToOption(schema, 'select');
+                expect(mapped).toMatchObject({
+                    label: 'Emoji Option',
+                    value: 'emoji-option',
+                    icon: expect.anything(),
+                });
+            });
+        });
+    });
+});
+describe('getAvatarPropertyForRadioOption', function () {
+    describe('given an existing icon', function () {
+        it("returns an { avatar } object with an Avatar and a DynamicIcon", function () {
+            var iconName = 'bank';
+            var result = getAvatarPropertyForRadioOption({
+                icon: { name: iconName },
+            });
+            expect(result === null || result === void 0 ? void 0 : result.avatar).toStrictEqual(_jsx(Avatar, { type: "icon", children: _jsx(DynamicIcon, { type: iconName }) }));
+        });
+    });
+    describe('given a valid currency flag icon', function () {
+        it("returns an { avatar } object with an Avatar and a DynamicIcon", function () {
+            var iconName = 'flag-usd';
+            var result = getAvatarPropertyForRadioOption({
+                icon: { name: iconName },
+            });
+            expect(result === null || result === void 0 ? void 0 : result.avatar).toStrictEqual(_jsx(Avatar, { type: "icon", children: _jsx(DynamicIcon, { type: iconName }) }));
+        });
+    });
+    describe('given an unrecognised icon', function () {
+        it('returns null', function () {
+            var result = getAvatarPropertyForRadioOption({
+                icon: { name: 'unknown' },
+            });
+            expect(result).toBeNull();
+        });
+    });
+    describe('given an image url', function () {
+        it('returns an { avatar } object with an image node', function () {
+            var image = { url: 'someURL' };
+            var result = getAvatarPropertyForRadioOption({ image: image });
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+            var getByRole = render(result === null || result === void 0 ? void 0 : result.avatar).getByRole;
+            // eslint-disable-next-line testing-library/prefer-screen-queries
+            expect(getByRole('img')).toHaveAttribute('src', 'someURL');
+        });
+    });
+    describe('given a malformed image', function () {
+        it('returns null', function () {
+            var image = { something: 'unknown' };
+            var result = getAvatarPropertyForRadioOption({ image: image });
+            expect(result).toBeNull();
+        });
+    });
+    describe('given a null-ish icon object', function () {
+        it('returns null', function () {
+            var result = getAvatarPropertyForRadioOption({ icon: undefined });
+            expect(result).toBeNull();
+        });
+    });
+    describe('given a null-ish image object', function () {
+        it('returns null', function () {
+            var result = getAvatarPropertyForRadioOption({ image: undefined });
+            expect(result).toBeNull();
+        });
+    });
+    describe('given both an image and an icon', function () {
+        it('returns an { avatar } object with an image (image takes precendence over icon)', function () {
+            var result = getAvatarPropertyForRadioOption({
+                image: { url: 'someURL' },
+                icon: { name: 'bank' },
+            });
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+            var getByRole = render(result === null || result === void 0 ? void 0 : result.avatar).getByRole;
+            // eslint-disable-next-line testing-library/prefer-screen-queries
+            expect(getByRole('img')).toHaveAttribute('src', 'someURL');
+        });
+    });
+});
+describe('mapSchemaToUploadOptions', function () {
+    // TODO
+});