import { Button, Input, Select, Form, DatePicker } from 'antd';
import { configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import moment from 'moment';
import React from 'react';
import TableSearchBar from '..';
configure({ adapter: new Adapter() });
function createTableSearchBar(props) {
return (
);
}
describe('TableSearchBar', () => {
it('render TableSearchBar correctly', () => {
let tableSearchBar = createTableSearchBar({});
const wrapper = mount(tableSearchBar);
expect(wrapper.find(Button)).toHaveLength(2);
expect(wrapper.find(Button).at(0).props().children).toBe('查询');
expect(wrapper.find(Button).at(1).props().children).toBe('重置');
});
it('handle search and reset correctly', () => {
const handleSearch = jest.fn();
const handleReset = jest.fn();
let tableSearchBar = createTableSearchBar({
basicSearchs: ['S-Input'],
fieldsValue: {},
onSearch: handleSearch,
onReset: handleReset,
});
const wrapper = mount(tableSearchBar);
wrapper.find(Input).simulate('change', { target: { value: '233' } });
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({ searchType: 2, searchValue: '233' });
wrapper.find(Button).at(1).simulate('click');
expect(handleReset).toBeCalledWith({});
});
it('render basicSearchs correctly', () => {
const handleSearch = jest.fn();
let tableSearchBar = createTableSearchBar({
basicSearchs: [{
type: 'SS-Input',
props: {
mappingType: {
fieldName: 'testMappingType',
},
},
}, 'DateRange'],
fieldsValue: {},
onSearch: handleSearch,
});
const wrapper = mount(tableSearchBar);
wrapper.find(Input).simulate('change', { target: { value: '233' } });
wrapper.find(Select).at(0).simulate('click');
wrapper.find('.ant-select-dropdown-menu-item').at(3).simulate('click');
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
searchType: 4,
testMappingType: 1,
searchValue: '233',
});
});
it('render advanceSearchs correctly', () => {
const handleSearch = jest.fn();
let tableSearchBar = createTableSearchBar({
basicSearchs: [],
advanceSearchs: [
{
type: 'DateRange',
label: '反馈时间',
props: {
fieldsName: ['startTime', 'endTime'],
placeholder: ['开始日期', '结束日期'],
initialValue: [
moment('2017-12-01 12:00:00'),
moment('2017-12-10 12:00:00'),
],
},
},
{
type: 'Select',
label: '处理人',
props: {
fieldName: 'handleOperatorId',
placeholder: '请选择',
options: [
{
value: 1,
text: '真的',
},
{
value: 2,
text: '不好',
},
],
initialValue: 2,
},
},
],
fieldsValue: {},
onSearch: handleSearch,
});
const wrapper = mount(tableSearchBar);
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
startTime: '2017-12-01 12:00:00',
endTime: '2017-12-10 12:00:00',
handleOperatorId: 2,
});
});
it('render basicSearchs and advanceSearchs correctly', () => {
const handleSearch = jest.fn();
let tableSearchBar = createTableSearchBar({
basicSearchs: ['S-Input'],
advanceSearchs: [{
type: 'Input',
label: '处理人',
props: {
fieldName: 'input',
placeholder: '请选择',
},
}],
fieldsValue: {},
onSearch: handleSearch,
});
const wrapper = mount(tableSearchBar);
wrapper.find(Input).at(0).simulate('change', { target: { value: '123' } });
wrapper.find(Input).at(1).simulate('change', { target: { value: '233' } });
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
searchType: 2,
searchValue: '123',
input: '233',
});
});
it('render fields from fieldsValue correctly', () => {
const handleSearch = jest.fn();
const handleReset = jest.fn();
let tableSearchBar = createTableSearchBar({
advanceSearchs: [
{
type: 'DateRange',
label: '反馈时间',
props: {
fieldsName: ['startTime', 'endTime'],
placeholder: ['开始日期', '结束日期'],
initialValue: [
moment('2017-12-01'),
moment('2017-12-10'),
],
},
},
{
type: 'Input',
label: '处理人',
props: {
fieldName: 'input',
},
},
],
fieldsValue: {
startTime: '2018-12-01',
endTime: '2018-12-10 12:00:00',
},
onSearch: handleSearch,
onReset: handleReset,
});
const wrapper = mount(tableSearchBar);
wrapper.find(Input).simulate('change', { target: { value: '233' } });
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
startTime: '2018-12-01 00:00:00',
endTime: '2018-12-10 12:00:00',
input: '233',
});
wrapper.find(Button).at(1).simulate('click');
expect(handleReset).toBeCalledWith({
startTime: '2017-12-01 00:00:00',
endTime: '2017-12-10 00:00:00',
});
});
it('render DatePicker correctly', () => {
const handleSearch = jest.fn();
const handleReset = jest.fn();
let tableSearchBar = createTableSearchBar({
advanceSearchs: [
{
type: 'DatePicker',
label: '时间',
props: {
fieldName: 'date',
initialValue: moment('2017-12-01'),
},
},
],
fieldsValue: {},
onSearch: handleSearch,
onReset: handleReset,
});
const wrapper = mount(tableSearchBar);
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
date: '2017-12-01 00:00:00',
});
wrapper.find(Button).at(1).simulate('click');
expect(handleReset).toBeCalledWith({
date: '2017-12-01 00:00:00',
});
});
it('render DateRange correctly', () => {
const handleSearch = jest.fn();
const handleReset = jest.fn();
let tableSearchBar = createTableSearchBar({
basicSearchs: [],
advanceSearchs: [
{
type: 'DateRange',
label: '反馈时间',
props: {
fieldsName: ['startTime', 'endTime'],
placeholder: ['开始日期', '结束日期'],
initialValue: [
moment('2017-12-01'),
moment('2017-12-10'),
],
format: 'YYYY-MM-DD',
addonSelect: {
fieldName: 'timezone',
initialValue: 1,
options: [{
value: 1,
text: '北京时间',
}, {
value: 2,
text: '美东时间',
}],
},
},
},
],
fieldsValue: {},
onSearch: handleSearch,
onReset: handleReset,
});
const wrapper = mount(tableSearchBar);
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
timezone: 1,
startTime: '2017-12-01',
endTime: '2017-12-10',
});
wrapper.find(Button).at(1).simulate('click');
expect(handleReset).toBeCalledWith({
timezone: 1,
startTime: '2017-12-01',
endTime: '2017-12-10',
});
});
it('render InputNumber correctly', () => {
const handleSearch = jest.fn();
const handleReset = jest.fn();
let tableSearchBar = createTableSearchBar({
advanceSearchs: [
{
type: 'InputNumber',
props: {
fieldName: 'num',
},
},
],
fieldsValue: {},
onSearch: handleSearch,
onReset: handleReset,
});
const wrapper = mount(tableSearchBar);
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({});
wrapper.find(Button).at(1).simulate('click');
expect(handleReset).toBeCalledWith({});
wrapper.find('.ant-input-number-input').simulate('change', { target: { value: '123' } });
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
num: 123,
});
});
it('render Radio correctly', () => {
const handleSearch = jest.fn();
const handleReset = jest.fn();
let tableSearchBar = createTableSearchBar({
advanceSearchs: [
{
type: 'Radio',
props: {
fieldName: 'radio',
options: [{
label: 'a',
value: 1,
}, {
label: 'b',
value: 2,
}, {
label: 'c',
value: 3,
}],
},
},
],
fieldsValue: { radio: 1 },
onSearch: handleSearch,
onReset: handleReset,
});
const wrapper = mount(tableSearchBar);
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
radio: 1,
});
wrapper.find(Button).at(1).simulate('click');
expect(handleReset).toBeCalledWith({});
wrapper.find('.ant-radio-input').at(2).simulate('change');
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
radio: 3,
});
});
it('render NumberInterval correctly', () => {
const handleSearch = jest.fn();
const handleReset = jest.fn();
let tableSearchBar = createTableSearchBar({
advanceSearchs: [
{
type: 'NumberInterval',
props: {
fieldsName: ['min', 'max'],
},
},
],
fieldsValue: { min: 1, max: 10 },
onSearch: handleSearch,
onReset: handleReset,
});
const wrapper = mount(tableSearchBar);
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
min: 1,
max: 10,
});
wrapper.find(Button).at(1).simulate('click');
expect(handleReset).toBeCalledWith({});
wrapper.find('.ant-input-number-input').at(0).simulate('change', { target: { value: '10' } });
wrapper.find('.ant-input-number-input').at(1).simulate('change', { target: { value: '100' } });
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
min: 10,
max: 100,
});
});
it('render OptGroupSelect correctly', () => {
const handleSearch = jest.fn();
const handleReset = jest.fn();
let tableSearchBar = createTableSearchBar({
advanceSearchs: [
{
type: 'OptGroupSelect',
props: {
fieldName: 'opts',
options: [],
},
},
],
fieldsValue: { opts: 1 },
onSearch: handleSearch,
onReset: handleReset,
});
const wrapper = mount(tableSearchBar);
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
opts: 1,
});
wrapper.find(Button).at(1).simulate('click');
expect(handleReset).toBeCalledWith({});
});
it('render Checkbox correctly', () => {
const handleSearch = jest.fn();
const handleReset = jest.fn();
let tableSearchBar = createTableSearchBar({
advanceSearchs: [
{
type: 'Checkbox',
props: {
fieldName: 'checkbox',
options: [{
label: 'a',
value: 1,
}, {
label: 'b',
value: 2,
}],
},
},
],
fieldsValue: { checkbox: [1] },
onSearch: handleSearch,
onReset: handleReset,
});
const wrapper = mount(tableSearchBar);
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
checkbox: [1],
});
wrapper.find(Button).at(1).simulate('click');
expect(handleReset).toBeCalledWith({});
wrapper.find('.ant-checkbox-input').at(1).simulate('change');
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
checkbox: [2],
});
});
it('render Switch correctly', () => {
const handleSearch = jest.fn();
const handleReset = jest.fn();
let tableSearchBar = createTableSearchBar({
advanceSearchs: [
{
type: 'Switch',
props: {
fieldName: 'switch',
},
},
],
fieldsValue: { switch: true },
onSearch: handleSearch,
onReset: handleReset,
});
const wrapper = mount(tableSearchBar);
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
switch: true,
});
wrapper.find(Button).at(1).simulate('click');
expect(handleReset).toBeCalledWith({
switch: false,
});
wrapper.find('.ant-switch').simulate('click');
expect(handleSearch).toBeCalledWith({
switch: true,
});
});
it('render custom correctly', () => {
const handleSearch = jest.fn();
const handleReset = jest.fn();
let tableSearchBar = createTableSearchBar({
advanceSearchs: [
{
type: 'custom',
customRender: (form) => {
return (
{form.getFieldDecorator('aaa', {
initialValue: moment('2019-04-01'),
})(
,
)}
);
},
}, {
type: 'custom',
customRender: (form) => {
return (
{form.getFieldDecorator('bbb', {})(
,
)}
);
},
},
],
fieldsValue: { aaa: moment('2019-01-01') },
onSearch: handleSearch,
onReset: handleReset,
});
const wrapper = mount(tableSearchBar);
wrapper.find(Input).simulate('change', { target: { value: '233' } });
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
aaa: moment('2019-01-01'),
bbb: '233',
});
wrapper.find(Button).at(1).simulate('click');
expect(handleReset).toBeCalledWith({
aaa: moment('2019-04-01'),
});
});
it('render omitSearchs correctly', () => {
const handleSearch = jest.fn();
const handleReset = jest.fn();
let tableSearchBar = createTableSearchBar({
advanceSearchs: [
{
type: 'Input',
label: '处理人',
props: {
fieldName: 'input1',
},
},
{
type: 'Input',
label: '处理人',
props: {
fieldName: 'input2',
},
},
{
type: 'Input',
label: '处理人',
props: {
fieldName: 'input3',
initialValue: 'input3',
},
}],
fieldsValue: { input1: 'input1' },
onSearch: handleSearch,
onReset: handleReset,
omitSearchs: true,
omitSearchsNum: 1,
});
const wrapper = mount(tableSearchBar);
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
input1: 'input1',
});
wrapper.find(Button).at(1).simulate('click');
expect(handleReset).toBeCalledWith({});
wrapper.find('.toogle-form').simulate('click');
wrapper.find(Button).at(0).simulate('submit');
expect(handleSearch).toBeCalledWith({
input3: 'input3',
});
});
});