shlink-web-client/test/servers/ManageServers.test.tsx

110 lines
4.4 KiB
TypeScript
Raw Normal View History

import { screen, waitFor } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
2024-12-09 13:52:58 +03:00
import { MemoryRouter } from 'react-router';
2023-02-18 12:40:37 +03:00
import type { ServersMap, ServerWithId } from '../../src/servers/data';
2023-09-05 10:08:42 +03:00
import { ManageServersFactory } from '../../src/servers/ManageServers';
2023-02-18 13:37:49 +03:00
import type { ServersExporter } from '../../src/servers/services/ServersExporter';
2023-09-30 11:45:52 +03:00
import { checkAccessibility } from '../__helpers__/accessibility';
2022-07-10 20:44:49 +03:00
import { renderWithEvents } from '../__helpers__/setUpTest';
2021-10-23 12:33:32 +03:00
describe('<ManageServers />', () => {
2023-05-27 12:57:26 +03:00
const exportServers = vi.fn();
const serversExporter = fromPartial<ServersExporter>({ exportServers });
2023-05-27 12:57:26 +03:00
const useTimeoutToggle = vi.fn().mockReturnValue([false, vi.fn()]);
2023-09-05 10:08:42 +03:00
const ManageServers = ManageServersFactory(fromPartial({
ServersExporter: serversExporter,
ImportServersBtn: () => <span>ImportServersBtn</span>,
useTimeoutToggle,
2023-09-05 10:08:42 +03:00
ManageServersRow: ({ hasAutoConnect }: { hasAutoConnect: boolean }) => (
<tr><td>ManageServersRow {hasAutoConnect ? '[YES]' : '[NO]'}</td></tr>
),
}));
const createServerMock = (value: string, autoConnect = false) => fromPartial<ServerWithId>(
2021-10-23 12:33:32 +03:00
{ id: value, name: value, url: value, autoConnect },
);
const setUp = (servers: ServersMap = {}) => renderWithEvents(
<MemoryRouter><ManageServers servers={servers} /></MemoryRouter>,
);
2021-10-23 12:33:32 +03:00
2023-09-30 11:45:52 +03:00
it('passes a11y checks', () => checkAccessibility(setUp({
foo: createServerMock('foo'),
bar: createServerMock('bar'),
baz: createServerMock('baz'),
})));
it('shows search field which allows searching servers, affecting te amount of rendered rows', async () => {
const { user } = setUp({
2021-10-23 12:33:32 +03:00
foo: createServerMock('foo'),
bar: createServerMock('bar'),
baz: createServerMock('baz'),
});
const search = async (searchTerm: string) => {
await user.clear(screen.getByPlaceholderText('Search...'));
await user.type(screen.getByPlaceholderText('Search...'), searchTerm);
};
2021-10-23 12:33:32 +03:00
expect(screen.getAllByText(/^ManageServersRow/)).toHaveLength(3);
expect(screen.queryByText('No servers found.')).not.toBeInTheDocument();
2021-10-23 12:33:32 +03:00
await search('foo');
await waitFor(() => expect(screen.getAllByText(/^ManageServersRow/)).toHaveLength(1));
expect(screen.queryByText('No servers found.')).not.toBeInTheDocument();
2021-10-23 12:33:32 +03:00
await search('Ba');
await waitFor(() => expect(screen.getAllByText(/^ManageServersRow/)).toHaveLength(2));
expect(screen.queryByText('No servers found.')).not.toBeInTheDocument();
2021-10-23 12:33:32 +03:00
await search('invalid');
await waitFor(() => expect(screen.queryByText(/^ManageServersRow/)).not.toBeInTheDocument());
expect(screen.getByText('No servers found.')).toBeInTheDocument();
2021-10-23 12:33:32 +03:00
});
it.each([
2022-03-26 14:17:42 +03:00
[createServerMock('foo'), 3],
[createServerMock('foo', true), 4],
2021-10-23 12:33:32 +03:00
])('shows different amount of columns if there are at least one auto-connect server', (server, expectedCols) => {
setUp({ server });
expect(screen.getAllByRole('columnheader')).toHaveLength(expectedCols);
if (server.autoConnect) {
2023-08-04 09:56:06 +03:00
expect(screen.getByText(/\[YES]/)).toBeInTheDocument();
expect(screen.queryByText(/\[NO]/)).not.toBeInTheDocument();
} else {
2023-08-04 09:56:06 +03:00
expect(screen.queryByText(/\[YES]/)).not.toBeInTheDocument();
expect(screen.getByText(/\[NO]/)).toBeInTheDocument();
}
2021-10-23 12:33:32 +03:00
});
it.each([
[{}, 0],
[{ foo: createServerMock('foo') }, 1],
2021-10-23 12:33:32 +03:00
])('shows export button if the list of servers is not empty', (servers, expectedButtons) => {
setUp(servers);
expect(screen.queryAllByRole('button', { name: 'Export servers' })).toHaveLength(expectedButtons);
2021-10-23 12:33:32 +03:00
});
it('allows exporting servers when clicking on button', async () => {
const { user } = setUp({ foo: createServerMock('foo') });
2021-10-23 12:33:32 +03:00
expect(exportServers).not.toHaveBeenCalled();
await user.click(screen.getByRole('button', { name: 'Export servers' }));
2021-10-23 12:33:32 +03:00
expect(exportServers).toHaveBeenCalled();
});
it.each([[true], [false]])('shows an error message if an error occurs while importing servers', (hasError) => {
2023-05-27 12:57:26 +03:00
useTimeoutToggle.mockReturnValue([hasError, vi.fn()]);
2021-10-23 12:33:32 +03:00
setUp({ foo: createServerMock('foo') });
2021-10-23 12:33:32 +03:00
if (hasError) {
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();
}
2021-10-23 12:33:32 +03:00
});
});