[Pagination] Fix prop forwarding of onChange and page (mui#19964)

eps1lon · Mar 4, 2020 · 23959df · 23959df
1 parent 258afa1
commit 23959df
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js
@@ -40,6 +40,8 @@ const Pagination = React.forwardRef(function Pagination(props, ref) {
     getItemAriaLabel: getAriaLabel = defaultGetAriaLabel,
     hideNextButton = false,
     hidePrevButton = false,
+    onChange,
+    page,
     renderItem = item => <PaginationItem {...item} />,
     shape = 'round',
     showFirstButton = false,

diff --git a/packages/material-ui-lab/src/Pagination/Pagination.test.js b/packages/material-ui-lab/src/Pagination/Pagination.test.js
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { expect } from 'chai';
+import { spy } from 'sinon';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
 import { createClientRender } from 'test/utils/createClientRender';
 import Pagination from './Pagination';
+import { fireEvent } from '@testing-library/dom';
 
 describe('<Pagination />', () => {
   let classes;
@@ -29,4 +31,38 @@ describe('<Pagination />', () => {
 
     expect(container.firstChild).to.have.class(classes.root);
   });
+
+  it('moves aria-current to the specified page', () => {
+    const { container, getAllByRole } = render(<Pagination count={3} page={1} />);
+
+    // previous, page 1
+    const [, page1] = getAllByRole('button');
+    expect(page1).to.have.attribute('aria-current', 'true');
+    // verifying no regression from previous bug where `page` wasn't intercepted
+    expect(container.querySelector('[page]')).to.be.null;
+  });
+
+  it('fires onChange when a different page is clicked', () => {
+    const handleChange = spy();
+    const { getAllByRole } = render(<Pagination count={3} onChange={handleChange} page={1} />);
+
+    // previous, page 1, page 2
+    const [, , page2] = getAllByRole('button');
+    page2.click();
+
+    expect(handleChange.callCount).to.equal(1);
+  });
+
+  it('does not attach onChange to the root element', () => {
+    const handleChange = spy();
+    const { getByRole } = render(
+      <Pagination count={3} onChange={handleChange} page={1}>
+        <input defaultValue={1} type="text" />
+      </Pagination>,
+    );
+
+    fireEvent.change(getByRole('textbox'), { target: { value: '2' } });
+
+    expect(handleChange.callCount).to.equal(0);
+  });
 });