ant-design/components/form/__tests__/label.test.js

173 lines
4.3 KiB
JavaScript
Raw Normal View History

import React from 'react';
import { mount } from 'enzyme';
import Form from '..';
2017-01-15 14:37:22 +08:00
describe('Form', () => {
2019-02-04 22:02:46 +08:00
// Mock of `querySelector`
const originQuerySelector = HTMLElement.prototype.querySelector;
HTMLElement.prototype.querySelector = function(str) {
const match = str.match(/^\[id=('|")(.*)('|")]$/);
const id = match && match[2];
// Use origin logic
if (id) {
const input = this.getElementsByTagName('input')[0];
if (input.id === id) {
return input;
}
}
return originQuerySelector.call(this, str);
};
afterAll(() => {
HTMLElement.prototype.querySelector = originQuerySelector;
});
it('should remove duplicated user input colon', () => {
const wrapper = mount(
<Form>
<Form.Item label="label:">input</Form.Item>
<Form.Item label="label">input</Form.Item>
2018-12-07 16:17:45 +08:00
</Form>,
);
2018-12-07 16:17:45 +08:00
expect(
wrapper
.find('.ant-form-item-label label')
.at(0)
.text(),
).not.toContain(':');
expect(
wrapper
.find('.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(
<Form>
2018-12-07 16:17:45 +08:00
<Form.Item label="label:" colon={false}>
input
</Form.Item>
<Form.Item label="label" colon={false}>
input
</Form.Item>
</Form>,
);
2018-12-07 16:17:45 +08:00
expect(
wrapper
.find('.ant-form-item-label label')
.at(0)
.text(),
).toContain(':');
expect(
wrapper
.find('.ant-form-item-label label')
.at(1)
.text(),
).toContain('');
});
it('should not remove duplicated user input colon when layout is vertical', () => {
const wrapper = mount(
2017-03-02 14:14:34 +08:00
<Form layout="vertical">
<Form.Item label="label:">input</Form.Item>
<Form.Item label="label">input</Form.Item>
2018-12-07 16:17:45 +08:00
</Form>,
);
2018-12-07 16:17:45 +08:00
expect(
wrapper
.find('.ant-form-item-label label')
.at(0)
.text(),
).toContain(':');
expect(
wrapper
.find('.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(
<Form>
<Form.Item {...formItemLayout}>input</Form.Item>
<Form.Item>input</Form.Item>
2018-12-07 16:17:45 +08:00
</Form>,
);
2017-09-20 16:26:18 +08:00
expect(wrapper.find('.ant-form-item-control-wrapper').hostNodes().length).toBe(2);
expect(wrapper.find('.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', () => {
const Form1 = Form.create()(({ form }) => (
<Form>
2018-12-07 16:17:45 +08:00
<Form.Item label="label 1">{form.getFieldDecorator('test')(<input />)}</Form.Item>
</Form>
));
const Form2 = Form.create()(({ form }) => (
<Form>
2018-12-07 16:17:45 +08:00
<Form.Item label="label 2">{form.getFieldDecorator('test2')(<input />)}</Form.Item>
</Form>
));
2018-12-07 16:17:45 +08:00
const wrapper = mount(
<div>
<Form1 />
<Form2 />
</div>,
);
wrapper
.find('Form label')
.at(0)
.simulate('click');
expect(
wrapper
.find('Form input')
.at(0)
.getDOMNode(),
).toBe(document.activeElement);
wrapper
.find('Form label')
.at(1)
.simulate('click');
expect(
wrapper
.find('Form input')
.at(1)
.getDOMNode(),
).toBe(document.activeElement);
});
// https://github.com/ant-design/ant-design/issues/7693
it('should not throw error when is not a valid id', () => {
const Form1 = Form.create()(({ form }) => (
<Form>
<Form.Item label="label 1">
{form.getFieldDecorator('member[0].name.firstname')(<input />)}
</Form.Item>
</Form>
));
const wrapper = mount(<Form1 />);
expect(() => {
2018-12-07 16:17:45 +08:00
wrapper
.find('Form label')
.at(0)
.simulate('click');
}).not.toThrow();
2018-12-07 16:17:45 +08:00
expect(
wrapper
.find('Form input')
.at(0)
.getDOMNode(),
).toBe(document.activeElement);
});
});