Skip to content

Commit

Permalink
more unit test coverage. additional code cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
gregnb committed Dec 23, 2017
1 parent edf4ce1 commit 94cad45
Show file tree
Hide file tree
Showing 13 changed files with 411 additions and 37 deletions.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server -d --progress --colors",
"test": "mocha --require babel-register test/**/*.test.js",
"coverage": "cross-env NODE_ENV=test nyc check-coverage --lines 25 --functions 25 --branches 25 --reporter=lcov --reporter=text mocha --require babel-register test/*.js && nyc report --reporter=html | cat coverage/lcov.info | coveralls",
"coverage:html": "cross-env NODE_ENV=test nyc check-coverage --lines 25 --functions 25 --branches 25 --reporter=html --reporter=text mocha --require babel-register test/*.js && nyc report --reporter=html",
"coverage": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text mocha --require babel-register test/*.js && nyc report --reporter=html | cat coverage/lcov.info | coveralls",
"coverage:html": "cross-env NODE_ENV=test nyc check-coverage --lines 55 --reporter=html --reporter=text mocha --require babel-register test/*.js && nyc report --reporter=html",
"prettier": "find src/ -name \"*.js\" | xargs prettier --write",
"lint": "eslint src",
"build": "cross-env NODE_ENV=production npm run prettier && rollup -c"
Expand Down
26 changes: 2 additions & 24 deletions src/MUIDataTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ class MUIDataTable extends React.Component {
rowsPerPageOptions: PropTypes.array,
search: PropTypes.bool,
print: PropTypes.bool,
responsive: PropTypes.bool,
responsive: PropTypes.oneOf(["stacked", "scroll"]),
}),
/** Pass and use className to style MUIDataTable as desired */
className: PropTypes.string,
Expand All @@ -64,23 +64,12 @@ class MUIDataTable extends React.Component {

componentWillMount() {
this.initializeTable(this.props);

if (this.options.responsive) {
this.handleResize();
}
}

componentDidMount() {
if (this.options.responsive) {
this._debouncedResize = debounce(this.handleResize, 100);
window.addEventListener("resize", this._debouncedResize);
}
}

componentWillUnmount() {
if (this.options.responsive) {
window.removeEventListener("resize", this._debouncedResize);
}
}

componentWillReceiveProps(nextProps) {
Expand All @@ -107,7 +96,7 @@ class MUIDataTable extends React.Component {
rowsPerPageOptions: [10, 15, 100],
search: true,
print: true,
responsive: true,
responsive: "stacked",
};

this.options = { ...defaultOptions, ...props.options };
Expand All @@ -128,17 +117,6 @@ class MUIDataTable extends React.Component {
}
}

handleResize = event => {
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
const breakpoint = 960;

if ((this.state.showResponsive && width > breakpoint) || (!this.state.showResponsive && width < breakpoint)) {
this.setState(() => ({
showResponsive: width < breakpoint ? true : false,
}));
}
};

/*
* Build the source table data
*/
Expand Down
2 changes: 2 additions & 0 deletions src/MUIDataTableFilter.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ class MUIDataTableFilter extends React.Component {
static propTypes = {
/** Data used to populate filter dropdown/checkbox */
filterData: PropTypes.array.isRequired,
/** Data selected to be filtered against dropdown/checkbox */
filterList: PropTypes.array.isRequired,
/** Options used to describe table */
options: PropTypes.object.isRequired,
/** Callback to trigger filter update */
Expand Down
13 changes: 12 additions & 1 deletion src/MUIDataTableHeadCell.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,17 @@ import { TableCell } from "material-ui/Table";
import Tooltip from "material-ui/Tooltip";

class MUIDataTableHeadCell extends React.Component {
static propTypes = {
/** Extend the style applied to components */
classes: PropTypes.object,
/** Options used to describe table */
options: PropTypes.object.isRequired,
/** Current sort direction */
sortDirection: PropTypes.string,
/** Callback to trigger column sort */
toggleSort: PropTypes.func.isRequired,
};

handleSortClick = () => {
this.props.toggleSort(this.props.index);
};
Expand All @@ -13,7 +24,7 @@ class MUIDataTableHeadCell extends React.Component {
const { options, sortDirection, children, classes } = this.props;

return (
<TableCell className={classes.root}>
<TableCell className={classes.root} sortDirection={sortDirection}>
{options.sort ? (
<Tooltip title="Sort" placement={"bottom-end"} enterDelay={300}>
<TableSortLabel
Expand Down
1 change: 0 additions & 1 deletion src/MUIDataTablePagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ class MUIDataTablePagination extends React.Component {

render() {
const { count, classes, options, rowsPerPage, page } = this.props;
const test = getStyle(options, "pagination");

return (
<DataStyles
Expand Down
8 changes: 4 additions & 4 deletions src/MUIDataTableToolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import FilterIcon from "material-ui-icons/FilterList";
import merge from "lodash.merge";
import { getStyle, DataStyles } from "./DataStyles";

const defaultToolbarStyles = {
export const defaultToolbarStyles = {
root: {},
left: {
flex: "1 1 55%",
Expand All @@ -48,7 +48,7 @@ const defaultToolbarStyles = {
},
};

const responsiveToolbarStyles = {
export const responsiveToolbarStyles = {
"@media all and (max-width: 960px)": {
titleRoot: {},
titleText: {
Expand Down Expand Up @@ -83,7 +83,7 @@ const responsiveToolbarStyles = {
"@media all and (max-width: 480px)": {},
};

const defaultViewColStyles = {
export const defaultViewColStyles = {
root: {
padding: "16px 24px 16px 24px",
fontFamily: "Roboto",
Expand Down Expand Up @@ -111,7 +111,7 @@ const defaultViewColStyles = {
},
};

const defaultFilterStyles = {
export const defaultFilterStyles = {
root: {
padding: "16px 24px 16px 24px",
fontFamily: "Roboto",
Expand Down
4 changes: 1 addition & 3 deletions src/MUIDataTableViewCol.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import { FormLabel, FormControl, FormGroup, FormControlLabel, FormHelperText } f

class MUIDataTableViewCol extends React.Component {
static propTypes = {
/** Data used to describe table */
data: PropTypes.array.isRequired,
/** Columns used to describe table */
columns: PropTypes.array.isRequired,
/** Options used to describe table */
Expand All @@ -23,7 +21,7 @@ class MUIDataTableViewCol extends React.Component {
};

render() {
const { classes, columns, data, options, viewColStyles } = this.props;
const { classes, columns, options, viewColStyles } = this.props;

return (
<FormControl component={"fieldset"} className={viewColStyles.root}>
Expand Down
90 changes: 88 additions & 2 deletions test/MUIDataTable.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ describe("<MUIDataTable />", function() {

it("should render a table", () => {
const shallowWrapper = shallow(<MUIDataTable columns={columns} data={data} />);
assert.strictEqual(shallowWrapper.dive().name(), "Paper");
assert.strictEqual(shallowWrapper.dive().dive().name(), "MUIDataTable");
});


Expand All @@ -34,7 +34,7 @@ describe("<MUIDataTable />", function() {
{ display: true, name: "City", sort: "desc" },
{ display: true, name: "State", sort: "desc" },
];

assert.deepEqual(actualResult, expectedResult);
});

Expand Down Expand Up @@ -167,4 +167,90 @@ describe("<MUIDataTable />", function() {

});

it("should sort provided column when calling toggleSortColum method", () => {

const shallowWrapper = shallow(<MUIDataTable columns={columns} data={data} />);
const instance = shallowWrapper.instance();

instance.toggleSortColumn(0);
shallowWrapper.update();
const state = shallowWrapper.state();

const expectedResult = [
["John Walsh", "Test Corp", "Hartford", "CT"],
["Joe James", "Test Corp", "Yonkers", "NY"],
["James Houston", "Test Corp", "Dallas", "TX"],
["Bob Herm", "Test Corp", "Tampa", "FL"],
];

assert.deepEqual(state.displayData, expectedResult);

});

it("should toggle provided column when calling toggleViewCol method", () => {

const shallowWrapper = shallow(<MUIDataTable columns={columns} data={data} />);
const instance = shallowWrapper.instance();

instance.toggleViewColumn(0);
shallowWrapper.update();
const state = shallowWrapper.state();

const expectedResult = [
{ name: "First Name", display: false, sort: "desc" },
{ name: "Company", display: true, sort: "desc" },
{ name: "City", display: true, sort: "desc" },
{ name: "State", display: true, sort: "desc" },
];

assert.deepEqual(state.columns, expectedResult);


});

it("should get displayable data when calling getDisplayData method", () => {

const shallowWrapper = shallow(<MUIDataTable columns={columns} data={data} />);
const instance = shallowWrapper.instance();
const state = shallowWrapper.state();

const actualResult = instance.getDisplayData(data, state.filterList, "");
const expectedResult = [
["Joe James", "Test Corp", "Yonkers", "NY"],
["John Walsh", "Test Corp", "Hartford", "CT"],
["Bob Herm", "Test Corp", "Tampa", "FL"],
["James Houston", "Test Corp", "Dallas", "TX"],
];

assert.deepEqual(actualResult, expectedResult);

});

it("should update rowsPerPage when calling changeRowsPerPage method", () => {

const shallowWrapper = shallow(<MUIDataTable columns={columns} data={data} />);
const instance = shallowWrapper.instance();

instance.changeRowsPerPage(10);
shallowWrapper.update();

const state = shallowWrapper.state();
assert.deepEqual(state.rowsPerPage, 10);

});

it("should update page position when calling changePage method", () => {

const shallowWrapper = shallow(<MUIDataTable columns={columns} data={data} />);
const instance = shallowWrapper.instance();

instance.changePage(2);
shallowWrapper.update();

const state = shallowWrapper.state();
assert.deepEqual(state.page, 2);

});


});
93 changes: 93 additions & 0 deletions test/MUIDataTableFilter.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import React from "react";
import { spy, stub } from "sinon";
import { mount, shallow } from "enzyme";
import { assert, expect, should } from "chai";
import Select from "material-ui/Select";
import Checkbox from "material-ui/Checkbox";
import MUIDataTableFilter from "../src/MUIDataTableFilter";
import { defaultFilterStyles } from "../src/MUIDataTableToolbar";

describe("<MUIDataTableFilter />", function() {
let data;
let columns;
let filterData;

before(() => {

columns = [
{ name: "First Name", display: true, sort: "desc" },
{ name: "Company", display: true, sort: "desc" },
{ name: "City", display: true, sort: "desc" },
{ name: "State", display: true, sort: "desc" },
];

data = [
["Joe James", "Test Corp", "Yonkers", "NY"],
["John Walsh", "Test Corp", "Hartford", "CT"],
["Bob Herm", "Test Corp", "Tampa", "FL"],
["James Houston", "Test Corp", "Dallas", "TX"],
];

filterData = [
["Joe James", "John Walsh", "Bob Herm", "James Houston"],
["Test Corp"],
["Yonkers", "Hartford", "Tampa", "Dallas"],
["NY", "CT", "FL", "TX"],
];

});

it("should data table filter view with checkboxes if filterType = 'checkbox'", () => {

const options = { filterType: "checkbox" };
const filterList = [ [], [], [], [] ];
const shallowWrapper = mount(<MUIDataTableFilter columns={columns} filterStyles={defaultFilterStyles} filterData={filterData} filterList={filterList} options={options} />);

const actualResult = shallowWrapper.find(Checkbox);
assert.strictEqual(actualResult.length, 13);

});

it("should data table filter view with selects if filterType = 'select'", () => {

const options = { filterType: "select" };
const filterList = [ [], [], [], [] ];
const mountWrapper = mount(<MUIDataTableFilter columns={columns} filterStyles={defaultFilterStyles} filterData={filterData} filterList={filterList} options={options} />);

const actualResult = mountWrapper.find(Select);
assert.strictEqual(actualResult.length, 4);

});

it("should trigger onFilterUpdate prop callback when calling method handleCheckboxChange", () => {

const options = { filterType: "checkbox" };
const filterList = [ [], [], [], [] ];
const onFilterUpdate = spy();

const shallowWrapper = shallow(<MUIDataTableFilter columns={columns} onFilterUpdate={onFilterUpdate} filterStyles={defaultFilterStyles} filterData={filterData} filterList={filterList} options={options} />);
const instance = shallowWrapper.instance();

//const event = { target: { value: 0 }};
instance.handleCheckboxChange(0, 0);
assert.strictEqual(onFilterUpdate.callCount, 1);

});

it("should trigger onFilterUpdate prop callback when calling method handleDropdownChange", () => {

const options = { filterType: "select" };
const filterList = [ [], [], [], [] ];
const onFilterUpdate = spy();

const shallowWrapper = shallow(<MUIDataTableFilter columns={columns} onFilterUpdate={onFilterUpdate} filterStyles={defaultFilterStyles} filterData={filterData} filterList={filterList} options={options} />);
const instance = shallowWrapper.instance();

const event = { target: { value: "All" }};
instance.handleDropdownChange(event, 0);
assert.strictEqual(onFilterUpdate.callCount, 1);

});


});
Loading

0 comments on commit 94cad45

Please sign in to comment.