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) }) })