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

Browse source
This commit is contained in:
Alejandro Celaya 2022-06-21 19:23:05 +02:00
parent d3d2cf72b9
commit ac0107d450
1 changed files with 41 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
test/visits/helpers/VisitsFilterDropdown.test.tsx
View file

@ -1,89 +1,80 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen } from '@testing-library/react';
import { DropdownItem } from 'reactstrap'; import userEvent from '@testing-library/user-event';
import { OrphanVisitType, VisitsFilter } from '../../../src/visits/types'; import { OrphanVisitType, VisitsFilter } from '../../../src/visits/types';
import { VisitsFilterDropdown } from '../../../src/visits/helpers/VisitsFilterDropdown'; import { VisitsFilterDropdown } from '../../../src/visits/helpers/VisitsFilterDropdown';
describe('<VisitsFilterDropdown />', () => { describe('<VisitsFilterDropdown />', () => {
let wrapper: ShallowWrapper;
const onChange = jest.fn(); const onChange = jest.fn();
const createWrapper = (selected: VisitsFilter = {}, isOrphanVisits = true) => { const setUp = (selected: VisitsFilter = {}, isOrphanVisits = true, botsSupported = true) => ({
wrapper = shallow( user: userEvent.setup(),
...render(
<VisitsFilterDropdown <VisitsFilterDropdown
isOrphanVisits={isOrphanVisits} isOrphanVisits={isOrphanVisits}
botsSupported botsSupported={botsSupported}
selected={selected} selected={selected}
onChange={onChange} onChange={onChange}
/>, />,
); ),
});
return wrapper;
};
beforeEach(jest.clearAllMocks); beforeEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('has expected text', () => { it('has expected text', () => {
const wrapper = createWrapper(); setUp();
expect(screen.getByRole('button', { name: 'Filters' })).toBeInTheDocument();
expect(wrapper.prop('text')).toEqual('Filters');
}); });
it.each([ it.each([
[false, 4, 1], [false, 1, 1],
[true, 9, 2], [true, 4, 2],
])('renders expected amount of items', (isOrphanVisits, expectedItemsAmount, expectedHeadersAmount) => { ])('renders expected amount of items', async (isOrphanVisits, expectedItemsAmount, expectedHeadersAmount) => {
const wrapper = createWrapper({}, isOrphanVisits); const { user } = setUp({}, isOrphanVisits);
const items = wrapper.find(DropdownItem);
const headers = items.filterWhere((item) => !!item.prop('header'));
expect(items).toHaveLength(expectedItemsAmount); await user.click(screen.getByRole('button', { name: 'Filters' }));
expect(headers).toHaveLength(expectedHeadersAmount);
expect(screen.getAllByRole('menuitem')).toHaveLength(expectedItemsAmount);
expect(screen.getAllByRole('heading')).toHaveLength(expectedHeadersAmount);
}); });
it.each([ it.each([
['base_url' as OrphanVisitType, 4, 1], ['base_url' as OrphanVisitType, 1, 1],
['invalid_short_url' as OrphanVisitType, 5, 1], ['invalid_short_url' as OrphanVisitType, 2, 1],
['regular_404' as OrphanVisitType, 6, 1], ['regular_404' as OrphanVisitType, 3, 1],
[undefined, -1, 0], [undefined, -1, 0],
])('sets expected item as active', (orphanVisitsType, expectedSelectedIndex, expectedActiveItems) => { ])('sets expected item as active', async (orphanVisitsType, expectedSelectedIndex, expectedActiveItems) => {
const wrapper = createWrapper({ orphanVisitsType }); const { user } = setUp({ orphanVisitsType });
const items = wrapper.find(DropdownItem);
const activeItem = items.filterWhere((item) => !!item.prop('active')); await user.click(screen.getByRole('button', { name: 'Filters' }));
const items = screen.getAllByRole('menuitem');
const activeItem = items.filter((item) => item.classList.contains('active'));
expect.assertions(expectedActiveItems + 1); expect.assertions(expectedActiveItems + 1);
expect(activeItem).toHaveLength(expectedActiveItems); expect(activeItem).toHaveLength(expectedActiveItems);
items.forEach((item, index) => { items.forEach((item, index) => {
if (item.prop('active')) { if (item.classList.contains('active')) {
expect(index).toEqual(expectedSelectedIndex); expect(index).toEqual(expectedSelectedIndex);
} }
}); });
}); });
it.each([ it.each([
[1, { excludeBots: true }], [0, { excludeBots: true }, {}],
[4, { orphanVisitsType: 'base_url' }], [1, { orphanVisitsType: 'base_url' }, {}],
[5, { orphanVisitsType: 'invalid_short_url' }], [2, { orphanVisitsType: 'invalid_short_url' }, {}],
[6, { orphanVisitsType: 'regular_404' }], [3, { orphanVisitsType: 'regular_404' }, {}],
[8, {}], [4, {}, { excludeBots: true }],
])('invokes onChange with proper selection when an item is clicked', (index, expectedSelection) => { ])('invokes onChange with proper selection when an item is clicked', async (index, expectedSelection, selected) => {
const wrapper = createWrapper(); const { user } = setUp(selected);
const itemToClick = wrapper.find(DropdownItem).at(index);
itemToClick.simulate('click');
expect(onChange).not.toHaveBeenCalled();
await user.click(screen.getByRole('button', { name: 'Filters' }));
await user.click(screen.getAllByRole('menuitem')[index]);
expect(onChange).toHaveBeenCalledWith(expectedSelection); expect(onChange).toHaveBeenCalledWith(expectedSelection);
}); });
it('does not render the component when neither orphan visits or bots filtering will be displayed', () => { it('does not render the component when neither orphan visits or bots filtering will be displayed', () => {
const wrapper = shallow( const { container } = setUp({}, false, false);
<VisitsFilterDropdown expect(container.firstChild).toBeNull();
isOrphanVisits={false}
botsSupported={false}
selected={{}}
onChange={onChange}
/>,
);
expect(wrapper.text()).toEqual('');
}); });
}); });