@steroidsjs/core 3.1.8 → 3.1.9

package/tests/ui/form/PhoneField/PhoneField.test.js

@@ -0,0 +1,240 @@
+"use strict";
+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 };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+require("@testing-library/jest-dom");
+var dom_1 = require("@testing-library/dom");
+var react_1 = require("@testing-library/react");
+var PhoneFieldMockView_1 = __importDefault(require("./PhoneFieldMockView"));
+var PhoneField_1 = __importDefault(require("../../../../src/ui/form/PhoneField/PhoneField"));
+var helpers_1 = require("../../../helpers");
+describe('PhoneField tests', function () {
+    var mockPhoneMasks = [
+        {
+            id: 'RU',
+            label: 'Россия',
+            phoneCode: '+7',
+            phoneMask: ['+', '7', ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, '-', /\d/, /\d/]
+        },
+        {
+            id: 'US',
+            label: 'США',
+            phoneCode: '+1',
+            phoneMask: ['+', '1', ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/]
+        },
+    ];
+    var props = {
+        view: PhoneFieldMockView_1["default"],
+        attribute: 'phone',
+        value: '',
+        onChange: jest.fn(),
+        initialCountryCode: 'RU',
+        phoneMasks: mockPhoneMasks,
+        showClear: true,
+        className: 'externalClass',
+        placeholder: 'placeholder',
+        size: 'sm',
+        inputProps: {
+            name: 'phone'
+        }
+    };
+    var expectedPhoneFieldClass = 'PhoneFieldView';
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PhoneField_1["default"], props)).container;
+        var phoneField = (0, helpers_1.getElementByClassName)(container, expectedPhoneFieldClass);
+        expect(phoneField).toBeInTheDocument();
+    });
+    it('should have correct attributes', function () {
+        var _a;
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PhoneField_1["default"], props)).container;
+        var input = (0, helpers_1.getElementByTag)(container, 'input');
+        expect(input).toHaveAttribute('name', (_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.name);
+        expect(input).toHaveAttribute('placeholder', props.placeholder);
+    });
+    it('should have external class', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PhoneField_1["default"], props)).container;
+        var phoneField = (0, helpers_1.getElementByClassName)(container, expectedPhoneFieldClass);
+        expect(phoneField).toHaveClass(props.className);
+    });
+    it('should have correct classes', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PhoneField_1["default"], props)).container;
+        var phoneField = (0, helpers_1.getElementByClassName)(container, expectedPhoneFieldClass);
+        expect(phoneField).toHaveClass(expectedPhoneFieldClass);
+        expect(phoneField).toHaveClass("".concat(expectedPhoneFieldClass, "_size_sm"));
+        expect(phoneField).toHaveClass("".concat(expectedPhoneFieldClass, "_hasClearIcon"));
+    });
+    it('should have icons', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PhoneField_1["default"], __assign(__assign({}, props), { value: '+7 999 123 45-67' }))).container;
+        var clearIcon = (0, helpers_1.getElementByClassName)(container, "".concat(expectedPhoneFieldClass, "__icon-clear"));
+        var addonBefore = (0, helpers_1.getElementByClassName)(container, "".concat(expectedPhoneFieldClass, "__addon-before"));
+        expect(clearIcon).toBeInTheDocument();
+        expect(addonBefore).toBeInTheDocument();
+    });
+    it('should show clear icon when showClear is true and input has value', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PhoneField_1["default"], __assign(__assign({}, props), { showClear: true, value: '+7 999 123 45-67' }))).container;
+        var clearIcon = (0, helpers_1.getElementByClassName)(container, "".concat(expectedPhoneFieldClass, "__icon-clear"));
+        expect(clearIcon).toBeInTheDocument();
+    });
+    it('should not show clear icon when showClear is false', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PhoneField_1["default"], __assign(__assign({}, props), { showClear: false, value: '+7 999 123 45-67' }))).container;
+        var clearIcon = container.querySelector(".".concat(expectedPhoneFieldClass, "__icon-clear"));
+        expect(clearIcon).not.toBeInTheDocument();
+    });
+    it('should clear field on clear icon click', function () {
+        var onChange = jest.fn();
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PhoneField_1["default"], __assign(__assign({}, props), { showClear: true, value: '+7 999 123 45-67', onChange: onChange }))).container;
+        var clearIcon = (0, helpers_1.getElementByClassName)(container, "".concat(expectedPhoneFieldClass, "__icon-clear"));
+        dom_1.fireEvent.click(clearIcon);
+        expect(onChange).toHaveBeenCalledWith('');
+    });
+    it('should apply phone mask on input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var expectedFormatted, onChange, container, input, lastCallValue;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    expectedFormatted = '+7 999 123 45-67';
+                    onChange = jest.fn();
+                    container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PhoneField_1["default"], __assign(__assign({}, props), { onChange: onChange }))).container;
+                    input = (0, helpers_1.getElementByClassName)(container, "".concat(expectedPhoneFieldClass, "__input"));
+                    dom_1.fireEvent.input(input, {
+                        target: {
+                            value: '79991234567'
+                        }
+                    });
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(onChange).toHaveBeenCalled();
+                        })];
+                case 1:
+                    _b.sent();
+                    lastCallValue = (_a = onChange.mock.calls[onChange.mock.calls.length - 1]) === null || _a === void 0 ? void 0 : _a[0];
+                    expect(lastCallValue).toBe(expectedFormatted);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should limit input by mask when extra digits are entered', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var expectedFormatted, onChange, container, input, lastCallValue;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    expectedFormatted = '+7 999 123 45-67';
+                    onChange = jest.fn();
+                    container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PhoneField_1["default"], __assign(__assign({}, props), { onChange: onChange }))).container;
+                    input = (0, helpers_1.getElementByClassName)(container, "".concat(expectedPhoneFieldClass, "__input"));
+                    dom_1.fireEvent.input(input, {
+                        target: {
+                            value: '79991234567890123'
+                        }
+                    });
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(onChange).toHaveBeenCalled();
+                        })];
+                case 1:
+                    _b.sent();
+                    lastCallValue = (_a = onChange.mock.calls[onChange.mock.calls.length - 1]) === null || _a === void 0 ? void 0 : _a[0];
+                    expect(lastCallValue).toBe(expectedFormatted);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should have filled class after typing', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PhoneField_1["default"], props)).container;
+        var input = (0, helpers_1.getElementByClassName)(container, "".concat(expectedPhoneFieldClass, "__input"));
+        dom_1.fireEvent.change(input, {
+            target: {
+                value: 'test'
+            }
+        });
+        (0, react_1.waitFor)(function () {
+            var phoneField = (0, helpers_1.getElementByClassName)(container, expectedPhoneFieldClass);
+            expect(phoneField).toHaveClass("".concat(expectedPhoneFieldClass, "_filled"));
+        });
+    });
+    it('should be disabled', function () {
+        var expectedDisabledPhoneFieldClassName = 'PhoneFieldView_disabled';
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PhoneField_1["default"], __assign(__assign({}, props), { disabled: true }))).container;
+        var input = (0, helpers_1.getElementByClassName)(container, "".concat(expectedPhoneFieldClass, "__input"));
+        expect(input).toHaveAttribute('disabled');
+        dom_1.fireEvent.change(input, {
+            target: {
+                value: 'test'
+            }
+        });
+        (0, react_1.waitFor)(function () {
+            var phoneField = (0, helpers_1.getElementByClassName)(container, expectedPhoneFieldClass);
+            expect(phoneField).toHaveClass(expectedDisabledPhoneFieldClassName);
+        });
+    });
+    it('should clear input when country is changed', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onChange, _a, container, getByText, selectedItems, lastCall, clearedValue;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    onChange = jest.fn();
+                    _a = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(PhoneField_1["default"], __assign(__assign({}, props), { value: '+7 999 123 45-67', onChange: onChange }), true)), container = _a.container, getByText = _a.getByText;
+                    selectedItems = (0, helpers_1.getElementByClassName)(container, 'DropDownCountrySelectView__selected-items');
+                    dom_1.fireEvent.click(selectedItems);
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(getByText('США')).toBeInTheDocument();
+                        })];
+                case 1:
+                    _b.sent();
+                    dom_1.fireEvent.click(getByText('США'));
+                    lastCall = onChange.mock.calls[onChange.mock.calls.length - 1];
+                    clearedValue = lastCall.length === 2 ? lastCall[1] : lastCall[0];
+                    expect(clearedValue).toBe('');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/tests/ui/form/PhoneField/PhoneFieldMockView.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IPhoneFieldViewProps } from '../../../../src/ui/form/PhoneField/PhoneField';
+declare function PhoneFieldView(props: IPhoneFieldViewProps): JSX.Element;
+export default PhoneFieldView;

