@douyinfe/semi-ui 2.19.1-alpha.1 → 2.19.2-alpha.0

package/form/__test__/baseForm/onChange.test.js

@@ -1,144 +0,0 @@
-import { Form, Select, Button } from '../../../index';
-import { noop } from 'lodash';
-import { BASE_CLASS_PREFIX } from '../../../../semi-foundation/base/constants';
-
-function getForm(props) {
-    return mount(<Form {...props}></Form>, {
-        attachTo: document.getElementById('container'),
-    });
-}
-
-const Option = Select.Option;
-const FormSelect = (
-    <Form.Select label="business" field="business" style={{ width: 200 }}>
-        <Option value="abc">Abc</Option>
-        <Option value="hotsoon">Hotsoon</Option>
-        <Option value="topbuzz">TopBuzz</Option>
-    </Form.Select>
-);
-
-const FormInput = <Form.Input field="name" />;
-
-const FieldCls = `.${BASE_CLASS_PREFIX}-form-field`;
-
-const fields = (
-    <>
-        {FormInput}
-        {FormSelect}
-    </>
-);
-
-describe('Form-onChange', () => {
-    // beforeEach(() => {
-    //     document.body.innerHTML = '';
-    //     // Avoid `attachTo: document.body` Warning
-    //     const div = document.createElement('div');
-    //     div.setAttribute('id', 'container');
-    //     document.body.appendChild(div);
-    // });
-
-    // afterEach(() => {
-    //     const div = document.getElementById('container');
-    //     if (div) {
-    //         document.body.removeChild(div);
-    //     }
-    // });
-
-    // TODO
-    // 1、field mounted
-    // it('onChange - trigger by field mounted', () => {
-    //     const spyOnChange = sinon.spy(() => {});
-    //     const props = {
-    //         onChange: spyOnChange,
-    //     };
-    //     const form = getForm(props);
-    //     form.setProps({ children: fields });
-    // TODO mounted目前不触发form上面的onChange
-    //     expect(spyOnChange.called).toEqual(true);
-    // });
-
-    // 2、field umounted
-    it('onChange - trigger by field unmounted', () => {
-        const spyOnChange = sinon.spy(() => {});
-        const props = {
-            onChange: spyOnChange,
-            children: fields,
-        };
-        const form = getForm(props);
-        // unmount 2 field component
-        form.setProps({ children: undefined });
-        expect(spyOnChange.callCount).toEqual(2);
-    });
-
-    // 3、field value changed
-    it('onChange - trigger by field value updated internal', () => {
-        const spyOnChange = sinon.spy(formState => {});
-
-        const props = {
-            onChange: spyOnChange,
-            children: <Form.Input field="name" />,
-        };
-        const form = getForm(props);
-        let event = { target: { value: 'semi' } };
-        form.find(`.${BASE_CLASS_PREFIX}-input`).simulate('change', event);
-        let expectFormState = {
-            values: { name: 'semi' },
-            errors: {},
-            touched: { name: true },
-        };
-        expect(spyOnChange.callCount).toEqual(1);
-        expect(spyOnChange.calledWithMatch(expectFormState)).toBe(true);
-    });
-
-    // 4、field error status changed
-    it('onChange - trigger by field error status updated internal', done => {
-        const spyOnChange = sinon.spy(formState => {});
-
-        const props = {
-            onChange: spyOnChange,
-            children: (
-                <Form.Input
-                    trigger="change"
-                    field="name"
-                    rules={[{ validator: (rule, value) => value === 'muji', message: 'not muji' }]}
-                />
-            ),
-        };
-        const form = getForm(props);
-        let event = { target: { value: 'semi' } };
-        form.find(`.${BASE_CLASS_PREFIX}-input`).simulate('change', event);
-        let expectFormState = {
-            values: { name: 'semi' },
-            errors: { name: 'not muji' },
-            touched: { name: true },
-        };
-
-        // casuse validate is async operation, need to wait
-        setTimeout(() => {
-            // first called by value change
-            expect(spyOnChange.callCount).toEqual(2);
-            expect(spyOnChange.lastCall.calledWithMatch(expectFormState)).toEqual(true);
-            done();
-        }, 300);
-    });
-
-    // 5、field touched status changed
-    it('onChange - trigger by touched status updated, internal', () => {
-        const spyOnChange = sinon.spy(formState => {});
-
-        const props = {
-            onChange: spyOnChange,
-            children: <Form.Input field="name" />,
-        };
-        const form = getForm(props);
-        let event = {};
-        form.find(`.${BASE_CLASS_PREFIX}-input`).simulate('blur', event);
-        let expectFormState = {
-            values: {},
-            errors: {},
-            touched: { name: true },
-        };
-        expect(spyOnChange.calledOnce).toBe(true);
-        expect(spyOnChange.calledWithMatch(expectFormState)).toEqual(true);
-    });
-});

