tntd 2.6.7 → 2.7.0

package/lib/tntd-form/__tests__/index.test.js

@@ -0,0 +1,981 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const scroll_into_view_if_needed_1 = __importDefault(require("scroll-into-view-if-needed"));
+const classnames_1 = __importDefault(require("classnames"));
+const __1 = __importDefault(require(".."));
+const Util = __importStar(require("../util"));
+const button_1 = __importDefault(require("../../button"));
+const input_1 = __importDefault(require("../../input"));
+const select_1 = __importDefault(require("../../select"));
+const upload_1 = __importDefault(require("../../upload"));
+const cascader_1 = __importDefault(require("../../cascader"));
+const checkbox_1 = __importDefault(require("../../checkbox"));
+const date_picker_1 = __importDefault(require("../../date-picker"));
+const input_number_1 = __importDefault(require("../../input-number"));
+const radio_1 = __importDefault(require("../../radio"));
+const switch_1 = __importDefault(require("../../switch"));
+const tree_select_1 = __importDefault(require("../../tree-select"));
+const mountTest_1 = __importDefault(require("../../../tests/shared/mountTest"));
+const rtlTest_1 = __importDefault(require("../../../tests/shared/rtlTest"));
+const utils_1 = require("../../../tests/utils");
+const config_provider_1 = __importDefault(require("../../config-provider"));
+const drawer_1 = __importDefault(require("../../drawer"));
+const zh_CN_1 = __importDefault(require("../../locale/zh_CN"));
+const modal_1 = __importDefault(require("../../modal"));
+const { RangePicker } = date_picker_1.default;
+const { TextArea } = input_1.default;
+jest.mock('scroll-into-view-if-needed');
+describe('Form', () => {
+    (0, mountTest_1.default)(__1.default);
+    (0, mountTest_1.default)(__1.default.Item);
+    (0, rtlTest_1.default)(__1.default);
+    (0, rtlTest_1.default)(__1.default.Item);
+    scroll_into_view_if_needed_1.default.mockImplementation(() => { });
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => { });
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => { });
+    // const change = async (
+    //   container: ReturnType<typeof render>['container'],
+    //   index: number,
+    //   value: string,
+    //   executeMockTimer: boolean,
+    // ) => {
+    //   fireEvent.change(container.querySelectorAll('input')?.[index], { target: { value } });
+    //   await sleep(200);
+    //   if (executeMockTimer) {
+    //     for (let i = 0; i < 10; i += 1) {
+    //       act(() => {
+    //         jest.runAllTimers();
+    //       });
+    //     }
+    //     await sleep(1);
+    //   }
+    // };
+    const changeValue = async (input, value, advTimer = 1000) => {
+        let element;
+        if (typeof input === 'number') {
+            element = document.querySelectorAll('input')[input];
+        }
+        expect(element).toBeTruthy();
+        utils_1.fireEvent.change(element, {
+            target: {
+                value,
+            },
+        });
+        if (advTimer) {
+            await (0, utils_1.waitFakeTimer)(advTimer / 20, 20);
+        }
+    };
+    beforeEach(() => {
+        document.body.innerHTML = '';
+        jest.useFakeTimers();
+        scroll_into_view_if_needed_1.default.mockReset();
+    });
+    afterEach(() => {
+        errorSpy.mockReset();
+    });
+    afterAll(() => {
+        jest.clearAllTimers();
+        jest.useRealTimers();
+        errorSpy.mockRestore();
+        warnSpy.mockRestore();
+        scroll_into_view_if_needed_1.default.mockRestore();
+    });
+    describe('noStyle Form.Item', () => {
+        it('should show alert when form field is required but empty', async () => {
+            const onChange = jest.fn();
+            const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+                react_1.default.createElement(__1.default.Item, null,
+                    react_1.default.createElement(__1.default.Item, { name: "test", label: "test", initialValue: "bamboo", rules: [{ required: true }] },
+                        react_1.default.createElement(input_1.default, { onChange: onChange })))));
+            // user type something and clear
+            await changeValue(0, 'test');
+            await changeValue(0, '');
+            // should show alert with correct message and show correct styles
+            expect(container.querySelector('.ant-form-item-explain-error')).toHaveTextContent("'test' is required");
+            expect(container.querySelector('.ant-input-status-error')).toBeTruthy();
+            expect(container.querySelector('.ant-form-item-has-error')).toBeTruthy();
+            expect(onChange).toHaveBeenCalled();
+        });
+        it('should clean up', async () => {
+            const Demo = () => {
+                const [form] = __1.default.useForm();
+                const onChange = async () => {
+                    // Wait a while and then some logic to validate
+                    await (0, utils_1.waitFakeTimer)();
+                    try {
+                        await form.validateFields();
+                    }
+                    catch (err) {
+                        // do nothing
+                    }
+                };
+                return (react_1.default.createElement(__1.default, { form: form, initialValues: { aaa: '2' } },
+                    react_1.default.createElement(__1.default.Item, { name: "aaa" },
+                        react_1.default.createElement(input_1.default, { onChange: onChange })),
+                    react_1.default.createElement(__1.default.Item, { shouldUpdate: true, noStyle: true }, () => {
+                        const aaa = form.getFieldValue('aaa');
+                        if (aaa === '1') {
+                            return (react_1.default.createElement(__1.default.Item, { name: "bbb", rules: [{ required: true, message: 'aaa' }] },
+                                react_1.default.createElement(input_1.default, null)));
+                        }
+                        return (react_1.default.createElement(__1.default.Item, null,
+                            react_1.default.createElement(__1.default.Item, { name: "ccc", rules: [{ required: true, message: 'ccc' }], noStyle: true },
+                                react_1.default.createElement(input_1.default, null))));
+                    })));
+            };
+            const { container } = (0, utils_1.render)(react_1.default.createElement(Demo, null));
+            await changeValue(0, '1');
+            await (0, utils_1.waitFakeTimer)(2000, 2000);
+            expect(container.querySelector('.ant-form-item-explain-error')).toHaveTextContent('aaa');
+            await changeValue(0, '2');
+            await (0, utils_1.waitFakeTimer)(2000, 2000);
+            expect(container.querySelector('.ant-form-item-explain-error')).toHaveTextContent('ccc');
+            await changeValue(0, '1');
+            await (0, utils_1.waitFakeTimer)(2000, 2000);
+            expect(container.querySelector('.ant-form-item-explain-error')).toHaveTextContent('aaa');
+        });
+    });
+    it('render functions require either `shouldUpdate` or `dependencies`', () => {
+        (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, null, () => null)));
+        expect(errorSpy).toHaveBeenCalledWith('Warning: [antd: Form.Item] A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.');
+    });
+    it("`shouldUpdate` shouldn't work with `dependencies`", () => {
+        (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { shouldUpdate: true, dependencies: [] }, () => null)));
+        expect(errorSpy).toHaveBeenCalledWith("Warning: [antd: Form.Item] `shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/form-deps.");
+    });
+    it('`name` should not work with render props', () => {
+        (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "test", shouldUpdate: true }, () => null)));
+        expect(errorSpy).toHaveBeenCalledWith("Warning: [antd: Form.Item] A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.");
+    });
+    it('multiple children with a name prop', () => {
+        (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "test" },
+                react_1.default.createElement("div", null, "one"),
+                react_1.default.createElement("div", null, "two"))));
+        expect(errorSpy).toHaveBeenCalledWith('Warning: [antd: Form.Item] A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/complex-form-item.');
+    });
+    it('input element should have the prop aria-describedby pointing to the help id when there is a help message', () => {
+        var _a, _b;
+        const { container } = (0, utils_1.pureRender)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "test", help: "This is a help" },
+                react_1.default.createElement("input", null))));
+        expect((_a = container.querySelector('input')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-describedby')).toBe('test_help');
+        expect((_b = container.querySelector('.ant-form-item-explain')) === null || _b === void 0 ? void 0 : _b.id).toBe('test_help');
+    });
+    it('input element should not have the prop aria-describedby pointing to the help id when there is a help message and name is not defined', () => {
+        var _a, _b;
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { help: "This is a help" },
+                react_1.default.createElement("input", null))));
+        expect((_a = container.querySelector('input')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-describedby')).toBeFalsy();
+        expect((_b = container.querySelector('.ant-form-item-explain')) === null || _b === void 0 ? void 0 : _b.id).toBeFalsy();
+    });
+    it('input element should have the prop aria-describedby concatenated with the form name pointing to the help id when there is a help message', () => {
+        var _a, _b;
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, { name: "form" },
+            react_1.default.createElement(__1.default.Item, { name: "test", help: "This is a help" },
+                react_1.default.createElement("input", null))));
+        expect((_a = container.querySelector('input')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-describedby')).toBe('form_test_help');
+        expect((_b = container.querySelector('.ant-form-item-explain')) === null || _b === void 0 ? void 0 : _b.id).toBe('form_test_help');
+    });
+    it('input element should have the prop aria-describedby pointing to the help id when there are errors', async () => {
+        var _a, _b;
+        const { container } = (0, utils_1.pureRender)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "test", rules: [{ len: 3 }, { type: 'number' }] },
+                react_1.default.createElement("input", null))));
+        await changeValue(0, 'Invalid number');
+        expect((_a = container.querySelector('input')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-describedby')).toBe('test_help');
+        expect((_b = container.querySelector('.ant-form-item-explain')) === null || _b === void 0 ? void 0 : _b.id).toBe('test_help');
+    });
+    it('input element should have the prop aria-invalid when there are errors', async () => {
+        var _a;
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "test", rules: [{ len: 3 }, { type: 'number' }] },
+                react_1.default.createElement("input", null))));
+        await changeValue(0, 'Invalid number');
+        expect((_a = container.querySelector('input')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-invalid')).toBe('true');
+    });
+    it('input element should have the prop aria-required when the prop `required` is true', () => {
+        var _a;
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "test", required: true },
+                react_1.default.createElement("input", null))));
+        expect((_a = container.querySelector('input')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-required')).toBe('true');
+    });
+    it('input element should have the prop aria-required when there is a rule with required', () => {
+        var _a;
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "test", rules: [{ required: true }] },
+                react_1.default.createElement("input", null))));
+        expect((_a = container.querySelector('input')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-required')).toBe('true');
+    });
+    it('input element should have the prop aria-describedby pointing to the extra id when there is a extra message', () => {
+        var _a, _b;
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "test", extra: "This is a extra message" },
+                react_1.default.createElement("input", null))));
+        expect((_a = container.querySelector('input')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-describedby')).toBe('test_extra');
+        expect((_b = container.querySelector('.ant-form-item-extra')) === null || _b === void 0 ? void 0 : _b.id).toBe('test_extra');
+    });
+    it('input element should not have the prop aria-describedby pointing to the extra id when there is a extra message and name is not defined', () => {
+        var _a, _b;
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { extra: "This is a extra message" },
+                react_1.default.createElement("input", null))));
+        expect((_a = container.querySelector('input')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-describedby')).toBeFalsy();
+        expect((_b = container.querySelector('.ant-form-item-extra')) === null || _b === void 0 ? void 0 : _b.id).toBeFalsy();
+    });
+    it('input element should have the prop aria-describedby pointing to the help and extra id when there is a help and extra message', () => {
+        var _a;
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "test", help: "This is a help", extra: "This is a extra message" },
+                react_1.default.createElement("input", null))));
+        expect((_a = container.querySelector('input')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-describedby')).toBe('test_help test_extra');
+    });
+    describe('scrollToField', () => {
+        const test = (name, genForm) => {
+            it(name, () => {
+                let callGetForm;
+                const Demo = () => {
+                    const { props, getForm } = genForm();
+                    callGetForm = getForm;
+                    return (react_1.default.createElement(__1.default, Object.assign({ name: "scroll" }, props),
+                        react_1.default.createElement(__1.default.Item, { name: "test" },
+                            react_1.default.createElement(input_1.default, null))));
+                };
+                (0, utils_1.render)(react_1.default.createElement(Demo, null));
+                expect(scroll_into_view_if_needed_1.default).not.toHaveBeenCalled();
+                const form = callGetForm();
+                form.scrollToField('test', {
+                    block: 'start',
+                });
+                const inputNode = document.getElementById('scroll_test');
+                expect(scroll_into_view_if_needed_1.default).toHaveBeenCalledWith(inputNode, {
+                    block: 'start',
+                    scrollMode: 'if-needed',
+                });
+            });
+        };
+        // hooks
+        test('useForm', () => {
+            const [form] = __1.default.useForm();
+            return {
+                props: { form },
+                getForm: () => form,
+            };
+        });
+        // ref
+        test('ref', () => {
+            let form;
+            return {
+                props: {
+                    ref: (instance) => {
+                        form = instance;
+                    },
+                },
+                getForm: () => form,
+            };
+        });
+    });
+    it('scrollToFirstError', async () => {
+        const onFinishFailed = jest.fn();
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, { scrollToFirstError: { block: 'center' }, onFinishFailed: onFinishFailed },
+            react_1.default.createElement(__1.default.Item, { name: "test", rules: [{ required: true }] },
+                react_1.default.createElement("input", null)),
+            react_1.default.createElement(__1.default.Item, null,
+                react_1.default.createElement(button_1.default, { htmlType: "submit" }, "Submit"))));
+        expect(scroll_into_view_if_needed_1.default).not.toHaveBeenCalled();
+        utils_1.fireEvent.submit(container.querySelector('form'));
+        await (0, utils_1.waitFakeTimer)();
+        const inputNode = document.getElementById('test');
+        expect(scroll_into_view_if_needed_1.default).toHaveBeenCalledWith(inputNode, {
+            block: 'center',
+            scrollMode: 'if-needed',
+        });
+        expect(onFinishFailed).toHaveBeenCalled();
+    });
+    it('Form.Item should support data-*、aria-* and custom attribute', () => {
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { "data-text": "123", "aria-hidden": "true", cccc: "bbbb" }, "text")));
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it('warning when use `name` but children is not validate element', () => {
+        (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "warning" }, "text")));
+        expect(errorSpy).toHaveBeenCalledWith('Warning: [antd: Form.Item] `name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.');
+    });
+    it('dynamic change required', async () => {
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { label: "light", name: "light", valuePropName: "checked" },
+                react_1.default.createElement("input", { type: "checkbox" })),
+            react_1.default.createElement(__1.default.Item, { label: "bamboo", name: "bamboo", dependencies: ['light'], rules: [({ getFieldValue }) => ({ required: getFieldValue('light') })] },
+                react_1.default.createElement("input", null))));
+        // should not show alert by default
+        expect(container.querySelector('.ant-form-item-explain')).toBeFalsy();
+        // click to change the light field value to true
+        utils_1.fireEvent.click(container.querySelector('input'));
+        await (0, utils_1.waitFakeTimer)();
+        // user input something and clear
+        await changeValue(1, '1');
+        await changeValue(1, '');
+        // should show alert says that the field is required
+        expect(container.querySelector('.ant-form-item-explain-error')).toHaveTextContent("'bamboo' is required");
+    });
+    describe('should show related className when customize help', () => {
+        it('normal', async () => {
+            const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+                react_1.default.createElement(__1.default.Item, { help: "good" },
+                    react_1.default.createElement("input", null))));
+            await (0, utils_1.waitFakeTimer)();
+            expect(container.querySelector('.ant-form-item-explain')).toHaveTextContent('good');
+            expect(container.querySelector('.ant-form-item-with-help')).toBeTruthy();
+        });
+        it('empty string', async () => {
+            const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+                react_1.default.createElement(__1.default.Item, { help: "" },
+                    react_1.default.createElement("input", null))));
+            await (0, utils_1.waitFakeTimer)();
+            expect(container.querySelector('.ant-form-item-explain')).toHaveTextContent('');
+            expect(container.querySelector('.ant-form-item-with-help')).toBeTruthy();
+        });
+    });
+    it('warning when use v3 function', () => {
+        __1.default.create();
+        expect(errorSpy).toHaveBeenCalledWith('Warning: [antd: Form] antd v4 removed `Form.create`. Please remove or use `@ant-design/compatible` instead.');
+    });
+    // https://github.com/ant-design/ant-design/issues/20706
+    it('Error change should work', async () => {
+        var _a, _b;
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "name", label: "test", rules: [
+                    { required: true },
+                    {
+                        validator: (_, value) => {
+                            if (value === 'p') {
+                                return Promise.reject(new Error('not a p'));
+                            }
+                            return Promise.resolve();
+                        },
+                    },
+                ] },
+                react_1.default.createElement(input_1.default, null))));
+        /* eslint-disable no-await-in-loop */
+        for (let i = 0; i < 3; i += 1) {
+            await changeValue(0, 'bamboo');
+            await changeValue(0, '');
+            expect((_a = container.querySelector('.ant-form-item-explain')) === null || _a === void 0 ? void 0 : _a.textContent).toEqual("'name' is required");
+            await changeValue(0, 'p');
+            expect((_b = container.querySelector('.ant-form-item-explain')) === null || _b === void 0 ? void 0 : _b.textContent).toEqual('not a p');
+        }
+        /* eslint-enable */
+    });
+    // https://github.com/ant-design/ant-design/issues/20813
+    it('should update help directly when provided', async () => {
+        const App = () => {
+            const [message, updateMessage] = react_1.default.useState('');
+            return (react_1.default.createElement(__1.default, null,
+                react_1.default.createElement(__1.default.Item, { label: "hello", help: message },
+                    react_1.default.createElement(input_1.default, null)),
+                react_1.default.createElement(button_1.default, { onClick: () => updateMessage('bamboo') })));
+        };
+        const { container } = (0, utils_1.render)(react_1.default.createElement(App, null));
+        // should show initial text
+        await (0, utils_1.waitFakeTimer)();
+        expect(container.querySelector('.ant-form-item-explain')).toHaveTextContent('');
+        utils_1.fireEvent.click(container.querySelector('button'));
+        // should show bamboo alert without opacity and hide first alert with opacity: 0
+        await (0, utils_1.waitFakeTimer)();
+        expect(container.querySelector('.ant-form-item-explain')).toHaveTextContent('bamboo');
+    });
+    it('warning when use `dependencies` but `name` is empty & children is not a render props', () => {
+        (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { dependencies: [] }, "text")));
+        expect(errorSpy).toHaveBeenCalledWith('Warning: [antd: Form.Item] Must set `name` or use a render function when `dependencies` is set.');
+    });
+    // https://github.com/ant-design/ant-design/issues/20948
+    it('not repeat render when Form.Item is not a real Field', async () => {
+        const shouldNotRender = jest.fn();
+        const StaticInput = ({ id, value = '', }) => {
+            shouldNotRender();
+            return react_1.default.createElement("input", { id: id, value: value });
+        };
+        const shouldRender = jest.fn();
+        const DynamicInput = ({ value = '', id, }) => {
+            shouldRender();
+            return react_1.default.createElement("input", { id: id, value: value });
+        };
+        const formRef = react_1.default.createRef();
+        const { container } = (0, utils_1.pureRender)(react_1.default.createElement(__1.default, { ref: formRef },
+            react_1.default.createElement(__1.default.Item, null,
+                react_1.default.createElement(StaticInput, null)),
+            react_1.default.createElement(__1.default.Item, { name: "light" },
+                react_1.default.createElement(DynamicInput, { id: "changed" }))));
+        await (0, utils_1.waitFakeTimer)();
+        expect(container.querySelector('#changed').value).toEqual('');
+        expect(shouldNotRender).toHaveBeenCalledTimes(1);
+        expect(shouldRender).toHaveBeenCalledTimes(1);
+        formRef.current.setFieldsValue({ light: 'bamboo' });
+        await (0, utils_1.waitFakeTimer)(100, 100);
+        expect(formRef.current.getFieldsValue()).toEqual({ light: 'bamboo' });
+        expect(container.querySelector('#changed').value).toEqual('bamboo');
+        expect(shouldNotRender).toHaveBeenCalledTimes(1);
+        expect(shouldRender).toHaveBeenCalledTimes(2);
+    });
+    it('empty help should also render', () => {
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default.Item, { help: "" },
+            react_1.default.createElement("input", null)));
+        expect(container.querySelectorAll('.ant-form-item-explain').length).toBeTruthy();
+    });
+    it('Form.Item with `help` should display error style when validate failed', async () => {
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "test", label: "test", help: "help", initialValue: "bamboo", rules: [{ required: true, message: 'message' }] },
+                react_1.default.createElement(input_1.default, null))));
+        await changeValue(0, '');
+        expect(container.querySelector('.ant-form-item')).toHaveClass('ant-form-item-has-error');
+        expect(container.querySelector('.ant-form-item-explain').textContent).toEqual('help');
+    });
+    it('clear validation message when', async () => {
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "test", label: "test", rules: [{ required: true, message: 'message' }] },
+                react_1.default.createElement(input_1.default, null))));
+        await changeValue(0, '1');
+        expect(container.querySelectorAll('.ant-form-item-explain').length).toBeFalsy();
+        await changeValue(0, '');
+        expect(container.querySelectorAll('.ant-form-item-explain').length).toBeTruthy();
+        await changeValue(0, '123');
+        expect(container.querySelectorAll('.ant-form-item-explain').length).toBeFalsy();
+    });
+    // https://github.com/ant-design/ant-design/issues/21167
+    it('`require` without `name`', () => {
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default.Item, { label: "test", name: "test", required: true },
+            react_1.default.createElement("input", null)));
+        // expect(screen.getByTitle('test')).toHaveClass('ant-form-item-required');
+        expect(container.querySelector('.ant-form-item-required')).toBeTruthy();
+    });
+    it('0 is a validate Field', () => {
+        (0, utils_1.render)(react_1.default.createElement(__1.default.Item, { name: 0, label: "0" },
+            react_1.default.createElement("input", null)));
+        // if getByLabelText can get element, then it is a validate field with form control and label
+        expect(utils_1.screen.getByLabelText('0')).toBeInTheDocument();
+    });
+    it('`null` triggers warning and is treated as `undefined`', () => {
+        (0, utils_1.render)(react_1.default.createElement(__1.default.Item, { name: null, label: "test" },
+            react_1.default.createElement("input", null)));
+        // if getByLabelText can get element, then it is a validate field with form control and label
+        expect(utils_1.screen.queryByLabelText('test')).not.toBeInTheDocument();
+        expect(errorSpy).toHaveBeenCalledWith('Warning: [antd: Form.Item] `null` is passed as `name` property');
+    });
+    // https://github.com/ant-design/ant-design/issues/21415
+    it('should not throw error when Component.props.onChange is null', async () => {
+        const CustomComponent = () => (react_1.default.createElement("input", { onChange: null }));
+        (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "custom" },
+                react_1.default.createElement(CustomComponent, null))));
+        await changeValue(0, 'aaa');
+    });
+    it('change `help` should not warning', async () => {
+        const Demo = () => {
+            const [error, setError] = react_1.default.useState(false);
+            return (react_1.default.createElement(__1.default, null,
+                react_1.default.createElement(__1.default.Item, { help: error ? 'This is an error msg' : undefined, validateStatus: error ? 'error' : '', label: "Username", name: "username" },
+                    react_1.default.createElement("input", null)),
+                react_1.default.createElement(__1.default.Item, null,
+                    react_1.default.createElement("button", { type: "button", onClick: () => setError(!error) }, "Trigger"))));
+        };
+        const { container } = (0, utils_1.render)(react_1.default.createElement(Demo, null));
+        utils_1.fireEvent.click(container.querySelector('button'));
+        expect(errorSpy).not.toHaveBeenCalled();
+    });
+    it('`label` support template', async () => {
+        const { container } = (0, utils_1.render)(
+        // eslint-disable-next-line no-template-curly-in-string
+        react_1.default.createElement(__1.default, { validateMessages: { required: '${label} is good!' } },
+            react_1.default.createElement(__1.default.Item, { name: "test", label: "Bamboo", rules: [{ required: true }] },
+                react_1.default.createElement("input", null))));
+        utils_1.fireEvent.submit(container.querySelector('form'));
+        await (0, utils_1.waitFakeTimer)();
+        expect(container.querySelector('.ant-form-item-explain-error')).toHaveTextContent('Bamboo is good!');
+    });
+    // https://github.com/ant-design/ant-design/issues/33691
+    it('should keep upper locale in nested ConfigProvider', async () => {
+        const { container } = (0, utils_1.render)(react_1.default.createElement(config_provider_1.default, { locale: zh_CN_1.default },
+            react_1.default.createElement(config_provider_1.default, null,
+                react_1.default.createElement(__1.default, null,
+                    react_1.default.createElement(__1.default.Item, { name: "test", label: "Bamboo", rules: [{ required: true }] },
+                        react_1.default.createElement("input", null))))));
+        utils_1.fireEvent.submit(container.querySelector('form'));
+        await (0, utils_1.waitFakeTimer)();
+        expect(container.querySelector('.ant-form-item-explain-error')).toHaveTextContent('请输入Bamboo');
+    });
+    it('`name` support template when label is not provided', async () => {
+        const { container } = (0, utils_1.render)(
+        // eslint-disable-next-line no-template-curly-in-string
+        react_1.default.createElement(__1.default, { validateMessages: { required: '${label} is good!' } },
+            react_1.default.createElement(__1.default.Item, { name: "Bamboo", rules: [{ required: true }] },
+                react_1.default.createElement("input", null))));
+        utils_1.fireEvent.submit(container.querySelector('form'));
+        await (0, utils_1.waitFakeTimer)();
+        expect(container.querySelector('.ant-form-item-explain-error')).toHaveTextContent('Bamboo is good!');
+    });
+    it('`messageVariables` support validate', async () => {
+        const { container } = (0, utils_1.render)(
+        // eslint-disable-next-line no-template-curly-in-string
+        react_1.default.createElement(__1.default, { validateMessages: { required: '${label} is good!' } },
+            react_1.default.createElement(__1.default.Item, { name: "test", messageVariables: { label: 'Bamboo' }, rules: [{ required: true }] },
+                react_1.default.createElement("input", null))));
+        utils_1.fireEvent.submit(container.querySelector('form'));
+        await (0, utils_1.waitFakeTimer)();
+        expect(container.querySelector('.ant-form-item-explain-error')).toHaveTextContent('Bamboo is good!');
+    });
+    it('validation message should has alert role', async () => {
+        // https://github.com/ant-design/ant-design/issues/25711
+        const { container } = (0, utils_1.render)(
+        // eslint-disable-next-line no-template-curly-in-string
+        react_1.default.createElement(__1.default, { validateMessages: { required: 'name is good!' } },
+            react_1.default.createElement(__1.default.Item, { name: "test", rules: [{ required: true }] },
+                react_1.default.createElement("input", null)),
+            react_1.default.createElement(__1.default.Item, null,
+                react_1.default.createElement(button_1.default, { htmlType: "submit" }, "Submit"))));
+        utils_1.fireEvent.submit(container.querySelector('form'));
+        await (0, utils_1.waitFakeTimer)();
+        expect(container.querySelector('.ant-form-item-explain-error')).toHaveTextContent('name is good!');
+    });
+    it('return same form instance', async () => {
+        const instances = new Set();
+        const App = () => {
+            const [form] = __1.default.useForm();
+            instances.add(form);
+            const [, forceUpdate] = react_1.default.useState({});
+            return (react_1.default.createElement("button", { type: "button", onClick: () => {
+                    forceUpdate({});
+                } }, "Refresh"));
+        };
+        const { container } = (0, utils_1.pureRender)(react_1.default.createElement(App, null));
+        for (let i = 0; i < 5; i += 1) {
+            utils_1.fireEvent.click(container.querySelector('button'));
+            // eslint-disable-next-line no-await-in-loop
+            await (0, utils_1.waitFakeTimer)();
+        }
+        expect(instances.size).toBe(1);
+    });
+    it('should avoid re-render', async () => {
+        let renderTimes = 0;
+        const MyInput = (_a) => {
+            var { value = '' } = _a, props = __rest(_a, ["value"]);
+            renderTimes += 1;
+            return react_1.default.createElement("input", Object.assign({ value: value }, props));
+        };
+        const Demo = () => (react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "username", label: "username", rules: [{ required: true }] },
+                react_1.default.createElement(MyInput, null))));
+        const { container } = (0, utils_1.pureRender)(react_1.default.createElement(Demo, null));
+        renderTimes = 0;
+        await changeValue(0, 'a');
+        expect(renderTimes).toEqual(1);
+        expect(container.querySelector('input')).toHaveValue('a');
+    });
+    it('should warning with `defaultValue`', () => {
+        (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "light" },
+                react_1.default.createElement("input", { defaultValue: "should warning" }))));
+        expect(errorSpy).toHaveBeenCalledWith('Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.');
+    });
+    it('should remove Field and also reset error', async () => {
+        const Demo = ({ showA }) => (react_1.default.createElement(__1.default, null, showA ? (react_1.default.createElement(__1.default.Item, { name: "a", help: "error" },
+            react_1.default.createElement("input", null))) : (react_1.default.createElement(__1.default.Item, { name: "b" },
+            react_1.default.createElement("input", null)))));
+        const { container, rerender } = (0, utils_1.render)(react_1.default.createElement(Demo, { showA: true }));
+        await (0, utils_1.waitFakeTimer)();
+        expect(container.querySelector('.ant-form-item-explain')).toBeTruthy();
+        rerender(react_1.default.createElement(Demo, { showA: false }));
+        await (0, utils_1.waitFakeTimer)();
+        expect(container.querySelector('.ant-form-item-explain')).toBeFalsy();
+    });
+    it('no warning of initialValue & getValueProps & preserve', () => {
+        (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { initialValue: "bamboo", getValueProps: () => ({}), preserve: false },
+                react_1.default.createElement(input_1.default, null))));
+        expect(errorSpy).not.toHaveBeenCalled();
+    });
+    it('should customize id when pass with id', () => {
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "light" },
+                react_1.default.createElement(input_1.default, { id: "bamboo" }))));
+        expect(container.querySelector('input').id).toEqual('bamboo');
+    });
+    it('should trigger validate when onBlur when pass validateTrigger onBlur', async () => {
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, { validateTrigger: "onBlur" },
+            react_1.default.createElement(__1.default.Item, { name: "light", label: "light", rules: [{ len: 3 }] },
+                react_1.default.createElement(input_1.default, null))));
+        // type a invalidate value, not trigger validation
+        await changeValue(0, '7777');
+        expect(container.querySelector('.ant-form-item-explain')).toBeFalsy();
+        // tab(onBlur) the input field, trigger and see the alert
+        utils_1.fireEvent.blur(container.querySelector('input'));
+        await (0, utils_1.waitFakeTimer)();
+        expect(container.querySelector('.ant-form-item-explain')).toBeTruthy();
+    });
+    describe('Form item hidden', () => {
+        it('should work', () => {
+            const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+                react_1.default.createElement(__1.default.Item, { name: "light", hidden: true },
+                    react_1.default.createElement(input_1.default, null))));
+            expect(container.firstChild).toMatchSnapshot();
+        });
+        it('noStyle should not work when hidden', () => {
+            const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+                react_1.default.createElement(__1.default.Item, { name: "light", hidden: true, noStyle: true },
+                    react_1.default.createElement(input_1.default, null))));
+            expect(container.firstChild).toMatchSnapshot();
+        });
+    });
+    it('legacy hideRequiredMark', () => {
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, { hideRequiredMark: true, role: "form" },
+            react_1.default.createElement(__1.default.Item, { name: "light", label: "light", required: true },
+                react_1.default.createElement(input_1.default, null))));
+        expect(container.querySelector('form')).toHaveClass('ant-form-hide-required-mark');
+    });
+    it('form should support disabled', () => {
+        const App = () => (react_1.default.createElement(__1.default, { labelCol: { span: 4 }, wrapperCol: { span: 14 }, layout: "horizontal", disabled: true },
+            react_1.default.createElement(__1.default.Item, { label: "Form disabled", name: "disabled", valuePropName: "checked" },
+                react_1.default.createElement(checkbox_1.default, null, "disabled")),
+            react_1.default.createElement(__1.default.Item, { label: "Radio" },
+                react_1.default.createElement(radio_1.default.Group, null,
+                    react_1.default.createElement(radio_1.default, { value: "apple" }, "Apple"),
+                    react_1.default.createElement(radio_1.default, { value: "pear" }, "Pear"))),
+            react_1.default.createElement(__1.default.Item, { label: "Input" },
+                react_1.default.createElement(input_1.default, null)),
+            react_1.default.createElement(__1.default.Item, { label: "Select" },
+                react_1.default.createElement(select_1.default, null,
+                    react_1.default.createElement(select_1.default.Option, { value: "demo" }, "Demo"))),
+            react_1.default.createElement(__1.default.Item, { label: "TreeSelect" },
+                react_1.default.createElement(tree_select_1.default, { treeData: [
+                        {
+                            title: 'Light',
+                            value: 'light',
+                            children: [{ title: 'Bamboo', value: 'bamboo' }],
+                        },
+                    ] })),
+            react_1.default.createElement(__1.default.Item, { label: "Cascader" },
+                react_1.default.createElement(cascader_1.default, { options: [
+                        {
+                            value: 'zhejiang',
+                            label: 'Zhejiang',
+                            children: [{ value: 'hangzhou', label: 'Hangzhou' }],
+                        },
+                    ] })),
+            react_1.default.createElement(__1.default.Item, { label: "DatePicker" },
+                react_1.default.createElement(date_picker_1.default, null)),
+            react_1.default.createElement(__1.default.Item, { label: "RangePicker" },
+                react_1.default.createElement(RangePicker, null)),
+            react_1.default.createElement(__1.default.Item, { label: "InputNumber" },
+                react_1.default.createElement(input_number_1.default, null)),
+            react_1.default.createElement(__1.default.Item, { label: "TextArea" },
+                react_1.default.createElement(TextArea, { rows: 4 })),
+            react_1.default.createElement(__1.default.Item, { label: "Switch", valuePropName: "checked" },
+                react_1.default.createElement(switch_1.default, null)),
+            react_1.default.createElement(__1.default.Item, { label: "Upload", valuePropName: "fileList" },
+                react_1.default.createElement(upload_1.default, null)),
+            react_1.default.createElement(__1.default.Item, { label: "Button" },
+                react_1.default.createElement(button_1.default, null, "Button"))));
+        const { container } = (0, utils_1.render)(react_1.default.createElement(App, null));
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it('_internalItemRender api test', () => {
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "light", 
+                // @ts-ignore
+                _internalItemRender: {
+                    mark: 'pro_table_render',
+                    render: (_, doms) => (react_1.default.createElement("div", null,
+                        react_1.default.createElement("h1", null, "warning title"),
+                        doms.input,
+                        doms.errorList,
+                        doms.extra)),
+                } },
+                react_1.default.createElement("input", { defaultValue: "should warning" }))));
+        expect(container.querySelector('h1')).toHaveTextContent(/warning title/i);
+    });
+    it('Form Item element id will auto add form_item prefix if form name is empty and item name is in the black list', async () => {
+        const mockFn = jest.spyOn(Util, 'getFieldId');
+        const itemName = 'parentNode';
+        // mock getFieldId old logic,if form name is empty ,and item name is parentNode,will get parentNode
+        mockFn.mockImplementation(() => itemName);
+        const { Option } = select_1.default;
+        const Demo = () => {
+            const [open, setOpen] = (0, react_1.useState)(false);
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(__1.default, null,
+                    react_1.default.createElement(__1.default.Item, { name: itemName, label: itemName },
+                        react_1.default.createElement(select_1.default, { className: "form_item_parentNode", defaultValue: "lucy", open: open, style: { width: 120 } },
+                            react_1.default.createElement(Option, { value: "jack" }, "Jack"),
+                            react_1.default.createElement(Option, { value: "lucy" }, "Lucy"),
+                            react_1.default.createElement(Option, { value: "Yiminghe" }, "yiminghe")))),
+                react_1.default.createElement("button", { type: "button", onClick: () => {
+                        setOpen(true);
+                    } }, open ? 'show' : 'hidden')));
+        };
+        const { container, rerender } = (0, utils_1.render)(react_1.default.createElement(Demo, null));
+        expect(mockFn).toHaveBeenCalled();
+        expect(Util.getFieldId()).toBe(itemName);
+        // make sure input id is parentNode
+        expect(utils_1.screen.getByLabelText(itemName)).toHaveAccessibleName(itemName);
+        utils_1.fireEvent.click(container.querySelector('button'));
+        await (0, utils_1.waitFakeTimer)();
+        expect(container.querySelector('button')).toHaveTextContent('show');
+        mockFn.mockRestore();
+        rerender(react_1.default.createElement(Demo, null));
+        expect(utils_1.screen.getByLabelText(itemName)).toBeInTheDocument();
+    });
+    describe('tooltip', () => {
+        it('ReactNode', async () => {
+            const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+                react_1.default.createElement(__1.default.Item, { label: "light", tooltip: react_1.default.createElement("span", null, "Bamboo") },
+                    react_1.default.createElement(input_1.default, null))));
+            utils_1.fireEvent.mouseEnter(container.querySelector('.anticon-question-circle'));
+            await (0, utils_1.waitFakeTimer)();
+            expect(container.querySelector('.ant-tooltip-inner')).toHaveTextContent('Bamboo');
+        });
+        it('config tooltip should show when hover on icon', async () => {
+            const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+                react_1.default.createElement(__1.default.Item, { label: "light", tooltip: { title: 'Bamboo' } },
+                    react_1.default.createElement(input_1.default, null))));
+            utils_1.fireEvent.mouseEnter(container.querySelector('.anticon-question-circle'));
+            await (0, utils_1.waitFakeTimer)();
+            expect(container.querySelector('.ant-tooltip-inner')).toHaveTextContent('Bamboo');
+        });
+    });
+    it('warningOnly validate', async () => {
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, null,
+                react_1.default.createElement(__1.default.Item, { name: "test", label: "test", initialValue: "bamboo", rules: [{ required: true, warningOnly: true }] },
+                    react_1.default.createElement(input_1.default, null)))));
+        await changeValue(0, 'test');
+        await changeValue(0, '');
+        expect(container.querySelector('.ant-form-item-with-help')).toBeTruthy();
+        expect(container.querySelector('.ant-form-item-has-warning')).toBeTruthy();
+    });
+    it('not warning when remove on validate', async () => {
+        let rejectFn = jest.fn();
+        const { unmount } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, null,
+                react_1.default.createElement(__1.default.Item, { noStyle: true, name: "test", initialValue: "bamboo", rules: [
+                        {
+                            validator: () => new Promise((_, reject) => {
+                                rejectFn = reject;
+                            }),
+                        },
+                    ] },
+                    react_1.default.createElement(input_1.default, null)))));
+        await changeValue(0, '');
+        unmount();
+        // Delay validate failed
+        rejectFn(new Error('delay failed'));
+        expect(errorSpy).not.toHaveBeenCalled();
+    });
+    describe('form colon', () => {
+        it('default colon', () => {
+            (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+                react_1.default.createElement(__1.default.Item, { label: "\u59D3\u540D", name: "\u59D3\u540D" },
+                    react_1.default.createElement("input", null))));
+            expect(utils_1.screen.getByText('姓名')).not.toHaveClass('ant-form-item-no-colon');
+        });
+        it('set Form.Item colon false', () => {
+            (0, utils_1.render)(react_1.default.createElement(__1.default, { colon: true },
+                react_1.default.createElement(__1.default.Item, { colon: false, label: "\u59D3\u540D", name: "\u59D3\u540D" },
+                    react_1.default.createElement(input_1.default, null))));
+            expect(utils_1.screen.getByText('姓名')).toHaveClass('ant-form-item-no-colon');
+        });
+        it('set Form colon false', () => {
+            (0, utils_1.render)(react_1.default.createElement(__1.default, { colon: false },
+                react_1.default.createElement(__1.default.Item, { label: "\u59D3\u540D", name: "\u59D3\u540D" },
+                    react_1.default.createElement(input_1.default, null))));
+            expect(utils_1.screen.getByText('姓名')).toHaveClass('ant-form-item-no-colon');
+        });
+    });
+    it('useFormInstance', () => {
+        let formInstance;
+        let subFormInstance;
+        const Sub = () => {
+            const formSub = __1.default.useFormInstance();
+            subFormInstance = formSub;
+            return null;
+        };
+        const Demo = () => {
+            const [form] = __1.default.useForm();
+            formInstance = form;
+            return (react_1.default.createElement(__1.default, { form: form },
+                react_1.default.createElement(Sub, null)));
+        };
+        (0, utils_1.render)(react_1.default.createElement(Demo, null));
+        expect(subFormInstance).toBe(formInstance);
+    });
+    it('noStyle should not affect status', () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const Demo = () => (react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { validateStatus: "error", noStyle: true },
+                react_1.default.createElement(select_1.default, { className: "custom-select" })),
+            react_1.default.createElement(__1.default.Item, { validateStatus: "error" },
+                react_1.default.createElement(__1.default.Item, { noStyle: true },
+                    react_1.default.createElement(select_1.default, { className: "custom-select-b" }))),
+            react_1.default.createElement(__1.default.Item, { validateStatus: "error" },
+                react_1.default.createElement(__1.default.Item, { noStyle: true, validateStatus: "warning" },
+                    react_1.default.createElement(select_1.default, { className: "custom-select-c" }))),
+            react_1.default.createElement(__1.default.Item, { noStyle: true },
+                react_1.default.createElement(__1.default.Item, { validateStatus: "warning" },
+                    react_1.default.createElement(select_1.default, { className: "custom-select-d" })))));
+        const { container } = (0, utils_1.render)(react_1.default.createElement(Demo, null));
+        expect((_a = container.querySelector('.custom-select')) === null || _a === void 0 ? void 0 : _a.className).not.toContain('status-error');
+        expect((_b = container.querySelector('.custom-select')) === null || _b === void 0 ? void 0 : _b.className).not.toContain('in-form-item');
+        expect((_c = container.querySelector('.custom-select-b')) === null || _c === void 0 ? void 0 : _c.className).toContain('status-error');
+        expect((_d = container.querySelector('.custom-select-b')) === null || _d === void 0 ? void 0 : _d.className).toContain('in-form-item');
+        expect((_e = container.querySelector('.custom-select-c')) === null || _e === void 0 ? void 0 : _e.className).toContain('status-error');
+        expect((_f = container.querySelector('.custom-select-c')) === null || _f === void 0 ? void 0 : _f.className).toContain('in-form-item');
+        expect((_g = container.querySelector('.custom-select-d')) === null || _g === void 0 ? void 0 : _g.className).toContain('status-warning');
+        expect((_h = container.querySelector('.custom-select-d')) === null || _h === void 0 ? void 0 : _h.className).toContain('in-form-item');
+    });
+    it('should not affect Popup children style', () => {
+        var _a, _b, _c, _d;
+        const Demo = () => (react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { labelCol: 4, validateStatus: "error" },
+                react_1.default.createElement(modal_1.default, { visible: true },
+                    react_1.default.createElement(select_1.default, { className: "modal-select" }))),
+            react_1.default.createElement(__1.default.Item, { validateStatus: "error" },
+                react_1.default.createElement(drawer_1.default, { visible: true },
+                    react_1.default.createElement(select_1.default, { className: "drawer-select" })))));
+        const { container } = (0, utils_1.render)(react_1.default.createElement(Demo, null), { container: document.body });
+        expect((_a = container.querySelector('.modal-select')) === null || _a === void 0 ? void 0 : _a.className).not.toContain('in-form-item');
+        expect((_b = container.querySelector('.modal-select')) === null || _b === void 0 ? void 0 : _b.className).not.toContain('status-error');
+        expect((_c = container.querySelector('.drawer-select')) === null || _c === void 0 ? void 0 : _c.className).not.toContain('in-form-item');
+        expect((_d = container.querySelector('.drawer-select')) === null || _d === void 0 ? void 0 : _d.className).not.toContain('status-error');
+    });
+    it('Form.Item.useStatus should work', async () => {
+        var _a, _b, _c, _d, _e;
+        const { Item: { useStatus }, } = __1.default;
+        const CustomInput = ({ className, value, }) => {
+            const { status } = useStatus();
+            return react_1.default.createElement("div", { className: (0, classnames_1.default)(className, `custom-input-status-${status}`) }, value);
+        };
+        const Demo = () => {
+            const [form] = __1.default.useForm();
+            return (react_1.default.createElement(__1.default, { form: form, name: "my-form" },
+                react_1.default.createElement(__1.default.Item, { name: "required", rules: [{ required: true }] },
+                    react_1.default.createElement(CustomInput, { className: "custom-input-required", value: "" })),
+                react_1.default.createElement(__1.default.Item, { name: "warning", validateStatus: "warning" },
+                    react_1.default.createElement(CustomInput, { className: "custom-input-warning" })),
+                react_1.default.createElement(__1.default.Item, { name: "normal" },
+                    react_1.default.createElement(CustomInput, { className: "custom-input" })),
+                react_1.default.createElement(CustomInput, { className: "custom-input-wrong" }),
+                react_1.default.createElement(button_1.default, { onClick: () => form.submit(), className: "submit-button" }, "Submit")));
+        };
+        const { container } = (0, utils_1.render)(react_1.default.createElement(Demo, null));
+        expect((_a = container.querySelector('.custom-input-required')) === null || _a === void 0 ? void 0 : _a.classList).toContain('custom-input-status-');
+        expect((_b = container.querySelector('.custom-input-warning')) === null || _b === void 0 ? void 0 : _b.classList).toContain('custom-input-status-warning');
+        expect((_c = container.querySelector('.custom-input')) === null || _c === void 0 ? void 0 : _c.classList).toContain('custom-input-status-');
+        expect((_d = container.querySelector('.custom-input-wrong')) === null || _d === void 0 ? void 0 : _d.classList).toContain('custom-input-status-undefined');
+        expect(errorSpy).toHaveBeenCalledWith(expect.stringContaining('Form.Item.useStatus should be used under Form.Item component.'));
+        utils_1.fireEvent.click(container.querySelector('.submit-button'));
+        await (0, utils_1.waitFakeTimer)();
+        expect((_e = container.querySelector('.custom-input-required')) === null || _e === void 0 ? void 0 : _e.classList).toContain('custom-input-status-error');
+    });
+    it('item customize margin', async () => {
+        const computeSpy = jest
+            .spyOn(window, 'getComputedStyle')
+            .mockImplementation(() => ({ marginBottom: 24 }));
+        const { container } = (0, utils_1.render)(react_1.default.createElement(__1.default, null,
+            react_1.default.createElement(__1.default.Item, { name: "required", initialValue: "bamboo", rules: [{ required: true }] },
+                react_1.default.createElement(input_1.default, null))));
+        await changeValue(0, '');
+        computeSpy.mockRestore();
+        expect(container.querySelector('.ant-form-item-margin-offset')).toHaveStyle({
+            marginBottom: -24,
+        });
+    });
+    it('form child components should be given priority to own disabled props when it in a disabled form', () => {
+        const props = {
+            name: 'file',
+            action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+            headers: {
+                authorization: 'authorization-text',
+            },
+            capture: true,
+        };
+        const renderComps = (disabled) => [
+            react_1.default.createElement(button_1.default, { key: "Button", disabled: disabled, type: "primary", htmlType: "submit" }, "test"),
+            react_1.default.createElement(cascader_1.default, { key: "Cascader", disabled: disabled, options: [] }),
+            react_1.default.createElement(checkbox_1.default, { key: "Checkbox", disabled: disabled }),
+            react_1.default.createElement(checkbox_1.default.Group, { key: "CheckboxGroup", disabled: disabled, options: [
+                    { label: 'male', value: 0 },
+                    { label: 'female', value: 1 },
+                ] }),
+            react_1.default.createElement(input_number_1.default, { key: "InputNumber", disabled: disabled }),
+            react_1.default.createElement(input_1.default, { key: "Input", disabled: disabled }),
+            react_1.default.createElement(select_1.default, { key: "Select", disabled: disabled }),
+            react_1.default.createElement(switch_1.default, { key: "Switch", disabled: disabled }),
+            react_1.default.createElement(tree_select_1.default, { key: "TreeSelect", disabled: disabled }),
+            react_1.default.createElement(upload_1.default, Object.assign({ key: "Upload" }, props, { disabled: disabled }),
+                react_1.default.createElement(button_1.default, { disabled: disabled }, "Click to Upload")),
+            react_1.default.createElement(date_picker_1.default, { key: "DatePicker", disabled: disabled }),
+            react_1.default.createElement(date_picker_1.default.RangePicker, { key: "DatePicker.RangePicker", disabled: disabled }),
+            react_1.default.createElement(date_picker_1.default.MonthPicker, { key: "DatePicker.MonthPicker", disabled: disabled }),
+            react_1.default.createElement(date_picker_1.default.QuarterPicker, { key: "DatePicker.QuarterPicker", disabled: disabled }),
+            react_1.default.createElement(date_picker_1.default.WeekPicker, { key: "DatePicker.WeekPicker", disabled: disabled }),
+            react_1.default.createElement(date_picker_1.default.YearPicker, { key: "DatePicker.YearPicker", disabled: disabled }),
+            react_1.default.createElement(date_picker_1.default.TimePicker, { key: "DatePicker.TimePicker", disabled: disabled }),
+        ];
+        const App = () => react_1.default.createElement(__1.default, { disabled: true }, renderComps(false));
+        const wrapper = (0, utils_1.render)(react_1.default.createElement(App, null));
+        expect(wrapper.container.querySelectorAll('[disabled]').length).toBe(0);
+        const App2 = () => react_1.default.createElement(__1.default, { disabled: true }, renderComps());
+        const wrapper2 = (0, utils_1.render)(react_1.default.createElement(App2, null));
+        // 时间范围组件中会有两个 input 框，因此虽然上述只有 18 个组件，但，实际有 19 个 带有 disabled 属性的表单组件
+        expect(wrapper2.container.querySelectorAll('[disabled]').length).toBe(19);
+        const App3 = () => react_1.default.createElement(__1.default, { disabled: true }, renderComps(true));
+        const wrapper3 = (0, utils_1.render)(react_1.default.createElement(App3, null));
+        expect(wrapper3.container.querySelectorAll('[disabled]').length).toBe(19);
+        const App4 = () => react_1.default.createElement(__1.default, null, renderComps(true));
+        const wrapper4 = (0, utils_1.render)(react_1.default.createElement(App4, null));
+        expect(wrapper4.container.querySelectorAll('[disabled]').length).toBe(19);
+        const App5 = () => react_1.default.createElement(__1.default, null, renderComps());
+        const wrapper5 = (0, utils_1.render)(react_1.default.createElement(App5, null));
+        expect(wrapper5.container.querySelectorAll('[disabled]').length).toBe(0);
+    });
+});
+//# sourceMappingURL=index.test.js.map