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