@rolder-kit/ui 0.1.0-alpha.9 → 0.1.0-beta.1

package/dist/__tests__/formFields.test.js

@@ -0,0 +1,610 @@
+import * as __rspack_external__testing_library_react_f5b64048 from "@testing-library/react";
+import * as __rspack_external_react_jsx_runtime_225474f2 from "react/jsx-runtime";
+import * as __rspack_external_vitest from "vitest";
+var __webpack_modules__ = {
+    "./src/__tests__/formFields.test.tsx" (module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.a(module, async function(__rspack_load_async_deps, __rspack_async_done) {
+            try {
+                __webpack_require__.r(__webpack_exports__);
+                var react_jsx_runtime__rspack_import_0 = __webpack_require__("react/jsx-runtime");
+                var _testing_library_react__rspack_import_1 = __webpack_require__("@testing-library/react");
+                var vitest__rspack_import_2 = __webpack_require__("vitest");
+                const mockField = {
+                    name: 'testField',
+                    state: {
+                        value: 'initial',
+                        meta: {
+                            errors: []
+                        }
+                    },
+                    handleChange: vitest__rspack_import_2.vi.fn(),
+                    handleBlur: vitest__rspack_import_2.vi.fn(),
+                    setValue: vitest__rspack_import_2.vi.fn()
+                };
+                vitest__rspack_import_2.vi.mock('../form/context', ()=>({
+                        useFieldContext: ()=>mockField
+                    }));
+                vitest__rspack_import_2.vi.mock('@mantine/core', ()=>({
+                        TextInput: ({ name, value, onChange, onBlur, error, rightSection, ...props })=>/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsxs)("div", {
+                                children: [
+                                    /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("input", {
+                                        "data-testid": "text-input",
+                                        name: name,
+                                        value: value,
+                                        onChange: onChange,
+                                        onBlur: onBlur,
+                                        "data-error": error || '',
+                                        ...props
+                                    }),
+                                    rightSection
+                                ]
+                            }),
+                        NumberInput: ({ name, value, onChange, onBlur, error, ...props })=>/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("input", {
+                                "data-testid": "number-input",
+                                name: name,
+                                value: value,
+                                onChange: ()=>onChange(42),
+                                onBlur: onBlur,
+                                "data-error": error || '',
+                                ...props
+                            }),
+                        Textarea: ({ name, value, onChange, onBlur, error, ...props })=>/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("textarea", {
+                                "data-testid": "textarea",
+                                name: name,
+                                value: value,
+                                onChange: onChange,
+                                onBlur: onBlur,
+                                "data-error": error || '',
+                                ...props
+                            }),
+                        PasswordInput: ({ name, value, onChange, onBlur, error, label, placeholder, size, ...props })=>/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("input", {
+                                "data-testid": "password-input",
+                                type: "password",
+                                name: name,
+                                value: value,
+                                onChange: onChange,
+                                onBlur: onBlur,
+                                "data-error": error || '',
+                                "data-label": label,
+                                "data-placeholder": placeholder,
+                                "data-size": size,
+                                ...props
+                            }),
+                        Select: ({ name, value, onChange, onBlur, error, ...props })=>/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("select", {
+                                "data-testid": "select",
+                                name: name,
+                                value: value || '',
+                                onChange: ()=>onChange('option1'),
+                                onBlur: onBlur,
+                                "data-error": error || '',
+                                ...props
+                            }),
+                        MultiSelect: ({ name, value, onChange, onBlur, error, ...props })=>/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("div", {
+                                "data-testid": "multi-select",
+                                "data-name": name,
+                                "data-value": JSON.stringify(value),
+                                "data-error": error || '',
+                                onClick: ()=>onChange([
+                                        'a',
+                                        'b'
+                                    ]),
+                                ...props
+                            }),
+                        Switch: ({ name, checked, onChange, error, w, ...props })=>/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("input", {
+                                "data-testid": "switch",
+                                type: "checkbox",
+                                name: name,
+                                checked: checked,
+                                onChange: onChange,
+                                "data-error": error || '',
+                                "data-w": w,
+                                ...props
+                            }),
+                        ActionIcon: ({ children, onClick, ...props })=>/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("button", {
+                                "data-testid": "action-icon",
+                                onClick: onClick,
+                                ...props,
+                                children: children
+                            })
+                    }));
+                vitest__rspack_import_2.vi.mock('@tabler/icons-react', ()=>({
+                        IconRefresh: ()=>/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("span", {
+                                "data-testid": "refresh-icon"
+                            })
+                    }));
+                vitest__rspack_import_2.vi.mock('omgopass', ()=>({
+                        default: vitest__rspack_import_2.vi.fn(()=>'generated-password')
+                    }));
+                vitest__rspack_import_2.vi.mock('@uiw/react-codemirror', ()=>({
+                        default: (props)=>/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("div", {})
+                    }));
+                vitest__rspack_import_2.vi.mock('@codemirror/commands', ()=>({
+                        indentSelection: vitest__rspack_import_2.vi.fn()
+                    }));
+                vitest__rspack_import_2.vi.mock('@codemirror/lang-json', ()=>({
+                        json: vitest__rspack_import_2.vi.fn(),
+                        jsonParseLinter: vitest__rspack_import_2.vi.fn(()=>vitest__rspack_import_2.vi.fn())
+                    }));
+                vitest__rspack_import_2.vi.mock('@codemirror/lint', ()=>({
+                        linter: vitest__rspack_import_2.vi.fn()
+                    }));
+                vitest__rspack_import_2.vi.mock('@codemirror/view', ()=>({
+                        keymap: {
+                            of: vitest__rspack_import_2.vi.fn()
+                        }
+                    }));
+                vitest__rspack_import_2.vi.mock('@rolder-kit/tanstack/cookie', ()=>({
+                        getCookie: vitest__rspack_import_2.vi.fn(()=>'dark')
+                    }));
+                vitest__rspack_import_2.vi.mock('@uiw/codemirror-theme-vscode', ()=>({
+                        vscodeDark: 'dark',
+                        vscodeLight: 'light'
+                    }));
+                vitest__rspack_import_2.vi.mock('../JsonInput', ()=>({
+                        JsonInput: ({ value, onChange, onBlur, ...props })=>/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("textarea", {
+                                "data-testid": "json-input",
+                                value: value,
+                                onChange: (e)=>onChange(e.target.value),
+                                onBlur: onBlur,
+                                ...props
+                            })
+                    }));
+                const { TextField } = await import("../form/fields/TextField.js");
+                const { NumberField } = await import("../form/fields/NumberField.js");
+                const { TextareaField } = await import("../form/fields/TextareaField.js");
+                const { PasswordField } = await import("../form/fields/PasswordField.js");
+                const { TextPasswordField } = await import("../form/fields/TextPasswordField.js");
+                const { SelectField } = await import("../form/fields/SelectField.js");
+                const { MultiSelectField } = await import("../form/fields/MultiSelectField.js");
+                const { SwitchField } = await import("../form/fields/SwitchField.js");
+                const { JsonField } = await import("../form/fields/JsonField.js");
+                (0, vitest__rspack_import_2.describe)('TextField', ()=>{
+                    (0, vitest__rspack_import_2.afterEach)(()=>{
+                        (0, _testing_library_react__rspack_import_1.cleanup)();
+                        vitest__rspack_import_2.vi.clearAllMocks();
+                    });
+                    (0, vitest__rspack_import_2.it)('renders with field value', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(TextField, {}));
+                        const input = _testing_library_react__rspack_import_1.screen.getByTestId('text-input');
+                        (0, vitest__rspack_import_2.expect)(input.value).toBe('initial');
+                    });
+                    (0, vitest__rspack_import_2.it)('calls handleChange on input', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(TextField, {}));
+                        const input = _testing_library_react__rspack_import_1.screen.getByTestId('text-input');
+                        _testing_library_react__rspack_import_1.fireEvent.change(input, {
+                            target: {
+                                value: 'new'
+                            }
+                        });
+                        (0, vitest__rspack_import_2.expect)(mockField.handleChange).toHaveBeenCalledWith('new');
+                    });
+                    (0, vitest__rspack_import_2.it)('calls handleBlur on blur', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(TextField, {}));
+                        _testing_library_react__rspack_import_1.fireEvent.blur(_testing_library_react__rspack_import_1.screen.getByTestId('text-input'));
+                        (0, vitest__rspack_import_2.expect)(mockField.handleBlur).toHaveBeenCalled();
+                    });
+                    (0, vitest__rspack_import_2.it)('shows errors joined by comma', ()=>{
+                        mockField.state.meta.errors = [
+                            {
+                                message: 'err1'
+                            },
+                            {
+                                message: 'err2'
+                            }
+                        ];
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(TextField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('text-input').getAttribute('data-error')).toBe('err1, err2');
+                        mockField.state.meta.errors = [];
+                    });
+                    (0, vitest__rspack_import_2.it)('uses empty string for falsy value', ()=>{
+                        mockField.state.value = '';
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(TextField, {}));
+                        const input = _testing_library_react__rspack_import_1.screen.getByTestId('text-input');
+                        (0, vitest__rspack_import_2.expect)(input.value).toBe('');
+                        mockField.state.value = 'initial';
+                    });
+                });
+                (0, vitest__rspack_import_2.describe)('NumberField', ()=>{
+                    (0, vitest__rspack_import_2.afterEach)(()=>{
+                        (0, _testing_library_react__rspack_import_1.cleanup)();
+                        vitest__rspack_import_2.vi.clearAllMocks();
+                    });
+                    (0, vitest__rspack_import_2.it)('renders with field value', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(NumberField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('number-input')).toBeDefined();
+                    });
+                    (0, vitest__rspack_import_2.it)('calls handleChange with number value', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(NumberField, {}));
+                        _testing_library_react__rspack_import_1.fireEvent.change(_testing_library_react__rspack_import_1.screen.getByTestId('number-input'), {
+                            target: {
+                                value: '42'
+                            }
+                        });
+                        (0, vitest__rspack_import_2.expect)(mockField.handleChange).toHaveBeenCalledWith(42);
+                    });
+                    (0, vitest__rspack_import_2.it)('shows error messages', ()=>{
+                        mockField.state.meta.errors = [
+                            {
+                                message: 'invalid'
+                            }
+                        ];
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(NumberField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('number-input').getAttribute('data-error')).toBe('invalid');
+                        mockField.state.meta.errors = [];
+                    });
+                    (0, vitest__rspack_import_2.it)('calls handleBlur on blur', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(NumberField, {}));
+                        _testing_library_react__rspack_import_1.fireEvent.blur(_testing_library_react__rspack_import_1.screen.getByTestId('number-input'));
+                        (0, vitest__rspack_import_2.expect)(mockField.handleBlur).toHaveBeenCalled();
+                    });
+                });
+                (0, vitest__rspack_import_2.describe)('TextareaField', ()=>{
+                    (0, vitest__rspack_import_2.afterEach)(()=>{
+                        (0, _testing_library_react__rspack_import_1.cleanup)();
+                        vitest__rspack_import_2.vi.clearAllMocks();
+                    });
+                    (0, vitest__rspack_import_2.it)('renders textarea', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(TextareaField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('textarea')).toBeDefined();
+                    });
+                    (0, vitest__rspack_import_2.it)('calls handleChange with text value', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(TextareaField, {}));
+                        _testing_library_react__rspack_import_1.fireEvent.change(_testing_library_react__rspack_import_1.screen.getByTestId('textarea'), {
+                            target: {
+                                value: 'text'
+                            }
+                        });
+                        (0, vitest__rspack_import_2.expect)(mockField.handleChange).toHaveBeenCalledWith('text');
+                    });
+                    (0, vitest__rspack_import_2.it)('shows error messages', ()=>{
+                        mockField.state.meta.errors = [
+                            {
+                                message: 'too long'
+                            }
+                        ];
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(TextareaField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('textarea').getAttribute('data-error')).toBe('too long');
+                        mockField.state.meta.errors = [];
+                    });
+                    (0, vitest__rspack_import_2.it)('calls handleBlur on blur', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(TextareaField, {}));
+                        _testing_library_react__rspack_import_1.fireEvent.blur(_testing_library_react__rspack_import_1.screen.getByTestId('textarea'));
+                        (0, vitest__rspack_import_2.expect)(mockField.handleBlur).toHaveBeenCalled();
+                    });
+                });
+                (0, vitest__rspack_import_2.describe)('PasswordField', ()=>{
+                    (0, vitest__rspack_import_2.afterEach)(()=>{
+                        (0, _testing_library_react__rspack_import_1.cleanup)();
+                        vitest__rspack_import_2.vi.clearAllMocks();
+                    });
+                    (0, vitest__rspack_import_2.it)('renders with fixed label and placeholder', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(PasswordField, {}));
+                        const input = _testing_library_react__rspack_import_1.screen.getByTestId('password-input');
+                        (0, vitest__rspack_import_2.expect)(input.getAttribute('data-label')).toBe('Пароль');
+                        (0, vitest__rspack_import_2.expect)(input.getAttribute('data-placeholder')).toBe('Введите пароль');
+                    });
+                    (0, vitest__rspack_import_2.it)('renders with size lg', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(PasswordField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('password-input').getAttribute('data-size')).toBe('lg');
+                    });
+                    (0, vitest__rspack_import_2.it)('calls handleChange on input', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(PasswordField, {}));
+                        _testing_library_react__rspack_import_1.fireEvent.change(_testing_library_react__rspack_import_1.screen.getByTestId('password-input'), {
+                            target: {
+                                value: 'secret'
+                            }
+                        });
+                        (0, vitest__rspack_import_2.expect)(mockField.handleChange).toHaveBeenCalledWith('secret');
+                    });
+                    (0, vitest__rspack_import_2.it)('calls handleBlur on blur', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(PasswordField, {}));
+                        _testing_library_react__rspack_import_1.fireEvent.blur(_testing_library_react__rspack_import_1.screen.getByTestId('password-input'));
+                        (0, vitest__rspack_import_2.expect)(mockField.handleBlur).toHaveBeenCalled();
+                    });
+                    (0, vitest__rspack_import_2.it)('shows error messages', ()=>{
+                        mockField.state.meta.errors = [
+                            {
+                                message: 'too short'
+                            }
+                        ];
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(PasswordField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('password-input').getAttribute('data-error')).toBe('too short');
+                        mockField.state.meta.errors = [];
+                    });
+                });
+                (0, vitest__rspack_import_2.describe)('TextPasswordField', ()=>{
+                    (0, vitest__rspack_import_2.afterEach)(()=>{
+                        (0, _testing_library_react__rspack_import_1.cleanup)();
+                        vitest__rspack_import_2.vi.clearAllMocks();
+                    });
+                    (0, vitest__rspack_import_2.it)('renders text input with refresh button', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(TextPasswordField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('text-input')).toBeDefined();
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('action-icon')).toBeDefined();
+                    });
+                    (0, vitest__rspack_import_2.it)('generates password on refresh click', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(TextPasswordField, {}));
+                        _testing_library_react__rspack_import_1.fireEvent.click(_testing_library_react__rspack_import_1.screen.getByTestId('action-icon'));
+                        (0, vitest__rspack_import_2.expect)(mockField.setValue).toHaveBeenCalledWith('generated-password');
+                    });
+                    (0, vitest__rspack_import_2.it)('calls handleChange on input', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(TextPasswordField, {}));
+                        _testing_library_react__rspack_import_1.fireEvent.change(_testing_library_react__rspack_import_1.screen.getByTestId('text-input'), {
+                            target: {
+                                value: 'pass'
+                            }
+                        });
+                        (0, vitest__rspack_import_2.expect)(mockField.handleChange).toHaveBeenCalledWith('pass');
+                    });
+                    (0, vitest__rspack_import_2.it)('calls handleBlur on blur', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(TextPasswordField, {}));
+                        _testing_library_react__rspack_import_1.fireEvent.blur(_testing_library_react__rspack_import_1.screen.getByTestId('text-input'));
+                        (0, vitest__rspack_import_2.expect)(mockField.handleBlur).toHaveBeenCalled();
+                    });
+                    (0, vitest__rspack_import_2.it)('shows error messages', ()=>{
+                        mockField.state.meta.errors = [
+                            {
+                                message: 'required'
+                            }
+                        ];
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(TextPasswordField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('text-input').getAttribute('data-error')).toBe('required');
+                        mockField.state.meta.errors = [];
+                    });
+                });
+                (0, vitest__rspack_import_2.describe)('SelectField', ()=>{
+                    (0, vitest__rspack_import_2.afterEach)(()=>{
+                        (0, _testing_library_react__rspack_import_1.cleanup)();
+                        vitest__rspack_import_2.vi.clearAllMocks();
+                    });
+                    (0, vitest__rspack_import_2.it)('renders select', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(SelectField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('select')).toBeDefined();
+                    });
+                    (0, vitest__rspack_import_2.it)('calls handleChange on select', ()=>{
+                        mockField.state.value = null;
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(SelectField, {}));
+                        _testing_library_react__rspack_import_1.fireEvent.change(_testing_library_react__rspack_import_1.screen.getByTestId('select'));
+                        (0, vitest__rspack_import_2.expect)(mockField.handleChange).toHaveBeenCalledWith('option1');
+                        mockField.state.value = 'initial';
+                    });
+                    (0, vitest__rspack_import_2.it)('shows error messages', ()=>{
+                        mockField.state.meta.errors = [
+                            {
+                                message: 'choose one'
+                            }
+                        ];
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(SelectField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('select').getAttribute('data-error')).toBe('choose one');
+                        mockField.state.meta.errors = [];
+                    });
+                    (0, vitest__rspack_import_2.it)('calls handleBlur on blur', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(SelectField, {}));
+                        _testing_library_react__rspack_import_1.fireEvent.blur(_testing_library_react__rspack_import_1.screen.getByTestId('select'));
+                        (0, vitest__rspack_import_2.expect)(mockField.handleBlur).toHaveBeenCalled();
+                    });
+                });
+                (0, vitest__rspack_import_2.describe)('MultiSelectField', ()=>{
+                    (0, vitest__rspack_import_2.afterEach)(()=>{
+                        (0, _testing_library_react__rspack_import_1.cleanup)();
+                        vitest__rspack_import_2.vi.clearAllMocks();
+                    });
+                    (0, vitest__rspack_import_2.it)('renders multi-select', ()=>{
+                        mockField.state.value = [];
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(MultiSelectField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('multi-select')).toBeDefined();
+                        mockField.state.value = 'initial';
+                    });
+                    (0, vitest__rspack_import_2.it)('calls handleChange with array', ()=>{
+                        mockField.state.value = [];
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(MultiSelectField, {}));
+                        _testing_library_react__rspack_import_1.fireEvent.click(_testing_library_react__rspack_import_1.screen.getByTestId('multi-select'));
+                        (0, vitest__rspack_import_2.expect)(mockField.handleChange).toHaveBeenCalledWith([
+                            'a',
+                            'b'
+                        ]);
+                        mockField.state.value = 'initial';
+                    });
+                    (0, vitest__rspack_import_2.it)('shows error messages', ()=>{
+                        mockField.state.value = [];
+                        mockField.state.meta.errors = [
+                            {
+                                message: 'pick at least one'
+                            }
+                        ];
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(MultiSelectField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('multi-select').getAttribute('data-error')).toBe('pick at least one');
+                        mockField.state.meta.errors = [];
+                        mockField.state.value = 'initial';
+                    });
+                });
+                (0, vitest__rspack_import_2.describe)('SwitchField', ()=>{
+                    (0, vitest__rspack_import_2.afterEach)(()=>{
+                        (0, _testing_library_react__rspack_import_1.cleanup)();
+                        vitest__rspack_import_2.vi.clearAllMocks();
+                    });
+                    (0, vitest__rspack_import_2.it)('renders switch', ()=>{
+                        mockField.state.value = true;
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(SwitchField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('switch')).toBeDefined();
+                        mockField.state.value = 'initial';
+                    });
+                    (0, vitest__rspack_import_2.it)('uses checked prop', ()=>{
+                        mockField.state.value = true;
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(SwitchField, {}));
+                        const sw = _testing_library_react__rspack_import_1.screen.getByTestId('switch');
+                        (0, vitest__rspack_import_2.expect)(sw.checked).toBe(true);
+                        mockField.state.value = 'initial';
+                    });
+                    (0, vitest__rspack_import_2.it)('sets width to fit-content', ()=>{
+                        mockField.state.value = false;
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(SwitchField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('switch').getAttribute('data-w')).toBe('fit-content');
+                        mockField.state.value = 'initial';
+                    });
+                    (0, vitest__rspack_import_2.it)('calls handleChange with checked value', ()=>{
+                        mockField.state.value = false;
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(SwitchField, {}));
+                        _testing_library_react__rspack_import_1.fireEvent.click(_testing_library_react__rspack_import_1.screen.getByTestId('switch'));
+                        (0, vitest__rspack_import_2.expect)(mockField.handleChange).toHaveBeenCalled();
+                        mockField.state.value = 'initial';
+                    });
+                    (0, vitest__rspack_import_2.it)('shows error messages', ()=>{
+                        mockField.state.value = false;
+                        mockField.state.meta.errors = [
+                            {
+                                message: 'required'
+                            }
+                        ];
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(SwitchField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('switch').getAttribute('data-error')).toBe('required');
+                        mockField.state.meta.errors = [];
+                        mockField.state.value = 'initial';
+                    });
+                });
+                (0, vitest__rspack_import_2.describe)('JsonField', ()=>{
+                    (0, vitest__rspack_import_2.afterEach)(()=>{
+                        (0, _testing_library_react__rspack_import_1.cleanup)();
+                        vitest__rspack_import_2.vi.clearAllMocks();
+                    });
+                    (0, vitest__rspack_import_2.it)('renders json input', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(JsonField, {}));
+                        (0, vitest__rspack_import_2.expect)(_testing_library_react__rspack_import_1.screen.getByTestId('json-input')).toBeDefined();
+                    });
+                    (0, vitest__rspack_import_2.it)('calls handleChange on input', ()=>{
+                        (0, _testing_library_react__rspack_import_1.render)(/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(JsonField, {}));
+                        _testing_library_react__rspack_import_1.fireEvent.change(_testing_library_react__rspack_import_1.screen.getByTestId('json-input'), {
+                            target: {
+                                value: '{}'
+                            }
+                        });
+                        (0, vitest__rspack_import_2.expect)(mockField.handleChange).toHaveBeenCalledWith('{}');
+                    });
+                });
+                __rspack_async_done();
+            } catch (e) {
+                __rspack_async_done(e);
+            }
+        }, 1);
+    },
+    "@testing-library/react" (module) {
+        module.exports = __rspack_external__testing_library_react_f5b64048;
+    },
+    "react/jsx-runtime" (module) {
+        module.exports = __rspack_external_react_jsx_runtime_225474f2;
+    },
+    vitest (module) {
+        module.exports = __rspack_external_vitest;
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    var hasSymbol = "function" == typeof Symbol;
+    var rspackQueues = hasSymbol ? Symbol("rspack queues") : "__rspack_queues";
+    var rspackExports = __webpack_require__.aE = hasSymbol ? Symbol("rspack exports") : "__webpack_exports__";
+    var rspackError = hasSymbol ? Symbol("rspack error") : "__rspack_error";
+    var rspackDone = hasSymbol ? Symbol("rspack done") : "__rspack_done";
+    var rspackDefer = __webpack_require__.zS = hasSymbol ? Symbol("rspack defer") : "__rspack_defer";
+    var resolveQueue = (queue)=>{
+        if (queue && queue.d < 1) {
+            queue.d = 1;
+            queue.forEach((fn)=>fn.r--);
+            queue.forEach((fn)=>fn.r-- ? fn.r++ : fn());
+        }
+    };
+    var wrapDeps = (deps)=>deps.map((dep)=>{
+            if (null !== dep && "object" == typeof dep) {
+                if (!dep[rspackQueues] && dep[rspackDefer]) {
+                    var asyncDeps = dep[rspackDefer];
+                    var hasUnresolvedAsyncSubgraph = asyncDeps.some((id)=>{
+                        var cache = __webpack_module_cache__[id];
+                        return !cache || false === cache[rspackDone];
+                    });
+                    if (!hasUnresolvedAsyncSubgraph) return dep;
+                    var d = dep;
+                    dep = {
+                        then (callback) {
+                            Promise.all(asyncDeps.map(__webpack_require__)).then(()=>callback(d));
+                        }
+                    };
+                }
+                if (dep[rspackQueues]) return dep;
+                if (dep.then) {
+                    var queue = [];
+                    queue.d = 0;
+                    dep.then((r)=>{
+                        obj[rspackExports] = r;
+                        resolveQueue(queue);
+                    }, (e)=>{
+                        obj[rspackError] = e;
+                        resolveQueue(queue);
+                    });
+                    var obj = {};
+                    obj[rspackDefer] = false;
+                    obj[rspackQueues] = (fn)=>fn(queue);
+                    return obj;
+                }
+            }
+            var ret = {};
+            ret[rspackQueues] = ()=>{};
+            ret[rspackExports] = dep;
+            return ret;
+        });
+    __webpack_require__.a = (module, body, hasAwait)=>{
+        var queue;
+        hasAwait && ((queue = []).d = -1);
+        var depQueues = new Set();
+        var exports = module.exports;
+        var currentDeps;
+        var outerResolve;
+        var reject;
+        var promise = new Promise((resolve, rej)=>{
+            reject = rej;
+            outerResolve = resolve;
+        });
+        promise[rspackExports] = exports;
+        promise[rspackQueues] = (fn)=>{
+            queue && fn(queue), depQueues.forEach(fn), promise["catch"](()=>{});
+        };
+        module.exports = promise;
+        var handle = (deps)=>{
+            currentDeps = wrapDeps(deps);
+            var fn;
+            var getResult = ()=>currentDeps.map((d)=>{
+                    if (d[rspackDefer]) return d;
+                    if (d[rspackError]) throw d[rspackError];
+                    return d[rspackExports];
+                });
+            var promise = new Promise((resolve)=>{
+                fn = ()=>resolve(getResult);
+                fn.r = 0;
+                var fnQueue = (q)=>q !== queue && !depQueues.has(q) && (depQueues.add(q), q && !q.d && (fn.r++, q.push(fn)));
+                currentDeps.map((dep)=>dep[rspackDefer] || dep[rspackQueues](fnQueue));
+            });
+            return fn.r ? promise : getResult();
+        };
+        var done = (err)=>(err ? reject(promise[rspackError] = err) : outerResolve(exports), resolveQueue(queue), promise[rspackDone] = true);
+        body(handle, done);
+        queue && queue.d < 0 && (queue.d = 0);
+    };
+})();
+(()=>{
+    __webpack_require__.r = (exports)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports, '__esModule', {
+            value: true
+        });
+    };
+})();
+__webpack_require__("./src/__tests__/formFields.test.tsx");