@douyinfe/semi-ui 2.1.3 → 2.1.6-alpha.0

package/form/__test__/formApi.test.js

@@ -0,0 +1,422 @@
+// formApi test
+import { Form, Select, Button } from '../../index';
+import { noop } from 'lodash';
+import { sleep as baseSleep } from '../../_test_/utils/index';
+const sleep = (ms = 200) => baseSleep(ms);
+
+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 = `.semi-form-field`;
+
+const fields = (
+    <>
+        {FormInput}
+        {FormSelect}
+    </>
+);
+
+describe('Form-formApi', () => {
+    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);
+        }
+    });
+    it('formApi-getFieldExist', () => {
+        let formApi = null;
+        let getFormApi = api => {
+            formApi = api;
+        };
+        let spyGet = sinon.spy(getFormApi);
+        let props = {
+            getFormApi: spyGet,
+            children: FormInput,
+        };
+        const form = getForm(props);
+        expect(formApi.getFieldExist('name')).toEqual(true);
+        expect(formApi.getFieldExist('business')).toEqual(false);
+    });
+
+    it('formApi-getInitValue / getInitValues', () => {
+        let formApi = null;
+        let getFormApi = api => {
+            formApi = api;
+        };
+        let initValues = {
+            name: 'semi',
+            business: 'abc',
+        };
+        let props = {
+            initValues,
+            getFormApi,
+            children: fields,
+        };
+        const form = getForm(props);
+        expect(formApi.getInitValue('name')).toEqual('semi');
+        expect(formApi.getInitValue('business')).toEqual('abc');
+        expect(formApi.getInitValue('notExistField')).toEqual(undefined);
+        expect(formApi.getInitValue()).toEqual(initValues);
+        expect(formApi.getInitValues()).toEqual(initValues);
+    });
+
+    it('formApi-getTouched', () => {
+        let formApi = null;
+        let getFormApi = api => {
+            formApi = api;
+        };
+        let props = {
+            getFormApi,
+            children: fields,
+        };
+        const form = getForm(props);
+        let event = {};
+        form.find(`.semi-input`).simulate('blur', event);
+        expect(formApi.getTouched('name')).toEqual(true);
+        expect(!formApi.getTouched('business')).toEqual(true);
+    });
+
+    it('formApi-getValue', () => {
+        let formApi = null;
+        let getFormApi = api => {
+            formApi = api;
+        };
+        let props = {
+            getFormApi,
+            children: fields,
+        };
+        const form = getForm(props);
+        // get specific field value
+        expect(formApi.getValue('name')).toEqual(undefined);
+        let event = { target: { value: 'semi' } };
+        form.find(`.semi-input`).simulate('change', event);
+        expect(formApi.getValue('name')).toEqual('semi');
+        // get all field's value
+        expect(formApi.getValue()).toEqual({ name: 'semi' });
+        expect(formApi.getValues()).toEqual({ name: 'semi' });
+    });
+
+
+    it('formApi-getError', done => {
+        let formApi = null;
+        let getFormApi = api => {
+            formApi = api;
+        };
+        let errorMessage = 'not muji';
+        const props = {
+            getFormApi,
+            children: (
+                <Form.Input
+                    trigger="change"
+                    field="name"
+                    rules={[{ validator: (rule, value) => value === 'muji', message: errorMessage }]}
+                />
+            ),
+        };
+        const form = getForm(props);
+        let event = { target: { value: 'semi' } };
+        form.find(`.semi-input`).simulate('change', event);
+        setTimeout(() => {
+            expect(formApi.getError('name')).toEqual(errorMessage);
+            done();
+        }, 300);
+    });
+
+    it('formApi-getFormState', done => {
+        let formApi = null;
+        let getFormApi = api => {
+            formApi = api;
+        };
+        const props = {
+            getFormApi,
+            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(`.semi-input`).simulate('change', event);
+        let expectFormState = {
+            values: { name: 'semi' },
+            errors: { name: 'not muji' },
+            touched: { name: true },
+        };
+        setTimeout(() => {
+            expect(formApi.getFormState()).toEqual(expectFormState);
+            done();
+        }, 300);
+    });
+
+    it('formApi-setError', () => {
+        let formApi = null;
+        let getFormApi = api => {
+            formApi = api;
+        };
+        const props = {
+            getFormApi,
+            children: <Form.Input trigger="change" field="name" fieldClassName="test" />,
+        };
+        const form = getForm(props);
+        let errorMessage = 'not muji';
+        formApi.setError('name', errorMessage);
+        let expectFormState = {
+            values: {},
+            errors: { name: errorMessage },
+            touched: {},
+        };
+        expect(formApi.getFormState()).toEqual(expectFormState);
+        form.update();
+        expect(form.find(`.test .semi-form-field-error-message`).text()).toEqual(errorMessage);
+    });
+
+    it('formApi-setTouched', () => {
+        let formApi = null;
+        let getFormApi = api => {
+            formApi = api;
+        };
+        let props = {
+            getFormApi,
+            children: fields,
+        };
+        const form = getForm(props);
+        let event = {};
+        form.find(`.semi-input`).simulate('blur', event);
+        expect(formApi.getTouched('name')).toEqual(true);
+        expect(!formApi.getTouched('business')).toEqual(true);
+    });
+
+    it('formApi-setValue', () => {
+        let formApi = null;
+        let getFormApi = api => {
+            formApi = api;
+        };
+        let props = {
+            getFormApi,
+            children: fields,
+        };
+        let expectVal = 'semi';
+        const form = getForm(props);
+        formApi.setValue('name', expectVal);
+
+        expect(formApi.getValue('name')).toEqual(expectVal);
+        expect(form.find(`.semi-input`).instance().value).toEqual(expectVal);
+    });
+
+    it('formApi-reset', () => {
+        let formApi = null;
+        const props = {
+            children: fields,
+            getFormApi: api => {
+                formApi = api;
+            },
+            initValues: {
+                name: 'a',
+            },
+        };
+        const form = getForm(props);
+        let event = { target: { value: 'b' } };
+        form.find(`.semi-input`).simulate('change', event);
+        formApi.reset();
+        expect(form.find(`.semi-input`).instance().value).toEqual('a');
+        expect(formApi.getFormState()).toEqual({
+            values: { name: 'a' },
+            errors: {},
+            touched: {},
+        });
+    });
+
+    it('formApi-setValues-override', () => {
+        let formApi = null;
+        const props = {
+            children: fields,
+            getFormApi: api => {
+                formApi = api;
+            },
+            initValues: {
+                name: 'a',
+                extraKeyA: 'uno',
+            },
+        };
+        const form = getForm(props);
+        let expectVal = {
+            name: 'semi',
+            business: 'abc',
+            extraKeyB: 'Kay tse',
+        };
+        formApi.setValues(expectVal, { isOverride: true });
+        expect(formApi.getValue()).toEqual(expectVal);
+    });
+
+    it('formApi-setValues-merge', () => {
+        let formApi = null;
+        let initValues = {
+            name: 'a',
+            extraKeyA: 'uno',
+        };
+        const props = {
+            children: fields,
+            getFormApi: api => {
+                formApi = api;
+            },
+            initValues,
+        };
+        const form = getForm(props);
+        let expectVal = {
+            name: 'semi',
+            business: 'abc',
+            extraKeyB: 'not exist',
+        };
+        let mergeVal = { name: 'semi', business: 'abc', extraKeyA: 'uno' };
+        formApi.setValues(expectVal);
+        expect(formApi.getValue()).toEqual(mergeVal);
+    });
+
+    it('formApi-validate, validate all field, specail field', async () => {
+        let fields = (
+            <>
+                <Form.Input field="a.b"  className='ab' validate={(val) => val ? '' : 'ab-err'} />
+                <Form.Input field="a.c"  className='ac' validate={(val) => val ? '' : 'ac-err'} />
+            </>
+        )
+        let formApi = null;
+        let getFormApi = api => {
+            formApi = api;
+        };
+        let formProps = { 
+            children: fields,
+            getFormApi,
+        };
+        let form = getForm(formProps);
+        formApi.validate().then(values=>{}).catch(error=> {});
+        await sleep(400);
+        expect(formApi.getFormState().errors).toEqual({ a: { b: 'ab-err', c: 'ac-err'}});
+        formApi.reset();
+        formApi.validate(['a.c']).then(values=>{}).catch(error=> {});
+        await sleep(300);
+        expect(formApi.getFormState().errors).toEqual({ a: { c: 'ac-err'}});
+    });
+
+    it('formApi-validate, nested field', async () => {
+        let fields = (
+            <>
+                <Form.Input field="a.b"  className='ab' validate={(val) => val ? '' : 'ab-err'} />
+                <Form.Input field="a.c"  className='ac' validate={(val) => val ? '' : 'ac-err'} />
+                <Form.Input field="e"  className='e' validate={(val) => val ? '' : 'e-err'} />
+            </>
+        )
+        let formApi = null;
+        let getFormApi = api => {
+            formApi = api;
+        };
+        let formProps = { 
+            children: fields,
+            getFormApi,
+        };
+        let form = getForm(formProps);
+        formApi.validate(['a']).then(values=>{}).catch(error=> {});
+        await sleep(300);
+        expect(formApi.getFormState().errors).toEqual({ a: { b: 'ab-err', c: 'ac-err' }});
+    })
+
+    it('formApi-setValue, when include nested field', async () => {
+        let fields = (
+            <>
+                <Form.Input field="a.b"  className='ab' validate={(val) => val ? '' : 'ab-err'} />
+                <Form.Input field="a.c"  className='ac' validate={(val) => val ? '' : 'ac-err'} />
+                <Form.Input field="e"  className='e' validate={(val) => val ? '' : 'e-err'} />
+            </>
+        )
+        let formApi = null;
+        let getFormApi = api => {
+            formApi = api;
+        };
+        let formProps = { 
+            children: fields,
+            getFormApi,
+        };
+        let form = getForm(formProps);
+        formApi.setValue('a', { b: 'semi-b', c: 'semi-c'})
+        await sleep(300);
+        expect(formApi.getFormState().values).toEqual({ a: { b: 'semi-b', c: 'semi-c' }});
+        expect(form.find('.ab .semi-input').instance().value).toEqual('semi-b');
+        expect(form.find('.ac .semi-input').instance().value).toEqual('semi-c');
+        expect(form.find('.e .semi-input').instance().value).toEqual('');
+    });
+
+    it('formApi-setEror, when include nested field', async () => {
+        let fields = (
+            <>
+                <Form.Input field="a.b"  className='ab' validate={(val) => val ? '' : 'ab-err'} />
+                <Form.Input field="a.c"  className='ac' validate={(val) => val ? '' : 'ac-err'} />
+                <Form.Input field="e"  className='e' validate={(val) => val ? '' : 'e-err'} />
+            </>
+        )
+        let formApi = null;
+        let getFormApi = api => {
+            formApi = api;
+        };
+        let formProps = { 
+            children: fields,
+            getFormApi,
+        };
+        let form = getForm(formProps);
+        formApi.setError('a', { b: 'ab-err', c: 'ac-err'});
+        form.update();
+        await sleep(500);
+        expect(formApi.getFormState().errors).toEqual({ a: { b: 'ab-err', c: 'ac-err' }});
+        expect(form.find('.ab .semi-form-field-error-message span').at(1).text()).toEqual('ab-err');
+        expect(form.find('.ac .semi-form-field-error-message span').at(1).text()).toEqual('ac-err');
+    });
+
+    it('formApi-setTouched, when include nested field', async () => {
+        let fields = (
+            <>
+                <Form.Input field="a.b"  className='ab' validate={(val) => val ? '' : 'ab-err'} />
+                <Form.Input field="a.c"  className='ac' validate={(val) => val ? '' : 'ac-err'} />
+                <Form.Input field="e"  className='e' validate={(val) => val ? '' : 'e-err'} />
+            </>
+        )
+        let formApi = null;
+        let getFormApi = api => {
+            formApi = api;
+        };
+        let formProps = { 
+            children: fields,
+            getFormApi,
+        };
+        let form = getForm(formProps);
+        formApi.setTouched('a', { b: true, c: true })
+        await sleep(300);
+        expect(formApi.getFormState().touched).toEqual({ a: { b: true, c: true }});
+    })
+
+    // it('formApi-submitForm', () => {
+    //     // submit should call validate first
+    // });
+});

