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