package/tests/ui/form/PhoneField/PhoneFieldMockView.js

@@ -0,0 +1,35 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var DropDownCountrySelectMockView_1 = __importDefault(require("./DropDownCountrySelectMockView"));
+var hooks_1 = require("../../../../src/hooks");
+var useUniqueId_1 = __importDefault(require("../../../../src/hooks/useUniqueId"));
+var content_1 = require("../../../../src/ui/content");
+function PhoneFieldView(props) {
+    var bem = (0, hooks_1.useBem)('PhoneFieldView');
+    var id = (0, useUniqueId_1["default"])('phoneField');
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem(bem.block({
+            disabled: props.disabled,
+            size: props.size,
+            hasError: !!props.errors,
+            hasClearIcon: props.showClear && !props.disabled,
+            filled: !!props.inputProps.value || !!props.input.value
+        }), props.className), style: props.style }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: bem.element('input-wrapper') }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: bem.element('addon-before') }, { children: (0, jsx_runtime_1.jsx)(DropDownCountrySelectMockView_1["default"], __assign({}, props.dropDownProps, { disabled: props.disabled })) })), (0, jsx_runtime_1.jsx)("input", __assign({ onBlur: props.onBlur, onFocus: props.onFocus, onMouseDown: props.onMouseDown, className: bem.element('input', {
+                        size: props.size
+                    }) }, props.inputProps, { placeholder: props.inputProps.placeholder, disabled: props.disabled, required: props.required, id: id, ref: props.inputRef })), !props.disabled && props.showClear && !!props.inputProps.value && ((0, jsx_runtime_1.jsx)(content_1.Icon, { name: 'cross_8x8', className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear }))] })) })));
+}
+exports["default"] = PhoneFieldView;