package/form/__test__/group.test.js

@@ -0,0 +1,108 @@
+import { Form } from '../../index';
+
+function getFormGroup(props = {}) {
+    let {
+        inputGroupProps = {},
+        fieldAProps = {},
+        fieldBProps = {},
+        formProps = {},
+    } = props;
+
+    return mount(<Form {...formProps}>
+        <Form.InputGroup {...inputGroupProps}>
+            <Form.Input field='a' {...fieldAProps}></Form.Input>
+            <Form.Input field='b' {...fieldBProps}></Form.Input>
+        </Form.InputGroup>
+    </Form>);
+}
+
+describe('Form-group', () => {
+
+    it('error aggregation', () => {
+        let errorA = 'fieldAError';
+        let errorB = 'fieldBError';
+        let props = {
+            fieldAProps: {
+                validate: () => errorA,
+                trigger: 'mount'
+            },
+            fieldBProps: {
+                validate: () => errorB,
+                trigger: 'mount'
+            }
+        };
+        let form = getFormGroup(props);
+        let errors = form.find('.semi-form-field-error-message span');
+        expect(errors.at(1).text()).toEqual(`${errorA}, ${errorB}`);
+    });
+
+    it('label-string', () => {
+        let props = {
+            fieldAProps: { },
+            fieldBProps: { },
+            inputGroupProps: {
+                label: 'semi'
+            }
+        };
+        let form = getFormGroup(props);
+        let labelText = form.find('.semi-form-field-label-text').text();
+        expect(labelText).toEqual('semi');
+    });
+
+    it('label-object', () => {
+        let props = {
+            fieldAProps: { },
+            fieldBProps: { },
+            inputGroupProps: {
+                label: {
+                    text: <span>semi</span>,
+                    required: true
+                }
+            }
+        };
+        let form = getFormGroup(props);
+        expect(form.find('.semi-form-field-label-text').text()).toEqual('semi');
+    });
+
+    it('labelPosition', () => {
+        let props = {
+            fieldAProps: { },
+            fieldBProps: { },
+            inputGroupProps: {
+                label: 'semi',
+                labelPosition: 'left'
+            }
+        };
+        let form = getFormGroup(props);
+        expect(form.exists('.semi-form-field-label-left')).toEqual(true);
+    });
+
+    it('children', () => {
+        let props = {
+            fieldAProps: {
+                
+            },
+        }
+        let form = getFormGroup();
+        // exist field a\b and theirs label are hidden
+        expect(form.exists('.semi-input-group .semi-form-field-label')).toEqual(false);
+    });
+
+    it('decleare labelPosition, labelWidth via form props', () => {
+        let props = {
+            formProps: {
+                labelPosition: 'left',
+                labelWidth: 300
+            },
+            inputGroupProps: {
+                label: {
+                    text: 'semi'
+                }
+            }
+        };
+        let form = getFormGroup(props);
+        expect(form.exists('.semi-form-field-label-left')).toEqual(true);
+        expect(form.find('.semi-form-field-label')).toHaveStyle('width', 300);
+    });
+
+});

