test: add form test

Author: tangjinzhou

components/form/__tests__/index.test.js

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+import Form from '..'
+
+describe('Form', () => {
+  it('hideRequiredMark', () => {
+    const wrapper = mount(Form, {
+      propsData: {
+        hideRequiredMark: true,
+      },
+    }
+    )
+    expect(wrapper.classes()).toContain('ant-form-hide-required-mark')
+  })
+
+  describe('wrappedComponentRef', () => {
+    it('get component ref', () => {
+      const TestForm = {
+        data () {
+          return {
+            __TESTFORM__: true,
+          }
+        },
+        render () {
+          return <Form />
+        },
+      }
+      const Wrapped = Form.create()(TestForm)
+      let form
+      mount(Wrapped, {
+        propsData: {
+          wrappedComponentRef: (node) => { form = node },
+        },
+      })
+      expect(form._data.__TESTFORM__).toBe(true)
+    })
+  })
+})

components/form/__tests__/label.test.js

@@ -0,0 +1,139 @@
+import { mount } from '@vue/test-utils'
+import Form from '..'
+import { asyncExpect } from '@/tests/utils'
+
+describe('Form', () => {
+  it('should remove duplicated user input colon', () => {
+    const wrapper = mount({
+      render () {
+        return (
+          <Form>
+            <Form.Item label='label:'>input</Form.Item>
+            <Form.Item label='label：'>input</Form.Item>
+          </Form>
+        )
+      },
+    })
+    expect(wrapper.findAll('.ant-form-item-label label').at(0).text()).not.toContain(':')
+    expect(wrapper.findAll('.ant-form-item-label label').at(1).text()).not.toContain('：')
+  })
+
+  it('should not remove duplicated user input colon when props colon is false', () => {
+    const wrapper = mount({
+      render () {
+        return (
+          <Form>
+            <Form.Item label='label:' colon={false}>input</Form.Item>
+            <Form.Item label='label：' colon={false}>input</Form.Item>
+          </Form>
+        )
+      },
+    })
+    expect(wrapper.findAll('.ant-form-item-label label').at(0).text()).toContain(':')
+    expect(wrapper.findAll('.ant-form-item-label label').at(1).text()).toContain('：')
+  })
+
+  it('should not remove duplicated user input colon when layout is vertical', () => {
+    const wrapper = mount({
+      render () {
+        return (
+          <Form layout='vertical'>
+            <Form.Item label='label:'>input</Form.Item>
+            <Form.Item label='label：'>input</Form.Item>
+          </Form>
+        )
+      },
+    })
+    expect(wrapper.findAll('.ant-form-item-label label').at(0).text()).toContain(':')
+    expect(wrapper.findAll('.ant-form-item-label label').at(1).text()).toContain('：')
+  })
+
+  it('should has dom with .ant-form-item-control-wrapper', () => {
+    const formItemLayout = {
+      labelCol: { span: 6 },
+      wrapperCol: { span: 14 },
+    }
+    const wrapper = mount({
+      render () {
+        return (
+          <Form>
+            <Form.Item {...{ props: { ...formItemLayout }}}>input</Form.Item>
+            <Form.Item>input</Form.Item>
+          </Form>
+        )
+      },
+    })
+    expect(wrapper.findAll('.ant-form-item-control-wrapper').length).toBe(2)
+    expect(wrapper.findAll('.ant-form-item-control-wrapper.ant-col-14').length).toBe(1)
+  })
+
+  // https://github.com/ant-design/ant-design/issues/7351
+  it('focus correct input when click label', async () => {
+    const Form1 = Form.create()({
+      render () {
+        return (
+          <Form>
+            <Form.Item label='label 1'>
+              {this.form.getFieldDecorator('test')(<input />)}
+            </Form.Item>
+          </Form>
+        )
+      },
+    })
+    const Form2 = Form.create()({
+      render () {
+        return (
+          <Form>
+            <Form.Item label='label 2'>
+              {this.form.getFieldDecorator('test2')(<input />)}
+            </Form.Item>
+          </Form>
+        )
+      },
+    })
+
+    const wrapper = mount({
+      render () {
+        return <div><Form1 /><Form2 /></div>
+      },
+    }, { sync: false })
+    await asyncExpect(() => {
+      wrapper.findAll({ name: 'AForm' }).at(0).findAll('label').at(0).trigger('click')
+    })
+    await asyncExpect(() => {
+      expect(wrapper.findAll({ name: 'AForm' }).at(0).findAll('input').at(0).element).toBe(document.activeElement)
+    })
+    await asyncExpect(() => {
+      wrapper.findAll({ name: 'AForm' }).at(1).findAll('label').at(0).trigger('click')
+    })
+    await asyncExpect(() => {
+      expect(wrapper.findAll({ name: 'AForm' }).at(1).findAll('input').at(0).element).toBe(document.activeElement)
+    })
+  })
+
+  // https://github.com/ant-design/ant-design/issues/7693
+  it('should not throw error when is not a valid id', async () => {
+    const Form1 = Form.create()({
+      render () {
+        return (
+          <Form>
+            <Form.Item label='label 1'>
+              {this.form.getFieldDecorator('member[0].name.firstname')(<input />)}
+            </Form.Item>
+          </Form>
+        )
+      },
+    })
+
+    const wrapper = mount(Form1, { sync: false, attachToDocument: true })
+    await asyncExpect(() => {
+      expect(() => {
+        wrapper.find({ name: 'AForm' }).findAll('label').at(0).trigger('click')
+      }).not.toThrow()
+    })
+    // 不合法id时，document.activeElement没有正确更新
+    // await asyncExpect(() => {
+    //   expect(wrapper.find({ name: 'AForm' }).findAll('input').at(0).element).toBe(document.activeElement)
+    // }, 0)
+  })
+})