diff --git a/test/utils/DropdownBtnMenu.test.tsx b/test/utils/DropdownBtnMenu.test.tsx index 42f43f00..d7ef86b8 100644 --- a/test/utils/DropdownBtnMenu.test.tsx +++ b/test/utils/DropdownBtnMenu.test.tsx @@ -1,48 +1,39 @@ -import { shallow, ShallowWrapper } from 'enzyme'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; -import { ButtonDropdown, DropdownMenu, DropdownToggle } from 'reactstrap'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faEllipsisV as menuIcon } from '@fortawesome/free-solid-svg-icons'; import { DropdownBtnMenu, DropdownBtnMenuProps } from '../../src/utils/DropdownBtnMenu'; +import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { - let wrapper: ShallowWrapper; - const createWrapper = (props: Partial) => { - wrapper = shallow((props)}>the children); - - return wrapper; - }; - - afterAll(() => wrapper?.unmount()); + const setUp = (props: Partial = {}) => renderWithEvents( + ({ toggle: jest.fn(), ...props })}>the children, + ); it('renders expected components', () => { - const wrapper = createWrapper({}); - const toggle = wrapper.find(DropdownToggle); - const icon = wrapper.find(FontAwesomeIcon); + setUp(); + const toggle = screen.getByRole('button'); - expect(wrapper.find(ButtonDropdown)).toHaveLength(1); - expect(toggle).toHaveLength(1); - expect(toggle.prop('size')).toEqual('sm'); - expect(toggle.prop('caret')).toEqual(true); - expect(toggle.prop('outline')).toEqual(true); - expect(toggle.prop('className')).toEqual('dropdown-btn-menu__dropdown-toggle'); - expect(icon).toHaveLength(1); - expect(icon.prop('icon')).toEqual(menuIcon); + expect(toggle).toBeInTheDocument(); + expect(toggle).toHaveClass('btn-sm'); + expect(toggle).toHaveClass('dropdown-btn-menu__dropdown-toggle'); + expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument(); }); it('renders expected children', () => { - const menu = createWrapper({}).find(DropdownMenu); - - expect(menu.prop('children')).toEqual('the children'); + setUp(); + expect(screen.getByText('the children')).toBeInTheDocument(); }); it.each([ [undefined, true], [true, true], [false, false], - ])('renders menu to right when expected', (right, expectedRight) => { - const wrapper = createWrapper({ right }); + ])('renders menu to the end when expected', (right, expectedEnd) => { + setUp({ right }); - expect(wrapper.find(DropdownMenu).prop('end')).toEqual(expectedRight); + if (expectedEnd) { + expect(screen.getByRole('menu', { hidden: true })).toHaveClass('dropdown-menu-end'); + } else { + expect(screen.getByRole('menu', { hidden: true })).not.toHaveClass('dropdown-menu-end'); + } }); });