From a6e54e2d9f0bba9ca32d8381df6fb969c6e92f83 Mon Sep 17 00:00:00 2001 From: Mandy Parson Date: Thu, 1 Feb 2024 12:22:53 -0700 Subject: [PATCH] MMT-3561: Writing tests for pagination --- .../src/js/components/DraftList/DraftList.jsx | 1 + .../js/components/Pagination/Pagination.jsx | 4 +- .../Pagination/__tests__/Pagination.test.js | 61 ++++++ static/src/js/components/Table/Table.jsx | 4 +- .../components/Table/__tests__/Table.test.js | 198 +----------------- 5 files changed, 72 insertions(+), 196 deletions(-) create mode 100644 static/src/js/components/Pagination/__tests__/Pagination.test.js diff --git a/static/src/js/components/DraftList/DraftList.jsx b/static/src/js/components/DraftList/DraftList.jsx index 1461f833a..eee45e899 100644 --- a/static/src/js/components/DraftList/DraftList.jsx +++ b/static/src/js/components/DraftList/DraftList.jsx @@ -34,6 +34,7 @@ const DraftList = ({ draftType }) => { limit }) const { count, items = [] } = drafts + console.log(count) const noDraftsError = `No ${draftType} drafts exist for the provider ${providerId}` diff --git a/static/src/js/components/Pagination/Pagination.jsx b/static/src/js/components/Pagination/Pagination.jsx index 1ce276dd1..c6a7541be 100644 --- a/static/src/js/components/Pagination/Pagination.jsx +++ b/static/src/js/components/Pagination/Pagination.jsx @@ -13,7 +13,9 @@ import Col from 'react-bootstrap/Col' */ const PaginationComponent = ({ - limit, count, setoffset + limit, + count, + setoffset }) => { const [pageNum, setPageNum] = useState(1) diff --git a/static/src/js/components/Pagination/__tests__/Pagination.test.js b/static/src/js/components/Pagination/__tests__/Pagination.test.js new file mode 100644 index 000000000..e537e6f1d --- /dev/null +++ b/static/src/js/components/Pagination/__tests__/Pagination.test.js @@ -0,0 +1,61 @@ +import React from 'react' +import { + render, + screen, + fireEvent +} from '@testing-library/react' +import userEvent from '@testing-library/user-event' + +import PaginationComponent from '../Pagination' + +const setoffset = jest.fn() + +const setup = () => { + const props = { + limit: 2, + count: 14, + setoffset + } + render( + + ) + + return { + props, + user: userEvent.setup() + } +} + +describe('Pagination', () => { + describe('when pagination component is passed count < limit', () => { + test('renders pagination bar', () => { + setup() + + expect(screen.queryAllByRole('button')).toHaveLength(3) + + // Check individual buttons work + fireEvent.click(screen.getByRole('button', { name: '2' })) + + // Check the next button works + fireEvent.click(screen.getByRole('button', { name: 'Next' })) + + // // Click on Previous Page + fireEvent.click(screen.getByRole('button', { name: 'Previous' })) + + // // Check pages[0] always stays at 1 and two ellipsis render + fireEvent.click(screen.getByRole('button', { name: 'Next' })) + fireEvent.click(screen.getByRole('button', { name: '4' })) + expect(screen.getByRole('button', { name: '1' })) + expect(screen.queryAllByText('More')).toHaveLength(2) + + // Make sure onclick for pages[0] function above works + fireEvent.click(screen.getByRole('button', { name: '1' })) + + // Can click on last page + fireEvent.click(screen.getByRole('button', { name: '7' })) + fireEvent.click(screen.getByRole('button', { name: 'Previous' })) + fireEvent.click(screen.getByRole('button', { name: 'Previous' })) + expect(screen.queryAllByText('More')).toHaveLength(1) + }) + }) +}) diff --git a/static/src/js/components/Table/Table.jsx b/static/src/js/components/Table/Table.jsx index e5890939a..f474287ca 100644 --- a/static/src/js/components/Table/Table.jsx +++ b/static/src/js/components/Table/Table.jsx @@ -60,7 +60,7 @@ const Table = ({ } ) - } else if (count > 0) { + } else if (pagedRows.length > 0) { const rowData = pagedRows.map((row) => { const { cells, key } = row const rowKey = key @@ -95,7 +95,7 @@ const Table = ({ Showing {' '} - {count > 0 && offset} + {count > 0 ? offset : 0} - {data.length === limit ? offset + limit : offset + data.length} {' '} diff --git a/static/src/js/components/Table/__tests__/Table.test.js b/static/src/js/components/Table/__tests__/Table.test.js index c933a5c15..49e1509ae 100644 --- a/static/src/js/components/Table/__tests__/Table.test.js +++ b/static/src/js/components/Table/__tests__/Table.test.js @@ -1,17 +1,9 @@ import React from 'react' -import { - render, - screen, - fireEvent -} from '@testing-library/react' +import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import Table from '../Table' -jest.mock('../../../../../../static.config.json', () => ({ - application: { defaultPageSize: 2 } -})) - const setup = (overrideProps = {}) => { const props = { headers: [ @@ -41,141 +33,11 @@ const setup = (overrideProps = {}) => { value: ('Row 2 Cell 2') } ] - }, - { - key: 'conceptId003', - cells: [ - { - value: ('Row 3 Cell 1') - }, - { - value: ('Row 3 Cell 2') - } - ] - }, - { - key: 'conceptId004', - cells: [ - { - value: ('Row 4 Cell 1') - }, - { - value: ('Row 4 Cell 2') - } - ] - }, - { - key: 'conceptId005', - cells: [ - { - value: ('Row 5 Cell 1') - }, - { - value: ('Row 5 Cell 2') - } - ] - }, - { - key: 'conceptId006', - cells: [ - { - value: ('Row 6 Cell 1') - }, - { - value: ('Row 6 Cell 2') - } - ] - }, - { - key: 'conceptId007', - cells: [ - { - value: ('Row 7 Cell 1') - }, - { - value: ('Row 7 Cell 2') - } - ] - }, - { - key: 'conceptId001b', - cells: [ - { - value: ('Row 1 Cell 1') - }, - { - value: ('Row 1 Cell 2') - } - ] - }, - { - key: 'conceptId002b', - cells: [ - { - value: ('Row 2 Cell 1') - }, - { - value: ('Row 2 Cell 2') - } - ] - }, - { - key: 'conceptId003b', - cells: [ - { - value: ('Row 3 Cell 1') - }, - { - value: ('Row 3 Cell 2') - } - ] - }, - { - key: 'conceptId004b', - cells: [ - { - value: ('Row 4 Cell 1') - }, - { - value: ('Row 4 Cell 2') - } - ] - }, - { - key: 'conceptId005b', - cells: [ - { - value: ('Row 5 Cell 1') - }, - { - value: ('Row 5 Cell 2') - } - ] - }, - { - key: 'conceptId006b', - cells: [ - { - value: ('Row 6 Cell 1') - }, - { - value: ('Row 6 Cell 2') - } - ] - }, - { - key: 'conceptId007b', - cells: [ - { - value: ('Row 7 Cell 1') - }, - { - value: ('Row 7 Cell 2') - } - ] } ], count: 14, + limit: 2, + offset: 0, ...overrideProps } @@ -191,63 +53,12 @@ const setup = (overrideProps = {}) => { describe('Table', () => { describe('when the table component is passed markup and data that is more than the defaultPageSize', () => { - test('renders filled table with Pagination', () => { + test('renders filled table without correct number of rows', () => { setup() - // Checking all pages exist upon loading. Previous and 1 are not clickable buttons. - expect(screen.queryByRole('button', { name: 'Previous' })).not.toBeInTheDocument() - expect(screen.getByText('Previous')).toBeInTheDocument() - expect(screen.queryByRole('button', { name: '1' })).not.toBeInTheDocument() - expect(screen.getByText('1')).toBeInTheDocument() expect(screen.getByText('column 1')).toBeInTheDocument() expect(screen.getByRole('table')).toBeInTheDocument() - expect(screen.getByText('Row 2 Cell 2')).toBeInTheDocument() - expect(screen.queryByRole('button', { name: '2' })).toBeInTheDocument() - expect(screen.queryByRole('button', { name: 'Next' })).toBeInTheDocument() - expect(screen.getByText('More')).toBeInTheDocument() expect(screen.getByText('Showing 0-2 of 14 Results')).toBeInTheDocument() - - // Check individual buttons work - fireEvent.click(screen.getByRole('button', { name: '2' })) - - // Check the next button works - fireEvent.click(screen.getByRole('button', { name: 'Next' })) - - // Check pages[0] always stays at 1 and two ellipsis render - fireEvent.click(screen.getByRole('button', { name: 'Next' })) - expect(screen.queryAllByText('More')).toHaveLength(2) - - // Make sure onclick for pages[0] function above works - fireEvent.click(screen.getByRole('button', { name: '1' })) - - // Click on last page - fireEvent.click(screen.getByRole('button', { name: '7' })) - - // Click on Previous Page - fireEvent.click(screen.getByRole('button', { name: 'Previous' })) - }) - }) - - describe('when the table compoent is passed markup and data that is less than the defaultPageSize', () => { - test('renders filled table without Pagination', () => { - setup({ - data: [ - { - key: 'conceptId001', - cells: [ - { - value: ('Row 1 Cell 1') - }, - { - value: ('Row 1 Cell 2') - } - ] - } - ] - }) - - expect(screen.getByText('column 1')).toBeInTheDocument() - expect(screen.queryByRole('button')).not.toBeInTheDocument() }) }) @@ -255,6 +66,7 @@ describe('Table', () => { test('renders custom error message', () => { setup({ data: [], + count: 0, error: 'Custom Error Message' })