@steroidsjs/core 3.1.8 → 3.1.9

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

@@ -0,0 +1,442 @@
+"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;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable max-classes-per-file */
+require("@testing-library/jest-dom");
+var react_1 = require("@testing-library/react");
+var FormMockView_1 = __importDefault(require("./FormMockView"));
+var Form_1 = __importDefault(require("../../../../src/ui/form/Form/Form"));
+var InputField_1 = __importDefault(require("../../../../src/ui/form/InputField/InputField"));
+var helpers_1 = require("../../../helpers");
+jest.mock('../../../../src/actions/form', function () {
+    var actual = jest.requireActual('../../../../src/actions/form');
+    return __assign(__assign({}, actual), { formDestroy: jest.fn(function (formId) { return ({
+            type: actual.FORM_DESTROY,
+            formId: formId
+        }); }) });
+});
+jest.mock('../../../../src/hooks/useAddressBar', function () { return ({
+    __esModule: true,
+    "default": jest.fn(function () { return ({
+        initialQuery: null,
+        updateQuery: jest.fn()
+    }); })
+}); });
+jest.mock('../../../../src/components/HttpComponent', function () { return ({
+    __esModule: true,
+    "default": /** @class */ (function () {
+        function MockHttp(components, config) {
+            this.send = (config === null || config === void 0 ? void 0 : config.send)
+                || global.__FORM_HTTP_SEND__
+                || jest.fn().mockResolvedValue({
+                    data: {}
+                });
+        }
+        return MockHttp;
+    }())
+}); });
+jest.mock('../../../../src/components/ClientStorageComponent', function () { return ({
+    __esModule: true,
+    "default": /** @class */ (function () {
+        function MockClientStorageComponent(components, config) {
+            var _a, _b, _c, _d;
+            this.get = (_a = config === null || config === void 0 ? void 0 : config.get) !== null && _a !== void 0 ? _a : jest.fn().mockReturnValue('');
+            this.set = (_c = (_b = config === null || config === void 0 ? void 0 : config.set) !== null && _b !== void 0 ? _b : global.__FORM_CLIENT_STORAGE_SET__) !== null && _c !== void 0 ? _c : jest.fn();
+            this.remove = (_d = config === null || config === void 0 ? void 0 : config.remove) !== null && _d !== void 0 ? _d : jest.fn();
+        }
+        return MockClientStorageComponent;
+    }())
+}); });
+describe('Form tests', function () {
+    var defaultProps = {
+        formId: 'TestForm',
+        view: FormMockView_1["default"],
+        className: 'form-class-test',
+        style: {
+            width: '100%'
+        },
+        submitLabel: 'Отправить',
+        fields: [
+            {
+                attribute: 'email',
+                component: InputField_1["default"],
+                label: 'Email'
+            },
+            {
+                attribute: 'name',
+                component: InputField_1["default"],
+                label: 'Name'
+            },
+        ]
+    };
+    var expectedFormClass = 'FormView';
+    it('should render form in the document', function () {
+        var container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], __assign({}, defaultProps))).container;
+        var form = (0, helpers_1.getElementByClassName)(container, expectedFormClass);
+        expect(form).toBeInTheDocument();
+    });
+    it('should have correct className', function () {
+        var container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], __assign({}, defaultProps))).container;
+        var form = (0, helpers_1.getElementByClassName)(container, expectedFormClass);
+        expect(form).toHaveClass(defaultProps.className);
+    });
+    it('should have correct style', function () {
+        var container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], __assign({}, defaultProps))).container;
+        var form = (0, helpers_1.getElementByClassName)(container, expectedFormClass);
+        expect(form).toHaveStyle(defaultProps.style);
+    });
+    it('should render submit button with correct label', function () {
+        var getByText = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], __assign({}, defaultProps))).getByText;
+        expect(getByText(defaultProps.submitLabel)).toBeInTheDocument();
+    });
+    it('should render fields from props', function () {
+        var _a;
+        var container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], __assign({}, defaultProps))).container;
+        var form = (0, helpers_1.getElementByClassName)(container, expectedFormClass);
+        expect(form).toBeInTheDocument();
+        var inputs = container.querySelectorAll('input:not([type=hidden])');
+        expect(inputs.length).toBeGreaterThanOrEqual((_a = defaultProps.fields) === null || _a === void 0 ? void 0 : _a.length);
+    });
+    it('should render children', function () {
+        var childrenContent = 'Custom form content';
+        var container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], __assign({}, defaultProps, { fields: [] }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ "data-testid": "form-children" }, { children: childrenContent })) }))).container;
+        var children = container.querySelector('[data-testid="form-children"]');
+        expect(children).toBeInTheDocument();
+        expect(children).toHaveTextContent(childrenContent);
+    });
+    it('should call onSubmit when form is submitted', function () {
+        var onSubmit = jest.fn();
+        var container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], __assign({}, defaultProps, { onSubmit: onSubmit }))).container;
+        var form = (0, helpers_1.getElementByTag)(container, 'form');
+        react_1.fireEvent.submit(form);
+        expect(onSubmit).toHaveBeenCalled();
+    });
+    it('should not render submit button when submitLabel is not passed', function () {
+        var container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], { formId: "TestFormNoSubmit", view: FormMockView_1["default"], fields: [] })).container;
+        var form = (0, helpers_1.getElementByClassName)(container, expectedFormClass);
+        expect(form).toBeInTheDocument();
+        var button = container.querySelector('button[type="submit"]');
+        expect(button).not.toBeInTheDocument();
+    });
+    it('should render with empty fields when fields prop is empty', function () {
+        var _a = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], { formId: "TestFormEmpty", view: FormMockView_1["default"], fields: [], submitLabel: "Save" })), container = _a.container, getByText = _a.getByText;
+        var form = (0, helpers_1.getElementByClassName)(container, expectedFormClass);
+        expect(form).toBeInTheDocument();
+        expect(getByText('Save')).toBeInTheDocument();
+    });
+    it('should render only children when view is false', function () {
+        var childContent = 'Only child content';
+        var container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], __assign({ formId: "TestFormNoView", view: false }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ "data-testid": "form-child" }, { children: childContent })) }))).container;
+        expect(container.querySelector('form')).not.toBeInTheDocument();
+        var child = container.querySelector('[data-testid="form-child"]');
+        expect(child).toBeInTheDocument();
+        expect(child).toHaveTextContent(childContent);
+    });
+    it('should not call onSubmit when onBeforeSubmit returns false', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onSubmit, onBeforeSubmit, container, form;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onSubmit = jest.fn();
+                    onBeforeSubmit = jest.fn().mockReturnValue(false);
+                    container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], __assign({}, defaultProps, { onSubmit: onSubmit, onBeforeSubmit: onBeforeSubmit }))).container;
+                    form = (0, helpers_1.getElementByTag)(container, 'form');
+                    react_1.fireEvent.submit(form);
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(onBeforeSubmit).toHaveBeenCalled();
+                        })];
+                case 1:
+                    _a.sent();
+                    expect(onSubmit).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should call onSubmit with cleaned form values', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onSubmit, container, emailInput, form, submittedValues;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onSubmit = jest.fn();
+                    container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], __assign({}, defaultProps, { onSubmit: onSubmit }))).container;
+                    emailInput = container.querySelector('input');
+                    form = (0, helpers_1.getElementByTag)(container, 'form');
+                    expect(emailInput).toBeInTheDocument();
+                    react_1.fireEvent.input(emailInput, {
+                        target: {
+                            value: 'test@example.com'
+                        }
+                    });
+                    react_1.fireEvent.submit(form);
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(onSubmit).toHaveBeenCalled();
+                        })];
+                case 1:
+                    _a.sent();
+                    submittedValues = onSubmit.mock.calls[0][0];
+                    expect(submittedValues).not.toBeNull();
+                    expect(submittedValues).toEqual(expect.any(Object));
+                    expect(submittedValues).toHaveProperty('email', 'test@example.com');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should apply initialValues to form fields', function () {
+        var initialValues = {
+            email: 'initial@test.com',
+            name: 'Initial Name'
+        };
+        var getByDisplayValue = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], __assign({}, defaultProps, { initialValues: initialValues }))).getByDisplayValue;
+        expect(getByDisplayValue(initialValues.email)).toBeInTheDocument();
+        expect(getByDisplayValue(initialValues.name)).toBeInTheDocument();
+    });
+    it('should call onChange when form values change', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onChange, container, emailInput, lastCallValues;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onChange = jest.fn();
+                    container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], __assign({}, defaultProps, { onChange: onChange }))).container;
+                    emailInput = container.querySelector('input');
+                    expect(emailInput).toBeInTheDocument();
+                    react_1.fireEvent.input(emailInput, {
+                        target: {
+                            value: 'new@mail.com'
+                        }
+                    });
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(onChange).toHaveBeenCalled();
+                        })];
+                case 1:
+                    _a.sent();
+                    lastCallValues = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+                    expect(lastCallValues).toHaveProperty('email', 'new@mail.com');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should call preventDefault on submit event', function () {
+        var onSubmit = jest.fn();
+        var container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], __assign({}, defaultProps, { onSubmit: onSubmit }))).container;
+        var form = (0, helpers_1.getElementByTag)(container, 'form');
+        var event = new Event('submit', {
+            bubbles: true,
+            cancelable: true
+        });
+        var preventDefaultSpy = jest.spyOn(event, 'preventDefault');
+        (0, react_1.fireEvent)(form, event);
+        expect(preventDefaultSpy).toHaveBeenCalled();
+    });
+    it('should call onBeforeSubmit with values before onSubmit', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onSubmit, onBeforeSubmit, container;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onSubmit = jest.fn();
+                    onBeforeSubmit = jest.fn().mockReturnValue(true);
+                    container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], __assign({}, defaultProps, { onSubmit: onSubmit, onBeforeSubmit: onBeforeSubmit }))).container;
+                    react_1.fireEvent.submit((0, helpers_1.getElementByTag)(container, 'form'));
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(onBeforeSubmit).toHaveBeenCalled();
+                            expect(onSubmit).toHaveBeenCalled();
+                        })];
+                case 1:
+                    _a.sent();
+                    expect(onBeforeSubmit).toHaveBeenCalledWith(expect.any(Object));
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render additional buttons from buttons prop', function () {
+        var extraButtonLabel = 'Доп. кнопка';
+        var getByText = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], __assign({}, defaultProps, { buttons: ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button" }, { children: extraButtonLabel }))) }))).getByText;
+        expect(getByText(extraButtonLabel)).toBeInTheDocument();
+        expect(getByText(defaultProps.submitLabel)).toBeInTheDocument();
+    });
+});
+describe('Form tests with HTTP mock', function () {
+    beforeEach(function () {
+        delete window.SteroidsComponents;
+    });
+    it('should call onAfterSubmit and onComplete on successful http submit', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var responseData, mockSend, onAfterSubmit, onComplete, container;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    responseData = {
+                        id: 1,
+                        success: true
+                    };
+                    mockSend = jest.fn().mockResolvedValue({
+                        data: responseData
+                    });
+                    global.__FORM_HTTP_SEND__ = mockSend;
+                    onAfterSubmit = jest.fn();
+                    onComplete = jest.fn();
+                    container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], { formId: "FormHttpSuccess", view: FormMockView_1["default"], action: "/api/submit", fields: [], onAfterSubmit: onAfterSubmit, onComplete: onComplete })).container;
+                    react_1.fireEvent.submit((0, helpers_1.getElementByTag)(container, 'form'));
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(mockSend).toHaveBeenCalled();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(onAfterSubmit).toHaveBeenCalledWith(expect.any(Object), responseData, expect.objectContaining({
+                                data: responseData
+                            }));
+                            expect(onComplete).toHaveBeenCalledWith(expect.any(Object), responseData, expect.objectContaining({
+                                data: responseData
+                            }));
+                        })];
+                case 2:
+                    _a.sent();
+                    delete global.__FORM_HTTP_SEND__;
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should call onError when http request fails', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var requestError, mockSend, onError, container;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    requestError = new Error('Network error');
+                    mockSend = jest.fn().mockRejectedValue(requestError);
+                    global.__FORM_HTTP_SEND__ = mockSend;
+                    onError = jest.fn();
+                    container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], { formId: "FormHttpError", view: FormMockView_1["default"], action: "/api/submit", fields: [], onError: onError })).container;
+                    react_1.fireEvent.submit((0, helpers_1.getElementByTag)(container, 'form'));
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(mockSend).toHaveBeenCalled();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(onError).toHaveBeenCalledWith(requestError);
+                        })];
+                case 2:
+                    _a.sent();
+                    delete global.__FORM_HTTP_SEND__;
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});
+describe('Form autoDestroy', function () {
+    var formId = 'FormAutoDestroy';
+    var formDestroy = require('../../../../src/actions/form').formDestroy;
+    it('should dispatch formDestroy on unmount when autoDestroy is true', function () {
+        formDestroy.mockClear();
+        var unmount = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], { formId: formId, view: FormMockView_1["default"], fields: [], autoDestroy: true })).unmount;
+        unmount();
+        expect(formDestroy).toHaveBeenCalledWith(formId);
+    });
+});
+describe('Form addressBar', function () {
+    it('should merge initialQuery from addressBar into initial values', function () {
+        var initialQuery = {
+            email: 'from-url@test.com'
+        };
+        var useAddressBarMock = require('../../../../src/hooks/useAddressBar')["default"];
+        useAddressBarMock.mockReturnValueOnce({
+            initialQuery: initialQuery,
+            updateQuery: jest.fn()
+        });
+        var fields = [
+            {
+                attribute: 'email',
+                component: InputField_1["default"],
+                label: 'Email'
+            },
+        ];
+        var getByDisplayValue = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], { formId: "FormAddressBar", view: FormMockView_1["default"], fields: fields, addressBar: true })).getByDisplayValue;
+        expect(getByDisplayValue(initialQuery.email)).toBeInTheDocument();
+    });
+});
+describe('Form autoSave', function () {
+    beforeEach(function () {
+        delete window.SteroidsComponents;
+    });
+    it('should save form values to clientStorage when autoSave is true', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var mockSet, fields, container, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    mockSet = jest.fn();
+                    global.__FORM_CLIENT_STORAGE_SET__ = mockSet;
+                    fields = [
+                        {
+                            attribute: 'email',
+                            component: InputField_1["default"],
+                            label: 'Email'
+                        },
+                    ];
+                    container = (0, helpers_1.render)((0, jsx_runtime_1.jsx)(Form_1["default"], { formId: "FormAutoSave", view: FormMockView_1["default"], fields: fields, autoSave: true })).container;
+                    input = container.querySelector('input');
+                    react_1.fireEvent.input(input, {
+                        target: {
+                            value: 'saved@test.com'
+                        }
+                    });
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(mockSet).toHaveBeenCalled();
+                        })];
+                case 1:
+                    _a.sent();
+                    expect(mockSet).toHaveBeenCalledWith('Form_FormAutoSave', expect.stringContaining('saved@test.com'));
+                    delete global.__FORM_CLIENT_STORAGE_SET__;
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/tests/ui/form/Form/FormMockView.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IFormViewProps } from '../../../../src/ui/form/Form/Form';
+declare function FormView(props: IFormViewProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof FormView>;
+export default _default;

package/tests/ui/form/Form/FormMockView.js

@@ -0,0 +1,42 @@
+"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 isString_1 = __importDefault(require("lodash-es/isString"));
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+var hooks_1 = require("../../../../src/hooks");
+var Button_1 = __importDefault(require("../../../../src/ui/form/Button"));
+var Field_1 = __importDefault(require("../../../../src/ui/form/Field"));
+function FormView(props) {
+    var bem = (0, hooks_1.useBem)('FormView');
+    var formRef = (0, react_1.useRef)(null);
+    // Auto focus
+    (0, react_use_1.useMount)(function () {
+        if (props.autoFocus) {
+            var inputEl_1 = formRef.current.querySelector('input:not([type=hidden])');
+            setTimeout(function () {
+                if (inputEl_1 && inputEl_1.focus) {
+                    inputEl_1.focus();
+                }
+            }, 10);
+        }
+    });
+    return ((0, jsx_runtime_1.jsxs)("form", __assign({ ref: formRef, className: bem(bem.block(), props.className), onSubmit: props.onSubmit, style: props.style }, { children: [props.children, (props.fields || []).map(function (field, index) { return ((0, jsx_runtime_1.jsx)(Field_1["default"], __assign({}, ((0, isString_1["default"])(field) ? {
+                attribute: field
+            } : field)), index)); }), props.buttons, props.submitLabel && ((0, jsx_runtime_1.jsx)(Button_1["default"], { type: 'submit', label: props.submitLabel }))] })));
+}
+exports["default"] = (0, react_1.memo)(FormView);

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

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

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

@@ -0,0 +1,20 @@
+"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 HtmlFieldMockView_1 = __importDefault(require("./HtmlFieldMockView"));
+var HtmlField_1 = __importDefault(require("../../../../src/ui/form/HtmlField"));
+var helpers_1 = require("../../../helpers");
+describe('HtmlField tests', function () {
+    var props = {
+        view: HtmlFieldMockView_1["default"]
+    };
+    var expectedHtmlFieldClass = 'HtmlFieldView';
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(HtmlField_1["default"], props)).container;
+        var htmlField = (0, helpers_1.getElementByClassName)(container, expectedHtmlFieldClass);
+        expect(htmlField).toBeInTheDocument();
+    });
+});

