Improve Table testing (ant-design#4151)

tests/table/SelectionBox.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import { mount } from 'enzyme';
 import createStore from '../../components/table/createStore';
 import SelectionBox from '../../components/table/SelectionBox';
-import TestUtils from 'react-addons-test-utils';
 
 describe('SelectionBox', () => {
   it('unchecked by selectedRowKeys ', () => {
@@ -10,7 +10,7 @@ describe('SelectionBox', () => {
       selectionDirty: false,
     });
 
-    const instance = TestUtils.renderIntoDocument(
+    const wrapper = mount(
       <SelectionBox
         store={store}
         rowIndex="1"
@@ -20,7 +20,7 @@ describe('SelectionBox', () => {
       />
     );
 
-    expect(instance.state).toEqual({ checked: false });
+    expect(wrapper.state()).toEqual({ checked: false });
   });
 
   it('checked by selectedRowKeys ', () => {
@@ -29,7 +29,7 @@ describe('SelectionBox', () => {
       selectionDirty: false,
     });
 
-    const instance = TestUtils.renderIntoDocument(
+    const wrapper = mount(
       <SelectionBox
         store={store}
         rowIndex="1"
@@ -39,7 +39,7 @@ describe('SelectionBox', () => {
       />
     );
 
-    expect(instance.state).toEqual({ checked: true });
+    expect(wrapper.state()).toEqual({ checked: true });
   });
 
   it('checked by defaultSelection', () => {
@@ -48,7 +48,7 @@ describe('SelectionBox', () => {
       selectionDirty: false,
     });
 
-    const instance = TestUtils.renderIntoDocument(
+    const wrapper = mount(
       <SelectionBox
         store={store}
         rowIndex="1"
@@ -58,7 +58,7 @@ describe('SelectionBox', () => {
       />
     );
 
-    expect(instance.state).toEqual({ checked: true });
+    expect(wrapper.state()).toEqual({ checked: true });
   });
 
   it('checked when store change', () => {
@@ -67,7 +67,7 @@ describe('SelectionBox', () => {
       selectionDirty: false,
     });
 
-    const instance = TestUtils.renderIntoDocument(
+    const wrapper = mount(
       <SelectionBox
         store={store}
         rowIndex="1"
@@ -82,6 +82,6 @@ describe('SelectionBox', () => {
       selectionDirty: true,
     });
 
-    expect(instance.state).toEqual({ checked: true });
+    expect(wrapper.state()).toEqual({ checked: true });
   });
 })

tests/table/Table.filter.test.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import { render, mount } from 'enzyme';
+import { renderToJson } from 'enzyme-to-json';
+import Table from '../../components/table';
+
+describe('Table.filter', () => {
+  const filterFn = (value, record) => record.name === 'Lucy';
+  const column = {
+    title: 'Name',
+    dataIndex: 'name',
+    filters: [
+      { text: 'Boy', value: 'boy' },
+      { text: 'Girl', value: 'girl' },
+      { text: 'Title', value: 'title', children: [
+        { text: 'Designer', value: 'designer' },
+        { text: 'Coder', value: 'coder' },
+      ] },
+    ],
+    onFilter: filterFn,
+  };
+
+  const data = [
+    { key: 0, name: 'Jack' },
+    { key: 1, name: 'Lucy' },
+    { key: 2, name: 'Tom' },
+    { key: 3, name: 'Jerry' },
+  ];
+
+  function createTable(props) {
+    return (
+      <Table
+        columns={[ column ]}
+        dataSource={data}
+        pagination={false}
+        {...props}
+      />
+    )
+  }
+
+  it('renders filter correctly', () => {
+    const wrapper = render(createTable());
+
+    expect(renderToJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('renders menu correctly', () => {
+    const wrapper = mount(createTable());
+    const dropdownWrapper = render(wrapper.find('Trigger').node.getComponent());
+    expect(renderToJson(dropdownWrapper)).toMatchSnapshot();
+  });
+
+  it('renders radio filter correctly', () => {
+    const wrapper = mount(createTable({
+      columns: [{
+        ...column,
+        filterMultiple: false
+      }],
+    }));
+    const dropdownWrapper = render(wrapper.find('Trigger').node.getComponent());
+    expect(renderToJson(dropdownWrapper)).toMatchSnapshot();
+  });
+
+  it('renders custom content correctly', () => {
+    const filter = (
+      <div className="custom-filter-dropdown">
+        custom filter
+      </div>
+    );
+    const wrapper = mount(createTable({
+      columns: [{
+        ...column,
+        filterDropdown: filter
+      }],
+    }));
+
+    const dropdownWrapper = render(wrapper.find('Trigger').node.getComponent());
+    expect(renderToJson(dropdownWrapper)).toMatchSnapshot();
+  });
+
+  xit('can be controlled by filterDropdownVisible', () => {
+    const wrapper = mount(createTable({
+      columns: [{
+        ...column,
+        filterDropdownVisible: true
+      }],
+    }));
+    const dropdown = wrapper.find('Dropdown').first();
+
+    expect(dropdown.props().visible).toBe(true);
+    wrapper.setProps({ columns: [{
+      ...column,
+      filterDropdownVisible: false
+    }]});
+    expect(dropdown.props().visible).toBe(false);
+  });
+
+  it('fires change event when visible change', () => {
+    const handleChange = jest.fn();
+    const wrapper = mount(createTable({
+      columns: [{
+        ...column,
+        onFilterDropdownVisibleChange: handleChange
+      }],
+    }));
+
+    wrapper.find('Dropdown').first().simulate('click');
+
+    expect(handleChange).toBeCalledWith(true);
+  });
+
+  it('can be controlled by filteredValue', () => {
+    const wrapper = mount(createTable({
+      columns: [{
+        ...column,
+        filteredValue: ['girl'],
+      }],
+    }));
+
+    expect(wrapper.find('tbody tr').length).toBe(1);
+    wrapper.setProps({ columns: [{
+      ...column,
+      filteredValue: [],
+    }]});
+    expect(wrapper.find('tbody tr').length).toBe(4);
+  });
+
+  it('fires change event', () => {
+    const handleChange = jest.fn();
+    const wrapper = mount(createTable({ onChange: handleChange }));
+    const dropdownWrapper = mount(wrapper.find('Trigger').node.getComponent());
+
+    dropdownWrapper.find('MenuItem').first().simulate('click');
+    dropdownWrapper.find('.confirm').simulate('click');
+
+    expect(handleChange).toBeCalledWith({}, { name: ['boy'] }, {});
+  });
+});

tests/table/Table.pagination.test.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { render, mount } from 'enzyme';
+import { renderToJson } from 'enzyme-to-json';
+import Table from '../../components/table';
+
+describe('Table.pagination', () => {
+  const columns = [{
+    title: 'Name',
+    dataIndex: 'name',
+  }];
+
+  const data = [
+    { key: 0, name: 'Jack' },
+    { key: 1, name: 'Lucy' },
+    { key: 2, name: 'Tom' },
+    { key: 3, name: 'Jerry' },
+  ];
+
+  const pagination = { pageSize: 2 };
+
+  function createTable(props) {
+    return (
+      <Table
+        columns={columns}
+        dataSource={data}
+        pagination={pagination}
+        {...props}
+      />
+    )
+  }
+
+  function renderedNames (wrapper) {
+    return wrapper.find('TableRow').map(row => row.props().record.name);
+  }
+
+  it('renders pagination correctly', () => {
+    const wrapper = render(createTable());
+    expect(renderToJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('paginate data', () => {
+    const wrapper = mount(createTable());
+
+    expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy']);
+    wrapper.find('Pager').last().simulate('click');
+    expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
+  });
+
+
+  it('repaginates when pageSize change', () => {
+    const wrapper = mount(createTable());
+
+    wrapper.setProps({ pagination: { pageSize: 1 } });
+    expect(renderedNames(wrapper)).toEqual(['Jack']);
+  });
+
+  it('fires change event', () => {
+    const handleChange = jest.fn();
+    const noop = () => {};
+    const wrapper = mount(createTable({
+      pagination: { ...pagination, onChange: noop, onShowSizeChange: noop },
+      onChange: handleChange
+    }));
+
+    wrapper.find('Pager').last().simulate('click');
+
+    expect(handleChange).toBeCalledWith(
+      {
+        current: 2,
+        onChange: noop,
+        onShowSizeChange: noop,
+        pageSize: 2
+      },
+      {},
+      {}
+    );
+  });
+});