MMT-3561: Writing tests for pagination

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}`
 

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)
 

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(
+    <PaginationComponent {...props} />
+  )
+
+  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)
+    })
+  })
+})

static/src/js/components/Table/Table.jsx

@@ -60,7 +60,7 @@ const Table = ({
         }
       </For>
     )
-  } 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 = ({
           <span className="d-block mb-3">
             Showing
             {' '}
-            {count > 0 && offset}
+            {count > 0 ? offset : 0}
             -
             {data.length === limit ? offset + limit : offset + data.length}
             {' '}

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,70 +53,20 @@ 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()
     })
   })
 
   describe('when the table component is passed a custom error mesage with no data', () => {
     test('renders custom error message', () => {
       setup({
         data: [],
+        count: 0,
         error: 'Custom Error Message'
       })