package/tests/ui/form/RadioField/RadioField.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tests/ui/form/RadioField/RadioField.test.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+require("@testing-library/jest-dom");
+var RadioFieldMockView_1 = __importDefault(require("./RadioFieldMockView"));
+var RadioField_1 = __importDefault(require("../../../../src/ui/form/RadioField/RadioField"));
+var helpers_1 = require("../../../helpers");
+describe('RadioField tests', function () {
+    var expectedRadioFieldClassName = 'RadioFieldView';
+    var externalClassName = 'test-class';
+    var props = {
+        view: RadioFieldMockView_1["default"],
+        className: externalClassName,
+        size: 'lg'
+    };
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(RadioField_1["default"], props)).container;
+        var radioField = (0, helpers_1.getElementByClassName)(container, expectedRadioFieldClassName);
+        expect(radioField).toBeInTheDocument();
+    });
+    it('should have external className and styles', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(RadioField_1["default"], props)).container;
+        var radioField = (0, helpers_1.getElementByClassName)(container, expectedRadioFieldClassName);
+        expect(radioField).toHaveClass(externalClassName);
+    });
+});

package/tests/ui/form/RadioField/RadioFieldMockView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ICheckboxFieldProps } from '../../../../src/ui/form/CheckboxField/CheckboxField';
+export default function RadioFieldView(props: ICheckboxFieldProps): JSX.Element;

package/tests/ui/form/RadioField/RadioFieldMockView.js

@@ -0,0 +1,32 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+var hooks_1 = require("../../../../src/hooks");
+var useUniqueId_1 = __importDefault(require("../../../../src/hooks/useUniqueId"));
+function RadioFieldView(props) {
+    var bem = (0, hooks_1.useBem)('RadioFieldView');
+    var id = (0, useUniqueId_1["default"])('radio');
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem(bem.block({
+            hasError: !!props.errors,
+            size: props.size
+        }), props.className), onClick: props.onChange }, { children: [(0, jsx_runtime_1.jsx)("input", __assign({ className: bem(bem.element('input', {
+                    checked: props.checked
+                })), id: props.id || id }, props.inputProps, { checked: props.checked, disabled: props.disabled, required: props.required })), (0, jsx_runtime_1.jsxs)("label", __assign({ className: bem.element('label'), htmlFor: props.id || id }, { children: [(0, jsx_runtime_1.jsx)("span", { className: bem.element('ellipse') }), props.label] }))] })));
+}
+exports["default"] = RadioFieldView;

package/tests/ui/form/RadioListField/RadioListField.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tests/ui/form/RadioListField/RadioListField.test.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+require("@testing-library/jest-dom");
+var RadioListFieldMockView_1 = __importDefault(require("./RadioListFieldMockView"));
+var RadioListField_1 = __importDefault(require("../../../../src/ui/form/RadioListField/RadioListField"));
+var helpers_1 = require("../../../helpers");
+describe('RadioListField tests', function () {
+    var radioLabel = 'radioLabel';
+    var props = {
+        className: 'test-class',
+        view: RadioListFieldMockView_1["default"],
+        items: [
+            {
+                id: 1,
+                label: radioLabel
+            },
+        ]
+    };
+    var expectedRadioListFieldClass = 'RadioListFieldView';
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(RadioListField_1["default"], props)).container;
+        var radioListField = (0, helpers_1.getElementByClassName)(container, expectedRadioListFieldClass);
+        expect(radioListField).toBeInTheDocument();
+    });
+    it('should have external class', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(RadioListField_1["default"], props)).container;
+        var radioListFieldItem = (0, helpers_1.getElementByClassName)(container, "".concat(expectedRadioListFieldClass));
+        expect(radioListFieldItem).toHaveClass(props.className);
+    });
+    it('should have correct type', function () {
+        var _a = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(RadioListField_1["default"], props)), container = _a.container, debug = _a.debug;
+        var input = (0, helpers_1.getElementByTag)(container, 'input');
+        expect(input).toHaveAttribute('type', 'radio');
+    });
+    it('should have correct label', function () {
+        var getByText = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(RadioListField_1["default"], props)).getByText;
+        var label = getByText(radioLabel);
+        expect(label).toBeInTheDocument();
+    });
+});

package/tests/ui/form/RadioListField/RadioListFieldMockView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ICheckboxListFieldViewProps } from '../../../../src/ui/form/CheckboxListField/CheckboxListField';
+export default function RadioListFieldView(props: ICheckboxListFieldViewProps): JSX.Element;

package/tests/ui/form/RadioListField/RadioListFieldMockView.js

@@ -0,0 +1,43 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var hooks_1 = require("../../../../src/hooks");
+var useUniqueId_1 = __importDefault(require("../../../../src/hooks/useUniqueId"));
+function RadioListFieldView(props) {
+    var _a;
+    var bem = (0, hooks_1.useBem)('RadioListFieldView');
+    var prefix = (0, useUniqueId_1["default"])('radio');
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: bem(bem.block((_a = {},
+            _a["".concat(props.orientation)] = !!props.orientation,
+            _a)), props.className) }, { children: props.items.map(function (radio, radioIndex) { return props.renderItem({
+            key: radioIndex,
+            id: "".concat(prefix, "_").concat(radio.id),
+            label: radio.label,
+            inputProps: {
+                name: "".concat(prefix, "_").concat(radio.id),
+                type: 'radio',
+                checked: props.selectedIds.includes(radio.id),
+                onChange: function () {
+                    props.onItemSelect(radio.id);
+                },
+                disabled: props.disabled || radio.disabled
+            },
+            size: radio.size || props.size,
+            required: radio.required
+        }); }) })));
+}
+exports["default"] = RadioListFieldView;

package/tests/ui/form/RateField/RateField.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tests/ui/form/RateField/RateField.test.js

