diff --git a/.babelrc b/.babelrc
new file mode 100644
index 000000000..b02b86b54
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+ "presets": ["es2015-ie", "react", "stage-0"]
+}
diff --git a/package.json b/package.json
index 4a0c2d767..fb4a96984 100644
--- a/package.json
+++ b/package.json
@@ -49,9 +49,14 @@
"lint:fix": "rc-tools run lint --fix",
"karma": "rc-tools run karma",
"saucelabs": "rc-tools run saucelabs",
- "test": "rc-tools run test",
+ "test": "jest",
"chrome-test": "rc-tools run chrome-test",
- "coverage": "rc-tools run coverage"
+ "coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls"
+ },
+ "jest": {
+ "collectCoverageFrom": [
+ "src/**/*"
+ ]
},
"dependencies": {
"lodash.get": "^4.4.2",
@@ -60,7 +65,11 @@
"warning": "^3.0.0"
},
"devDependencies": {
+ "coveralls": "^2.11.15",
+ "enzyme": "^2.7.0",
+ "enzyme-to-json": "^1.4.5",
"expect.js": "~0.3.1",
+ "jest": "^18.1.0",
"jquery": "^1.11.2",
"pre-commit": "1.x",
"rc-animate": "^2.3.0",
diff --git a/src/utils.js b/src/utils.js
index 4185baed7..7dff535e6 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -66,6 +66,6 @@ const warned = {};
export function warningOnce(condition, format, args) {
if (!warned[format]) {
warning(condition, format, args);
- warned[format] = true;
+ warned[format] = !condition;
}
}
diff --git a/tests/ColumnManager.spec.js b/tests/ColumnManager.spec.js
index cccc80252..da547c420 100644
--- a/tests/ColumnManager.spec.js
+++ b/tests/ColumnManager.spec.js
@@ -1,9 +1,8 @@
-/* eslint-disable no-console,func-names,react/no-multi-comp,indent */
-const React = require('react');
-const expect = require('expect.js');
-const ColumnManager = require('../src/ColumnManager');
-const Column = require('../src/Column');
-const ColumnGroup = require('../src/ColumnGroup');
+/* eslint-disable no-undef */
+import React from 'react';
+import ColumnManager from '../src/ColumnManager';
+import Column from '../src/Column';
+import ColumnGroup from '../src/ColumnGroup';
describe('ColumnManager', () => {
describe('groupedColumns', () => {
@@ -11,61 +10,53 @@ describe('ColumnManager', () => {
const columns = [
{ title: '表头A', className: 'title-a', dataIndex: 'a', key: 'a' },
{ title: '表头B', className: 'title-b', dataIndex: 'b', key: 'b' },
- { title: '表头C', className: 'title-c', children:
- [
- { title: '表头D', className: 'title-d', dataIndex: 'c', key: 'c' },
- { title: '表头E', className: 'title-e', children:
- [
- { title: '表头F', className: 'title-f', dataIndex: 'd', key: 'd' },
- { title: '表头G', className: 'title-g', children:
- [
- { title: '表头H', className: 'title-h', dataIndex: 'e', key: 'e' },
- { title: '表头I', className: 'title-i', dataIndex: 'f', key: 'f' },
- ],
- },
- ],
- },
- ],
- },
- { title: '表头J', className: 'title-j', children:
- [
- { title: '表头K', className: 'title-k', dataIndex: 'g', key: 'g' },
- { title: '表头L', className: 'title-l', dataIndex: 'h', key: 'h' },
- ],
- },
+ { title: '表头C', className: 'title-c', children: [
+ { title: '表头D', className: 'title-d', dataIndex: 'c', key: 'c' },
+ { title: '表头E', className: 'title-e', children:
+ [
+ { title: '表头F', className: 'title-f', dataIndex: 'd', key: 'd' },
+ { title: '表头G', className: 'title-g', children:
+ [
+ { title: '表头H', className: 'title-h', dataIndex: 'e', key: 'e' },
+ { title: '表头I', className: 'title-i', dataIndex: 'f', key: 'f' },
+ ],
+ },
+ ],
+ },
+ ] },
+ { title: '表头J', className: 'title-j', children: [
+ { title: '表头K', className: 'title-k', dataIndex: 'g', key: 'g' },
+ { title: '表头L', className: 'title-l', dataIndex: 'h', key: 'h' },
+ ] },
{ title: '表头M', className: 'title-m', dataIndex: 'i', key: 'i' },
];
const columnManager = new ColumnManager(columns);
const groupedColumns = columnManager.groupedColumns();
- expect(groupedColumns).to.eql([
+ expect(groupedColumns).toEqual([
{ title: '表头A', className: 'title-a', dataIndex: 'a', key: 'a', rowSpan: 4 },
{ title: '表头B', className: 'title-b', dataIndex: 'b', key: 'b', rowSpan: 4 },
- { title: '表头C', className: 'title-c', children:
- [
- { title: '表头D', className: 'title-d', dataIndex: 'c', key: 'c', rowSpan: 3 },
- { title: '表头E', className: 'title-e', children:
- [
- { title: '表头F', className: 'title-f', dataIndex: 'd', key: 'd', rowSpan: 2 },
- { title: '表头G', className: 'title-g', children:
- [
- { title: '表头H', className: 'title-h', dataIndex: 'e', key: 'e' },
- { title: '表头I', className: 'title-i', dataIndex: 'f', key: 'f' },
- ],
- colSpan: 2,
- },
- ],
- colSpan: 3,
+ { title: '表头C', className: 'title-c', children: [
+ { title: '表头D', className: 'title-d', dataIndex: 'c', key: 'c', rowSpan: 3 },
+ { title: '表头E', className: 'title-e', children: [
+ { title: '表头F', className: 'title-f', dataIndex: 'd', key: 'd', rowSpan: 2 },
+ { title: '表头G', className: 'title-g', children: [
+ { title: '表头H', className: 'title-h', dataIndex: 'e', key: 'e' },
+ { title: '表头I', className: 'title-i', dataIndex: 'f', key: 'f' },
+ ],
+ colSpan: 2,
},
],
+ colSpan: 3,
+ },
+ ],
colSpan: 4,
},
- { title: '表头J', className: 'title-j', children:
- [
- { title: '表头K', className: 'title-k', dataIndex: 'g', key: 'g', rowSpan: 3 },
- { title: '表头L', className: 'title-l', dataIndex: 'h', key: 'h', rowSpan: 3 },
- ],
+ { title: '表头J', className: 'title-j', children: [
+ { title: '表头K', className: 'title-k', dataIndex: 'g', key: 'g', rowSpan: 3 },
+ { title: '表头L', className: 'title-l', dataIndex: 'h', key: 'h', rowSpan: 3 },
+ ],
colSpan: 2,
},
{ title: '表头M', className: 'title-m', dataIndex: 'i', key: 'i', rowSpan: 4 },
@@ -97,7 +88,7 @@ describe('ColumnManager', () => {
const columnManager = new ColumnManager(null, elements);
- expect(columnManager.columns).to.eql([
+ expect(columnManager.columns).toEqual([
{
title: 'a',
children: [
diff --git a/tests/Table.expandRow.spec.js b/tests/Table.expandRow.spec.js
new file mode 100644
index 000000000..bf811bc61
--- /dev/null
+++ b/tests/Table.expandRow.spec.js
@@ -0,0 +1,130 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { render, mount } from 'enzyme';
+import { renderToJson, mountToJson } from 'enzyme-to-json';
+import Table from '..';
+
+describe('Table.expand', () => {
+ const columns = [
+ { title: 'Name', dataIndex: 'name', key: 'name' },
+ { title: 'Age', dataIndex: 'age', key: 'age' },
+ ];
+ const data = [
+ { key: 0, name: 'Lucy', age: 27 },
+ { key: 1, name: 'Jack', age: 28 },
+ ];
+ const expandedRowRender = () => extra data
;
+ const createTable = (props) => (
+
+ );
+
+ it('renders expand row correctly', () => {
+ const wrapper = render(createTable({ expandedRowRender }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('renders expand icon as cell', () => {
+ const wrapper = render(createTable({
+ expandedRowRender,
+ expandIconAsCell: true,
+ }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('renders expand icon to the specify column', () => {
+ const wrapper = render(createTable({
+ expandedRowRender,
+ expandIconColumnIndex: 1,
+ }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('renders nested data correctly', () => {
+ const localData = [
+ {
+ key: '0',
+ name: 'Lucy',
+ age: 27,
+ children: [
+ { key: '0-1', name: 'Jim', age: '2' },
+ ],
+ },
+ {
+ key: 1,
+ name: 'Jack',
+ age: 28,
+ },
+ ];
+ const wrapper = render(createTable({ data: localData }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('expand all rows by default', () => {
+ const wrapper = render(createTable({
+ expandedRowRender,
+ defaultExpandAllRows: true,
+ }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('expand rows by defaultExpandedRowKeys', () => {
+ const wrapper = render(createTable({
+ expandedRowRender,
+ defaultExpandedRowKeys: [1],
+ }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('controlled by expandedRowKeys', () => {
+ const wrapper = mount(createTable({
+ expandedRowRender,
+ expandedRowKeys: [0],
+ }));
+ expect(mountToJson(wrapper)).toMatchSnapshot();
+ wrapper.setProps({ expandedRowKeys: [1] });
+ expect(mountToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('renders expend row class correctly', () => {
+ const expandedRowClassName = jest.fn().mockReturnValue('expand-row-test-class-name');
+ const wrapper = render(createTable({
+ expandedRowRender,
+ expandedRowKeys: [0],
+ expandedRowClassName,
+ }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ expect(expandedRowClassName).toBeCalledWith(data[0], 0, 0);
+ });
+
+ it('fires expand change event', () => {
+ const onExpand = jest.fn();
+ const wrapper = mount(createTable({
+ expandedRowRender,
+ onExpand,
+ }));
+ wrapper.find('ExpandIcon').first().simulate('click');
+ expect(onExpand).toBeCalledWith(true, data[0]);
+ wrapper.find('ExpandIcon').first().simulate('click');
+ expect(onExpand).toBeCalledWith(false, data[0]);
+ });
+
+ it('fires onExpandedRowsChange event', () => {
+ const onExpandedRowsChange = jest.fn();
+ const wrapper = mount(createTable({
+ expandedRowRender,
+ onExpandedRowsChange,
+ }));
+ wrapper.find('ExpandIcon').first().simulate('click');
+ expect(onExpandedRowsChange).toBeCalledWith([0]);
+ });
+
+ it('expand row by click', () => {
+ const wrapper = mount(createTable({ expandedRowRender }));
+ wrapper.find('ExpandIcon').first().simulate('click');
+ expect(mountToJson(wrapper)).toMatchSnapshot();
+ });
+});
diff --git a/tests/Table.fixedColumns.spec.js b/tests/Table.fixedColumns.spec.js
new file mode 100644
index 000000000..a49683346
--- /dev/null
+++ b/tests/Table.fixedColumns.spec.js
@@ -0,0 +1,63 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { render, mount } from 'enzyme';
+import { renderToJson } from 'enzyme-to-json';
+import Table from '..';
+
+describe('Table.fixedColumns', () => {
+ const columns = [
+ { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
+ { title: 'title2', dataIndex: 'b', key: 'b', width: 100, fixed: 'left' },
+ { title: 'title3', dataIndex: 'c', key: 'c' },
+ { title: 'title4', dataIndex: 'b', key: 'd' },
+ { title: 'title5', dataIndex: 'b', key: 'e' },
+ { title: 'title6', dataIndex: 'b', key: 'f' },
+ { title: 'title7', dataIndex: 'b', key: 'g' },
+ { title: 'title8', dataIndex: 'b', key: 'h' },
+ { title: 'title9', dataIndex: 'b', key: 'i' },
+ { title: 'title10', dataIndex: 'b', key: 'j' },
+ { title: 'title11', dataIndex: 'b', key: 'k' },
+ { title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
+ ];
+ const data = [
+ { a: '123', b: 'xxxxxxxx', d: 3, key: '1' },
+ { a: 'cdd', b: 'edd12221', d: 3, key: '2' },
+ { a: '133', c: 'edd12221', d: 2, key: '3' },
+ { a: '133', c: 'edd12221', d: 2, key: '4' },
+ { a: '133', c: 'edd12221', d: 2, key: '5' },
+ { a: '133', c: 'edd12221', d: 2, key: '6' },
+ { a: '133', c: 'edd12221', d: 2, key: '7' },
+ { a: '133', c: 'edd12221', d: 2, key: '8' },
+ { a: '133', c: 'edd12221', d: 2, key: '9' },
+ ];
+
+ it('renders correctly', () => {
+ const wrapper = render(
+
+ );
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('toggles hover class when user hovering', () => {
+ const wrapper = mount(
+
+ );
+ const tables = wrapper.find('table');
+ tables.at(0).find('tbody tr').at(0).simulate('mouseEnter');
+ expect(tables.at(0).find('tbody tr').at(0).is('.rc-table-row-hover')).toBe(true);
+ expect(tables.at(1).find('tbody tr').at(0).is('.rc-table-row-hover')).toBe(true);
+ expect(tables.at(2).find('tbody tr').at(0).is('.rc-table-row-hover')).toBe(true);
+ tables.at(0).find('tbody tr').at(0).simulate('mouseLeave');
+ expect(tables.at(0).find('tbody tr').at(0).is('.rc-table-row-hover')).toBe(false);
+ expect(tables.at(1).find('tbody tr').at(0).is('.rc-table-row-hover')).toBe(false);
+ expect(tables.at(2).find('tbody tr').at(0).is('.rc-table-row-hover')).toBe(false);
+ });
+});
diff --git a/tests/groupingColumnTitle.spec.js b/tests/Table.groupingColumns.spec.js
similarity index 70%
rename from tests/groupingColumnTitle.spec.js
rename to tests/Table.groupingColumns.spec.js
index 8c9f47642..b2da290f7 100644
--- a/tests/groupingColumnTitle.spec.js
+++ b/tests/Table.groupingColumns.spec.js
@@ -1,23 +1,9 @@
-/* eslint-disable no-console,func-names,react/no-multi-comp */
-const expect = require('expect.js');
-const Table = require('../');
-const React = require('react');
-const ReactDOM = require('react-dom');
-const $ = require('jquery');
+/* eslint-disable no-undef */
+import React from 'react';
+import { mount } from 'enzyme';
+import Table from '..';
describe('Table with grouping columns', () => {
- let div;
- let node;
-
- beforeEach(() => {
- div = document.createElement('div');
- node = $(div);
- });
-
- afterEach(() => {
- ReactDOM.unmountComponentAtNode(div);
- });
-
it('group columns', () => {
/**
* +---+---+---------------+-------+---+
@@ -63,31 +49,27 @@ describe('Table with grouping columns', () => {
{ key: '2', a: 'a2', b: 'b2', c: 'c2', d: 'd2', e: 'e2', f: 'f2', g: 'g2', h: 'h2', i: 'i2' },
{ key: '3', a: 'a3', b: 'b3', c: 'c3', d: 'd3', e: 'e3', f: 'f3', g: 'g3', h: 'h3', i: 'i3' },
];
-
- ReactDOM.render(
- ,
- div
- );
+ const wrapper = mount();
const cells = {
- 'title-a': ['4', undefined],
- 'title-b': ['4', undefined],
- 'title-c': [undefined, '4'],
- 'title-d': ['3', undefined],
- 'title-e': [undefined, '3'],
- 'title-f': ['2', undefined],
- 'title-g': [undefined, '2'],
+ 'title-a': [4, undefined],
+ 'title-b': [4, undefined],
+ 'title-c': [undefined, 4],
+ 'title-d': [3, undefined],
+ 'title-e': [undefined, 3],
+ 'title-f': [2, undefined],
+ 'title-g': [undefined, 2],
'title-h': [undefined, undefined],
'title-i': [undefined, undefined],
- 'title-j': [undefined, '2'],
- 'title-k': ['3', undefined],
- 'title-l': ['3', undefined],
- 'title-m': ['4', undefined],
+ 'title-j': [undefined, 2],
+ 'title-k': [3, undefined],
+ 'title-l': [3, undefined],
+ 'title-m': [4, undefined],
};
Object.keys(cells).forEach(className => {
const cell = cells[className];
- expect(node.find(`.${className}`).attr('rowspan')).to.be(cell[0]);
- expect(node.find(`.${className}`).attr('colspan')).to.be(cell[1]);
+ expect(wrapper.find(`th.${className}`).prop('rowSpan')).toBe(cell[0]);
+ expect(wrapper.find(`th.${className}`).prop('colSpan')).toBe(cell[1]);
});
});
@@ -109,18 +91,17 @@ describe('Table with grouping columns', () => {
{ key: '3', a: 'a3', b: 'b3', c: 'c3', d: 'd3' },
];
- ReactDOM.render(
- ,
- div
+ const wrapper = mount(
+
);
- const fixedRows = node.find('.rc-table-fixed-left thead tr');
- const titleA = node.find('.rc-table-fixed-left .title-a');
- const titleE = node.find('.rc-table-fixed-right .title-e');
+ const fixedRows = wrapper.find('.rc-table-fixed-left thead tr');
+ const titleA = wrapper.find('.rc-table-fixed-left th.title-a');
+ const titleE = wrapper.find('.rc-table-fixed-right th.title-e');
- expect(fixedRows.length).to.be(1);
- expect(titleA.attr('rowspan')).to.be('2');
- expect(titleE.attr('rowspan')).to.be('2');
+ expect(fixedRows.length).toBe(1);
+ expect(titleA.prop('rowSpan')).toBe(2);
+ expect(titleE.prop('rowSpan')).toBe(2);
});
it('https://github.com/ant-design/ant-design/issues/4061', () => {
@@ -162,11 +143,10 @@ describe('Table with grouping columns', () => {
},
];
- ReactDOM.render(
+ const wrapper = mount(
,
- div
);
- const titleB = node.find('.title-b');
- expect(titleB.attr('rowspan')).to.be('2');
+ const titleB = wrapper.find('.title-b');
+ expect(titleB.prop('rowSpan')).toBe(2);
});
});
diff --git a/tests/Table.spec.js b/tests/Table.spec.js
new file mode 100644
index 000000000..b400e62f3
--- /dev/null
+++ b/tests/Table.spec.js
@@ -0,0 +1,300 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { render, mount } from 'enzyme';
+import { renderToJson } from 'enzyme-to-json';
+import Table from '..';
+
+describe('Table', () => {
+ const data = [
+ { key: 'key0', name: 'Lucy' },
+ { key: 'key1', name: 'Jack' },
+ ];
+ const createTable = (props) => {
+ const columns = [
+ { title: 'Name', dataIndex: 'name', key: 'name' },
+ ];
+
+ return (
+
+ );
+ };
+
+ it('renders correctly', () => {
+ const wrapper = render(createTable({
+ prefixCls: 'test-prefix',
+ className: 'test-class-name',
+ }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('renders without header', () => {
+ const wrapper = render(createTable({ showHeader: false }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('renders fixed header correctly', () => {
+ const wrapper = render(createTable({ useFixedHeader: true }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('renders title correctly', () => {
+ const wrapper = render(createTable({ title: () => title
}));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('renders footer correctly', () => {
+ const wrapper = render(createTable({ footer: () => footer
}));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('renders table body to the wrapper', () => {
+ const getBodyWrapper = (body) => (
+
+ {body.props.children}
+
+ );
+ const wrapper = render(createTable({ getBodyWrapper }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('sets row refs', () => {
+ const wrapper = mount(createTable({ rowRef: (record) => record.key }));
+ expect(wrapper.instance().refs.key0).toBe(wrapper.find('TableRow').at(0).node);
+ expect(wrapper.instance().refs.key1).toBe(wrapper.find('TableRow').at(1).node);
+ });
+
+ describe('rowKey', () => {
+ it('uses record.key', () => {
+ const wrapper = mount(createTable());
+ expect(wrapper.find('TableRow').at(0).prop('hoverKey')).toBe('key0');
+ expect(wrapper.find('TableRow').at(1).prop('hoverKey')).toBe('key1');
+ });
+
+ it('sets by rowKey', () => {
+ const wrapper = mount(createTable({ rowKey: 'name' }));
+ expect(wrapper.find('TableRow').at(0).prop('hoverKey')).toBe('Lucy');
+ expect(wrapper.find('TableRow').at(1).prop('hoverKey')).toBe('Jack');
+ });
+
+ it('sets by rowKey function', () => {
+ const wrapper = mount(createTable({ rowKey: (record) => `${record.key}1` }));
+ expect(wrapper.find('TableRow').at(0).prop('hoverKey')).toBe('key01');
+ expect(wrapper.find('TableRow').at(1).prop('hoverKey')).toBe('key11');
+ });
+ });
+
+ describe('scroll', () => {
+ it('renders scroll.x is true', () => {
+ const wrapper = render(createTable({ scroll: { x: true } }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('renders scroll.x is a number', () => {
+ const wrapper = render(createTable({ scroll: { x: 200 } }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('renders scroll.y is a number', () => {
+ const wrapper = render(createTable({ scroll: { y: 200 } }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+ });
+
+ describe('row click', () => {
+ it('fires row click event', () => {
+ const onRowClick = jest.fn();
+ const wrapper = mount(createTable({ onRowClick }));
+ wrapper.find('tbody tr').first().simulate('click');
+ const call = onRowClick.mock.calls[0];
+ expect(call[0]).toBe(data[0]);
+ expect(call[1]).toBe(0);
+ expect(call[2].type).toBe('click');
+ });
+
+ it('fires double row click event', () => {
+ const onRowDoubleClick = jest.fn();
+ const wrapper = mount(createTable({ onRowDoubleClick }));
+ wrapper.find('tbody tr').first().simulate('doubleClick');
+ const call = onRowDoubleClick.mock.calls[0];
+ expect(call[0]).toBe(data[0]);
+ expect(call[1]).toBe(0);
+ expect(call[2].type).toBe('doubleclick');
+ });
+ });
+
+ it('renders column correctly', () => {
+ const columns = [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ key: 'name',
+ className: 'name-class',
+ width: 100,
+ },
+ ];
+ const wrapper = render(createTable({ columns }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('renders custom cell correctly', () => {
+ const columns = [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ key: 'name',
+ render: (text) => {text}
,
+ },
+ ];
+ const wrapper = render(createTable({ columns }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('fires cell click event', () => {
+ const onCellClick = jest.fn();
+ const columns = [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ key: 'name',
+ onCellClick,
+ },
+ ];
+ const wrapper = mount(createTable({ columns }));
+ wrapper.find('tbody td').first().simulate('click');
+ expect(onCellClick.mock.calls[0][0]).toBe(data[0]);
+ expect(onCellClick.mock.calls[0][1].type).toBe('click');
+ });
+
+ describe('dataIndex', () => {
+ it('pass record to render when it\'s falsy', () => {
+ [null, undefined, '', []].forEach(dataIndex => {
+ const cellRender = jest.fn();
+ const columns = [
+ {
+ title: 'Name',
+ dataIndex,
+ key: 'name',
+ render: cellRender,
+ },
+ ];
+ mount(createTable({ columns }));
+ expect(cellRender).toBeCalledWith(data[0], data[0], 0);
+ });
+ });
+
+ it('render text by path', () => {
+ const columns = [
+ { title: 'First Name', dataIndex: 'name.first', key: 'a' },
+ { title: 'Last Name', dataIndex: 'name.last', key: 'b' },
+ ];
+ const localData = [
+ { key: 'key0', name: { first: 'John', last: 'Doe' } },
+ { key: 'key1', name: { first: 'Terry', last: 'Garner' } },
+ ];
+ const wrapper = render(createTable({ columns, data: localData }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+ });
+
+ it('render empty cell if text is empty object', () => {
+ const localData = [
+ { key: 'key0', name: {} },
+ { key: 'key1', name: 'Jack' },
+ ];
+ const wrapper = render(createTable({ data: localData }));
+ expect(wrapper.find('table td').first().text()).toBe('');
+ });
+
+ it('renders colSpan correctly', () => {
+ const columns = [
+ {
+ title: 'Name',
+ dataIndex: 'firstName',
+ key: 'firstName',
+ colSpan: 2,
+ render: (text, record, index) => {
+ const obj = {
+ children: text,
+ props: {},
+ };
+ if (index === 0) {
+ obj.props.colSpan = 2;
+ }
+ return obj;
+ },
+ },
+ {
+ title: '',
+ dataIndex: 'lastName',
+ key: 'lastName',
+ colSpan: 0,
+ render: (text, record, index) => {
+ const obj = {
+ children: text,
+ props: {},
+ };
+ if (index === 0) {
+ obj.props.colSpan = 0;
+ }
+ return obj;
+ },
+ },
+ ];
+ const localData = [
+ { key: 'key0', firstName: 'John', lastName: 'Doe' },
+ { key: 'key1', firstName: 'Terry', lastName: 'Garner' },
+ ];
+ const wrapper = render(createTable({ columns, data: localData }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('renders rowSpan correctly', () => {
+ const columns = [
+ {
+ title: 'First Name',
+ dataIndex: 'firstName',
+ key: 'firstName',
+ },
+ {
+ title: 'Last Name',
+ dataIndex: 'lastName',
+ key: 'lastName',
+ render: (text, record, index) => {
+ const obj = {
+ children: text,
+ props: {},
+ };
+ if (index === 0) {
+ obj.props.rowSpan = 2;
+ } else {
+ obj.props.rowSpan = 0;
+ }
+ return obj;
+ },
+ },
+ ];
+ const localData = [
+ { key: 'key0', firstName: 'John', lastName: 'Doe' },
+ { key: 'key1', firstName: 'Terry', lastName: 'Garner' },
+ ];
+ const wrapper = render(createTable({ columns, data: localData }));
+ expect(renderToJson(wrapper)).toMatchSnapshot();
+ });
+
+ it('shows error if no rowKey specify', () => {
+ console.error = jest.fn();
+ const localData = [
+ { name: 'Lucy' },
+ { name: 'Jack' },
+ ];
+ mount(createTable({ data: localData }));
+ expect(console.error).toBeCalledWith(
+ 'Warning: Each record in table should have a unique `key` prop,' +
+ 'or set `rowKey` to an unique primary key.'
+ );
+ });
+});
diff --git a/tests/__snapshots__/Table.expandRow.spec.js.snap b/tests/__snapshots__/Table.expandRow.spec.js.snap
new file mode 100644
index 000000000..198c2a39e
--- /dev/null
+++ b/tests/__snapshots__/Table.expandRow.spec.js.snap
@@ -0,0 +1,2127 @@
+exports[`Table.expand controlled by expandedRowKeys 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ Name
+ |
+
+ Age
+ |
+
+
+
+
+
+
+
+ }
+ indent={0}
+ indentSize={15}
+ index={0}
+ prefixCls="rc-table-row"
+ record={
+ Object {
+ "age": 27,
+ "key": 0,
+ "name": "Lucy",
+ }
+ }>
+ |
+
+
+
+
+ Lucy
+ |
+
+
+
+ 27
+ |
+
+
+
+
+
+
+ }
+ indent={1}
+ prefixCls="rc-table-expanded-row">
+ |
+
+
+
+ extra data
+
+ |
+
+
+
+
+
+
+ }
+ indent={0}
+ indentSize={15}
+ index={1}
+ prefixCls="rc-table-row"
+ record={
+ Object {
+ "age": 28,
+ "key": 1,
+ "name": "Jack",
+ }
+ }>
+ |
+
+
+
+
+ Jack
+ |
+
+
+
+ 28
+ |
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Table.expand controlled by expandedRowKeys 2`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ Name
+ |
+
+ Age
+ |
+
+
+
+
+
+
+
+ }
+ indent={0}
+ indentSize={15}
+ index={0}
+ prefixCls="rc-table-row"
+ record={
+ Object {
+ "age": 27,
+ "key": 0,
+ "name": "Lucy",
+ }
+ }>
+ |
+
+
+
+
+ Lucy
+ |
+
+
+
+ 27
+ |
+
+
+
+
+
+
+ }
+ indent={0}
+ indentSize={15}
+ index={1}
+ prefixCls="rc-table-row"
+ record={
+ Object {
+ "age": 28,
+ "key": 1,
+ "name": "Jack",
+ }
+ }>
+ |
+
+
+
+
+ Jack
+ |
+
+
+
+ 28
+ |
+
+
+
+
+
+
+ }
+ indent={1}
+ prefixCls="rc-table-expanded-row">
+ |
+
+
+
+ extra data
+
+ |
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Table.expand expand all rows by default 1`] = `
+
+`;
+
+exports[`Table.expand expand row by click 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ Name
+ |
+
+ Age
+ |
+
+
+
+
+
+
+
+ }
+ indent={0}
+ indentSize={15}
+ index={0}
+ prefixCls="rc-table-row"
+ record={
+ Object {
+ "age": 27,
+ "key": 0,
+ "name": "Lucy",
+ }
+ }>
+ |
+
+
+
+
+ Lucy
+ |
+
+
+
+ 27
+ |
+
+
+
+
+
+
+ }
+ indent={1}
+ prefixCls="rc-table-expanded-row">
+ |
+
+
+
+ extra data
+
+ |
+
+
+
+
+
+
+ }
+ indent={0}
+ indentSize={15}
+ index={1}
+ prefixCls="rc-table-row"
+ record={
+ Object {
+ "age": 28,
+ "key": 1,
+ "name": "Jack",
+ }
+ }>
+ |
+
+
+
+
+ Jack
+ |
+
+
+
+ 28
+ |
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Table.expand expand rows by defaultExpandedRowKeys 1`] = `
+
+`;
+
+exports[`Table.expand renders expand icon as cell 1`] = `
+
+`;
+
+exports[`Table.expand renders expand icon to the specify column 1`] = `
+
+`;
+
+exports[`Table.expand renders expand row correctly 1`] = `
+
+`;
+
+exports[`Table.expand renders expend row class correctly 1`] = `
+
+`;
+
+exports[`Table.expand renders nested data correctly 1`] = `
+
+`;
diff --git a/tests/__snapshots__/Table.fixedColumns.spec.js.snap b/tests/__snapshots__/Table.fixedColumns.spec.js.snap
new file mode 100644
index 000000000..45ea57329
--- /dev/null
+++ b/tests/__snapshots__/Table.fixedColumns.spec.js.snap
@@ -0,0 +1,663 @@
+exports[`Table.fixedColumns renders correctly 1`] = `
+
+`;
diff --git a/tests/__snapshots__/Table.spec.js.snap b/tests/__snapshots__/Table.spec.js.snap
new file mode 100644
index 000000000..24252a339
--- /dev/null
+++ b/tests/__snapshots__/Table.spec.js.snap
@@ -0,0 +1,830 @@
+exports[`Table dataIndex render text by path 1`] = `
+
+`;
+
+exports[`Table renders colSpan correctly 1`] = `
+
+`;
+
+exports[`Table renders column correctly 1`] = `
+
+`;
+
+exports[`Table renders correctly 1`] = `
+
+`;
+
+exports[`Table renders custom cell correctly 1`] = `
+
+`;
+
+exports[`Table renders fixed header correctly 1`] = `
+
+`;
+
+exports[`Table renders footer correctly 1`] = `
+
+`;
+
+exports[`Table renders rowSpan correctly 1`] = `
+
+`;
+
+exports[`Table renders table body to the wrapper 1`] = `
+
+`;
+
+exports[`Table renders title correctly 1`] = `
+
+`;
+
+exports[`Table renders without header 1`] = `
+
+`;
+
+exports[`Table scroll renders scroll.x is a number 1`] = `
+
+`;
+
+exports[`Table scroll renders scroll.x is true 1`] = `
+
+`;
+
+exports[`Table scroll renders scroll.y is a number 1`] = `
+
+`;
diff --git a/tests/basic.spec.js b/tests/basic.spec.js
deleted file mode 100644
index 8ab2a5b18..000000000
--- a/tests/basic.spec.js
+++ /dev/null
@@ -1,173 +0,0 @@
-/* eslint-disable no-console,func-names,react/no-multi-comp */
-const expect = require('expect.js');
-const Table = require('../');
-const React = require('react');
-const ReactDOM = require('react-dom');
-const $ = require('jquery');
-const { Simulate } = require('react-addons-test-utils');
-
-describe('table', () => {
- const div = document.createElement('div');
- document.body.appendChild(div);
-
- const columns = [
- { title: '表头1', dataIndex: 'a', key: 'a', colSpan: 2,
- width: 100, render(o, row, index) {
- // 第一列中第一行合并两列
- const obj = {
- children: o,
- props: {},
- };
- if (index === 0) {
- obj.props.colSpan = 2;
- }
- return obj;
- } },
- { id: '123', title: '表头2', colSpan: 0, dataIndex: 'b', key: 'b',
- width: 100, render(o, row, index) {
- // 2列被合并掉了colSpan:0，第二列中第一行合并两行rowSpan:2
- const obj = {
- children: o,
- props: {},
- };
- if (index === 0) {
- obj.props.colSpan = 0;
- }
- return obj;
- } },
- { title: '表头3', dataIndex: 'c', key: 'c', width: 200, render(o, row, index) {
- const obj = {
- children: o,
- props: {},
- };
- if (index === 0) {
- obj.props.rowSpan = 2;
- }
- if (index === 1) {
- obj.props.rowSpan = 0;
- }
- return obj;
- } },
- {
- title: 'operation', dataIndex: '', key: 'operation', render() {
- return 操作;
- },
- },
- {
- title: 'number', dataIndex: '', key: 'number', render() {
- return 123;
- },
- },
- {
- title: 'zero', dataIndex: '', key: 'zero', render() {
- return 0;
- },
- },
- {
- title: 'empty string', dataIndex: '', key: 'empty-string', render() {
- return '';
- },
- },
- {
- title: 'string', dataIndex: '', key: 'string', render() {
- return 'text';
- },
- },
- {
- title: 'false', dataIndex: '', key: 'false', render() {
- return false;
- },
- },
- {
- title: 'Array', dataIndex: '', key: 'array', render() {
- return [操作1, 操作2];
- },
- },
- ];
- const data = [
- { a: '123', key: '1' },
- { a: 'cdd', b: 'edd', key: '2' },
- { a: '1333', c: 'eee', d: 2, key: '3' },
- { a: {}, key: '4' },
- ];
- let node = $(div);
-
- beforeEach(() => {
- ReactDOM.render(
- {record.a}
}
- expandRowByClick
- />,
- div
- );
- node = $(div);
- });
-
- afterEach(() => {
- ReactDOM.unmountComponentAtNode(div);
- });
-
- it('simple works', () => {
- expect(node.find('table').length).to.be(1);
- expect(node.find('tbody tr').length).to.be(data.length);
- });
-
- it('th colSpan works', () => {
- expect(node.find('table').length).to.be(1);
- let colspanNum = 0;
- const cLen = columns.length;
- for (let i = 0; i < cLen; i++) {
- const headerColSpan = columns[i].colSpan;
- if (headerColSpan) {
- colspanNum += headerColSpan;
- }
- }
- expect(node.find('thead th').length).to.be(columns.length - (colspanNum - 1));
- });
-
- it('td colSpan works', () => {
- expect(node.find('table').length).to.be(1);
-
- // 第一行第一列合并了
- const trFstTds = node.find('tbody tr:first td').length;
- // 最后一行是没有合并的
- const trLstTds = node.find('tbody tr:last td').length;
- // 检查未合并列是否受到影响
- expect(trLstTds).to.be(columns.length);
- // 合并和未合并行中列数是否相等
- expect(trFstTds).to.not.be(trLstTds);
- // 合并的列数是否正确
- expect(trFstTds).to.be(columns.length - (2 - 1));
- });
-
- it('td rowSpan works', () => {
- expect(node.find('table').length).to.be(1);
- const rowspanNum = 2;
- expect(node.find('tbody tr').eq(1).find('td').length).to.be(columns.length - (rowspanNum - 1));
- });
-
- it('should render columns', () => {
- const trLstTds = node.find('tbody tr:last td');
- expect(trLstTds.eq(3).find('a').length).to.be(1); // jsx
- expect(trLstTds.eq(4).text()).to.be('123'); // number
- expect(trLstTds.eq(5).text()).to.be('0'); // 0
- expect(trLstTds.eq(6).text()).to.be(''); // empty string
- expect(trLstTds.eq(7).text()).to.be('text'); // string
- expect(trLstTds.eq(8).text()).to.be(''); // false
- expect(trLstTds.eq(9).find('a').length).to.be(2); // array
- });
-
- // https://github.com/ant-design/ant-design/issues/1202
- it('should not render object in cell', () => {
- const trLstTds = node.find('tbody tr:last td');
- expect(trLstTds.eq(0).text()).to.be('');
- });
-
- it('should use rowClick to expand', () => {
- const clickRow = node.find('tbody tr:first');
- Simulate.click(clickRow[0]);
- expect(clickRow.next().text()).to.be('123');
- });
-});
diff --git a/tests/createStore.spec.js b/tests/createStore.spec.js
index aadee1d3f..463897305 100644
--- a/tests/createStore.spec.js
+++ b/tests/createStore.spec.js
@@ -1,22 +1,22 @@
-const expect = require('expect.js');
-const createStore = require('../src/createStore');
+/* eslint-disable no-undef */
+import createStore from '../src/createStore';
describe('createStore', () => {
it('create with initial state', () => {
const store = createStore({ a: 1 });
- expect(store.getState()).to.eql({ a: 1 });
+ expect(store.getState()).toEqual({ a: 1 });
});
it('setState', () => {
const store = createStore({ a: 1 });
store.setState({ a: 2 });
- expect(store.getState()).to.eql({ a: 2 });
+ expect(store.getState()).toEqual({ a: 2 });
});
it('subscribe', () => {
const store = createStore({ a: 1 });
const unsubscribe = store.subscribe(() => {
- expect(store.getState()).to.eql({ a: 2 });
+ expect(store.getState()).toEqual({ a: 2 });
});
store.setState({ a: 2 });
unsubscribe();
diff --git a/tests/fixedColumns.spec.js b/tests/fixedColumns.spec.js
deleted file mode 100644
index a5492f4f9..000000000
--- a/tests/fixedColumns.spec.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/* eslint-disable no-console,func-names,react/no-multi-comp,max-len */
-const expect = require('expect.js');
-const Table = require('../');
-const React = require('react');
-const ReactDOM = require('react-dom');
-const $ = require('jquery');
-const { Simulate } = require('react-addons-test-utils');
-
-describe('Table with fixed columns', () => {
- const div = document.createElement('div');
- document.body.appendChild(div);
- let node;
- const columns = [
- { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
- { title: 'title2', dataIndex: 'b', key: 'b', width: 100, fixed: 'left' },
- { title: 'title3', dataIndex: 'c', key: 'c' },
- { title: 'title4', dataIndex: 'b', key: 'd' },
- { title: 'title5', dataIndex: 'b', key: 'e' },
- { title: 'title6', dataIndex: 'b', key: 'f' },
- { title: 'title7', dataIndex: 'b', key: 'g' },
- { title: 'title8', dataIndex: 'b', key: 'h' },
- { title: 'title9', dataIndex: 'b', key: 'i' },
- { title: 'title10', dataIndex: 'b', key: 'j' },
- { title: 'title11', dataIndex: 'b', key: 'k' },
- { title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
- ];
-
- const data = [
- { a: '123', b: 'xxxxxxxx', d: 3, key: '1' },
- { a: 'cdd', b: 'edd12221', d: 3, key: '2' },
- { a: '133', c: 'edd12221', d: 2, key: '3' },
- { a: '133', c: 'edd12221', d: 2, key: '4' },
- { a: '133', c: 'edd12221', d: 2, key: '5' },
- { a: '133', c: 'edd12221', d: 2, key: '6' },
- { a: '133', c: 'edd12221', d: 2, key: '7' },
- { a: '133', c: 'edd12221', d: 2, key: '8' },
- { a: '133', c: 'edd12221', d: 2, key: '9' },
- ];
-
- beforeEach(() => {
- ReactDOM.render(
- ,
- div
- );
- node = $(div);
- });
-
- afterEach(() => {
- ReactDOM.unmountComponentAtNode(div);
- });
-
- it('should has three table', () => {
- expect(node.find('table').length).to.be(3);
- expect(node.find('table').eq(0).find('th').length).to.be(2);
- expect(node.find('table').eq(1).find('th').length).to.be(columns.length);
- expect(node.find('table').eq(2).find('th').length).to.be(1);
- });
-
- it('should be fixed in left initially', () => {
- expect(node.find('.rc-table').hasClass('rc-table-scroll-position-left')).to.be(true);
- });
-
- // not working in PhantomJS
- xit('should be fixed in right when scroll', () => {
- const scrollNode = node.find('.rc-table-scroll .rc-table-body')[0];
- Simulate.mouseOver(scrollNode);
- scrollNode.scrollLeft = 100;
- Simulate.scroll(scrollNode, { target: scrollNode });
- expect(node.find('.rc-table').hasClass('rc-table-scroll-position-left')).to.be(false);
- expect(node.find('.rc-table').hasClass('rc-table-scroll-position-right')).to.be(false);
- Simulate.mouseOver(scrollNode);
- scrollNode.scrollLeft = 2000;
- Simulate.scroll(scrollNode, { target: scrollNode });
- expect(node.find('.rc-table').hasClass('rc-table-scroll-position-left')).to.be(false);
- expect(node.find('.rc-table').hasClass('rc-table-scroll-position-right')).to.be(true);
- });
-
- it('should has hover className', () => {
- Simulate.mouseEnter(node.find('table').eq(0).find('tbody tr')[0]);
- expect(node.find('table').eq(0).find('tbody tr').eq(0).hasClass('rc-table-row-hover')).to.be(true);
- expect(node.find('table').eq(1).find('tbody tr').eq(0).hasClass('rc-table-row-hover')).to.be(true);
- expect(node.find('table').eq(2).find('tbody tr').eq(0).hasClass('rc-table-row-hover')).to.be(true);
- Simulate.mouseLeave(node.find('table').eq(0).find('tbody tr')[0]);
- expect(node.find('table').eq(0).find('tbody tr').eq(0).hasClass('rc-table-row-hover')).to.be(false);
- expect(node.find('table').eq(1).find('tbody tr').eq(0).hasClass('rc-table-row-hover')).to.be(false);
- expect(node.find('table').eq(2).find('tbody tr').eq(0).hasClass('rc-table-row-hover')).to.be(false);
- });
-});
diff --git a/tests/index.js b/tests/index.js
deleted file mode 100644
index 875fcc9e0..000000000
--- a/tests/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const req = require.context('.', false, /\.spec\.js$/);
-req.keys().forEach(req);
diff --git a/tests/rowClick.spec.js b/tests/rowClick.spec.js
deleted file mode 100644
index cb06dc8e4..000000000
--- a/tests/rowClick.spec.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/* eslint-disable no-console,func-names,react/no-multi-comp */
-const expect = require('expect.js');
-const Table = require('../');
-const React = require('react');
-const ReactDOM = require('react-dom');
-const $ = require('jquery');
-const { Simulate } = require('react-addons-test-utils');
-
-describe('click table row', () => {
- const div = document.createElement('div');
- document.body.appendChild(div);
- let node;
-
- const columns = [{
- title: 'Name',
- dataIndex: 'name',
- key: 'name',
- width: 400,
- }, {
- title: 'Age',
- dataIndex: 'age',
- key: 'age',
- width: 100,
- render: (text) => (
-
- Alert: {text}, click will pop to row click
-
- ),
- }, {
- title: 'Address',
- dataIndex: 'address',
- key: 'address',
- width: 200,
- }];
- const data = [{
- key: 1,
- name: 'a',
- age: 32,
- address: 'I am a',
- }];
-
- const spy = {
- callCount: 0,
- callArgs: null,
- };
- const onRowClick = (...args) => {
- spy.callArgs = args;
- spy.callCount += 1;
- };
- const onRowDoubleClick = (...args) => {
- spy.callArgs = args;
- spy.callCount += 1;
- };
-
- beforeEach(() => {
- ReactDOM.render(
- ,
- div
- );
- node = $(div);
- });
-
- afterEach(() => {
- ReactDOM.unmountComponentAtNode(div);
- spy.callArgs = null;
- spy.callCount = 0;
- });
-
- it('click', () => {
- Simulate.click(node.find('tbody tr:first')[0]);
- expect(spy.callCount).to.be(1);
- expect(spy.callArgs[0]).to.be(data[0]);
- expect(spy.callArgs[1]).to.be(0);
- expect(spy.callArgs[2].type).to.be('click');
- });
-
- it('double click', () => {
- Simulate.doubleClick(node.find('tbody tr:first')[0]);
- expect(spy.callCount).to.be(1);
- expect(spy.callArgs[0]).to.be(data[0]);
- expect(spy.callArgs[1]).to.be(0);
- expect(spy.callArgs[2].type).to.be('doubleclick');
- });
-});