Break datatable page results into util and template

jest.config.js

@@ -1,16 +1,9 @@
 module.exports = {
-  testPathIgnorePatterns: ['<rootDir>/lib/', '<rootDir>/node_modules/'],
-  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
+  testPathIgnorePatterns: ["<rootDir>/lib/", "<rootDir>/node_modules/"],
+  setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
   moduleNameMapper: {
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
-    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
-    '^dnd-core$': 'dnd-core/dist/cjs',
-    '^react-dnd$': 'react-dnd/dist/cjs',
-    '^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
-    '^react-dnd-multi-backend$': 'react-dnd-multi-backend',
-    '^HTML5toTouch$': 'react-dnd-html5-backend/dist/cjs',
-    '^react-dnd-touch-backend$': 'react-dnd-touch-backend/dist/cjs',
-    '^react-dnd-test-backend$': 'react-dnd-test-backend/dist/cjs',
-    '^react-dnd-test-utils$': 'react-dnd-test-utils/dist/cjs',
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/__mocks__/fileMock.js",
+    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
   },
 };

setupTests.js

@@ -1,5 +0,0 @@
-// /* eslint-disable */
-// import { configure } from 'enzyme';
-// import Adapter from 'enzyme-adapter-react-16';
-
-// configure({ adapter: new Adapter() });

src/components/DataTable/datatable.test.jsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import DataTable from './index';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import DataTable from "./index";
 
 const columns1 = [
-  {Header: 'Header 1', accessor: 'header_1'},
-  {Header: 'Header 2', accessor: 'header_2'},
-  {Header: 'Header 3', accessor: 'header_3'}
+  { Header: "Header 1", accessor: "header_1" },
+  { Header: "Header 2", accessor: "header_2" },
+  { Header: "Header 3", accessor: "header_3" },
 ];
 
 const data1 = [
-  {header_1: 'foo', header_2: 'bar', header_3: 'fizz'},
-  {header_1: 'dkan', header_2: 'react', header_3: 'drupal'}
-]
+  { header_1: "foo", header_2: "bar", header_3: "fizz" },
+  { header_1: "dkan", header_2: "react", header_3: "drupal" },
+];
 
-describe('<DataTable />', () => {
-  test('renders', () => {
+describe("<DataTable />", () => {
+  test("renders", () => {
     const setSort = jest.fn();
     const setConditions = jest.fn();
     render(
@@ -25,33 +25,33 @@ describe('<DataTable />', () => {
         setSort={setSort}
         setConditions={setConditions}
         tableClasses={{
-          cellEvenRowClassName: 'even',
-          cellOddRowClassName: 'odd',
-          cellFirstRowClassName: 'first'
+          cellEvenRowClassName: "even",
+          cellOddRowClassName: "odd",
+          cellFirstRowClassName: "first",
         }}
-      />,
+      />
     );
-    expect(screen.getByRole('cell', {name: /foo/})).toBeInTheDocument();
-    expect(screen.getByRole('cell', {name: /bar/})).toBeInTheDocument();
-    expect(screen.getByRole('cell', {name: /fizz/})).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: /foo/ })).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: /bar/ })).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: /fizz/ })).toBeInTheDocument();
 
-    expect(screen.getByRole('cell', {name: /fizz/})).toHaveClass('first');
+    expect(screen.getByRole("cell", { name: /fizz/ })).toHaveClass("first");
 
-    expect(screen.getByRole('cell', {name: /fizz/})).toHaveClass('odd');
-    expect(screen.getByRole('cell', {name: /drupal/})).toHaveClass('even');
+    expect(screen.getByRole("cell", { name: /fizz/ })).toHaveClass("odd");
+    expect(screen.getByRole("cell", { name: /drupal/ })).toHaveClass("even");
   });
-  test('renders laoding if no columns', () => {
+  test("renders laoding if no columns", () => {
     const setSort = jest.fn();
     const setConditions = jest.fn();
-    const {debug} = render(
+    const { debug } = render(
       <DataTable
         data={data1}
         columns={[]}
         setSort={setSort}
         setConditions={setConditions}
-      />,
+      />
     );
-    debug()
+    debug();
     expect(screen.getByText(/Loading/)).toBeInTheDocument();
   });
 });

src/index.js

@@ -1,2 +1,2 @@
-export { default as DataTablePageResults } from "./components/DataTablePageResults";
+export { default as DataTablePageResults } from "./templates/DataTablePageResults";
 export { default as DataTable } from "./components/DataTable";

src/templates/DataTablePageResults/DataTablePageResults.stories.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
+import DataTablePageResults from "./index";
+
+<Meta title="DataTablePageResults" component={DataTablePageResults} />
+
+# Datatable Page Results
+
+<Canvas>
+  <Story name="Basic">
+    <DataTablePageResults totalRows={2000} limit={25} offset={0} />
+  </Story>
+</Canvas>

src/templates/DataTablePageResults/index.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { datatablePageResults } from "../../utils/DatatablePageResults";
+
+const DataTablePageResults = ({ totalRows, limit, offset, className }) => {
+  // If there are no totalRows, just show 0s and skip the function overhead.
+  if (totalRows === 0) {
+    return <p className={className}>{`0 - 0 of 0 rows`}</p>;
+  }
+
+  const { startTotal, ofTotal, numTotalRows } = datatablePageResults(
+    totalRows,
+    limit,
+    offset,
+    true
+  );
+  return (
+    <p
+      className={className}
+    >{`${startTotal} - ${ofTotal} of ${numTotalRows} rows`}</p>
+  );
+};
+
+DataTablePageResults.defaultProps = {
+  className: "data-table-results",
+};
+
+DataTablePageResults.propTypes = {
+  className: PropTypes.string,
+  totalRows: PropTypes.number.isRequired,
+  limit: PropTypes.number.isRequired,
+  offset: PropTypes.number.isRequired,
+};
+
+export default DataTablePageResults;

src/templates/DataTablePageResults/index.test.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import DataTablePageResults from ".";
+
+describe("<DataTablePageResults />", () => {
+  test("renders correct when 0 results", () => {
+    render(<DataTablePageResults totalRows={0} limit={25} offset={0} />);
+    expect(screen.getByText(/0 - 0 of 0 rows/)).toBeInTheDocument();
+  });
+  test("renders correct initial results", () => {
+    render(<DataTablePageResults totalRows={100} limit={25} offset={0} />);
+    expect(screen.getByText(/1 - 25 of 100 rows/)).toBeInTheDocument();
+  });
+
+  test("renders correct results on subsequent pages", () => {
+    render(<DataTablePageResults totalRows={100} limit={10} offset={10} />);
+    expect(screen.getByText(/11 - 20 of 100 rows/)).toBeInTheDocument();
+  });
+
+  test("renders correct results with commas", () => {
+    render(<DataTablePageResults totalRows={1500250} limit={25} offset={0} />);
+    expect(screen.getByText(/1 - 25 of 1,500,250 rows/)).toBeInTheDocument();
+  });
+});