mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-03 23:07:26 +03:00
Migrated DropdownBtnMenu test to react testing library
This commit is contained in:
parent
126537185b
commit
fc4fdb4fc7
1 changed files with 20 additions and 29 deletions
|
@ -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');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue