Migrated Paginator test to react testing library

This commit is contained in:
Alejandro Celaya 2022-06-09 22:17:33 +02:00
parent 2acd0ec95d
commit 58f952df8a

View file

@ -1,15 +1,17 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { PaginationItem, PaginationLink } from 'reactstrap';
import { render, screen } from '@testing-library/react';
import { Mock } from 'ts-mockery';
import { MemoryRouter } from 'react-router-dom';
import { Paginator } from '../../src/short-urls/Paginator';
import { ShlinkPaginator } from '../../src/api/types';
import { ELLIPSIS } from '../../src/utils/helpers/pagination';
describe('<Paginator />', () => {
let wrapper: ShallowWrapper;
const buildPaginator = (pagesCount?: number) => Mock.of<ShlinkPaginator>({ pagesCount, currentPage: 1 });
afterEach(() => wrapper?.unmount());
const setUp = (paginator?: ShlinkPaginator, currentQueryString?: string) => render(
<MemoryRouter>
<Paginator serverId="abc123" paginator={paginator} currentQueryString={currentQueryString} />
</MemoryRouter>,
);
it.each([
[undefined],
@ -17,8 +19,8 @@ describe('<Paginator />', () => {
[buildPaginator(0)],
[buildPaginator(1)],
])('renders nothing if the number of pages is below 2', (paginator) => {
wrapper = shallow(<Paginator serverId="abc123" paginator={paginator} />);
expect(wrapper.text()).toEqual('');
const { container } = setUp(paginator);
expect(container.firstChild).toBeNull();
});
it.each([
@ -33,11 +35,12 @@ describe('<Paginator />', () => {
expectedPages,
expectedEllipsis,
) => {
wrapper = shallow(<Paginator serverId="abc123" paginator={paginator} />);
const items = wrapper.find(PaginationItem);
const ellipsis = items.filterWhere((item) => item.find(PaginationLink).prop('children') === ELLIPSIS);
setUp(paginator);
expect(items).toHaveLength(expectedPages);
const links = screen.getAllByRole('link');
const ellipsis = screen.queryAllByText(ELLIPSIS);
expect(links).toHaveLength(expectedPages);
expect(ellipsis).toHaveLength(expectedEllipsis);
});
@ -45,10 +48,10 @@ describe('<Paginator />', () => {
const paginator = buildPaginator(3);
const currentQueryString = '?foo=bar';
wrapper = shallow(<Paginator serverId="abc123" paginator={paginator} currentQueryString={currentQueryString} />);
const links = wrapper.find(PaginationLink);
setUp(paginator, currentQueryString);
const links = screen.getAllByRole('link');
expect(links).toHaveLength(5);
links.forEach((link) => expect(link.prop('to')).toContain(currentQueryString));
links.forEach((link) => expect(link).toHaveAttribute('href', expect.stringContaining(currentQueryString)));
});
});