[TablePagination] Out of range warning when "count={-1}" (mui#19874)

Author: dbarabashh

packages/material-ui/src/TablePagination/TablePagination.js

@@ -246,6 +246,11 @@ TablePagination.propTypes = {
    */
   page: chainPropTypes(PropTypes.number.isRequired, props => {
     const { count, page, rowsPerPage } = props;
+
+    if (count === -1) {
+      return null;
+    }
+
     const newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
     if (page < 0 || page > newLastPage) {
       return new Error(

packages/material-ui/src/TablePagination/TablePagination.test.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { assert } from 'chai';
+import { expect, assert } from 'chai';
 import PropTypes from 'prop-types';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
+import { fireEvent, createClientRender } from 'test/utils/createClientRender';
 import describeConformance from '../test-utils/describeConformance';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import Select from '../Select';
@@ -16,6 +17,7 @@ describe('<TablePagination />', () => {
   const noop = () => {};
   let classes;
   let mount;
+  const render = createClientRender();
 
   function mountInTable(node) {
     const wrapper = mount(
@@ -32,11 +34,14 @@ describe('<TablePagination />', () => {
     classes = getClasses(
       <TablePagination count={1} onChangePage={() => {}} page={0} rowsPerPage={10} />,
     );
-    // StrictModeViolation: test uses #html()
+  });
+
+  beforeEach(() => {
+    // StrictModeViolation: test uses #html()()
     mount = createMount({ strict: false });
   });
 
-  after(() => {
+  afterEach(() => {
     mount.cleanUp();
   });
 
@@ -248,6 +253,36 @@ describe('<TablePagination />', () => {
     });
   });
 
+  describe('prop: count=-1', () => {
+    it('should display the "of more than" text and keep the nextButton enabled', () => {
+      const Test = () => {
+        const [page, setPage] = React.useState(0);
+        return (
+          <table>
+            <TableFooter>
+              <TableRow>
+                <TablePagination
+                  page={page}
+                  rowsPerPage={10}
+                  count={-1}
+                  onChangePage={(_, newPage) => {
+                    setPage(newPage);
+                  }}
+                />
+              </TableRow>
+            </TableFooter>
+          </table>
+        );
+      };
+
+      const { container, getByLabelText } = render(<Test />);
+
+      expect(container).to.have.text('Rows per page:101-10 of more than 10');
+      fireEvent.click(getByLabelText('Next page'));
+      expect(container).to.have.text('Rows per page:1011-20 of more than 20');
+    });
+  });
+
   describe('warnings', () => {
     before(() => {
       consoleErrorMock.spy();
@@ -282,33 +317,4 @@ describe('<TablePagination />', () => {
       );
     });
   });
-
-  it('should display the "of more than" text and keep the nextButton enabled, if count is -1 ', () => {
-    const wrapper = mount(
-      <table>
-        <TableFooter>
-          <TableRow>
-            <TablePagination
-              page={0}
-              rowsPerPage={5}
-              rowsPerPageOptions={[5]}
-              onChangePage={noop}
-              onChangeRowsPerPage={noop}
-              count={-1}
-            />
-          </TableRow>
-        </TableFooter>
-      </table>,
-    );
-
-    assert.strictEqual(
-      wrapper
-        .find(Typography)
-        .at(0)
-        .text(),
-      '1-5 of more than 5',
-    );
-    const nextButton = wrapper.find(IconButton).at(1);
-    assert.strictEqual(nextButton.props().disabled, false);
-  });
 });