2017-01-09 11:03:35 +08:00
|
|
|
|
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;
|
2019-02-23 16:35:04 +08:00
|
|
|
|
HTMLElement.prototype.querySelector = function querySelector(str) {
|
2019-02-04 22:02:46 +08:00
|
|
|
|
const match = str.match(/^\[id=('|")(.*)('|")]$/);
|
|
|
|
|
const id = match && match[2];
|
|
|
|
|
|
|
|
|
|
// Use origin logic
|
|
|
|
|
if (id) {
|
2019-02-04 22:55:00 +08:00
|
|
|
|
const [input] = this.getElementsByTagName('input');
|
|
|
|
|
if (input && input.id === id) {
|
2019-02-04 22:02:46 +08:00
|
|
|
|
return input;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return originQuerySelector.call(this, str);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
afterAll(() => {
|
|
|
|
|
HTMLElement.prototype.querySelector = originQuerySelector;
|
|
|
|
|
});
|
|
|
|
|
|
2017-01-09 11:03:35 +08:00
|
|
|
|
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>,
|
2017-01-09 11:03:35 +08:00
|
|
|
|
);
|
2019-03-24 17:03:52 +08:00
|
|
|
|
|
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(':');
|
2017-01-09 11:03:35 +08:00
|
|
|
|
});
|
|
|
|
|
|
2019-03-08 11:25:37 +08:00
|
|
|
|
it('should disable colon when props colon Form is false', () => {
|
|
|
|
|
const wrapper = mount(
|
|
|
|
|
<Form colon={false}>
|
2019-03-24 17:03:52 +08:00
|
|
|
|
<Form.Item label="label">input</Form.Item>
|
2019-03-08 11:25:37 +08:00
|
|
|
|
</Form>,
|
|
|
|
|
);
|
|
|
|
|
expect(
|
|
|
|
|
wrapper
|
2019-03-24 17:03:52 +08:00
|
|
|
|
.find('.ant-form-item-label label')
|
2019-03-08 11:25:37 +08:00
|
|
|
|
.at(0)
|
|
|
|
|
.hasClass('ant-form-item-no-colon'),
|
|
|
|
|
).toBe(true);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('should props colon of Form.Item override the props colon of Form.', () => {
|
|
|
|
|
const wrapper = mount(
|
|
|
|
|
<Form colon={false}>
|
|
|
|
|
<Form.Item label="label">input</Form.Item>
|
|
|
|
|
<Form.Item label="label" colon>
|
|
|
|
|
input
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item label="label" colon={false}>
|
|
|
|
|
input
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</Form>,
|
|
|
|
|
);
|
|
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
|
|
|
|
|
|
|
|
const testLabel = mount(
|
|
|
|
|
<Form colon={false}>
|
|
|
|
|
<Form.Item label="label:" colon>
|
|
|
|
|
input
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item label="label:" colon>
|
|
|
|
|
input
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</Form>,
|
|
|
|
|
);
|
|
|
|
|
expect(
|
|
|
|
|
testLabel
|
|
|
|
|
.find('.ant-form-item-label label')
|
|
|
|
|
.at(0)
|
|
|
|
|
.text(),
|
|
|
|
|
).not.toContain(':');
|
|
|
|
|
expect(
|
|
|
|
|
testLabel
|
|
|
|
|
.find('.ant-form-item-label label')
|
|
|
|
|
.at(1)
|
|
|
|
|
.text(),
|
|
|
|
|
).not.toContain(':');
|
|
|
|
|
});
|
|
|
|
|
|
2017-01-09 11:03:35 +08:00
|
|
|
|
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>,
|
2017-01-09 11:03:35 +08:00
|
|
|
|
);
|
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(':');
|
2017-01-09 11:03:35 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
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">
|
2017-01-09 11:03:35 +08:00
|
|
|
|
<Form.Item label="label:">input</Form.Item>
|
|
|
|
|
<Form.Item label="label:">input</Form.Item>
|
2018-12-07 16:17:45 +08:00
|
|
|
|
</Form>,
|
2017-01-09 11:03:35 +08:00
|
|
|
|
);
|
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(':');
|
2017-01-09 11:03:35 +08:00
|
|
|
|
});
|
2017-02-14 10:46:54 +08:00
|
|
|
|
|
|
|
|
|
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-02-14 10:46:54 +08:00
|
|
|
|
);
|
2017-09-20 16:26:18 +08:00
|
|
|
|
expect(wrapper.find('.ant-form-item-control-wrapper').hostNodes().length).toBe(2);
|
2017-02-14 10:46:54 +08:00
|
|
|
|
expect(wrapper.find('.ant-form-item-control-wrapper.ant-col-14').length).toBe(1);
|
|
|
|
|
});
|
2017-09-01 14:13:09 +08:00
|
|
|
|
|
|
|
|
|
// 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>
|
2017-09-01 14:13:09 +08:00
|
|
|
|
</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>
|
2017-09-01 14:13:09 +08:00
|
|
|
|
</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);
|
2017-09-01 14:13:09 +08:00
|
|
|
|
});
|
2017-09-21 21:07:21 +08:00
|
|
|
|
|
|
|
|
|
// 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');
|
2017-09-21 21:07:21 +08:00
|
|
|
|
}).not.toThrow();
|
2018-12-07 16:17:45 +08:00
|
|
|
|
expect(
|
|
|
|
|
wrapper
|
|
|
|
|
.find('Form input')
|
|
|
|
|
.at(0)
|
|
|
|
|
.getDOMNode(),
|
|
|
|
|
).toBe(document.activeElement);
|
2017-09-21 21:07:21 +08:00
|
|
|
|
});
|
2017-01-09 11:03:35 +08:00
|
|
|
|
});
|