mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-03 23:07:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated DropdownBtn test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-07-10 20:42:58 +02:00
parent 4a88f30d13
commit 381eb5a502
1 changed files with 24 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
test/utils/DropdownBtn.test.tsx
View file

@ -1,30 +1,23 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { screen } from '@testing-library/react';
import { DropdownMenu, DropdownToggle } from 'reactstrap';
import { PropsWithChildren } from 'react'; import { PropsWithChildren } from 'react';
import { DropdownBtn, DropdownBtnProps } from '../../src/utils/DropdownBtn'; import { DropdownBtn, DropdownBtnProps } from '../../src/utils/DropdownBtn';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<DropdownBtn />', () => { describe('<DropdownBtn />', () => {
let wrapper: ShallowWrapper; const setUp = (props: PropsWithChildren<DropdownBtnProps>) => renderWithEvents(
const createWrapper = (props: PropsWithChildren<DropdownBtnProps>) => { <DropdownBtn children="foo" {...props} />,
wrapper = shallow(<DropdownBtn children="foo" {...props} />); );
return wrapper; it.each([['foo'], ['bar'], ['baz']])('displays provided text in button', (text) => {
}; setUp({ text });
expect(screen.getByRole('button')).toHaveTextContent(text);
afterEach(() => wrapper?.unmount());
it.each([['foo'], ['bar'], ['baz']])('displays provided text', (text) => {
const wrapper = createWrapper({ text });
const toggle = wrapper.find(DropdownToggle);
expect(toggle.prop('children')).toContain(text);
}); });
it.each([['foo'], ['bar'], ['baz']])('displays provided children', (children) => { it.each([['foo'], ['bar'], ['baz']])('displays provided children in menu', async (children) => {
const wrapper = createWrapper({ text: '', children }); const { user } = setUp({ text: '', children });
const menu = wrapper.find(DropdownMenu);
expect(menu.html()).toContain(children); await user.click(screen.getByRole('button'));
expect(screen.getByRole('menu')).toHaveTextContent(children);
}); });
it.each([ it.each([
@ -33,20 +26,21 @@ describe('<DropdownBtn />', () => {
['foo', 'dropdown-btn__toggle btn-block foo'], ['foo', 'dropdown-btn__toggle btn-block foo'],
['bar', 'dropdown-btn__toggle btn-block bar'], ['bar', 'dropdown-btn__toggle btn-block bar'],
])('includes provided classes', (className, expectedClasses) => { ])('includes provided classes', (className, expectedClasses) => {
const wrapper = createWrapper({ text: '', className }); setUp({ text: '', className });
const toggle = wrapper.find(DropdownToggle); expect(screen.getByRole('button')).toHaveClass(expectedClasses);
expect(toggle.prop('className')?.trim()).toEqual(expectedClasses);
}); });
it.each([ it.each([
[100, { minWidth: '100px' }], [100, 'min-width: 100px; '],
[250, { minWidth: '250px' }], [250, 'min-width: 250px; '],
[undefined, {}], [undefined, ''],
])('renders proper styles when minWidth is provided', (minWidth, expectedStyle) => { ])('renders proper styles when minWidth is provided', async (minWidth, expectedStyle) => {
const wrapper = createWrapper({ text: '', minWidth }); const { user } = setUp({ text: '', minWidth });
const style = wrapper.find(DropdownMenu).prop('style');
expect(style).toEqual(expectedStyle); await user.click(screen.getByRole('button'));
expect(screen.getByRole('menu')).toHaveAttribute(
'style',
`${expectedStyle}position: absolute; left: 0px; top: 0px;`,
);
}); });
}); });