package/tests/ui/form/HtmlField/HtmlFieldMockView.d.ts

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

package/tests/ui/form/HtmlField/HtmlFieldMockView.js

@@ -0,0 +1,14 @@
+"use strict";
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// import {CKEditor} from '@ckeditor/ckeditor5-react';
+// import ClassicEditor from '@steroidsjs/ckeditor5/packages/ckeditor5-build-classic';
+var hooks_1 = require("../../../../src/hooks");
+function HtmlFieldView(props) {
+    var bem = (0, hooks_1.useBem)('HtmlFieldView');
+    if (process.env.IS_SSR) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: bem.block() }));
+}
+exports["default"] = HtmlFieldView;

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

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

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

@@ -0,0 +1,96 @@
+"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 react_1 = require("@testing-library/react");
+var InputFieldMockView_1 = __importDefault(require("./InputFieldMockView"));
+var InputField_1 = __importDefault(require("../../../../src/ui/form/InputField/InputField"));
+var helpers_1 = require("../../../helpers");
+describe('InputField tests', function () {
+    var props = {
+        view: InputFieldMockView_1["default"],
+        showClear: true,
+        leadIcon: 'mockIcon',
+        className: 'externalClass',
+        placeholder: 'placeholder',
+        size: 'sm',
+        inputProps: {
+            name: 'inputField-test'
+        }
+    };
+    var expectedInputFieldClass = 'InputFieldView';
+    it('should be in the document', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(InputField_1["default"], props)).container;
+        var inputField = (0, helpers_1.getElementByClassName)(container, expectedInputFieldClass);
+        expect(inputField).toBeInTheDocument();
+    });
+    it('should have correct attributes', function () {
+        var _a;
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(InputField_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)(InputField_1["default"], props)).container;
+        var inputField = (0, helpers_1.getElementByClassName)(container, expectedInputFieldClass);
+        expect(inputField).toHaveClass(props.className);
+    });
+    it('should have correct classes', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(InputField_1["default"], props)).container;
+        var inputField = (0, helpers_1.getElementByClassName)(container, expectedInputFieldClass);
+        expect(inputField).toHaveClass(expectedInputFieldClass);
+        expect(inputField).toHaveClass("".concat(expectedInputFieldClass, "_size_sm"));
+        expect(inputField).toHaveClass("".concat(expectedInputFieldClass, "_hasLeadIcon"));
+        expect(inputField).toHaveClass("".concat(expectedInputFieldClass, "_hasClearIcon"));
+    });
+    it('should have icons', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(InputField_1["default"], props)).container;
+        var clearIcon = (0, helpers_1.getElementByClassName)(container, "".concat(expectedInputFieldClass, "__icon-clear"));
+        var leadIcon = (0, helpers_1.getElementByClassName)(container, "".concat(expectedInputFieldClass, "__lead-icon"));
+        expect(clearIcon).toBeInTheDocument();
+        expect(leadIcon).toBeInTheDocument();
+    });
+    it('should have filled class after typing', function () {
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(InputField_1["default"], props)).container;
+        var input = (0, helpers_1.getElementByClassName)(container, 'InputFieldView__input');
+        dom_1.fireEvent.change(input, {
+            target: {
+                value: 'test'
+            }
+        });
+        (0, react_1.waitFor)(function () {
+            var inputField = (0, helpers_1.getElementByClassName)(container, expectedInputFieldClass);
+            expect(inputField).toHaveClass("".concat(expectedInputFieldClass, "_filled"));
+        });
+    });
+    it('should be disabled', function () {
+        var expectedDisabledInputFieldClassName = 'InputFieldView_disabled';
+        var container = (0, helpers_1.render)((0, helpers_1.JSXWrapper)(InputField_1["default"], __assign(__assign({}, props), { disabled: true }))).container;
+        var input = (0, helpers_1.getElementByClassName)(container, 'InputFieldView__input');
+        expect(input).toHaveAttribute('disabled');
+        dom_1.fireEvent.change(input, {
+            target: {
+                value: 'test'
+            }
+        });
+        (0, react_1.waitFor)(function () {
+            var inputField = (0, helpers_1.getElementByClassName)(container, expectedInputFieldClass);
+            expect(inputField).toHaveClass(expectedDisabledInputFieldClassName);
+        });
+    });
+});

package/tests/ui/form/InputField/InputFieldMockView.d.ts

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