mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-08 17:27:32 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated SimplePaginator test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-05-06 21:20:14 +02:00
parent 00f154ef4e
commit 3846ca293c
7 changed files with 24 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/common/SimplePaginator.tsx
View file

@ -17,7 +17,7 @@ interface SimplePaginatorProps {
centered?: boolean;
}
const SimplePaginator: FC<SimplePaginatorProps> = ({ pagesCount, currentPage, setCurrentPage, centered = true }) => {
export const SimplePaginator: FC<SimplePaginatorProps> = ({ pagesCount, currentPage, setCurrentPage, centered = true }) => {
if (pagesCount < 2) {
return null;
}
@ -35,7 +35,9 @@ const SimplePaginator: FC<SimplePaginatorProps> = ({ pagesCount, currentPage, se
disabled={pageIsEllipsis(pageNumber)}
active={currentPage === pageNumber}
>
<PaginationLink tag="span" onClick={onClick(pageNumber)}>{prettifyPageNumber(pageNumber)}</PaginationLink>
<PaginationLink role="link" tag="span" onClick={onClick(pageNumber)}>
{prettifyPageNumber(pageNumber)}
</PaginationLink>
</PaginationItem>
))}
<PaginationItem disabled={currentPage >= pagesCount}>
@ -44,5 +46,3 @@ const SimplePaginator: FC<SimplePaginatorProps> = ({ pagesCount, currentPage, se
</Pagination>
);
};
export default SimplePaginator;

2
src/tags/TagsTable.tsx
View file

@ -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';

2
src/visits/VisitsTable.tsx
View file

@ -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';

2
src/visits/charts/SortableBarChartCard.tsx
View file

@ -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';

35
test/common/SimplePaginator.test.tsx
View file

@ -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('<SimplePaginator />', () => {
let wrapper: ShallowWrapper;
const createWrapper = (pagesCount: number, currentPage = 1) => {
wrapper = shallow(<SimplePaginator pagesCount={pagesCount} currentPage={currentPage} setCurrentPage={identity} />);
return wrapper;
};
afterEach(() => wrapper?.unmount());
const setUp = (pagesCount: number, currentPage = 1) => render(
<SimplePaginator pagesCount={pagesCount} currentPage={currentPage} setCurrentPage={jest.fn()} />,
);
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('<SimplePaginator />', () => {
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);
});
});

2
test/tags/TagsTable.test.tsx
View file

@ -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() }));

2
test/visits/VisitsTable.test.tsx
View file

@ -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';