Merge pull request #1349 from wdh2100/functional/tableFooter

Refactoring TableFooter

src/components/TableFooter.js

@@ -1,48 +1,77 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import MuiTable from '@material-ui/core/Table';
 import TablePagination from './TablePagination';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
 
-export const defaultFooterStyles = {
-  root: {
-    '@media print': {
-      display: 'none',
+const useStyles = makeStyles(
+  () => ({
+    root: {
+      '@media print': {
+        display: 'none',
+      },
     },
-  },
-};
+  }),
+  { name: 'MUIDataTableFooter' },
+);
 
-class TableFooter extends React.Component {
-  static propTypes = {};
+const TableFooter = ({ options, rowCount, page, rowsPerPage, changeRowsPerPage, changePage }) => {
+  const classes = useStyles();
+  const { customFooter, pagination = true } = options;
 
-  render() {
-    const { options, rowCount, page, rowsPerPage, changeRowsPerPage, changePage, classes } = this.props;
+  if (customFooter) {
+    return (
+      <MuiTable className={classes.root}>
+        {options.customFooter(
+          rowCount,
+          page,
+          rowsPerPage,
+          changeRowsPerPage,
+          changePage,
+          options.textLabels.pagination,
+        )}
+      </MuiTable>
+    );
+  }
 
+  if (pagination) {
     return (
       <MuiTable className={classes.root}>
-        {options.customFooter
-          ? options.customFooter(
-              rowCount,
-              page,
-              rowsPerPage,
-              changeRowsPerPage,
-              changePage,
-              options.textLabels.pagination,
-            )
-          : options.pagination && (
-              <TablePagination
-                count={rowCount}
-                page={page}
-                rowsPerPage={rowsPerPage}
-                changeRowsPerPage={changeRowsPerPage}
-                changePage={changePage}
-                component={'div'}
-                options={options}
-              />
-            )}
+        <TablePagination
+          count={rowCount}
+          page={page}
+          rowsPerPage={rowsPerPage}
+          changeRowsPerPage={changeRowsPerPage}
+          changePage={changePage}
+          component={'div'}
+          options={options}
+        />
       </MuiTable>
     );
   }
-}
 
-export default withStyles(defaultFooterStyles, { name: 'MUIDataTableFooter' })(TableFooter);
+  return <MuiTable className={classes.root} />;
+};
+
+TableFooter.propTypes = {
+  /** Total number of table rows */
+  rowCount: PropTypes.number.isRequired,
+  /** Options used to describe table */
+  options: PropTypes.shape({
+    customFooter: PropTypes.func,
+    pagination: PropTypes.bool,
+    textLabels: PropTypes.shape({
+      pagination: PropTypes.string,
+    }),
+  }),
+  /** Current page index */
+  page: PropTypes.number.isRequired,
+  /** Total number allowed of rows per page */
+  rowsPerPage: PropTypes.number.isRequired,
+  /** Callback to trigger rows per page change */
+  changeRowsPerPage: PropTypes.func.isRequired,
+  /** Callback to trigger page change */
+  changePage: PropTypes.func.isRequired,
+};
+
+export default TableFooter;

test/MUIDataTableFooter.test.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { spy } from 'sinon';
+import { mount } from 'enzyme';
+import { assert } from 'chai';
+import MuiTableFooter from '@material-ui/core/TableFooter';
+import getTextLabels from '../src/textLabels';
+import TableFooter from '../src/components/TableFooter';
+
+describe('<TableFooter />', function() {
+  let options;
+  const changeRowsPerPage = spy();
+  const changePage = spy();
+  before(() => {
+    options = {
+      rowsPerPageOptions: [5, 10, 15],
+      textLabels: getTextLabels(),
+    };
+  });
+
+  it('should render a table footer', () => {
+    const mountWrapper = mount(
+      <TableFooter
+        options={options}
+        rowCount={100}
+        page={1}
+        rowsPerPage={10}
+        changeRowsPerPage={changeRowsPerPage}
+        changePage={changePage}
+      />,
+    );
+
+    const actualResult = mountWrapper.find(MuiTableFooter);
+    assert.strictEqual(actualResult.length, 1);
+  });
+
+  it('should render a table footer with customFooter', () => {
+    const customOptions = {
+      rowsPerPageOptions: [5, 10, 15],
+      textLabels: getTextLabels(),
+      customFooter: (rowCount, page, rowsPerPage, changeRowsPerPage, changePage, textLabels) => {
+        return (
+          <MuiTableFooter
+            changePage={changePage}
+            changeRowsPerPage={changeRowsPerPage}
+            page={page}
+            rowCount={rowCount}
+            rowsPerPage={rowsPerPage}
+            labelRowsPerPage={textLabels.rowsPerPage}
+          />
+        );
+      },
+    };
+
+    const mountWrapper = mount(
+      <TableFooter
+        options={customOptions}
+        rowCount={100}
+        page={1}
+        rowsPerPage={10}
+        changeRowsPerPage={changeRowsPerPage}
+        changePage={changePage}
+      />,
+    );
+
+    const actualResult = mountWrapper.find(MuiTableFooter);
+    assert.strictEqual(actualResult.length, 1);
+  });
+
+  it('should not render a table footer', () => {
+    const nonPageOption = {
+      rowsPerPageOptions: [5, 10, 15],
+      textLabels: getTextLabels(),
+      pagination: false,
+    };
+
+    const mountWrapper = mount(
+      <TableFooter
+        options={nonPageOption}
+        rowCount={100}
+        page={1}
+        rowsPerPage={10}
+        changeRowsPerPage={changeRowsPerPage}
+        changePage={changePage}
+      />,
+    );
+
+    const actualResult = mountWrapper.find(MuiTableFooter);
+    assert.strictEqual(actualResult.length, 0);
+  });
+});

test/MUIDataTablePagination.test.js

@@ -1,9 +1,7 @@
 import React from 'react';
-import { spy, stub } from 'sinon';
+import { spy } from 'sinon';
 import { mount, shallow } from 'enzyme';
-import { assert, expect, should } from 'chai';
-import TableRow from '@material-ui/core/TableRow';
-import TableFooter from '@material-ui/core/TableFooter';
+import { assert } from 'chai';
 import MuiTablePagination from '@material-ui/core/TablePagination';
 import getTextLabels from '../src/textLabels';
 import TablePagination from '../src/components/TablePagination';