Migrated DropdownBtnMenu test to react testing library

This commit is contained in:
Alejandro Celaya 2022-07-17 09:29:50 +02:00
parent 126537185b
commit fc4fdb4fc7

View file

@ -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('<DropdownBtnMenu />', () => {
let wrapper: ShallowWrapper;
const createWrapper = (props: Partial<DropdownBtnMenuProps>) => {
wrapper = shallow(<DropdownBtnMenu {...Mock.of<DropdownBtnMenuProps>(props)}>the children</DropdownBtnMenu>);
return wrapper;
};
afterAll(() => wrapper?.unmount());
const setUp = (props: Partial<DropdownBtnMenuProps> = {}) => renderWithEvents(
<DropdownBtnMenu {...Mock.of<DropdownBtnMenuProps>({ toggle: jest.fn(), ...props })}>the children</DropdownBtnMenu>,
);
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');
}
});
});