ant-design-vue/components/form/__tests__/label.test.js
2019-01-12 12:46:29 +08:00

204 lines
4.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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