package/form/__test__/hoc.test.js

@@ -0,0 +1,24 @@
+import { Form } from '../../index';
+import { noop } from 'lodash';
+
+describe('Form-hoc', () => {
+    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);
+        }
+    });
+
+    it('withField', () => {});
+    it('withField-shouldMemo:false', () => {});
+    // it('withFormState', () => {});
+    // it('withFormApi', () => {});
+});

package/form/__test__/label.test.js

@@ -0,0 +1,69 @@
+import { Form } from '../../index';
+import { noop } from 'lodash';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+
+const Label = Form.Label;
+
+function getLabel(props) {
+    return mount(<Label {...props}></Label>);
+}
+
+describe('Form.Label', () => {
+    it('className & style', () => {
+        let props = {
+            className: 'label-test',
+            style: {
+                color: 'red',
+            },
+        };
+        const label = getLabel(props);
+        expect(label.exists('label.label-test')).toEqual(true);
+        expect(label.find('label.label-test')).toHaveStyle('color', 'red');
+    });
+
+    it('required', () => {
+        let props = {
+            required: true,
+        };
+        const label = getLabel(props);
+        expect(label.exists(`.${BASE_CLASS_PREFIX}-form-field-label-required`)).toEqual(true);
+    });
+
+    it('text', () => {
+        let props = {
+            text: 'semi',
+        };
+        const label = getLabel(props);
+        expect(label.text()).toEqual('semi');
+        // text = 0
+        label.setProps({ text: 0 });
+        label.update();
+        expect(label.text()).toEqual('0');
+        let text = <div>{'semi'}</div>;
+        // text = reactNode
+        label.setProps({ text: text });
+        label.update();
+        expect(label.contains(text)).toEqual(true);
+    });
+    it('text-align', () => {
+        let props = {
+            align: 'right',
+        };
+        const label = getLabel(props);
+        expect(label.exists(`.${BASE_CLASS_PREFIX}-form-field-label-right`)).toEqual(true);
+    });
+    it('width', () => {
+        let props = {
+            width: 200,
+        };
+        const label = getLabel(props);
+        expect(label.find(`.${BASE_CLASS_PREFIX}-form-field-label`)).toHaveStyle('width', 200);
+    });
+    it('disabled', () => {
+        let props = {
+            disabled: true,
+        };
+        const label = getLabel(props);
+        expect(label.exists(`.${BASE_CLASS_PREFIX}-form-field-label-disabled`)).toEqual(true);
+    });
+});

