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

@@ -19,11 +19,11 @@ describe('<ImportServersBtn />', () => {
it('passes a11y checks', () => checkAccessibility(setUp()));
it('shows tooltip on button hover', async () => {
const { user, ...page } = await setUp();
const { user, ...screen } = await setUp();
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();
await expect.element(screen.getByText('You can create servers by importing a CSV file')).not.toBeInTheDocument();
await user.hover(screen.getByRole('button'));
await expect.element(screen.getByText('You can create servers by importing a CSV file')).toBeInTheDocument();
});
it.each([
@@ -31,8 +31,10 @@ describe('<ImportServersBtn />', () => {
['foo', 'foo'],
['bar', 'bar'],
])('allows a class name to be provided', async (providedClassName, expectedClassName) => {
const page = await setUp({ className: providedClassName });
await expect.element(page.getByRole('button')).toHaveAttribute('class', expect.stringContaining(expectedClassName));
const screen = await setUp({ className: providedClassName });
await expect
.element(screen.getByRole('button'))
.toHaveAttribute('class', expect.stringContaining(expectedClassName));
});
it.each([
@@ -40,14 +42,14 @@ describe('<ImportServersBtn />', () => {
['foo', 'foo'],
['bar', 'bar'],
])('has expected text', async (children, expectedText) => {
const page = await setUp({ children });
await expect.element(page.getByRole('button')).toHaveTextContent(expectedText);
const screen = await setUp({ children });
await expect.element(screen.getByRole('button')).toHaveTextContent(expectedText);
});
it('imports servers when file input changes', async () => {
const { user, ...page } = await setUp();
const { user, ...screen } = await setUp();
await user.upload(page.getByTestId('csv-file-input'), csvFile);
await user.upload(screen.getByTestId('csv-file-input'), csvFile);
expect(importServersFromFile).toHaveBeenCalledTimes(1);
});
@@ -67,19 +69,19 @@ describe('<ImportServersBtn />', () => {
id: 'existingserver-s.test',
};
const newServer: ServerData = { name: 'newServer', url: 'http://s.test/newUrl', apiKey: 'newApiKey' };
const { user, store, ...page } = await setUp({}, { [existingServer.id]: existingServer });
const { user, store, ...screen } = await setUp({}, { [existingServer.id]: existingServer });
importServersFromFile.mockResolvedValue([existingServerData, newServer]);
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
await user.upload(page.getByTestId('csv-file-input'), csvFile);
await expect.element(screen.getByRole('dialog')).not.toBeInTheDocument();
await user.upload(screen.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);
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
await user.click(page.getByRole('button', { name: btnName }));
await expect.element(screen.getByRole('dialog')).toBeInTheDocument();
await user.click(screen.getByRole('button', { name: btnName }));
// If duplicated servers are saved, there's one extra server creation
if (savesDuplicatedServers) {