Skip to content

Commit

Permalink
fix(Pagination): replace totalPages with resultsPerPage (#717)
Browse files Browse the repository at this point in the history 
* fix(Pagination): replace totalPages with resultsPerPage

* fix(Pagination): post-review adjustment
  • Loading branch information
@ogermain-kronos
ogermain-kronos authored Jan 30, 2024
1 parent 6146126 commit b2ef0df
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 1,023 deletions.
67 changes: 41 additions & 26 deletions packages/react/src/components/pagination/pagination.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Pagination } from './pagination';
describe('Pagination', () => {
test('Matches the mobile snapshot', () => {
const tree = renderWithProviders(
<Pagination totalPages={12} />,
<Pagination resultsPerPage={12} />,
'mobile',
);

Expand All @@ -15,7 +15,7 @@ describe('Pagination', () => {

test('Matches the desktop snapshot', () => {
const tree = renderWithProviders(
<Pagination totalPages={12} />,
<Pagination resultsPerPage={12} />,
'desktop',
);

Expand All @@ -24,7 +24,7 @@ describe('Pagination', () => {

test('Matches the mobile snapshot with multiples digits page numbers', () => {
const tree = renderWithProviders(
<Pagination totalPages={1000} />,
<Pagination resultsPerPage={1000} />,
'mobile',
);

Expand All @@ -33,7 +33,7 @@ describe('Pagination', () => {

test('Matches the desktop snapshot with multiples digits page numbers', () => {
const tree = renderWithProviders(
<Pagination totalPages={1000} />,
<Pagination resultsPerPage={1000} />,
'desktop',
);

Expand All @@ -42,15 +42,17 @@ describe('Pagination', () => {

describe('pages list', () => {
test('should display pages', () => {
const wrapper = shallow(<Pagination totalPages={5} pagesShown={5} />);
const wrapper = shallow(<Pagination resultsPerPage={5} numberOfResults={25} pagesShown={5} />);
const pages = findByTestId(wrapper, 'page-', '^');

expect(pages).toHaveLength(5);
});

test('should go to page 2 when clicking on page 2', () => {
const callback = jest.fn();
const wrapper = shallow(<Pagination totalPages={3} defaultActivePage={1} onPageChange={callback} />);
const wrapper = shallow(
<Pagination resultsPerPage={3} numberOfResults={6} defaultActivePage={1} onPageChange={callback} />,
);
const pageButton = findByTestId(wrapper, 'page-2');

pageButton.simulate('click');
Expand All @@ -59,7 +61,7 @@ describe('Pagination', () => {
});

test('should highlight selected page', () => {
const wrapper = shallow(<Pagination totalPages={3} defaultActivePage={3} />);
const wrapper = shallow(<Pagination resultsPerPage={3} numberOfResults={9} defaultActivePage={3} />);
const pageButton = findByTestId(wrapper, 'page-3');

expect(pageButton.prop('isSelected')).toBe(true);
Expand All @@ -68,71 +70,71 @@ describe('Pagination', () => {

describe('results label', () => {
test('should display zero results when number of results is undefined', () => {
const wrapper = shallow(<Pagination totalPages={0} numberOfResults={undefined} />);
const wrapper = shallow(<Pagination resultsPerPage={0} numberOfResults={undefined} />);
const label = findByTestId(wrapper, 'resultsLabel');

expect(label.text()).toEqual('<ScreenReaderOnlyText />0–0 of 0 results');
});

test('should display the number of results when provided', () => {
const wrapper = shallow(<Pagination totalPages={3} numberOfResults={12345} />);
const wrapper = shallow(<Pagination resultsPerPage={3} numberOfResults={12345} />);
const label = findByTestId(wrapper, 'resultsLabel');

expect(label.text()).toEqual('<ScreenReaderOnlyText />1–4115 of 12345 results');
expect(label.text()).toEqual('<ScreenReaderOnlyText />1–3 of 12345 results');
});

test('should display first page results label when number of results is even', () => {
const wrapper = shallow(
<Pagination totalPages={6} numberOfResults={30} activePage={1} />,
<Pagination resultsPerPage={6} numberOfResults={30} activePage={1} />,
);
const label = findByTestId(wrapper, 'resultsLabel');

expect(label.text()).toEqual('<ScreenReaderOnlyText />1–5 of 30 results');
expect(label.text()).toEqual('<ScreenReaderOnlyText />1–6 of 30 results');
});

test('should display second page results label when number of results is uneven', () => {
const wrapper = shallow(
<Pagination totalPages={6} numberOfResults={30} activePage={2} />,
<Pagination resultsPerPage={6} numberOfResults={30} activePage={2} />,
);
const label = findByTestId(wrapper, 'resultsLabel');

expect(label.text()).toEqual('<ScreenReaderOnlyText />6–10 of 30 results');
expect(label.text()).toEqual('<ScreenReaderOnlyText />7–12 of 30 results');
});

test('should display last page results label when number of results is uneven', () => {
const wrapper = shallow(
<Pagination totalPages={6} numberOfResults={30} activePage={6} />,
<Pagination resultsPerPage={6} numberOfResults={30} activePage={6} />,
);
const label = findByTestId(wrapper, 'resultsLabel');

expect(label.text()).toEqual('<ScreenReaderOnlyText />26–30 of 30 results');
expect(label.text()).toEqual('<ScreenReaderOnlyText />25–30 of 30 results');
});

test('should display first page results label when number of results is uneven', () => {
const wrapper = shallow(
<Pagination totalPages={50} numberOfResults={1530} activePage={1} />,
<Pagination resultsPerPage={50} numberOfResults={1530} activePage={1} />,
);
const label = findByTestId(wrapper, 'resultsLabel');

expect(label.text()).toEqual('<ScreenReaderOnlyText />1–31 of 1530 results');
expect(label.text()).toEqual('<ScreenReaderOnlyText />1–50 of 1530 results');
});

test('should display second page results label when number of results is uneven', () => {
const wrapper = shallow(
<Pagination totalPages={50} numberOfResults={1530} activePage={2} />,
<Pagination resultsPerPage={50} numberOfResults={1530} activePage={2} />,
);
const label = findByTestId(wrapper, 'resultsLabel');

expect(label.text()).toEqual('<ScreenReaderOnlyText />32–62 of 1530 results');
expect(label.text()).toEqual('<ScreenReaderOnlyText />51–100 of 1530 results');
});

test('should display last page results label when number of results is uneven', () => {
const wrapper = shallow(
<Pagination totalPages={50} numberOfResults={1530} activePage={50} />,
<Pagination resultsPerPage={50} numberOfResults={1530} activePage={31} />,
);
const label = findByTestId(wrapper, 'resultsLabel');

expect(label.text()).toEqual('<ScreenReaderOnlyText />1520–1530 of 1530 results');
expect(label.text()).toEqual('<ScreenReaderOnlyText />1501–1530 of 1530 results');
});
});

Expand All @@ -151,7 +153,12 @@ describe('Pagination', () => {
test(`should go to page ${testCase.goesToPage} when clicked`, () => {
const callback = jest.fn();
const wrapper = shallow(
<Pagination totalPages={11} defaultActivePage={3} onPageChange={callback} />,
<Pagination
resultsPerPage={11}
numberOfResults={121}
defaultActivePage={3}
onPageChange={callback}
/>,
);
const button = findByTestId(wrapper, testCase.id);

Expand All @@ -162,7 +169,11 @@ describe('Pagination', () => {

test(`should be disabled when on page ${testCase.disabledWhenOnPage}`, () => {
const wrapper = shallow(
<Pagination totalPages={11} defaultActivePage={testCase.disabledWhenOnPage} />,
<Pagination
resultsPerPage={11}
numberOfResults={121}
defaultActivePage={testCase.disabledWhenOnPage}
/>,
);
const button = findByTestId(wrapper, testCase.id);

Expand All @@ -171,15 +182,19 @@ describe('Pagination', () => {

test(`should be enabled when on page ${testCase.enabledWhenOnPage}`, () => {
const wrapper = shallow(
<Pagination totalPages={11} defaultActivePage={testCase.enabledWhenOnPage} />,
<Pagination
resultsPerPage={11}
numberOfResults={121}
defaultActivePage={testCase.enabledWhenOnPage}
/>,
);
const button = findByTestId(wrapper, testCase.id);

expect(button.prop('enabled')).toBe(true);
});

test(`should not be rendered when there's less than ${testCase.stopRenderAt} page`, () => {
const wrapper = shallow(<Pagination totalPages={testCase.stopRenderAt - 1} />);
const wrapper = shallow(<Pagination resultsPerPage={testCase.stopRenderAt - 1} />);
const button = findByTestId(wrapper, testCase.id);

expect(button.exists()).toBe(false);
Expand Down
Loading

0 comments on commit b2ef0df

Please sign in to comment.