Use screen terminology instead of page as documented by vite-browser-react

This commit is contained in:
Alejandro Celaya
2026-08-16 21:08:53 +02:00
parent c5c994a603
commit 31531c1f87
18 changed files with 213 additions and 210 deletions

View File

@@ -15,36 +15,36 @@ describe('<ServerForm />', () => {
it('passes a11y checks', () => checkAccessibility(setUp()));
it('renders inputs', async () => {
const page = await setUp();
const screen = await setUp();
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();
await expect.element(screen.getByLabelText(/^Name/)).toBeInTheDocument();
await expect.element(screen.getByLabelText(/^URL/)).toBeInTheDocument();
await expect.element(screen.getByLabelText(/^API key/)).toBeInTheDocument();
await expect.element(screen.getByText('Something')).toBeInTheDocument();
await expect.element(screen.getByText('Advanced options')).toBeInTheDocument();
});
it('invokes submit callback when submit event is triggered', async () => {
const { user, ...page } = await setUp();
const { user, ...screen } = await setUp();
expect(onSubmit).not.toHaveBeenCalled();
// Fill required elements so the form can be submitted
await user.type(page.getByLabelText(/^Name/), 'The server');
await user.type(page.getByLabelText(/^URL/), 'https://example.com');
await user.type(page.getByLabelText(/^API key/), '123456');
await user.type(screen.getByLabelText(/^Name/), 'The server');
await user.type(screen.getByLabelText(/^URL/), 'https://example.com');
await user.type(screen.getByLabelText(/^API key/), '123456');
await user.click(page.getByRole('button', { name: 'Submit' }));
await user.click(screen.getByRole('button', { name: 'Submit' }));
expect(onSubmit).toHaveBeenCalled();
});
it('shows advanced options', async () => {
const { user, ...page } = await setUp();
const { user, ...screen } = await setUp();
const forwardCredentialsLabel = 'Forward credentials to this server on every request.';
await expect.element(page.getByLabelText(forwardCredentialsLabel)).not.toBeInTheDocument();
await user.click(page.getByText('Advanced options'));
await expect.element(page.getByLabelText(forwardCredentialsLabel)).toBeInTheDocument();
await expect.element(screen.getByLabelText(forwardCredentialsLabel)).not.toBeInTheDocument();
await user.click(screen.getByText('Advanced options'));
await expect.element(screen.getByLabelText(forwardCredentialsLabel)).toBeInTheDocument();
});
});