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,5 +1,5 @@
import { fromPartial } from '@total-typescript/shoehorn';
import { page } from 'vitest/browser';
import type { RenderResult } from 'vitest-browser-react';
import type { ServerWithId } from '../../src/servers/data';
import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
import { checkAccessibility } from '../__helpers__/accessibility';
@@ -19,35 +19,35 @@ describe('<DeleteServerModal />', () => {
it('passes a11y checks', () => checkAccessibility(setUp()));
it('renders a modal window', async () => {
setUp();
const page = await setUp();
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
await expect.element(page.getByRole('heading')).toHaveTextContent('Remove server');
});
it('displays the name of the server as part of the content', async () => {
setUp();
const page = await setUp();
await expect.element(page.getByText(/^Are you sure you want to remove/)).toBeInTheDocument();
await expect.element(page.getByText(serverName)).toBeInTheDocument();
});
it.each([[() => page.getByRole('button', { name: 'Cancel' })], [() => page.getByLabelText('Close dialog')]])(
'closes dialog when clicking cancel button',
async (getButton) => {
const { user, store } = setUp();
it.each([
[(page: RenderResult) => page.getByRole('button', { name: 'Cancel' })],
[(page: RenderResult) => page.getByLabelText('Close dialog')],
])('closes dialog when clicking cancel button', async (getButton) => {
const { user, store, ...page } = await setUp();
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
await user.click(getButton());
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
await user.click(getButton(page));
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
// No server has been deleted
expect(Object.keys(store.getState().servers)).toHaveLength(1);
},
);
// No server has been deleted
expect(Object.keys(store.getState().servers)).toHaveLength(1);
});
it('deletes server when clicking accept button', async () => {
const { user, store } = setUp();
const { user, store, ...page } = await setUp();
expect(Object.keys(store.getState().servers)).toHaveLength(1);
await user.click(page.getByRole('button', { name: 'Delete' }));