package/form/__test__/errorMessage.test.js

@@ -1,59 +0,0 @@
-import { Form } from '../../index';
-import { noop } from 'lodash';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-
-const ErrorMessage = Form.ErrorMessage;
-
-function getEM(props) {
-    return mount(<ErrorMessage {...props} />);
-}
-
-describe('Form-errorMessage', () => {
-    it('className & style', () => {
-        const props = {
-            className: 'test',
-            style: {
-                color: 'red',
-            },
-        };
-        const em = getEM(props);
-        expect(em.exists('.test')).toEqual(true);
-        expect(em.find('.test')).toHaveStyle('color', 'red');
-    });
-
-    it('error: string', () => {
-        let stringError = 'semi error';
-        const props = {
-            error: stringError,
-        };
-        const em = getEM(props);
-        expect(em.find(`.${BASE_CLASS_PREFIX}-form-field-error-message span`).text()).toEqual(stringError);
-    });
-    it('error: stringArray', () => {
-        let arrayError = ['length error', 'size error'];
-        const props = {
-            error: arrayError,
-        };
-        const em = getEM(props);
-        expect(em.find(`.${BASE_CLASS_PREFIX}-form-field-error-message span`).text()).toEqual(arrayError.join(', '));
-    });
-    it('error: reactNode', () => {
-        let node = <div>semi error</div>;
-        const props = {
-            error: node,
-        };
-        const em = getEM(props);
-        expect(em.find(`.${BASE_CLASS_PREFIX}-form-field-error-message`).contains(node)).toEqual(true);
-    });
-
-    it('error: null', () => {
-        let arrayError = ['length error', 'size error'];
-        const props = {
-            error: null,
-        };
-        const em = getEM(props);
-        expect(em.exists(`.${BASE_CLASS_PREFIX}-form-field-error-message`)).toEqual(false);
-    });
-    // it('showValidateIcon')
-    // it('validateStatus')
-});

package/form/__test__/field.test.js

