forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-10-17 03:04:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

57
test/servers/helpers/DuplicatedServersModal.test.tsx
View File

@@ -1,5 +1,5 @@
import { act, screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import { page } from 'vitest/browser';
import type { ServerData } from '../../../src/servers/data';
import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal';
import { checkAccessibility } from '../../__helpers__/accessibility';
@@ -9,10 +9,8 @@ describe('<DuplicatedServersModal />', () => {
const onClose = vi.fn();
const onConfirm = vi.fn();
const setUp = (duplicatedServers: ServerData[] = []) =>
act(() =>
renderWithEvents(
<DuplicatedServersModal open duplicatedServers={duplicatedServers} onClose={onClose} onConfirm={onConfirm} />,
),
renderWithEvents(
<DuplicatedServersModal open duplicatedServers={duplicatedServers} onClose={onClose} onConfirm={onConfirm} />,
);
const mockServer = (data: Partial<ServerData> = {}) => fromPartial<ServerData>(data);
@@ -24,9 +22,9 @@ describe('<DuplicatedServersModal />', () => {
[[mockServer(), mockServer()], 2],
[[mockServer(), mockServer(), mockServer()], 3],
[[mockServer(), mockServer(), mockServer(), mockServer()], 4],
])('renders expected amount of items', async (duplicatedServers, expectedItems) => {
await setUp(duplicatedServers);
expect(screen.queryAllByRole('listitem')).toHaveLength(expectedItems);
])('renders expected amount of items', (duplicatedServers, expectedItems) => {
setUp(duplicatedServers);
expect(page.getByRole('listitem')).toHaveLength(expectedItems);
});
it.each([
@@ -51,13 +49,13 @@ describe('<DuplicatedServersModal />', () => {
},
],
])('renders expected texts based on amount of servers', async (duplicatedServers, assertions) => {
await setUp(duplicatedServers);
setUp(duplicatedServers);
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();
expect(screen.getByRole('button', { name: assertions.confirmButton })).toBeInTheDocument();
await expect.element(page.getByRole('heading')).toHaveTextContent(assertions.header);
await expect.element(page.getByText(assertions.firstParagraph)).toBeInTheDocument();
await expect.element(page.getByText(assertions.lastParagraph)).toBeInTheDocument();
await expect.element(page.getByRole('button', { name: assertions.discardBtn })).toBeInTheDocument();
await expect.element(page.getByRole('button', { name: assertions.confirmButton })).toBeInTheDocument();
});
it.each([
@@ -65,37 +63,42 @@ describe('<DuplicatedServersModal />', () => {
[[mockServer({ url: 'url', apiKey: 'apiKey' })]],
[[mockServer({ url: 'url_1', apiKey: 'apiKey_1' }), mockServer({ url: 'url_2', apiKey: 'apiKey_2' })]],
])('displays provided server data', async (duplicatedServers) => {
await setUp(duplicatedServers);
setUp(duplicatedServers);
if (duplicatedServers.length === 0) {
expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
await expect.element(page.getByRole('listitem')).not.toBeInTheDocument();
} else if (duplicatedServers.length === 1) {
const [firstItem, secondItem] = screen.getAllByRole('listitem');
const [firstItem, secondItem] = page.getByRole('listitem').elements();
expect(firstItem).toHaveTextContent(`URL: ${duplicatedServers[0].url}`);
expect(secondItem).toHaveTextContent(`API key: ${duplicatedServers[0].apiKey}`);
await expect.element(firstItem).toHaveTextContent(`URL: ${duplicatedServers[0].url}`);
await expect.element(secondItem).toHaveTextContent(`API key: ${duplicatedServers[0].apiKey}`);
} else {
expect.assertions(duplicatedServers.length);
screen.getAllByRole('listitem').forEach((item, index) => {
const server = duplicatedServers[index];
expect(item).toHaveTextContent(`${server.url} - ${server.apiKey}`);
});
await Promise.all(
page
.getByRole('listitem')
.elements()
.map((item, index) => {
const server = duplicatedServers[index];
return expect.element(item).toHaveTextContent(`${server.url} - ${server.apiKey}`);
}),
);
}
});
it('invokes onClose when appropriate button is clicked', async () => {
const { user } = await setUp();
const { user } = setUp();
expect(onClose).not.toHaveBeenCalled();
await user.click(screen.getByRole('button', { name: 'Discard' }));
await user.click(page.getByRole('button', { name: 'Discard' }));
expect(onClose).toHaveBeenCalled();
});
it('invokes onConfirm when appropriate button is clicked', async () => {
const { user } = await setUp();
const { user } = setUp();
expect(onConfirm).not.toHaveBeenCalled();
await user.click(screen.getByRole('button', { name: 'Save duplicate' }));
await user.click(page.getByRole('button', { name: 'Save duplicate' }));
expect(onConfirm).toHaveBeenCalled();
});
});

28
test/servers/helpers/ImportServersBtn.test.tsx
View File

@@ -1,5 +1,5 @@
import { screen, waitFor } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import { page } from 'vitest/browser';
import type { ServerData, ServersMap, ServerWithId } from '../../../src/servers/data';
import type { ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn';
import { ImportServersBtn } from '../../../src/servers/helpers/ImportServersBtn';
@@ -22,35 +22,33 @@ describe('<ImportServersBtn />', () => {
it('shows tooltip on button hover', async () => {
const { user } = setUp();
expect(screen.queryByText(/^You can create servers by importing a CSV file/)).not.toBeInTheDocument();
await user.hover(screen.getByRole('button'));
await waitFor(() =>
expect(screen.getByText(/^You can create servers by importing a CSV file/)).toBeInTheDocument(),
);
await expect.element(page.getByText('You can create servers by importing a CSV file')).not.toBeInTheDocument();
await user.hover(page.getByRole('button'));
await expect.element(page.getByText('You can create servers by importing a CSV file')).toBeInTheDocument();
});
it.each([
[undefined, ''],
['foo', 'foo'],
['bar', 'bar'],
])('allows a class name to be provided', (providedClassName, expectedClassName) => {
])('allows a class name to be provided', async (providedClassName, expectedClassName) => {
setUp({ className: providedClassName });
expect(screen.getByRole('button')).toHaveAttribute('class', expect.stringContaining(expectedClassName));
await expect.element(page.getByRole('button')).toHaveAttribute('class', expect.stringContaining(expectedClassName));
});
it.each([
[undefined, 'Import from file'],
['foo', 'foo'],
['bar', 'bar'],
])('has expected text', (children, expectedText) => {
])('has expected text', async (children, expectedText) => {
setUp({ children });
expect(screen.getByRole('button')).toHaveTextContent(expectedText);
await expect.element(page.getByRole('button')).toHaveTextContent(expectedText);
});
it('imports servers when file input changes', async () => {
const { user } = setUp();
await user.upload(screen.getByTestId('csv-file-input'), csvFile);
await user.upload(page.getByTestId('csv-file-input'), csvFile);
expect(importServersFromFile).toHaveBeenCalledTimes(1);
});
@@ -74,15 +72,15 @@ describe('<ImportServersBtn />', () => {
importServersFromFile.mockResolvedValue([existingServerData, newServer]);
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
await user.upload(screen.getByTestId('csv-file-input'), csvFile);
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
await user.upload(page.getByTestId('csv-file-input'), csvFile);
// Once the file is uploaded, non-duplicated servers are immediately created
const { servers } = store.getState();
expect(Object.keys(servers)).toHaveLength(2);
expect(screen.getByRole('dialog')).toBeInTheDocument();
await user.click(screen.getByRole('button', { name: btnName }));
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
await user.click(page.getByRole('button', { name: btnName }));
// If duplicated servers are saved, there's one extra server creation
if (savesDuplicatedServers) {

6
test/servers/helpers/ServerError.test.tsx
View File

@@ -45,10 +45,10 @@ describe('<ServerError />', () => {
notFound: ['Could not find this Shlink server.'],
},
],
])('renders expected information based on provided server type', (selectedServer, { found, notFound }) => {
])('renders expected information based on provided server type', async (selectedServer, { found, notFound }) => {
setUp(selectedServer);
found.forEach((text) => expect(screen.getByText(text)).toBeInTheDocument());
notFound.forEach((text) => expect(screen.queryByText(text)).not.toBeInTheDocument());
await Promise.all(found.map((text) => expect.element(screen.getByText(text)).toBeInTheDocument()));
await Promise.all(notFound.map((text) => expect.element(screen.queryByText(text)).not.toBeInTheDocument()));
});
});

23
test/servers/helpers/ServerForm.test.tsx
View File

@@ -1,4 +1,5 @@
import { fireEvent, screen } from '@testing-library/react';
import { fireEvent } from '@testing-library/react';
import { page } from 'vitest/browser';
import { ServerForm } from '../../../src/servers/helpers/ServerForm';
import { checkAccessibility } from '../../__helpers__/accessibility';
import { renderWithEvents } from '../../__helpers__/setUpTest';
@@ -9,21 +10,21 @@ describe('<ServerForm />', () => {
it('passes a11y checks', () => checkAccessibility(setUp()));
it('renders inputs', () => {
it('renders inputs', async () => {
setUp();
expect(screen.getByLabelText(/^Name/)).toBeInTheDocument();
expect(screen.getByLabelText(/^URL/)).toBeInTheDocument();
expect(screen.getByLabelText(/^API key/)).toBeInTheDocument();
expect(screen.getByText('Something')).toBeInTheDocument();
expect(screen.getByText('Advanced options')).toBeInTheDocument();
await expect.element(page.getByLabelText(/^Name/)).toBeInTheDocument();
await expect.element(page.getByLabelText(/^URL/)).toBeInTheDocument();
await expect.element(page.getByLabelText(/^API key/)).toBeInTheDocument();
await expect.element(page.getByText('Something')).toBeInTheDocument();
await expect.element(page.getByText('Advanced options')).toBeInTheDocument();
});
it('invokes submit callback when submit event is triggered', async () => {
setUp();
expect(onSubmit).not.toHaveBeenCalled();
fireEvent.submit(screen.getByRole('form'), { preventDefault: vi.fn() });
fireEvent.submit(page.getByTestId('server-form').element(), { preventDefault: vi.fn() });
expect(onSubmit).toHaveBeenCalled();
});
@@ -31,8 +32,8 @@ describe('<ServerForm />', () => {
const { user } = setUp();
const forwardCredentialsLabel = 'Forward credentials to this server on every request.';
expect(screen.queryByLabelText(forwardCredentialsLabel)).not.toBeInTheDocument();
await user.click(screen.getByText('Advanced options'));
expect(screen.getByLabelText(forwardCredentialsLabel)).toBeInTheDocument();
await expect.element(page.getByLabelText(forwardCredentialsLabel)).not.toBeInTheDocument();
await user.click(page.getByText('Advanced options'));
await expect.element(page.getByLabelText(forwardCredentialsLabel)).toBeInTheDocument();
});
});