@@ -0,0 +1,84 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+require("@testing-library/jest-dom");
+var dom_1 = require("@testing-library/dom");
+var RateField_1 = __importDefault(require("../../../../src/ui/form/RateField/RateField"));
+var helpers_1 = require("../../../helpers");
+describe('RateField', function () {
+    var expectedRateFieldClassName = 'RateFieldView';
+    var externalClass = 'external-class';
+    var externalStyle = {
+        width: '30px'
+    };
+    var props = {
+        className: externalClass,
+        style: externalStyle,
+        size: 'lg'
+    };
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(RateField_1["default"], props)).container;
+        var rateField = (0, helpers_1.getElementByClassName)(container, expectedRateFieldClassName);
+        expect(rateField).toBeInTheDocument();
+    });
+    it('should have correct size', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(RateField_1["default"], props)).container;
+        var rateField = (0, helpers_1.getElementByClassName)(container, expectedRateFieldClassName);
+        expect(rateField).toHaveClass("".concat(expectedRateFieldClassName, "_size_").concat(props.size));
+    });
+    it('should have external styles and class', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(RateField_1["default"], props)).container;
+        var rateField = (0, helpers_1.getElementByClassName)(container, expectedRateFieldClassName);
+        expect(rateField).toHaveClass(externalClass);
+        expect(rateField).toHaveStyle(externalStyle);
+    });
+    it('should be disabled', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(RateField_1["default"], __assign(__assign({}, props), { disabled: true }))).container;
+        var rateField = (0, helpers_1.getElementByClassName)(container, expectedRateFieldClassName);
+        expect(rateField).toHaveClass("".concat(expectedRateFieldClassName, "_disabled"));
+    });
+    it('should work itemsCount', function () {
+        var rateItemsCount = 2;
+        var _a = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(RateField_1["default"], __assign(__assign({}, props), { itemsCount: rateItemsCount }))), container = _a.container, debug = _a.debug;
+        var rateItems = container.querySelectorAll(".".concat(expectedRateFieldClassName, "__rate-item"));
+        expect(rateItems.length).toBe(rateItemsCount);
+    });
+    it('should fill stars after click and clear it after second click', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(RateField_1["default"], __assign(__assign({}, props), { allowClear: true }))).container;
+        var rateItems = container.querySelectorAll(".".concat(expectedRateFieldClassName, "__rate-item"));
+        dom_1.fireEvent.click(rateItems[rateItems.length - 1]);
+        rateItems.forEach(function (rateItem) { return expect(rateItem).toHaveClass("".concat(expectedRateFieldClassName, "__rate-item_is-full")); });
+        dom_1.fireEvent.click(rateItems[rateItems.length - 1]);
+        rateItems.forEach(function (rateItem) { return expect(rateItem).not.toHaveClass("".concat(expectedRateFieldClassName, "__rate-item_is-full")); });
+    });
+    it('should have badge', function () {
+        var badgeTitle = 'Badge';
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(RateField_1["default"], __assign(__assign({}, props), { badge: {
+                title: badgeTitle
+            } }))).container;
+        var badge = (0, helpers_1.getElementByClassName)(container, "".concat(expectedRateFieldClassName, "__badge"));
+        expect(badge).toBeInTheDocument();
+        expect(badge).toHaveTextContent(badgeTitle);
+    });
+    it('should have default value', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(RateField_1["default"], __assign(__assign({}, props), { itemsCount: 3, defaultValue: 2 }))).container;
+        var rateItems = container.querySelectorAll(".".concat(expectedRateFieldClassName, "__rate-item"));
+        var rateItemsArray = Array.from(rateItems);
+        var unfilledRateItem = rateItemsArray.pop();
+        rateItemsArray.forEach(function (rateItem) { return expect(rateItem).toHaveClass("".concat(expectedRateFieldClassName, "__rate-item_is-full")); });
+        expect(unfilledRateItem).not.toHaveClass("".concat(expectedRateFieldClassName, "__rate-item_is-full"));
+    });
+});

package/tests/ui/form/RateField/RateFieldMockView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IRateFieldViewProps } from '../../../../src/ui/form/RateField/RateField';
+export default function RateFieldView(props: IRateFieldViewProps): JSX.Element;

package/tests/ui/form/RateField/RateFieldMockView.js

@@ -0,0 +1,38 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+var hooks_1 = require("../../../../src/hooks");
+var Icon_1 = __importDefault(require("../../../../src/ui/content/Icon"));
+function RateFieldView(props) {
+    var _a;
+    var bem = (0, hooks_1.useBem)('RateFieldView');
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: bem(bem.block({
+            size: props.size,
+            disabled: props.disabled
+        }), props.className), style: props.style }, { children: [(0, jsx_runtime_1.jsx)("ul", __assign({ className: bem.element('rate-list') }, { children: props.items.map(function (item, index) {
+                    var _a;
+                    return ((0, jsx_runtime_1.jsxs)("li", __assign({ className: bem.element('rate-item', {
+                            'is-full': item.value <= ((_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.value)
+                        }), onClick: function (e) {
+                            e.preventDefault();
+                            props.onItemClick(item);
+                        } }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('rate-value-first') }, { children: (0, jsx_runtime_1.jsx)(Icon_1["default"], { className: bem.element('rate-icon'), name: 'mockIcon' }) })), (0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('rate-value-second') }, { children: (0, jsx_runtime_1.jsx)(Icon_1["default"], { className: bem.element('rate-icon'), name: 'mockIcon' }) }))] }), index));
+                }) })), props.badge && (0, jsx_runtime_1.jsx)("span", __assign({ className: bem.element('badge') }, { children: (_a = props.badge) === null || _a === void 0 ? void 0 : _a.title }))] })));
+}
+exports["default"] = RateFieldView;

package/tests/ui/form/SliderField/SliderField.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';