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

Migrated TagsTableRow test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-07-16 10:59:18 +02:00
parent 4c7bed90a3
commit c16460af82
1 changed files with 26 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
test/tags/TagsTableRow.test.tsx
View file

@ -1,18 +1,17 @@
import { screen } from '@testing-library/react'; import { screen } from '@testing-library/react';
import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { DropdownItem } from 'reactstrap';
import { MemoryRouter } from 'react-router-dom'; import { MemoryRouter } from 'react-router-dom';
import { TagsTableRow as createTagsTableRow } from '../../src/tags/TagsTableRow'; import { TagsTableRow as createTagsTableRow } from '../../src/tags/TagsTableRow';
import { ReachableServer } from '../../src/servers/data'; import { ReachableServer } from '../../src/servers/data';
import { DropdownBtnMenu } from '../../src/utils/DropdownBtnMenu';
import { renderWithEvents } from '../__helpers__/setUpTest'; import { renderWithEvents } from '../__helpers__/setUpTest';
import { colorGeneratorMock } from '../utils/services/__mocks__/ColorGenerator.mock'; import { colorGeneratorMock } from '../utils/services/__mocks__/ColorGenerator.mock';
describe('<TagsTableRow />', () => { describe('<TagsTableRow />', () => {
const DeleteTagConfirmModal = () => null; const TagsTableRow = createTagsTableRow(
const EditTagModal = () => null; ({ isOpen }) => <td>DeleteTagConfirmModal {isOpen ? 'OPEN' : 'CLOSED'}</td>,
const TagsTableRow = createTagsTableRow(DeleteTagConfirmModal, EditTagModal, colorGeneratorMock); ({ isOpen }) => <td>EditTagModal {isOpen ? 'OPEN' : 'CLOSED'}</td>,
colorGeneratorMock,
);
const setUp = (tagStats?: { visits?: number; shortUrls?: number }) => renderWithEvents( const setUp = (tagStats?: { visits?: number; shortUrls?: number }) => renderWithEvents(
<MemoryRouter> <MemoryRouter>
<table> <table>
@ -26,19 +25,6 @@ describe('<TagsTableRow />', () => {
</MemoryRouter>, </MemoryRouter>,
); );
let wrapper: ShallowWrapper;
const createWrapper = (tagStats?: { visits?: number; shortUrls?: number }) => {
wrapper = shallow(
<TagsTableRow
tag={{ tag: 'foo&bar', visits: tagStats?.visits ?? 0, shortUrls: tagStats?.shortUrls ?? 0 }}
selectedServer={Mock.of<ReachableServer>({ id: 'abc123' })}
/>,
);
return wrapper;
};
afterEach(() => wrapper?.unmount());
it.each([ it.each([
[undefined, '0', '0'], [undefined, '0', '0'],
[{ shortUrls: 10, visits: 3480 }, '10', '3,480'], [{ shortUrls: 10, visits: 3480 }, '10', '3,480'],
@ -56,36 +42,31 @@ describe('<TagsTableRow />', () => {
expect(visitsLink).toHaveAttribute('href', '/server/abc123/tag/foo&bar/visits'); expect(visitsLink).toHaveAttribute('href', '/server/abc123/tag/foo&bar/visits');
}); });
it('allows toggling dropdown menu', () => { it('allows toggling dropdown menu', async () => {
const wrapper = createWrapper(); const { user } = setUp();
expect(wrapper.find(DropdownBtnMenu).prop('isOpen')).toEqual(false); expect(screen.queryByRole('menu')).not.toBeInTheDocument();
(wrapper.find(DropdownBtnMenu).prop('toggle') as Function)(); await user.click(screen.getByRole('button'));
expect(wrapper.find(DropdownBtnMenu).prop('isOpen')).toEqual(true); expect(screen.queryByRole('menu')).toBeInTheDocument();
}); });
it('allows toggling modals through dropdown items', () => { it('allows toggling modals through dropdown items', async () => {
const wrapper = createWrapper(); const { user } = setUp();
const items = wrapper.find(DropdownItem); const clickItemOnIndex = async (index: 0 | 1) => {
await user.click(screen.getByRole('button'));
await user.click(screen.getAllByRole('menuitem')[index]);
};
expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(false); expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('CLOSED');
items.first().simulate('click'); expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('OPEN');
expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(true); await clickItemOnIndex(0);
expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('OPEN');
expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('CLOSED');
expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(false); expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('CLOSED');
items.last().simulate('click'); expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('OPEN');
expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(true); await clickItemOnIndex(1);
}); expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('OPEN');
expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('CLOSED');
it('allows toggling modals through the modals themselves', () => {
const wrapper = createWrapper();
expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(false);
(wrapper.find(EditTagModal).prop('toggle') as Function)();
expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(true);
expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(false);
(wrapper.find(DeleteTagConfirmModal).prop('toggle') as Function)();
expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(true);
}); });
}); });