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 TagsModeDropdown test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-07-07 19:01:17 +02:00
parent 28b15e4a85
commit 935b12763b
1 changed files with 20 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
test/tags/TagsModeDropdown.test.tsx
View file

@ -1,42 +1,37 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { DropdownItem } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars as listIcon, faThLarge as cardsIcon } from '@fortawesome/free-solid-svg-icons';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
import { DropdownBtn } from '../../src/utils/DropdownBtn';
import { TagsMode } from '../../src/settings/reducers/settings';
describe('<TagsModeDropdown />', () => {
const onChange = jest.fn();
let wrapper: ShallowWrapper;
beforeEach(() => {
wrapper = shallow(<TagsModeDropdown mode="list" onChange={onChange} />);
const setUp = (mode: TagsMode) => ({
user: userEvent.setup(),
...render(<TagsModeDropdown mode={mode} onChange={onChange} />),
});
afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('renders expected items', () => {
const btn = wrapper.find(DropdownBtn);
const items = wrapper.find(DropdownItem);
const icons = wrapper.find(FontAwesomeIcon);
expect(btn).toHaveLength(1);
expect(btn.prop('text')).toEqual('Display mode: list');
expect(items).toHaveLength(2);
expect(icons).toHaveLength(2);
expect(icons.first().prop('icon')).toEqual(cardsIcon);
expect(icons.last().prop('icon')).toEqual(listIcon);
it.each([
['cards' as TagsMode],
['list' as TagsMode],
])('renders expected initial value', (mode) => {
setUp(mode);
expect(screen.getByRole('button')).toHaveTextContent(`Display mode: ${mode}`);
});
it('changes active element on click', () => {
const items = wrapper.find(DropdownItem);
it('changes active element on click', async () => {
const { user } = setUp('list');
const clickItem = async (index: 0 | 1) => {
await user.click(screen.getByRole('button'));
await user.click(screen.getAllByRole('menuitem')[index]);
};
expect(onChange).not.toHaveBeenCalled();
items.first().simulate('click');
await clickItem(0);
expect(onChange).toHaveBeenCalledWith('cards');
items.last().simulate('click');
await clickItem(1);
expect(onChange).toHaveBeenCalledWith('list');
});
});