mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated TagsTable test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-07-16 10:43:44 +02:00
parent a038f5e618
commit 491b2f2c07
1 changed files with 28 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,24 +1,21 @@
import { screen } from '@testing-library/react';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { shallow, ShallowWrapper } from 'enzyme';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import { TagsTable as createTagsTable } from '../../src/tags/TagsTable'; import { TagsTable as createTagsTable } from '../../src/tags/TagsTable';
import { SelectedServer } from '../../src/servers/data'; import { SelectedServer } from '../../src/servers/data';
import { rangeOf } from '../../src/utils/utils'; import { rangeOf } from '../../src/utils/utils';
import { SimplePaginator } from '../../src/common/SimplePaginator';
import { NormalizedTag } from '../../src/tags/data'; import { NormalizedTag } from '../../src/tags/data';
import { renderWithEvents } from '../__helpers__/setUpTest';
jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useLocation: jest.fn() })); jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useLocation: jest.fn() }));
describe('<TagsTable />', () => { describe('<TagsTable />', () => {
const TagsTableRow = () => null;
const orderByColumn = jest.fn(); const orderByColumn = jest.fn();
const TagsTable = createTagsTable(TagsTableRow); const TagsTable = createTagsTable(({ tag }) => <tr><td>TagsTableRow [{tag.tag}]</td></tr>);
const tags = (amount: number) => rangeOf(amount, (i) => `tag_${i}`); const tags = (amount: number) => rangeOf(amount, (i) => `tag_${i}`);
let wrapper: ShallowWrapper; const setUp = (sortedTags: string[] = [], search = '') => {
const createWrapper = (sortedTags: string[] = [], search = '') => {
(useLocation as any).mockReturnValue({ search }); (useLocation as any).mockReturnValue({ search });
return renderWithEvents(
wrapper = shallow(
<TagsTable <TagsTable
sortedTags={sortedTags.map((tag) => Mock.of<NormalizedTag>({ tag }))} sortedTags={sortedTags.map((tag) => Mock.of<NormalizedTag>({ tag }))}
selectedServer={Mock.all<SelectedServer>()} selectedServer={Mock.all<SelectedServer>()}
@ -26,20 +23,15 @@ describe('<TagsTable />', () => {
orderByColumn={() => orderByColumn} orderByColumn={() => orderByColumn}
/>, />,
); );
return wrapper;
}; };
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('renders empty result if there are no tags', () => { it('renders empty result if there are no tags', () => {
const wrapper = createWrapper(); setUp();
const regularRows = wrapper.find('tbody').find('tr');
const tagRows = wrapper.find(TagsTableRow);
expect(regularRows).toHaveLength(1); expect(screen.queryByText(/^TagsTableRow/)).not.toBeInTheDocument();
expect(tagRows).toHaveLength(0); expect(screen.getByText('No results found')).toBeInTheDocument();
}); });
it.each([ it.each([
@ -50,10 +42,10 @@ describe('<TagsTable />', () => {
[tags(30), 20], [tags(30), 20],
[tags(100), 20], [tags(100), 20],
])('renders as many rows as there are in current page', (filteredTags, expectedRows) => { ])('renders as many rows as there are in current page', (filteredTags, expectedRows) => {
const wrapper = createWrapper(filteredTags); setUp(filteredTags);
const tagRows = wrapper.find(TagsTableRow);
expect(tagRows).toHaveLength(expectedRows); expect(screen.getAllByText(/^TagsTableRow/)).toHaveLength(expectedRows);
expect(screen.queryByText('No results found')).not.toBeInTheDocument();
}); });
it.each([ it.each([
@ -64,10 +56,8 @@ describe('<TagsTable />', () => {
[tags(30), 1], [tags(30), 1],
[tags(100), 1], [tags(100), 1],
])('renders paginator if there are more than one page', (filteredTags, expectedPaginators) => { ])('renders paginator if there are more than one page', (filteredTags, expectedPaginators) => {
const wrapper = createWrapper(filteredTags); const { container } = setUp(filteredTags);
const paginator = wrapper.find(SimplePaginator); expect(container.querySelectorAll('.sticky-card-paginator')).toHaveLength(expectedPaginators);
expect(paginator).toHaveLength(expectedPaginators);
}); });
it.each([ it.each([
@ -78,30 +68,30 @@ describe('<TagsTable />', () => {
[5, 7, 80], [5, 7, 80],
[6, 0, 0], [6, 0, 0],
])('renders page from query if present', (page, expectedRows, offset) => { ])('renders page from query if present', (page, expectedRows, offset) => {
const wrapper = createWrapper(tags(87), `page=${page}`); setUp(tags(87), `page=${page}`);
const tagRows = wrapper.find(TagsTableRow);
const tagRows = screen.queryAllByText(/^TagsTableRow/);
expect(tagRows).toHaveLength(expectedRows); expect(tagRows).toHaveLength(expectedRows);
tagRows.forEach((row, index) => { tagRows.forEach((row, index) => expect(row).toHaveTextContent(`[tag_${index + offset + 1}]`));
expect(row.prop('tag')).toEqual(expect.objectContaining({ tag: `tag_${index + offset + 1}` }));
});
}); });
it('allows changing current page in paginator', () => { it('allows changing current page in paginator', async () => {
const wrapper = createWrapper(tags(100)); const { user, container } = setUp(tags(100));
expect(wrapper.find(SimplePaginator).prop('currentPage')).toEqual(1); expect(container.querySelector('.active')).toHaveTextContent('1');
(wrapper.find(SimplePaginator).prop('setCurrentPage') as Function)(5); await user.click(screen.getByText('5'));
expect(wrapper.find(SimplePaginator).prop('currentPage')).toEqual(5); expect(container.querySelector('.active')).toHaveTextContent('5');
}); });
it('orders tags when column is clicked', () => { it('orders tags when column is clicked', async () => {
const wrapper = createWrapper(tags(100)); const { user } = setUp(tags(100));
const headers = screen.getAllByRole('columnheader');
expect(orderByColumn).not.toHaveBeenCalled(); expect(orderByColumn).not.toHaveBeenCalled();
wrapper.find('thead').find('th').first().simulate('click'); await user.click(headers[0]);
wrapper.find('thead').find('th').at(2).simulate('click'); await user.click(headers[2]);
wrapper.find('thead').find('th').at(1).simulate('click'); await user.click(headers[1]);
expect(orderByColumn).toHaveBeenCalledTimes(3); expect(orderByColumn).toHaveBeenCalledTimes(3);
}); });
}); });