package/form/__test__/section.test.js

@@ -0,0 +1,49 @@
+import { Form } from '../../index';
+import { noop } from 'lodash';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+
+const Section = Form.Section;
+
+function getSection(props) {
+    return mount(<Section {...props}></Section>);
+}
+
+describe('Form.Label', () => {
+    it('className & style', () => {
+        let props = {
+            className: 'sec-test',
+            style: {
+                color: 'red',
+            },
+        };
+        const section = getSection(props);
+        expect(section.exists('section.sec-test')).toEqual(true);
+        expect(section.find('section.sec-test')).toHaveStyle('color', 'red');
+    });
+
+    it('children', () => {
+        const section = mount(<Form>
+            <Section>
+                <Form.Input field='test' className='test'></Form.Input>
+            </Section>
+        </Form>)
+        expect(section.exists(`.test`)).toEqual(true);
+    });
+
+    it('text', () => {
+        let props = {
+            text: 'semi',
+        };
+        const section = getSection(props);
+        expect(section.find('.semi-form-section-text').text()).toEqual('semi');
+        // text = 0
+        section.setProps({ text: 0 });
+        section.update();
+        expect(section.find('.semi-form-section-text').text()).toEqual('0');
+        let text = <div>{'semi'}</div>;
+        // text = reactNode
+        section.setProps({ text: text });
+        section.update();
+        expect(section.contains(text)).toEqual(true);
+    });
+});