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

Replace direct rendering with react testing library by vitest-browser-react

Browse Source
This commit is contained in:
Alejandro Celaya
2026-08-16 19:59:44 +02:00
parent 585d7c6f63
commit 260bdb260c
13 changed files with 86 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
test/servers/CreateServer.test.tsx
View File

@@ -1,4 +1,4 @@
import { fireEvent, waitFor } from '@testing-library/react';
import { fireEvent } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router';
@@ -97,7 +97,7 @@ describe('<CreateServer />', () => {
fireEvent.submit(page.getByTestId('server-form').element());
await waitFor(() => expect(page.getByRole('dialog')).toBeInTheDocument());
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
await user.click(page.getByRole('button', { name: 'Discard' }));
expect(history.location.pathname).toEqual('/foo'); // Goes back to first route from history's initialEntries

12
test/servers/EditServer.test.tsx
View File

@@ -1,4 +1,4 @@
import { fireEvent, waitFor } from '@testing-library/react';
import { fireEvent } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router';
@@ -86,12 +86,10 @@ describe('<EditServer />', () => {
await user.click(page.getByLabelText('Forward credentials to this server on every request.'));
fireEvent.submit(page.getByTestId('server-form').element());
await waitFor(() =>
expect(store.getState().servers[defaultSelectedServer.id]).toEqual(
expect.objectContaining({
forwardCredentials: !forwardCredentials,
}),
),
expect(store.getState().servers[defaultSelectedServer.id]).toEqual(
expect.objectContaining({
forwardCredentials: !forwardCredentials,
}),
);
},
);

13
test/servers/ManageServers.test.tsx
View File

@@ -1,4 +1,3 @@
import { waitFor } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import { MemoryRouter } from 'react-router';
import { page } from 'vitest/browser';
@@ -44,25 +43,25 @@ describe('<ManageServers />', () => {
await user.type(page.getByPlaceholder('Search...'), searchTerm);
};
// Add one for the header row
const expectRows = (amount: number) => expect(page.getByRole('row').elements()).toHaveLength(amount + 1);
const expectRows = (amount: number) => expect.poll(() => page.getByRole('row').elements()).toHaveLength(amount + 1);
expectRows(3);
await expectRows(3);
await expect.element(page.getByText('No servers found.')).not.toBeInTheDocument();
await search('foo');
await waitFor(() => expectRows(1));
await expectRows(1);
await expect.element(page.getByText('No servers found.')).not.toBeInTheDocument();
await search('Ba');
await waitFor(() => expectRows(2));
await expectRows(2);
await expect.element(page.getByText('No servers found.')).not.toBeInTheDocument();
await search('invalid');
await waitFor(() => expectRows(1));
await expectRows(1);
await expect.element(page.getByText('No servers found.')).toBeInTheDocument();
});
it.only.each([[createServerMock('foo')], [createServerMock('foo', true)]])(
it.each([[createServerMock('foo')], [createServerMock('foo', true)]])(
'shows different amount of columns if there are at least one auto-connect server',
async (server) => {
setUp({ server });

12
test/servers/ServersListGroup.test.tsx
View File

@@ -1,9 +1,9 @@
import { render, screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import { MemoryRouter } from 'react-router';
import type { ServerWithId } from '../../src/servers/data';
import { ServersListGroup } from '../../src/servers/ServersListGroup';
import { checkAccessibility } from '../__helpers__/accessibility';
import { render } from '../__helpers__/setUpTest.tsx';
describe('<ServersListGroup />', () => {
const servers: ServerWithId[] = [fromPartial({ name: 'foo', id: '123' }), fromPartial({ name: 'bar', id: '456' })];
@@ -19,15 +19,15 @@ describe('<ServersListGroup />', () => {
it('passes a11y checks', () => checkAccessibility(setUp()));
it.each([[servers], [[]]])('shows servers list', (servers) => {
setUp({ servers });
it.each([[servers], [[]]])('shows servers list', async (servers) => {
const screen = await setUp({ servers });
expect(screen.queryAllByTestId('list')).toHaveLength(servers.length ? 1 : 0);
expect(screen.queryAllByRole('link')).toHaveLength(servers.length);
expect(screen.getByTestId('list').elements()).toHaveLength(servers.length ? 1 : 0);
expect(screen.getByRole('link').elements()).toHaveLength(servers.length);
});
it.each([[true], [false], [undefined]])('renders proper classes for embedded', async (borderless) => {
setUp({ servers, borderless });
const screen = await setUp({ servers, borderless });
const list = screen.getByTestId('list');
if (!borderless) {