Migrated ServersListGroup test to react testing library

This commit is contained in:
Alejandro Celaya 2022-06-04 09:59:19 +02:00
parent cfe84e1275
commit 1bd8636c19

View file

@ -1,6 +1,6 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen } from '@testing-library/react';
import { ListGroup } from 'reactstrap';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { MemoryRouter } from 'react-router-dom';
import { ServersListGroup } from '../../src/servers/ServersListGroup'; import { ServersListGroup } from '../../src/servers/ServersListGroup';
import { ServerWithId } from '../../src/servers/data'; import { ServerWithId } from '../../src/servers/data';
@ -9,44 +9,36 @@ describe('<ServersListGroup />', () => {
Mock.of<ServerWithId>({ name: 'foo', id: '123' }), Mock.of<ServerWithId>({ name: 'foo', id: '123' }),
Mock.of<ServerWithId>({ name: 'bar', id: '456' }), Mock.of<ServerWithId>({ name: 'bar', id: '456' }),
]; ];
let wrapped: ShallowWrapper; const setUp = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean }) => {
const createComponent = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean }) => {
const { servers = [], withChildren = true, embedded } = params; const { servers = [], withChildren = true, embedded } = params;
wrapped = shallow( return render(
<MemoryRouter>
<ServersListGroup servers={servers} embedded={embedded}> <ServersListGroup servers={servers} embedded={embedded}>
{withChildren ? 'The list of servers' : undefined} {withChildren ? 'The list of servers' : undefined}
</ServersListGroup>, </ServersListGroup>
</MemoryRouter>,
); );
return wrapped;
}; };
afterEach(() => wrapped?.unmount());
it('renders title', () => { it('renders title', () => {
const wrapped = createComponent({}); setUp({});
const title = wrapped.find('h5'); expect(screen.getByRole('heading')).toHaveTextContent('The list of servers');
expect(title).toHaveLength(1);
expect(title.text()).toEqual('The list of servers');
}); });
it('does not render title when children is not provided', () => { it('does not render title when children is not provided', () => {
const wrapped = createComponent({ withChildren: false }); setUp({ withChildren: false });
const title = wrapped.find('h5'); expect(screen.queryByRole('heading')).not.toBeInTheDocument();
expect(title).toHaveLength(0);
}); });
it.each([ it.each([
[servers], [servers],
[[]], [[]],
])('shows servers list', (servers) => { ])('shows servers list', (servers) => {
const wrapped = createComponent({ servers }); setUp({ servers });
expect(wrapped.find(ListGroup)).toHaveLength(servers.length ? 1 : 0); expect(screen.queryAllByRole('list')).toHaveLength(servers.length ? 1 : 0);
expect(wrapped.find('ServerListItem')).toHaveLength(servers.length); expect(screen.queryAllByRole('link')).toHaveLength(servers.length);
}); });
it.each([ it.each([
@ -54,9 +46,7 @@ describe('<ServersListGroup />', () => {
[false, 'servers-list__list-group'], [false, 'servers-list__list-group'],
[undefined, 'servers-list__list-group'], [undefined, 'servers-list__list-group'],
])('renders proper classes for embedded', (embedded, expectedClasses) => { ])('renders proper classes for embedded', (embedded, expectedClasses) => {
const wrapped = createComponent({ servers, embedded }); setUp({ servers, embedded });
const listGroup = wrapped.find(ListGroup); expect(screen.getByRole('list')).toHaveAttribute('class', `${expectedClasses} list-group`);
expect(listGroup.prop('className')).toEqual(expectedClasses);
}); });
}); });