forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-05-04 20:36:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrated DuplicatedServersModal test to react testing library

Browse Source
This commit is contained in:
Alejandro Celaya
2022-06-04 18:54:34 +02:00
parent 807c5c3fb4
commit e46506b264
1 changed files with 34 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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