Replace @testing-library/jest-dom with built-in vitest browser assertions

This commit is contained in:
Alejandro Celaya
2026-08-16 19:32:41 +02:00
parent ba73644871
commit 585d7c6f63
30 changed files with 305 additions and 429 deletions

View File

@@ -1,6 +1,7 @@
import { screen, waitFor } from '@testing-library/react';
import { waitFor } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import { MemoryRouter } from 'react-router';
import { page } from 'vitest/browser';
import type { ServersMap, ServerWithId } from '../../src/servers/data';
import { ManageServers } from '../../src/servers/ManageServers';
import type { ServersExporter } from '../../src/servers/services/ServersExporter';
@@ -39,71 +40,70 @@ describe('<ManageServers />', () => {
baz: createServerMock('baz'),
});
const search = async (searchTerm: string) => {
await user.clear(screen.getByPlaceholderText('Search...'));
await user.type(screen.getByPlaceholderText('Search...'), searchTerm);
await user.clear(page.getByPlaceholder('Search...'));
await user.type(page.getByPlaceholder('Search...'), searchTerm);
};
// Add one for the header row
const expectRows = (amount: number) => expect(screen.getAllByRole('row')).toHaveLength(amount + 1);
const expectRows = (amount: number) => expect(page.getByRole('row').elements()).toHaveLength(amount + 1);
expectRows(3);
expect(screen.queryByText('No servers found.')).not.toBeInTheDocument();
await expect.element(page.getByText('No servers found.')).not.toBeInTheDocument();
await search('foo');
await waitFor(() => expectRows(1));
expect(screen.queryByText('No servers found.')).not.toBeInTheDocument();
await expect.element(page.getByText('No servers found.')).not.toBeInTheDocument();
await search('Ba');
await waitFor(() => expectRows(2));
expect(screen.queryByText('No servers found.')).not.toBeInTheDocument();
await expect.element(page.getByText('No servers found.')).not.toBeInTheDocument();
await search('invalid');
await waitFor(() => expectRows(1));
expect(screen.getByText('No servers found.')).toBeInTheDocument();
await expect.element(page.getByText('No servers found.')).toBeInTheDocument();
});
it.each([
[createServerMock('foo'), 3],
[createServerMock('foo', true), 4],
])('shows different amount of columns if there are at least one auto-connect server', (server, expectedCols) => {
setUp({ server });
it.only.each([[createServerMock('foo')], [createServerMock('foo', true)]])(
'shows different amount of columns if there are at least one auto-connect server',
async (server) => {
setUp({ server });
expect(screen.getAllByRole('columnheader')).toHaveLength(expectedCols);
if (server.autoConnect) {
expect(screen.getByTestId('auto-connect')).toBeInTheDocument();
} else {
expect(screen.queryByTestId('auto-connect')).not.toBeInTheDocument();
}
});
if (server.autoConnect) {
await expect.element(page.getByTestId('auto-connect')).toBeInTheDocument();
} else {
await expect.element(page.getByTestId('auto-connect')).not.toBeInTheDocument();
}
},
);
it.each([
[{}, 0],
[{ foo: createServerMock('foo') }, 1],
])('shows export button if the list of servers is not empty', (servers, expectedButtons) => {
setUp(servers);
expect(screen.queryAllByRole('button', { name: 'Export servers' })).toHaveLength(expectedButtons);
expect(page.getByRole('button', { name: 'Export servers' }).elements()).toHaveLength(expectedButtons);
});
it('allows exporting servers when clicking on button', async () => {
const { user } = setUp({ foo: createServerMock('foo') });
expect(exportServers).not.toHaveBeenCalled();
await user.click(screen.getByRole('button', { name: 'Export servers' }));
await user.click(page.getByRole('button', { name: 'Export servers' }));
expect(exportServers).toHaveBeenCalled();
});
it.each([[true], [false]])('shows an error message if an error occurs while importing servers', (hasError) => {
it.each([[true], [false]])('shows an error message if an error occurs while importing servers', async (hasError) => {
useTimeoutToggle.mockReturnValue([hasError, vi.fn()]);
setUp({ foo: createServerMock('foo') });
if (hasError) {
expect(
screen.getByText('The servers could not be imported. Make sure the format is correct.'),
).toBeInTheDocument();
await expect
.element(page.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();
await expect
.element(page.getByText('The servers could not be imported. Make sure the format is correct.'))
.not.toBeInTheDocument();
}
});
});