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

This commit is contained in:
Alejandro Celaya
2026-08-16 20:55:48 +02:00
parent 7b9f084f9c
commit c5c994a603
18 changed files with 113 additions and 441 deletions

View File

@@ -1,7 +1,6 @@
import { fromPartial } from '@total-typescript/shoehorn';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router';
import { page } from 'vitest/browser';
import type { ReachableServer, SelectedServer } from '../../src/servers/data';
import { isServerWithId } from '../../src/servers/data';
import { EditServer } from '../../src/servers/EditServer';
@@ -15,11 +14,11 @@ describe('<EditServer />', () => {
url: 'https://example.com',
apiKey: 'the_api_key',
});
const setUp = (selectedServer: SelectedServer = defaultSelectedServer) => {
const setUp = async (selectedServer: SelectedServer = defaultSelectedServer) => {
const history = createMemoryHistory({ initialEntries: ['/foo', '/bar'] });
return {
history,
...renderWithStore(
...(await renderWithStore(
<Router location={history.location} navigator={history}>
<EditServer />
</Router>,
@@ -29,27 +28,27 @@ describe('<EditServer />', () => {
servers: isServerWithId(selectedServer) ? { [selectedServer.id]: selectedServer } : {},
},
},
),
)),
};
};
it('passes a11y checks', () => checkAccessibility(setUp()));
it('renders nothing if selected server is not reachable', async () => {
setUp(fromPartial<SelectedServer>({}));
const page = await setUp(fromPartial<SelectedServer>({}));
await expect.element(page.getByText('Edit')).not.toBeInTheDocument();
await expect.element(page.getByText('Cancel')).not.toBeInTheDocument();
await expect.element(page.getByText('Save')).not.toBeInTheDocument();
});
it('renders server title', () => {
setUp();
it('renders server title', async () => {
const page = await setUp();
expect(page.getByText(`Edit "${defaultSelectedServer.name}"`)).toBeInTheDocument();
});
it('display the server info in the form components', async () => {
setUp();
const page = await setUp();
await expect.element(page.getByLabelText(/^Name/)).toBeInTheDocument();
await expect.element(page.getByLabelText(/^URL/)).toBeInTheDocument();
@@ -57,7 +56,7 @@ describe('<EditServer />', () => {
});
it('edits server and redirects to it when form is submitted', async () => {
const { user, history, store } = setUp();
const { user, history, store, ...page } = await setUp();
await user.type(page.getByLabelText(/^Name/), ' edited');
await user.click(page.getByRole('button', { name: 'Save' }));
@@ -75,7 +74,7 @@ describe('<EditServer />', () => {
it.each([{ forwardCredentials: true }, { forwardCredentials: false }])(
'edits advanced options - forward credentials',
async ({ forwardCredentials }) => {
const { user, store } = setUp({ ...defaultSelectedServer, forwardCredentials });
const { user, store, ...page } = await setUp({ ...defaultSelectedServer, forwardCredentials });
await user.click(page.getByText('Advanced options'));
await user.click(page.getByLabelText('Forward credentials to this server on every request.'));