Merge pull request #1999 from fedspendingtransparency/FDG-8056

FDG-8056 Improve Code Coverage - page-buttons.jsx

Author: chasls2

src/components/pagination/page-buttons.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PageButtons from './page-buttons';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { RecoilRoot } from 'recoil';
 
 describe('PageButtons component', () => {
@@ -86,4 +86,53 @@ describe('PageButtons component', () => {
     const lastButton = getByRole('button', { name: `${tableName}-page10` });
     expect(lastButton).toBeInTheDocument();
   });
+
+  it('correctly changes to a new page when its button-number is clicked', () => {
+    const { getByRole } = render(
+      <RecoilRoot>
+        <PageButtons pageButtonProps={pageButtonProps} />
+      </RecoilRoot>
+    );
+    const secondButton = getByRole('button', { name: `${tableName}-page2` });
+    expect(secondButton).toBeInTheDocument();
+    fireEvent.click(secondButton);
+    expect(secondButton).toHaveClass('active');
+  });
+
+  it('correctly changes pages when clicking the next button', () => {
+    pageButtonProps.currentPage = 1;
+    const { getByRole } = render(
+      <RecoilRoot>
+        <PageButtons pageButtonProps={pageButtonProps} />
+      </RecoilRoot>
+    );
+    const nextButton = getByRole('button', { name: 'Next page' });
+    fireEvent.click(nextButton);
+    const secondButton = getByRole('button', { name: `${tableName}-page2` });
+    expect(secondButton).toHaveClass('active');
+  });
+
+  it('correctly changes pages when clicking the previous button', () => {
+    pageButtonProps.currentPage = 2;
+    const { getByRole } = render(
+      <RecoilRoot>
+        <PageButtons pageButtonProps={pageButtonProps} />
+      </RecoilRoot>
+    );
+    const prevButton = getByRole('button', { name: 'Previous page' });
+    fireEvent.click(prevButton);
+    const firstButton = getByRole('button', { name: `${tableName}-page1` });
+    expect(firstButton).toHaveClass('active');
+  });
+
+  it('renders the correct page range and ellipsis (when range > 7)', () => {
+    pageButtonProps.maxPage = 8;
+    const { getByRole } = render(
+      <RecoilRoot>
+        <PageButtons pageButtonProps={pageButtonProps} />
+      </RecoilRoot>
+    );
+    const ellipsisButton = getByRole('button', { name: 'Page number overflow ellipsis' });
+    expect(ellipsisButton).toBeInTheDocument();
+  });
 });