@@ -1,426 +0,0 @@
-import { Form, Select } from '../../index';
-import { noop } from 'lodash';
-import { func } from 'prop-types';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-
-function getForm(props) {
-    return mount(<Form {...props}></Form>);
-}
-
-function getInput(props) {
-    return <Form.Input {...props} />;
-}
-
-const Option = Select.Option;
-const FormSelect = (
-    <Form.Select label="business" field="business" style={{ width: 200 }}>
-        <Option value="dy">Douyin</Option>
-        <Option value="hotsoon">Hotsoon</Option>
-        <Option value="topbuzz">TopBuzz</Option>
-    </Form.Select>
-);
-
-const FormInput = <Form.Input field="name" />;
-
-const FieldCls = `.${BASE_CLASS_PREFIX}-form-field`;
-
-const fields = (
-    <>
-        {FormInput}
-        {FormSelect}
-    </>
-);
-
-describe('Form-field', () => {
-    it('className & style & fieldClassName', () => {
-        const fieldProps = {
-            className: 'test-a',
-            style: {
-                color: 'red',
-            },
-            fieldClassName: 'field-test-b',
-        };
-        const props = {
-            children: getInput(fieldProps),
-        };
-        const form = getForm(props);
-        expect(form.exists(`.${BASE_CLASS_PREFIX}-input-wrapper.test-a`)).toEqual(true);
-        expect(form.find(`.${BASE_CLASS_PREFIX}-input-wrapper.test-a`)).toHaveStyle('color', 'red');
-        expect(form.find(`.${BASE_CLASS_PREFIX}-form-field.field-test-b`).length).toEqual(1);
-    });
-    it('label', () => {
-        const props = {
-            children: getInput({
-                label: 'Company',
-                field: 'name',
-            }),
-        };
-        const form = getForm(props);
-        expect(form.find(`.${BASE_CLASS_PREFIX}-form-field-label`).text()).toEqual('Company');
-    });
-    it('labelPosition', () => {
-        // field's labelPosition has a higher weight than form
-        const props = {
-            labelPosition: 'top',
-            children: (
-                <>
-                    {getInput({ labelPosition: 'left', fieldClassName: 'left-input' })}
-                    {getInput({ fieldClassName: 'top-input' })}
-                </>
-            ),
-        };
-        const form = getForm(props);
-        expect(
-            form
-                .find('.left-input')
-                .instance()
-                .getAttribute('x-label-pos')
-        ).toEqual('left');
-        expect(
-            form
-                .find('.top-input')
-                .instance()
-                .getAttribute('x-label-pos')
-        ).toEqual('top');
-    });
-    it('labelAlign', () => {
-        // field's labelAlign has a higher weight than form
-        const props = {
-            labelAlign: 'right',
-            children: (
-                <>
-                    {getInput({ labelAlign: 'left', fieldClassName: 'left-input' })}
-                    {getInput({ fieldClassName: 'right-input' })}
-                </>
-            ),
-        };
-        const form = getForm(props);
-        expect(form.exists(`.left-input .${BASE_CLASS_PREFIX}-form-field-label-left`)).toEqual(true);
-        expect(form.exists(`.right-input .${BASE_CLASS_PREFIX}-form-field-label-right`)).toEqual(true);
-    });
-    it('noLabel', () => {
-        const fieldProps = {
-            noLabel: true,
-            field: 'name',
-        };
-        const props = {
-            children: getInput(fieldProps),
-        };
-        const form = getForm(props);
-        expect(form.exists(`.${BASE_CLASS_PREFIX}-form-field-label`)).toEqual(false);
-    });
-    it('name', () => {
-        const props = {
-            children: getInput({ field: 'name', name: 'company' }),
-        };
-        const form = getForm(props);
-        expect(form.exists(`.${BASE_CLASS_PREFIX}-form-field.${BASE_CLASS_PREFIX}-form-field-company`)).toEqual(true);
-    });
-    it('initValue', () => {
-        // field's initValue has a higher weight than form initValues
-        const props = {
-            children: getInput({ initValue: 'b', field: 'name' }),
-            initValues: {
-                name: 'a',
-            },
-        };
-        const form = getForm(props);
-        expect(form.find(`.${BASE_CLASS_PREFIX}-input`).instance().value).toEqual('b');
-    });
-    it('onChange', () => {
-        const onChange = () => {};
-        const spyOnChange = sinon.spy(onChange);
-        const fieldProps = {
-            onChange: spyOnChange,
-            field: 'name',
-        };
-        const props = {
-            children: getInput(fieldProps),
-        };
-        const form = getForm(props);
-        const event = { target: { value: 'semi' } };
-        form.find(`.${BASE_CLASS_PREFIX}-input`).simulate('change', event);
-        expect(spyOnChange.calledOnce).toEqual(true);
-        expect(spyOnChange.calledWithMatch('semi')).toEqual(true);
-    });
-    it('validate-sync', () => {
-        const validate = value => {
-            return value !== 'semi' ? 'invalid' : '';
-        };
-        const spyValidate = sinon.spy(validate);
-        const fieldProps = {
-            field: 'name',
-            trigger: 'change',
-            validate: spyValidate,
-            // rules are invalidated when validate is also declared
-            rules: [
-                { type: 'string', message: 'rules error1' },
-                { validator: (rule, value) => value === 'muji', message: 'rules error2' },
-            ],
-        };
-        const props = {
-            children: getInput(fieldProps),
-        };
-        const form = getForm(props);
-        // fail
-        const failedEvent = { target: { value: 'milk' } };
-        form.find(`.${BASE_CLASS_PREFIX}-input`).simulate('change', failedEvent);
-        expect(spyValidate.calledWithMatch('milk')).toEqual(true);
-        expect(form.find(`.${BASE_CLASS_PREFIX}-form-field-error-message`).text()).toEqual('invalid');
-        // success
-        const successEvent = { target: { value: 'semi' } };
-        form.find(`.${BASE_CLASS_PREFIX}-input`).simulate('change', successEvent);
-        expect(form.exists(`.${BASE_CLASS_PREFIX}-form-field-error-message`)).toEqual(false);
-    });
-    it('validate-async', done => {
-        const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
-        const validate = val => {
-            return sleep(50).then(() => {
-                if (val !== 'semi') {
-                    return 'invalid';
-                }
-                return '';
-            });
-        };
-        const spyValidate = sinon.spy(validate);
-        const fieldProps = {
-            trigger: 'change',
-            validate: spyValidate,
-            field: 'name',
-        };
-        let formApi = null;
-        const getFormApi = api => {
-            formApi = api;
-        };
-        const props = {
-            getFormApi,
-            children: getInput(fieldProps),
-        };
-        const form = getForm(props);
-        // fail
-        const failedEvent = { target: { value: 'milk' } };
-        form.find(`.${BASE_CLASS_PREFIX}-input`).simulate('change', failedEvent);
-        setTimeout(() => {
-            form.update();
-            expect(spyValidate.firstCall.calledWithMatch('milk')).toEqual(true);
-            expect(formApi.getError('name')).toEqual('invalid');
-            expect(form.find(`.${BASE_CLASS_PREFIX}-form-field-error-message`).text()).toEqual('invalid');
-            const successEvent = { target: { value: 'semi' } };
-            form.find(`.${BASE_CLASS_PREFIX}-input`).simulate('change', successEvent);
-        }, 200);
-        setTimeout(() => {
-            form.update();
-            // success
-            expect(spyValidate.secondCall.calledWithMatch('semi')).toEqual(true);
-            expect(formApi.getError('name')).toEqual(undefined);
-            expect(form.exists(`.${BASE_CLASS_PREFIX}-form-field-error-message`)).toEqual(false);
-            done();
-        }, 800);
-    });
-    it('rules', done => {
-        // rules work
-        let fieldProps = {
-            field: 'name',
-            trigger: 'change',
-            rules: [
-                { type: 'string', message: 'type error' },
-                { validator: (rule, value) => value === 'muji', message: 'not muji' },
-            ],
-        };
-        let formApi = null;
-        const getFormApi = api => {
-            formApi = api;
-        };
-        const props = {
-            getFormApi,
-            children: getInput(fieldProps),
-        };
-        const form = getForm(props);
-        const event2 = { target: { value: 2 } };
-        form.find(`.${BASE_CLASS_PREFIX}-input`).simulate('change', event2);
-        setTimeout(() => {
-            form.update();
-            expect(form.find(`.${BASE_CLASS_PREFIX}-form-field-error-message`).text()).toEqual('type error, not muji');
-        }, 50);
-        setTimeout(() => {
-            const event3 = { target: { value: 'semi' } };
-            form.find(`.${BASE_CLASS_PREFIX}-input`).simulate('change', event3);
-            form.update();
-        }, 100);
-        setTimeout(() => {
-            // console.log(formApi);
-            expect(form.find(`.${BASE_CLASS_PREFIX}-form-field-error-message`).text()).toEqual('not muji');
-            done();
-        }, 200);
-    });
-    it('transform', () => {
-        const transform = stringVal => {
-            return Number(stringVal);
-        };
-        const validate = value => {
-            return value !== 5 ? 'invalid' : '';
-        };
-        const spyValidate = sinon.spy(validate);
-        const fieldProps = {
-            transform,
-            validate: spyValidate,
-            field: 'count',
-        };
-        let formApi = null;
-        const getFormApi = api => {
-            formApi = api;
-        };
-        const props = {
-            getFormApi,
-            children: getInput(fieldProps),
-        };
-        const form = getForm(props);
-        const event = { target: { value: '5' } };
-        form.find(`.${BASE_CLASS_PREFIX}-input`).simulate('change', event);
-        expect(spyValidate.calledWithMatch(5)).toEqual(true);
-        // only transform value before validate, can't change value in formState
-        expect(formApi.getValue('count')).toEqual('5');
-    });
-    it('convert', () => {
-        const convert = stringVal => {
-            return Number(stringVal);
-        };
-        const spyConvert = sinon.spy(convert);
-        const fieldProps = {
-            convert: spyConvert,
-            field: 'count',
-        };
-        let formApi = null;
-        const getFormApi = api => {
-            formApi = api;
-        };
-        const props = {
-            getFormApi,
-            children: getInput(fieldProps),
-        };
-        const form = getForm(props);
-        const event = { target: { value: '5' } };
-        form.find(`.${BASE_CLASS_PREFIX}-input`).simulate('change', event);
-        expect(spyConvert.calledWithMatch('5')).toEqual(true);
-        expect(formApi.getValue('count')).toEqual(5);
-    });
-
-    it('trigger - mounted / change / blur ', done => {
-        const validate = val => (val !== 'semi' ? 'invalid' : '');
-        const propsChange = {
-            trigger: 'change',
-            field: 'a',
-            fieldClassName: 'a',
-            validate,
-        };
-        const propsBlur = {
-            trigger: 'blur',
-            field: 'b',
-            fieldClassName: 'b',
-            initValue: 'milk',
-            validate,
-        };
-        //TODO mounted
-        const propsMounted = {
-            trigger: 'mounted',
-            field: 'c',
-            fieldClassName: 'c',
-            validate,
-        };
-        const props = {
-            children: (
-                <>
-                    {getInput(propsChange)}
-                    {getInput(propsBlur)}
-                </>
-            ),
-        };
-        const form = getForm(props);
-        const event = { target: { value: 'trigger' } };
-        form.find(`.a .${BASE_CLASS_PREFIX}-input`).simulate('change', event);
-        form.find(`.b .${BASE_CLASS_PREFIX}-input`).simulate('blur', event);
-        setTimeout(() => {
-            form.update();
-            expect(form.find(`.a .${BASE_CLASS_PREFIX}-form-field-error-message`).text()).toEqual('invalid');
-            expect(form.find(`.b .${BASE_CLASS_PREFIX}-form-field-error-message`).text()).toEqual('invalid');
-            done();
-        }, 100);
-    });
-
-    it('trigger - change & blur', done => {
-        const validate = val => {
-            if (val === 'changeVal') {
-                return 'changeError';
-            } else if (val === 'blurVal') {
-                return 'blurError';
-            } else {
-                return '';
-            }
-        };
-        const fieldProps = {
-            trigger: ['change', 'blur'],
-            field: 'a',
-            fieldClassName: 'a',
-            validate,
-        };
-        const props = {
-            children: <>{getInput(fieldProps)}</>,
-        };
-        const form = getForm(props);
-        let event = { target: { value: 'changeVal' } };
-        form.find(`.a .${BASE_CLASS_PREFIX}-input`).simulate('change', event);
-        setTimeout(() => {
-            form.update();
-            expect(form.find(`.a .${BASE_CLASS_PREFIX}-form-field-error-message`).text()).toEqual('changeError');
-        }, 50);
-        setTimeout(() => {
-            event = { target: { value: 'blurVal' } };
-            form.find(`.a .${BASE_CLASS_PREFIX}-input`).simulate('change', event);
-            form.find(`.a .${BASE_CLASS_PREFIX}-input`).simulate('blur', {});
-        }, 80);
-        setTimeout(() => {
-            form.update();
-            expect(form.find(`.a .${BASE_CLASS_PREFIX}-form-field-error-message`).text()).toEqual('blurError');
-            done();
-        }, 100);
-    });
-
-    it('field', () => {
-        // 1、username
-        // 2、user[0]
-        // 3、siblings.1
-        // 4、siblings['2']
-        // 5、parents[0].name
-        // 6、parents[1]['name']
-        const fields = ['username', 'user[0]', 'siblings.1', 'siblings[2]', 'parents[0].name', "parents[1]['name']"];
-
-        const props = {
-            children: <>{fields.map((field, index) => getInput({ field: field, fieldClassName: `field-${index}` }))}</>,
-            initValues: {
-                username: 'a',
-                user: ['b'],
-                siblings: [0, 'c', 'd'],
-                parents: [{ name: 'e' }, { name: 'f' }],
-            },
-        };
-        const form = getForm(props);
-        // If you do not pass a specific label prop, the label content is consistent with the field
-        const fieldsDOM = form.find(`.${BASE_CLASS_PREFIX}-form-field .${BASE_CLASS_PREFIX}-input`);
-        expect(fieldsDOM.at(0).instance().value).toEqual('a');
-        expect(fieldsDOM.at(1).instance().value).toEqual('b');
-        expect(fieldsDOM.at(2).instance().value).toEqual('c');
-        expect(fieldsDOM.at(3).instance().value).toEqual('d');
-        expect(fieldsDOM.at(4).instance().value).toEqual('e');
-        expect(fieldsDOM.at(5).instance().value).toEqual('f');
-    });
-
-    // TODO
-    // it('allowEmptyString', () => {});
-    // it('extraText')
-    // it('extraTextPosition')
-    // it('helpText')
-    // it('stopValidateWithError')
-    // it('noErrorMessage)
-    // it('pure')
-    // it('fieldStyle')
-});