Migrated DuplicatedServersModal test to react testing library

This commit is contained in:
Alejandro Celaya 2022-06-04 18:54:34 +02:00
parent 807c5c3fb4
commit e46506b264

View file

@ -1,23 +1,20 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Mock } from 'ts-mockery';
import { Button, ModalHeader } from 'reactstrap';
import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal';
import { ServerData } from '../../../src/servers/data';
describe('<DuplicatedServersModal />', () => {
const onDiscard = jest.fn();
const onSave = jest.fn();
let wrapper: ShallowWrapper;
const createWrapper = (duplicatedServers: ServerData[] = []) => {
wrapper = shallow(
const setUp = (duplicatedServers: ServerData[] = []) => ({
user: userEvent.setup(),
...render(
<DuplicatedServersModal isOpen duplicatedServers={duplicatedServers} onDiscard={onDiscard} onSave={onSave} />,
);
return wrapper;
};
),
});
beforeEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it.each([
[[], 0],
@ -26,10 +23,8 @@ describe('<DuplicatedServersModal />', () => {
[[Mock.all<ServerData>(), Mock.all<ServerData>(), Mock.all<ServerData>()], 3],
[[Mock.all<ServerData>(), Mock.all<ServerData>(), Mock.all<ServerData>(), Mock.all<ServerData>()], 4],
])('renders expected amount of items', (duplicatedServers, expectedItems) => {
const wrapper = createWrapper(duplicatedServers);
const li = wrapper.find('li');
expect(li).toHaveLength(expectedItems);
setUp(duplicatedServers);
expect(screen.queryAllByRole('listitem')).toHaveLength(expectedItems);
});
it.each([
@ -52,55 +47,53 @@ describe('<DuplicatedServersModal />', () => {
},
],
])('renders expected texts based on amount of servers', (duplicatedServers, assertions) => {
const wrapper = createWrapper(duplicatedServers);
const header = wrapper.find(ModalHeader);
const p = wrapper.find('p');
const span = wrapper.find('span');
const discardBtn = wrapper.find(Button).first();
setUp(duplicatedServers);
expect(header.html()).toContain(assertions.header);
expect(p.html()).toContain(assertions.firstParagraph);
expect(span.html()).toContain(assertions.lastParagraph);
expect(discardBtn.html()).toContain(assertions.discardBtn);
expect(screen.getByRole('heading')).toHaveTextContent(assertions.header);
expect(screen.getByText(assertions.firstParagraph)).toBeInTheDocument();
expect(screen.getByText(assertions.lastParagraph)).toBeInTheDocument();
expect(screen.getByRole('button', { name: assertions.discardBtn })).toBeInTheDocument();
});
it.each([
[[]],
[[Mock.of<ServerData>({ url: 'url', apiKey: 'apiKey' })]],
[[
Mock.of<ServerData>({ url: 'url_1', apiKey: 'apiKey_1' }),
Mock.of<ServerData>({ url: 'url_2', apiKey: 'apiKey_2' }),
]],
])('displays provided server data', (duplicatedServers) => {
const wrapper = createWrapper(duplicatedServers);
const li = wrapper.find('li');
setUp(duplicatedServers);
if (duplicatedServers.length === 0) {
expect(li).toHaveLength(0);
expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
} else if (duplicatedServers.length === 1) {
expect(li.first().find('b').html()).toEqual(`<b>${duplicatedServers[0].url}</b>`);
expect(li.last().find('b').html()).toEqual(`<b>${duplicatedServers[0].apiKey}</b>`);
const [firstItem, secondItem] = screen.getAllByRole('listitem');
expect(firstItem).toHaveTextContent(`URL: ${duplicatedServers[0].url}`);
expect(secondItem).toHaveTextContent(`API key: ${duplicatedServers[0].apiKey}`);
} else {
expect.assertions(duplicatedServers.length);
li.forEach((item, index) => {
screen.getAllByRole('listitem').forEach((item, index) => {
const server = duplicatedServers[index];
expect(item.html()).toContain(`<b>${server.url}</b> - <b>${server.apiKey}</b>`);
expect(item).toHaveTextContent(`${server.url} - ${server.apiKey}`);
});
}
});
it('invokes onDiscard when appropriate button is clicked', () => {
const wrapper = createWrapper();
const btn = wrapper.find(Button).first();
btn.simulate('click');
it('invokes onDiscard when appropriate button is clicked', async () => {
const { user } = setUp();
expect(onDiscard).not.toHaveBeenCalled();
await user.click(screen.getByRole('button', { name: 'Discard' }));
expect(onDiscard).toHaveBeenCalled();
});
it('invokes onSave when appropriate button is clicked', () => {
const wrapper = createWrapper();
const btn = wrapper.find(Button).last();
btn.simulate('click');
it('invokes onSave when appropriate button is clicked', async () => {
const { user } = setUp();
expect(onSave).not.toHaveBeenCalled();
await user.click(screen.getByRole('button', { name: 'Save anyway' }));
expect(onSave).toHaveBeenCalled();
});
});