From e601825f82bf77e99fc6adac8344ad63808cf9b8 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Fri, 18 Oct 2024 12:02:16 -0400 Subject: [PATCH] chore(SourcesCard): Add tests --- .../src/SourcesCard/SourcesCard.test.tsx | 238 ++++++++++++++++++ .../__snapshots__/SourcesCard.test.tsx.snap | 34 +++ 2 files changed, 272 insertions(+) create mode 100644 packages/module/src/SourcesCard/SourcesCard.test.tsx create mode 100644 packages/module/src/SourcesCard/__snapshots__/SourcesCard.test.tsx.snap diff --git a/packages/module/src/SourcesCard/SourcesCard.test.tsx b/packages/module/src/SourcesCard/SourcesCard.test.tsx new file mode 100644 index 0000000..45510ab --- /dev/null +++ b/packages/module/src/SourcesCard/SourcesCard.test.tsx @@ -0,0 +1,238 @@ +import React from 'react'; +import { fireEvent, render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom'; +import SourcesCard from './SourcesCard'; + +describe('SourcesCard', () => { + it('should render card', () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it('should render card correctly if one source with only a link is passed in', () => { + render(); + expect(screen.getByText('1 source')).toBeTruthy(); + expect(screen.getByText('Source 1')).toBeTruthy(); + // no buttons or navigation when there is only 1 source + expect(screen.queryByRole('button')).toBeFalsy(); + expect(screen.queryByText('1 of 1')).toBeFalsy(); + }); + + it('should render card correctly if one source with a title is passed in', () => { + render(); + expect(screen.getByText('1 source')).toBeTruthy(); + expect(screen.getByText('How to make an apple pie')).toBeTruthy(); + }); + + it('should render card correctly if one source with a body is passed in', () => { + render(); + expect(screen.getByText('1 source')).toBeTruthy(); + expect(screen.getByText('To make an apple pie, you must first...')).toBeTruthy(); + }); + + it('should render card correctly if one source with a title and body is passed in', () => { + render( + + ); + expect(screen.getByText('1 source')).toBeTruthy(); + expect(screen.getByText('How to make an apple pie')).toBeTruthy(); + expect(screen.getByText('To make an apple pie, you must first...')).toBeTruthy(); + }); + + it('should render multiple cards correctly', () => { + render( + + ); + expect(screen.getByText('2 sources')).toBeTruthy(); + expect(screen.getByText('How to make an apple pie')).toBeTruthy(); + expect(screen.getByText('1 of 2')).toBeTruthy(); + screen.getByRole('button', { name: /Go to previous page/i }); + screen.getByRole('button', { name: /Go to next page/i }); + }); + + it('should navigate between cards correctly', async () => { + render( + + ); + expect(screen.getByText('How to make an apple pie')).toBeTruthy(); + expect(screen.getByText('1 of 2')).toBeTruthy(); + expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled(); + await userEvent.click(screen.getByRole('button', { name: /Go to next page/i })); + expect(screen.queryByText('How to make an apple pie')).toBeFalsy(); + expect(screen.getByText('How to make cookies')).toBeTruthy(); + expect(screen.getByText('2 of 2')).toBeTruthy(); + expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeEnabled(); + expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled(); + }); + + it('should apply className appropriately', () => { + render( + + ); + const element = screen.getByRole('navigation'); + expect(element).toHaveClass('test'); + }); + + it('should disable pagination appropriately', () => { + render( + + ); + expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled(); + expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled(); + }); + + it('should change ofWord appropriately', () => { + render( + + ); + expect(screen.getByText('1 de 2')).toBeTruthy(); + }); + + it('should render navigation aria label appropriately', () => { + render( + + ); + expect(screen.getByRole('navigation', { name: /Pagination/i })).toBeTruthy(); + }); + + it('should change paginationAriaLabel appropriately', () => { + render( + + ); + expect(screen.getByRole('navigation', { name: /Navegación/i })).toBeTruthy(); + }); + + it('should change sourceWord appropriately', () => { + render(); + expect(screen.getByText('1 fuente')).toBeTruthy(); + }); + + it('should sourceWordPlural appropriately', () => { + render( + + ); + expect(screen.getByText('2 fuentes')).toBeTruthy(); + }); + + it('should change toNextPageAriaLabel appropriately', () => { + render( + + ); + expect(screen.getByRole('button', { name: /Pase a la siguiente página/i })).toBeTruthy(); + }); + + it('should change toPreviousPageAriaLabel appropriately', () => { + render( + + ); + expect(screen.getByRole('button', { name: /Presione para regresar a la página anterior/i })).toBeTruthy(); + }); + + it('should call onNextClick appropriately', async () => { + const spy = jest.fn(); + render( + + ); + await userEvent.click(screen.getByRole('button', { name: /Go to next page/i })); + expect(spy).toHaveBeenCalled(); + }); + + it('should call onPreviousClick appropriately', async () => { + const spy = jest.fn(); + render( + + ); + await userEvent.click(screen.getByRole('button', { name: /Go to next page/i })); + await userEvent.click(screen.getByRole('button', { name: /Go to previous page/i })); + expect(spy).toHaveBeenCalled(); + }); + + it('should call onSetPage appropriately', async () => { + const spy = jest.fn(); + render( + + ); + await userEvent.click(screen.getByRole('button', { name: /Go to next page/i })); + expect(spy).toHaveBeenCalledTimes(1); + await userEvent.click(screen.getByRole('button', { name: /Go to previous page/i })); + expect(spy).toHaveBeenCalledTimes(2); + }); +}); diff --git a/packages/module/src/SourcesCard/__snapshots__/SourcesCard.test.tsx.snap b/packages/module/src/SourcesCard/__snapshots__/SourcesCard.test.tsx.snap new file mode 100644 index 0000000..ee4997e --- /dev/null +++ b/packages/module/src/SourcesCard/__snapshots__/SourcesCard.test.tsx.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SourcesCard should render card 1`] = ` +
+
+ + 1 source + +
+
+
+ + Source 1 + +
+
+
+
+
+`;