diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js index 62ce0ed1264adc..5f75bc45979db7 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.js +++ b/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( diff --git a/packages/material-ui/src/TablePagination/TablePagination.test.js b/packages/material-ui/src/TablePagination/TablePagination.test.js index b82fb648cf4f20..c59e1ea5571bcd 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.test.js +++ b/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('', () => { const noop = () => {}; let classes; let mount; + const render = createClientRender(); function mountInTable(node) { const wrapper = mount( @@ -32,11 +34,14 @@ describe('', () => { classes = getClasses( {}} 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('', () => { }); }); + 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 ( + + + + { + setPage(newPage); + }} + /> + + +
+ ); + }; + + const { container, getByLabelText } = render(); + + 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('', () => { ); }); }); - - it('should display the "of more than" text and keep the nextButton enabled, if count is -1 ', () => { - const wrapper = mount( - - - - - - -
, - ); - - 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); - }); });