mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated ManageServers test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-06-04 09:34:46 +02:00
parent b217b70dfe
commit 5dda4731a0
1 changed files with 58 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
test/servers/ManageServers.test.tsx
View file

@ -1,93 +1,103 @@
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { shallow, ShallowWrapper } from 'enzyme'; import userEvent from '@testing-library/user-event';
import { Button } from 'reactstrap'; import { render, screen, waitFor } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import ServersExporter from '../../src/servers/services/ServersExporter'; import ServersExporter from '../../src/servers/services/ServersExporter';
import { ManageServers as createManageServers } from '../../src/servers/ManageServers'; import { ManageServers as createManageServers } from '../../src/servers/ManageServers';
import { ServersMap, ServerWithId } from '../../src/servers/data'; import { ServersMap, ServerWithId } from '../../src/servers/data';
import { SearchField } from '../../src/utils/SearchField';
import { Result } from '../../src/utils/Result';
describe('<ManageServers />', () => { describe('<ManageServers />', () => {
const exportServers = jest.fn(); const exportServers = jest.fn();
const serversExporter = Mock.of<ServersExporter>({ exportServers }); const serversExporter = Mock.of<ServersExporter>({ exportServers });
const ImportServersBtn = () => null;
const ManageServersRow = () => null;
const useTimeoutToggle = jest.fn().mockReturnValue([false, jest.fn()]); const useTimeoutToggle = jest.fn().mockReturnValue([false, jest.fn()]);
const ManageServers = createManageServers(serversExporter, ImportServersBtn, useTimeoutToggle, ManageServersRow); const ManageServers = createManageServers(
let wrapper: ShallowWrapper; serversExporter,
() => <span>ImportServersBtn</span>,
useTimeoutToggle,
({ hasAutoConnect }) => <span>ManageServersRow {hasAutoConnect ? '[YES]' : '[NO]'}</span>,
);
const createServerMock = (value: string, autoConnect = false) => Mock.of<ServerWithId>( const createServerMock = (value: string, autoConnect = false) => Mock.of<ServerWithId>(
{ id: value, name: value, url: value, autoConnect }, { id: value, name: value, url: value, autoConnect },
); );
const createWrapper = (servers: ServersMap = {}) => { const setUp = (servers: ServersMap = {}) => ({
wrapper = shallow(<ManageServers servers={servers} />); user: userEvent.setup(),
...render(<MemoryRouter><ManageServers servers={servers} /></MemoryRouter>),
return wrapper; });
};
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('shows search field which allows searching servers, affecting te amount of rendered rows', () => { it('shows search field which allows searching servers, affecting te amount of rendered rows', async () => {
const wrapper = createWrapper({ const { user } = setUp({
foo: createServerMock('foo'), foo: createServerMock('foo'),
bar: createServerMock('bar'), bar: createServerMock('bar'),
baz: createServerMock('baz'), baz: createServerMock('baz'),
}); });
const searchField = wrapper.find(SearchField); const search = async (searchTerm: string) => {
await user.clear(screen.getByPlaceholderText('Search...'));
await user.type(screen.getByPlaceholderText('Search...'), searchTerm);
};
expect(wrapper.find(ManageServersRow)).toHaveLength(3); expect(screen.getAllByText(/^ManageServersRow/)).toHaveLength(3);
expect(wrapper.find('tbody').find('tr')).toHaveLength(0); expect(screen.queryByText('No servers found.')).not.toBeInTheDocument();
searchField.simulate('change', 'foo'); await search('foo');
expect(wrapper.find(ManageServersRow)).toHaveLength(1); await waitFor(() => expect(screen.getAllByText(/^ManageServersRow/)).toHaveLength(1));
expect(wrapper.find('tbody').find('tr')).toHaveLength(0); expect(screen.queryByText('No servers found.')).not.toBeInTheDocument();
searchField.simulate('change', 'ba'); await search('ba');
expect(wrapper.find(ManageServersRow)).toHaveLength(2); await waitFor(() => expect(screen.getAllByText(/^ManageServersRow/)).toHaveLength(2));
expect(wrapper.find('tbody').find('tr')).toHaveLength(0); expect(screen.queryByText('No servers found.')).not.toBeInTheDocument();
searchField.simulate('change', 'invalid'); await search('invalid');
expect(wrapper.find(ManageServersRow)).toHaveLength(0); await waitFor(() => expect(screen.queryByText(/^ManageServersRow/)).not.toBeInTheDocument());
expect(wrapper.find('tbody').find('tr')).toHaveLength(1); expect(screen.getByText('No servers found.')).toBeInTheDocument();
}); });
it.each([ it.each([
[createServerMock('foo'), 3], [createServerMock('foo'), 3],
[createServerMock('foo', true), 4], [createServerMock('foo', true), 4],
])('shows different amount of columns if there are at least one auto-connect server', (server, expectedCols) => { ])('shows different amount of columns if there are at least one auto-connect server', (server, expectedCols) => {
const wrapper = createWrapper({ server }); setUp({ server });
const row = wrapper.find(ManageServersRow);
expect(wrapper.find('th')).toHaveLength(expectedCols); expect(screen.getAllByRole('columnheader')).toHaveLength(expectedCols);
expect(row.prop('hasAutoConnect')).toEqual(server.autoConnect); if (server.autoConnect) {
expect(screen.getByText(/\[YES\]/)).toBeInTheDocument();
expect(screen.queryByText(/\[NO\]/)).not.toBeInTheDocument();
} else {
expect(screen.queryByText(/\[YES\]/)).not.toBeInTheDocument();
expect(screen.getByText(/\[NO\]/)).toBeInTheDocument();
}
}); });
it.each([ it.each([
[{}, 1], [{}, 0],
[{ foo: createServerMock('foo') }, 2], [{ foo: createServerMock('foo') }, 1],
])('shows export button if the list of servers is not empty', (servers, expectedButtons) => { ])('shows export button if the list of servers is not empty', (servers, expectedButtons) => {
const wrapper = createWrapper(servers); setUp(servers);
const exportBtn = wrapper.find(Button); expect(screen.queryAllByRole('button', { name: 'Export servers' })).toHaveLength(expectedButtons);
expect(exportBtn).toHaveLength(expectedButtons);
}); });
it('allows exporting servers when clicking on button', () => { it('allows exporting servers when clicking on button', async () => {
const wrapper = createWrapper({ foo: createServerMock('foo') }); const { user } = setUp({ foo: createServerMock('foo') });
const exportBtn = wrapper.find(Button).first();
expect(exportServers).not.toHaveBeenCalled(); expect(exportServers).not.toHaveBeenCalled();
exportBtn.simulate('click'); await user.click(screen.getByRole('button', { name: 'Export servers' }));
expect(exportServers).toHaveBeenCalled(); expect(exportServers).toHaveBeenCalled();
}); });
it('shows an error message if an error occurs while importing servers', () => { it.each([[true], [false]])('shows an error message if an error occurs while importing servers', (hasError) => {
useTimeoutToggle.mockReturnValue([true, jest.fn()]); useTimeoutToggle.mockReturnValue([hasError, jest.fn()]);
const wrapper = createWrapper({ foo: createServerMock('foo') }); setUp({ foo: createServerMock('foo') });
const result = wrapper.find(Result);
expect(result).toHaveLength(1); if (hasError) {
expect(result.prop('type')).toEqual('error'); expect(
screen.getByText('The servers could not be imported. Make sure the format is correct.'),
).toBeInTheDocument();
} else {
expect(
screen.queryByText('The servers could not be imported. Make sure the format is correct.'),
).not.toBeInTheDocument();
}
}); });
}); });