Skip to content

Introduce jest and enzyme #115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yesmeck merged 2 commits into from
Jan 11, 2017
Merged

Introduce jest and enzyme #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c9fdd42
Add jest and enzyme
yesmeck Jan 2, 2017
7371b4e
Add tests
yesmeck Jan 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["es2015-ie", "react", "stage-0"]
}
13 changes: 11 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
91 changes: 41 additions & 50 deletions tests/ColumnManager.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,62 @@
/* 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', () => {
it('add appropriate rowspan and colspan to column', () => {
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 },
Expand Down Expand Up @@ -97,7 +88,7 @@ describe('ColumnManager', () => {

const columnManager = new ColumnManager(null, elements);

expect(columnManager.columns).to.eql([
expect(columnManager.columns).toEqual([
{
title: 'a',
children: [
Expand Down
130 changes: 130 additions & 0 deletions tests/Table.expandRow.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => <p>extra data</p>;
const createTable = (props) => (
<Table
columns={columns}
data={data}
{...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();
});
});
63 changes: 63 additions & 0 deletions tests/Table.fixedColumns.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(
<Table
columns={columns}
data={data}
scroll={{ x: 1200 }}
/>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
});

it('toggles hover class when user hovering', () => {
const wrapper = mount(
<Table
columns={columns}
data={data}
scroll={{ x: 1200 }}
/>
);
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);
});
});
Loading