more unit test coverage. additional code cleanup

package.json

@@ -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"

src/MUIDataTable.js

@@ -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,
@@ -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) {
@@ -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 };
@@ -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
    */

src/MUIDataTableFilter.js

@@ -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 */

src/MUIDataTableHeadCell.js

@@ -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);
   };
@@ -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

src/MUIDataTablePagination.js

@@ -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

src/MUIDataTableToolbar.js

@@ -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%",
@@ -48,7 +48,7 @@ const defaultToolbarStyles = {
   },
 };
 
-const responsiveToolbarStyles = {
+export const responsiveToolbarStyles = {
   "@media all and (max-width: 960px)": {
     titleRoot: {},
     titleText: {
@@ -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",
@@ -111,7 +111,7 @@ const defaultViewColStyles = {
   },
 };
 
-const defaultFilterStyles = {
+export const defaultFilterStyles = {
   root: {
     padding: "16px 24px 16px 24px",
     fontFamily: "Roboto",

src/MUIDataTableViewCol.js

@@ -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 */
@@ -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}>

test/MUIDataTable.test.js

@@ -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");
   });
 
 
@@ -34,7 +34,7 @@ describe("<MUIDataTable />", function() {
       { display: true, name: "City", sort: "desc" },
       { display: true, name: "State", sort: "desc" },
     ];
-
+    
     assert.deepEqual(actualResult, expectedResult);
   });
 
@@ -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);
+
+  });
+
+
 });

test/MUIDataTableFilter.test.js

@@ -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);
+
+  });
+
+
+});