From 3846ca293c8baf686f83db0a64cfea118f23559e Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Fri, 6 May 2022 21:20:14 +0200 Subject: [PATCH] Migrated SimplePaginator test to react testing library --- src/common/SimplePaginator.tsx | 8 ++--- src/tags/TagsTable.tsx | 2 +- src/visits/VisitsTable.tsx | 2 +- src/visits/charts/SortableBarChartCard.tsx | 2 +- test/common/SimplePaginator.test.tsx | 35 ++++++++++------------ test/tags/TagsTable.test.tsx | 2 +- test/visits/VisitsTable.test.tsx | 2 +- 7 files changed, 24 insertions(+), 29 deletions(-) diff --git a/src/common/SimplePaginator.tsx b/src/common/SimplePaginator.tsx index ed337acb..00e6e185 100644 --- a/src/common/SimplePaginator.tsx +++ b/src/common/SimplePaginator.tsx @@ -17,7 +17,7 @@ interface SimplePaginatorProps { centered?: boolean; } -const SimplePaginator: FC = ({ pagesCount, currentPage, setCurrentPage, centered = true }) => { +export const SimplePaginator: FC = ({ pagesCount, currentPage, setCurrentPage, centered = true }) => { if (pagesCount < 2) { return null; } @@ -35,7 +35,9 @@ const SimplePaginator: FC = ({ pagesCount, currentPage, se disabled={pageIsEllipsis(pageNumber)} active={currentPage === pageNumber} > - {prettifyPageNumber(pageNumber)} + + {prettifyPageNumber(pageNumber)} + ))} = pagesCount}> @@ -44,5 +46,3 @@ const SimplePaginator: FC = ({ pagesCount, currentPage, se ); }; - -export default SimplePaginator; diff --git a/src/tags/TagsTable.tsx b/src/tags/TagsTable.tsx index 8298140c..205196e8 100644 --- a/src/tags/TagsTable.tsx +++ b/src/tags/TagsTable.tsx @@ -2,7 +2,7 @@ import { FC, useEffect, useRef } from 'react'; import { splitEvery } from 'ramda'; import { useLocation } from 'react-router-dom'; import { SimpleCard } from '../utils/SimpleCard'; -import SimplePaginator from '../common/SimplePaginator'; +import { SimplePaginator } from '../common/SimplePaginator'; import { useQueryState } from '../utils/helpers/hooks'; import { parseQuery } from '../utils/helpers/query'; import { TableOrderIcon } from '../utils/table/TableOrderIcon'; diff --git a/src/visits/VisitsTable.tsx b/src/visits/VisitsTable.tsx index d5b02a0e..b6bfd5ca 100644 --- a/src/visits/VisitsTable.tsx +++ b/src/visits/VisitsTable.tsx @@ -4,7 +4,7 @@ import { min, splitEvery } from 'ramda'; import { faCheck as checkIcon, faRobot as botIcon } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { UncontrolledTooltip } from 'reactstrap'; -import SimplePaginator from '../common/SimplePaginator'; +import { SimplePaginator } from '../common/SimplePaginator'; import SearchField from '../utils/SearchField'; import { determineOrderDir, Order, sortList } from '../utils/helpers/ordering'; import { prettify } from '../utils/helpers/numbers'; diff --git a/src/visits/charts/SortableBarChartCard.tsx b/src/visits/charts/SortableBarChartCard.tsx index 0111585e..23790ec3 100644 --- a/src/visits/charts/SortableBarChartCard.tsx +++ b/src/visits/charts/SortableBarChartCard.tsx @@ -2,7 +2,7 @@ import { FC, useState } from 'react'; import { fromPairs, pipe, reverse, sortBy, splitEvery, toLower, toPairs, type, zipObj } from 'ramda'; import { rangeOf } from '../../utils/utils'; import { Order } from '../../utils/helpers/ordering'; -import SimplePaginator from '../../common/SimplePaginator'; +import { SimplePaginator } from '../../common/SimplePaginator'; import { roundTen } from '../../utils/helpers/numbers'; import { OrderingDropdown } from '../../utils/OrderingDropdown'; import PaginationDropdown from '../../utils/PaginationDropdown'; diff --git a/test/common/SimplePaginator.test.tsx b/test/common/SimplePaginator.test.tsx index 47ba7d29..128221d9 100644 --- a/test/common/SimplePaginator.test.tsx +++ b/test/common/SimplePaginator.test.tsx @@ -1,28 +1,23 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { identity } from 'ramda'; -import { PaginationItem } from 'reactstrap'; -import SimplePaginator from '../../src/common/SimplePaginator'; +import { render, screen } from '@testing-library/react'; +import { SimplePaginator } from '../../src/common/SimplePaginator'; import { ELLIPSIS } from '../../src/utils/helpers/pagination'; describe('', () => { - let wrapper: ShallowWrapper; - const createWrapper = (pagesCount: number, currentPage = 1) => { - wrapper = shallow(); - - return wrapper; - }; - - afterEach(() => wrapper?.unmount()); + const setUp = (pagesCount: number, currentPage = 1) => render( + , + ); it.each([-3, -2, 0, 1])('renders empty when the amount of pages is smaller than 2', (pagesCount) => { - expect(createWrapper(pagesCount).text()).toEqual(''); + const { container } = setUp(pagesCount); + expect(container.firstChild).toEqual(null); }); describe('ELLIPSIS are rendered where expected', () => { const getItemsForPages = (pagesCount: number, currentPage: number) => { - const paginator = createWrapper(pagesCount, currentPage); - const items = paginator.find(PaginationItem); - const itemsWithEllipsis = items.filterWhere((item) => item?.key()?.includes(ELLIPSIS)); + setUp(pagesCount, currentPage); + + const items = screen.getAllByRole('link'); + const itemsWithEllipsis = items.filter((item) => item.innerHTML.includes(ELLIPSIS)); return { items, itemsWithEllipsis }; }; @@ -30,22 +25,22 @@ describe('', () => { it('renders first ELLIPSIS', () => { const { items, itemsWithEllipsis } = getItemsForPages(9, 7); - expect(items.at(2).html()).toContain(ELLIPSIS); + expect(items[1]).toHaveTextContent(ELLIPSIS); expect(itemsWithEllipsis).toHaveLength(1); }); it('renders last ELLIPSIS', () => { const { items, itemsWithEllipsis } = getItemsForPages(9, 2); - expect(items.at(items.length - 3).html()).toContain(ELLIPSIS); + expect(items[items.length - 2]).toHaveTextContent(ELLIPSIS); expect(itemsWithEllipsis).toHaveLength(1); }); it('renders both ELLIPSIS', () => { const { items, itemsWithEllipsis } = getItemsForPages(20, 9); - expect(items.at(2).html()).toContain(ELLIPSIS); - expect(items.at(items.length - 3).html()).toContain(ELLIPSIS); + expect(items[1]).toHaveTextContent(ELLIPSIS); + expect(items[items.length - 2]).toHaveTextContent(ELLIPSIS); expect(itemsWithEllipsis).toHaveLength(2); }); }); diff --git a/test/tags/TagsTable.test.tsx b/test/tags/TagsTable.test.tsx index 4b14bf78..130bf71f 100644 --- a/test/tags/TagsTable.test.tsx +++ b/test/tags/TagsTable.test.tsx @@ -4,7 +4,7 @@ import { useLocation } from 'react-router-dom'; import { TagsTable as createTagsTable } from '../../src/tags/TagsTable'; import { SelectedServer } from '../../src/servers/data'; import { rangeOf } from '../../src/utils/utils'; -import SimplePaginator from '../../src/common/SimplePaginator'; +import { SimplePaginator } from '../../src/common/SimplePaginator'; import { NormalizedTag } from '../../src/tags/data'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useLocation: jest.fn() })); diff --git a/test/visits/VisitsTable.test.tsx b/test/visits/VisitsTable.test.tsx index c8bea5e9..c4ddac6a 100644 --- a/test/visits/VisitsTable.test.tsx +++ b/test/visits/VisitsTable.test.tsx @@ -2,7 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; import VisitsTable, { VisitsTableProps } from '../../src/visits/VisitsTable'; import { rangeOf } from '../../src/utils/utils'; -import SimplePaginator from '../../src/common/SimplePaginator'; +import { SimplePaginator } from '../../src/common/SimplePaginator'; import SearchField from '../../src/utils/SearchField'; import { NormalizedVisit } from '../../src/visits/types'; import { ReachableServer, SelectedServer } from '../../src/servers/data';