[Pagination] Fix display when boundaryCount={0} (#21446)

packages/material-ui-lab/src/Pagination/Pagination.test.js

@@ -76,4 +76,26 @@ describe('<Pagination />', () => {
     );
     expect(buttons[8].querySelector('svg')).to.have.attribute('data-mui-test', 'FirstPageIcon');
   });
+
+  it('renders correct amount of buttons on correct order when boundaryCount is zero', () => {
+    const { getAllByRole } = render(
+      <ThemeProvider
+        theme={createMuiTheme({
+          direction: 'rtl',
+        })}
+      >
+        <Pagination count={11} defaultPage={6} siblingCount={1} boundaryCount={0} />
+      </ThemeProvider>,
+    );
+
+    const buttons = getAllByRole('button');
+    expect(buttons[4].querySelector('svg')).to.have.attribute(
+      'data-mui-test',
+      'NavigateBeforeIcon',
+    );
+    expect(buttons[1].textContent).to.equal('5');
+    expect(buttons[2].textContent).to.equal('6');
+    expect(buttons[3].textContent).to.equal('7');
+    expect(buttons[0].querySelector('svg')).to.have.attribute('data-mui-test', 'NavigateNextIcon');
+  });
 });

packages/material-ui-lab/src/Pagination/usePagination.js

@@ -62,7 +62,7 @@ export default function usePagination(props = {}) {
       boundaryCount + siblingCount * 2 + 2,
     ),
     // Less than endPages
-    endPages[0] - 2,
+    endPages.length > 0 ? endPages[0] - 2 : count - 1,
   );
 
   // Basic list of items to render

packages/material-ui-lab/src/Pagination/usePagination.test.js

@@ -1,8 +1,10 @@
 import { renderHook } from '@testing-library/react-hooks';
 import { expect } from 'chai';
