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');
+ }
});
});