-import { usePagination } from '.';
+import usePagination from './usePagination';
 
 describe('usePagination', () => {
+  const serialize = (items) => items.map((item) => (item.type === 'page' ? item.page : item.type));
+
   it('has one page by default', () => {
     const { items } = renderHook(() => usePagination()).result.current;
     expect(items).to.have.length(3);
@@ -16,6 +18,7 @@ describe('usePagination', () => {
     expect(items[2]).to.have.property('type', 'next');
     expect(items[2]).to.have.property('disabled', true);
   });
+
   it('has a disabled previous button & an enabled next button when count > 1', () => {
     const { items } = renderHook(() => usePagination({ count: 2 })).result.current;
     expect(items[0]).to.have.property('type', 'previous');
@@ -24,6 +27,7 @@ describe('usePagination', () => {
     expect(items[3]).to.have.property('disabled', false);
     expect(items[3]).to.have.property('page', 2);
   });
+
   it('has an enabled previous button & disabled next button when page === count', () => {
     const { items } = renderHook(() => usePagination({ count: 2, page: 2 })).result.current;
     expect(items[0]).to.have.property('type', 'previous');
@@ -32,18 +36,21 @@ describe('usePagination', () => {
     expect(items[3]).to.have.property('type', 'next');
     expect(items[3]).to.have.property('disabled', true);
   });
+
   it('has a disabled first button when showFirstButton === true', () => {
     const { items } = renderHook(() => usePagination({ showFirstButton: true })).result.current;
     expect(items[0]).to.have.property('type', 'first');
     expect(items[0]).to.have.property('disabled', true);
     expect(items[0]).to.have.property('page', 1);
   });
+
   it('has a disabled last button when showLastButton === true', () => {
     const { items } = renderHook(() => usePagination({ showLastButton: true })).result.current;
     expect(items[3]).to.have.property('type', 'last');
     expect(items[3]).to.have.property('disabled', true);
     expect(items[3]).to.have.property('page', 1);
   });
+
   it('has an enabled first button when showFirstButton === true && page > 1', () => {
     const { items } = renderHook(() =>
       usePagination({ showFirstButton: true, count: 2, page: 2 }),
@@ -52,6 +59,7 @@ describe('usePagination', () => {
     expect(items[0]).to.have.property('disabled', false);
     expect(items[0]).to.have.property('page', 1);
   });
+
   it('has an enabled last button when showLastButton === true && page < count', () => {
     const { items } = renderHook(() =>
       usePagination({ showLastButton: true, count: 2 }),
@@ -60,6 +68,7 @@ describe('usePagination', () => {
     expect(items[4]).to.have.property('disabled', false);
     expect(items[4]).to.have.property('page', 2);
   });
+
   it('has no ellipses when count <= 7', () => {
     const { items } = renderHook(() => usePagination({ count: 7 })).result.current;
     expect(items[1]).to.have.property('page', 1);
@@ -70,19 +79,22 @@ describe('usePagination', () => {
     expect(items[6]).to.have.property('page', 6);
     expect(items[7]).to.have.property('page', 7);
   });
+
   it('has an end ellipsis by default when count >= 8', () => {
     const { items } = renderHook(() => usePagination({ count: 8 })).result.current;
     expect(items).to.have.length(9);
     expect(items[2]).to.have.property('page', 2);
     expect(items[6]).to.have.property('type', 'end-ellipsis');
     expect(items[6]).to.have.property('page', null);
   });
+
   it('has a start ellipsis when page >= 5', () => {
     const { items } = renderHook(() => usePagination({ count: 8, page: 5 })).result.current;
     expect(items[2]).to.have.property('type', 'start-ellipsis');
     expect(items[2]).to.have.property('page', null);
     expect(items[6]).to.have.property('page', 7);
   });
+
   it('has start & end ellipsis when count >= 9', () => {
     const { items } = renderHook(() => usePagination({ count: 9, page: 5 })).result.current;
     expect(items).to.have.length(9);
@@ -91,6 +103,7 @@ describe('usePagination', () => {
     expect(items[6]).to.have.property('type', 'end-ellipsis');
     expect(items[6]).to.have.property('page', null);
   });
+
   it('can have a reduced siblingCount', () => {
     const { items } = renderHook(() =>
       usePagination({ count: 7, page: 4, siblingCount: 0 }),
@@ -100,6 +113,7 @@ describe('usePagination', () => {
     expect(items[3]).to.have.property('page', 4);
     expect(items[4]).to.have.property('type', 'end-ellipsis');
   });
+
   it('can have an increased siblingCount', () => {
     const { items } = renderHook(() =>
       usePagination({ count: 11, page: 6, siblingCount: 2 }),
@@ -113,6 +127,7 @@ describe('usePagination', () => {
     expect(items[7]).to.have.property('page', 8);
     expect(items[8]).to.have.property('type', 'end-ellipsis');
   });
+
   it('can have an increased boundaryCount', () => {
     const { items } = renderHook(() =>
       usePagination({ count: 11, page: 6, boundaryCount: 2 }),
@@ -125,4 +140,32 @@ describe('usePagination', () => {
     expect(items[8]).to.have.property('page', 10);
     expect(items[9]).to.have.property('page', 11);
   });
+
+  it('should support boundaryCount={0}', () => {
+    let items;
+
+    items = renderHook(() =>
+      usePagination({ count: 11, page: 6, boundaryCount: 0, siblingCount: 0 }),
+    ).result.current.items;
+    expect(serialize(items)).to.deep.equal([
+      'previous',
+      'start-ellipsis',
+      6,
+      'end-ellipsis',
+      'next',
+    ]);
+
+    items = renderHook(() =>
+      usePagination({ count: 11, page: 6, boundaryCount: 0, siblingCount: 1 }),
+    ).result.current.items;
+    expect(serialize(items)).to.deep.equal([
+      'previous',
+      'start-ellipsis',
+      5,
+      6,
+      7,
+      'end-ellipsis',
+      'next',
+    ]);
+  });
 });