From 31531c1f875d704eb70a19e403ab28621fefae2b Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 16 Aug 2026 21:08:53 +0200 Subject: [PATCH] Use screen terminology instead of page as documented by vite-browser-react --- test/app/App.test.tsx | 8 ++-- test/common/AppUpdateBanner.test.tsx | 20 +++++----- test/common/ErrorHandler.test.tsx | 18 ++++----- test/common/Home.test.tsx | 12 +++--- test/common/MainHeader.test.tsx | 8 ++-- test/common/NotFound.test.tsx | 12 +++--- .../ShlinkWebComponentContainer.test.tsx | 20 +++++----- test/servers/CreateServer.test.tsx | 40 +++++++++---------- test/servers/DeleteServerButton.test.tsx | 14 +++---- test/servers/DeleteServerModal.test.tsx | 28 ++++++------- test/servers/EditServer.test.tsx | 34 ++++++++-------- test/servers/ManageServers.test.tsx | 37 ++++++++--------- test/servers/ManageServersRow.test.tsx | 14 +++---- .../servers/ManageServersRowDropdown.test.tsx | 38 +++++++++--------- test/servers/ServersDropdown.test.tsx | 26 ++++++------ .../helpers/DuplicatedServersModal.test.tsx | 32 +++++++-------- .../servers/helpers/ImportServersBtn.test.tsx | 32 ++++++++------- test/servers/helpers/ServerForm.test.tsx | 30 +++++++------- 18 files changed, 213 insertions(+), 210 deletions(-) diff --git a/test/app/App.test.tsx b/test/app/App.test.tsx index 33e4ca2f..f8e1ac70 100644 --- a/test/app/App.test.tsx +++ b/test/app/App.test.tsx @@ -49,8 +49,8 @@ describe('', () => { ['/server/def456/bar', 'ShlinkWebComponentContainer'], ['/other', 'Oops! We could not find requested route.'], ])('renders expected route', async (activeRoute, expectedComponent) => { - const page = await setUp(activeRoute); - await expect.element(page.getByText(expectedComponent)).toBeInTheDocument(); + const screen = await setUp(activeRoute); + await expect.element(screen.getByText(expectedComponent)).toBeInTheDocument(); }); it.each([ @@ -58,8 +58,8 @@ describe('', () => { ['/bar', false], ['/', true], ])('renders expected classes on shlink-wrapper based on current pathname', async (pathname, isFlex) => { - const page = await setUp(pathname); - const shlinkWrapper = page.getByTestId('shlink-wrapper'); + const screen = await setUp(pathname); + const shlinkWrapper = screen.getByTestId('shlink-wrapper'); if (isFlex) { await expect.element(shlinkWrapper).toHaveClass('flex'); diff --git a/test/common/AppUpdateBanner.test.tsx b/test/common/AppUpdateBanner.test.tsx index 3023cc08..782d70e6 100644 --- a/test/common/AppUpdateBanner.test.tsx +++ b/test/common/AppUpdateBanner.test.tsx @@ -10,28 +10,28 @@ describe('', () => { it('passes a11y checks', () => checkAccessibility(setUp())); it('renders initial state', async () => { - const page = await setUp(); + const screen = await setUp(); - await expect.element(page.getByRole('heading')).toHaveTextContent('This app has just been updated!'); - await expect.element(page.getByText('Restarting...')).not.toBeInTheDocument(); - await expect.element(page.getByText('Restart now')).not.toHaveAttribute('disabled'); + await expect.element(screen.getByRole('heading')).toHaveTextContent('This app has just been updated!'); + await expect.element(screen.getByText('Restarting...')).not.toBeInTheDocument(); + await expect.element(screen.getByText('Restart now')).not.toHaveAttribute('disabled'); }); it('invokes toggle when alert is closed', async () => { - const { user, ...page } = await setUp(); + const { user, ...screen } = await setUp(); expect(onClose).not.toHaveBeenCalled(); - await user.click(page.getByLabelText('Close')); + await user.click(screen.getByLabelText('Close')); expect(onClose).toHaveBeenCalled(); }); it('triggers the update when clicking the button', async () => { - const { user, ...page } = await setUp(); + const { user, ...screen } = await setUp(); expect(forceUpdate).not.toHaveBeenCalled(); - await user.click(page.getByText(/^Restart now/)); + await user.click(screen.getByText(/^Restart now/)); expect(forceUpdate).toHaveBeenCalled(); - await expect.element(page.getByText('Restarting...')).toBeInTheDocument(); - await expect.element(page.getByText(/^Restart now/)).not.toBeInTheDocument(); + await expect.element(screen.getByText('Restarting...')).toBeInTheDocument(); + await expect.element(screen.getByText(/^Restart now/)).not.toBeInTheDocument(); }); }); diff --git a/test/common/ErrorHandler.test.tsx b/test/common/ErrorHandler.test.tsx index e37606bc..76337a6c 100644 --- a/test/common/ErrorHandler.test.tsx +++ b/test/common/ErrorHandler.test.tsx @@ -26,25 +26,25 @@ describe('', () => { it('passes a11y checks', () => checkAccessibility(setUp())); it('renders children when no error has occurred', async () => { - const page = await setUp(Foo); + const screen = await setUp(Foo); - await expect.element(page.getByText('Foo')).toBeInTheDocument(); - await expect.element(page.getByText('Oops! This is awkward :S')).not.toBeInTheDocument(); - await expect.element(page.getByRole('button')).not.toBeInTheDocument(); + await expect.element(screen.getByText('Foo')).toBeInTheDocument(); + await expect.element(screen.getByText('Oops! This is awkward :S')).not.toBeInTheDocument(); + await expect.element(screen.getByRole('button')).not.toBeInTheDocument(); }); it('renders error page when error has occurred', async () => { - const page = await setUp(); + const screen = await setUp(); - await expect.element(page.getByText('Oops! This is awkward :S')).toBeInTheDocument(); - await expect.element(page.getByRole('button')).toBeInTheDocument(); + await expect.element(screen.getByText('Oops! This is awkward :S')).toBeInTheDocument(); + await expect.element(screen.getByRole('button')).toBeInTheDocument(); }); it('reloads page on button click', async () => { - const { user, ...page } = await setUp(); + const { user, ...screen } = await setUp(); expect(reload).not.toHaveBeenCalled(); - await user.click(page.getByRole('button')); + await user.click(screen.getByRole('button')); expect(reload).toHaveBeenCalled(); }); }); diff --git a/test/common/Home.test.tsx b/test/common/Home.test.tsx index 50be0aba..6b082465 100644 --- a/test/common/Home.test.tsx +++ b/test/common/Home.test.tsx @@ -20,8 +20,8 @@ describe('', () => { checkAccessibility(setUp({ '1a': fromPartial({ name: 'foo', id: '1' }) }))); it('renders title', async () => { - const page = await setUp(); - await expect.element(page.getByRole('heading', { name: 'Welcome!' })).toBeInTheDocument(); + const screen = await setUp(); + await expect.element(screen.getByRole('heading', { name: 'Welcome!' })).toBeInTheDocument(); }); it.each([ @@ -35,16 +35,16 @@ describe('', () => { ], [{}, 2], ])('shows link to create or set-up server only when no servers exist', async (servers, expectedServers) => { - const page = await setUp(servers); - const links = page.getByRole('link').elements(); + const screen = await setUp(servers); + const links = screen.getByRole('link').elements(); expect(links).toHaveLength(expectedServers); if (Object.keys(servers).length === 0) { await expect - .element(page.getByText('This application will help you manage your Shlink servers.')) + .element(screen.getByText('This application will help you manage your Shlink servers.')) .toBeInTheDocument(); - await expect.element(page.getByText('Learn more about Shlink')).toBeInTheDocument(); + await expect.element(screen.getByText('Learn more about Shlink')).toBeInTheDocument(); } }); }); diff --git a/test/common/MainHeader.test.tsx b/test/common/MainHeader.test.tsx index 85567ec8..1553f530 100644 --- a/test/common/MainHeader.test.tsx +++ b/test/common/MainHeader.test.tsx @@ -19,8 +19,8 @@ describe('', () => { it('passes a11y checks', () => checkAccessibility(setUp())); it('renders ServersDropdown', async () => { - const page = await setUp(); - await expect.element(page.getByRole('button', { name: 'Servers' })).toBeInTheDocument(); + const screen = await setUp(); + await expect.element(screen.getByRole('button', { name: 'Servers' })).toBeInTheDocument(); }); it.each([ @@ -30,9 +30,9 @@ describe('', () => { ['/settings/foo', true], ['/settings/bar', true], ])('sets link to settings as active only when current path is settings', async (currentPath, isActive) => { - const page = await setUp(currentPath); + const screen = await setUp(currentPath); await expect - .element(page.getByRole('menuitem', { name: /Settings$/ })) + .element(screen.getByRole('menuitem', { name: /Settings$/ })) .toHaveAttribute('data-active', isActive ? 'true' : 'false'); }); }); diff --git a/test/common/NotFound.test.tsx b/test/common/NotFound.test.tsx index bb79d34f..69e8428a 100644 --- a/test/common/NotFound.test.tsx +++ b/test/common/NotFound.test.tsx @@ -14,15 +14,15 @@ describe('', () => { it('passes a11y checks', () => checkAccessibility(setUp())); it('shows expected error title', async () => { - const page = await setUp(); - await expect.element(page.getByText('Oops! We could not find requested route.')).toBeInTheDocument(); + const screen = await setUp(); + await expect.element(screen.getByText('Oops! We could not find requested route.')).toBeInTheDocument(); }); it('shows expected error message', async () => { - const page = await setUp(); + const screen = await setUp(); await expect .element( - page.getByText( + screen.getByText( "Use your browser's back button to navigate to the page you have previously come from, or just press this button.", ), ) @@ -34,8 +34,8 @@ describe('', () => { [{ to: '/foo/bar', children: 'Hello' }, '/foo/bar', 'Hello'], [{ to: '/baz-bar', children: <>Foo }, '/baz-bar', 'Foo'], ])('shows expected link and text', async (props, expectedLink, expectedText) => { - const page = await setUp(props); - const link = page.getByRole('link'); + const screen = await setUp(props); + const link = screen.getByRole('link'); await expect.element(link).toHaveAttribute('href', expectedLink); await expect.element(link).toHaveTextContent(expectedText); diff --git a/test/common/ShlinkWebComponentContainer.test.tsx b/test/common/ShlinkWebComponentContainer.test.tsx index c2c8a9af..6d5eb707 100644 --- a/test/common/ShlinkWebComponentContainer.test.tsx +++ b/test/common/ShlinkWebComponentContainer.test.tsx @@ -25,10 +25,10 @@ describe('', () => { it('passes a11y checks', () => checkAccessibility(setUp(fromPartial({ version: '3.0.0' })))); it('shows loading indicator while loading server', async () => { - const page = await setUp(null); + const screen = await setUp(null); - await expect.element(page.getByText('Loading...')).toBeInTheDocument(); - await expect.element(page.getByText('ShlinkWebComponent')).not.toBeInTheDocument(); + await expect.element(screen.getByText('Loading...')).toBeInTheDocument(); + await expect.element(screen.getByText('ShlinkWebComponent')).not.toBeInTheDocument(); }); it.each([ @@ -38,17 +38,17 @@ describe('', () => { /Could not connect to this Shlink server/, ], ])('shows error for non reachable servers', async (selectedServer, expectedError) => { - const page = await setUp(selectedServer); + const screen = await setUp(selectedServer); - await expect.element(page.getByText('Loading...')).not.toBeInTheDocument(); - await expect.element(page.getByText(expectedError)).toBeInTheDocument(); - await expect.element(page.getByText('ShlinkWebComponent')).not.toBeInTheDocument(); + await expect.element(screen.getByText('Loading...')).not.toBeInTheDocument(); + await expect.element(screen.getByText(expectedError)).toBeInTheDocument(); + await expect.element(screen.getByText('ShlinkWebComponent')).not.toBeInTheDocument(); }); it('renders ShlinkWebComponent for reachable servers', async () => { - const page = await setUp(fromPartial({ version: '3.0.0' })); + const screen = await setUp(fromPartial({ version: '3.0.0' })); - await expect.element(page.getByText('Loading...')).not.toBeInTheDocument(); - await expect.element(page.getByText('ShlinkWebComponent')).toBeInTheDocument(); + await expect.element(screen.getByText('Loading...')).not.toBeInTheDocument(); + await expect.element(screen.getByText('ShlinkWebComponent')).toBeInTheDocument(); }); }); diff --git a/test/servers/CreateServer.test.tsx b/test/servers/CreateServer.test.tsx index ccf49abf..0a2d244b 100644 --- a/test/servers/CreateServer.test.tsx +++ b/test/servers/CreateServer.test.tsx @@ -45,38 +45,38 @@ describe('', () => { it('passes a11y checks', () => checkAccessibility(setUp())); it('shows success message when imported is true', async () => { - const page = await setUp({ serversImported: true }); + const screen = await setUp({ serversImported: true }); await expect - .element(page.getByText('Servers properly imported. You can now select one from the list :)')) + .element(screen.getByText('Servers properly imported. You can now select one from the list :)')) .toBeInTheDocument(); await expect - .element(page.getByText('The servers could not be imported. Make sure the format is correct.')) + .element(screen.getByText('The servers could not be imported. Make sure the format is correct.')) .not.toBeInTheDocument(); - await expect.element(page.getByText('ImportServersBtn')).not.toBeInTheDocument(); + await expect.element(screen.getByText('ImportServersBtn')).not.toBeInTheDocument(); }); it('shows error message when import failed', async () => { - const page = await setUp({ importFailed: true }); + const screen = await setUp({ importFailed: true }); await expect - .element(page.getByText('Servers properly imported. You can now select one from the list :)')) + .element(screen.getByText('Servers properly imported. You can now select one from the list :)')) .not.toBeInTheDocument(); await expect - .element(page.getByText('The servers could not be imported. Make sure the format is correct.')) + .element(screen.getByText('The servers could not be imported. Make sure the format is correct.')) .toBeInTheDocument(); }); it('creates server data when form is submitted', async () => { - const { user, history, store, ...page } = await setUp(); + const { user, history, store, ...screen } = await setUp(); const expectedServerId = 'the_name-the_url.com'; - await user.type(page.getByLabelText(/^Name/), 'the_name'); - await user.type(page.getByLabelText(/^URL/), 'https://the_url.com'); - await user.type(page.getByLabelText(/^API key/), 'the_api_key'); + await user.type(screen.getByLabelText(/^Name/), 'the_name'); + await user.type(screen.getByLabelText(/^URL/), 'https://the_url.com'); + await user.type(screen.getByLabelText(/^API key/), 'the_api_key'); expect(store.getState().servers[expectedServerId]).not.toBeDefined(); - await user.click(page.getByRole('button', { name: 'Create server' })); + await user.click(screen.getByRole('button', { name: 'Create server' })); expect(store.getState().servers[expectedServerId]).toEqual( expect.objectContaining({ id: expectedServerId, @@ -87,20 +87,20 @@ describe('', () => { ); expect(history.location.pathname).toEqual(`/server/${expectedServerId}`); - await expect.element(page.getByRole('dialog')).not.toBeInTheDocument(); + await expect.element(screen.getByRole('dialog')).not.toBeInTheDocument(); }); it('displays dialog when trying to create a duplicated server', async () => { - const { user, history, ...page } = await setUp(); + const { user, history, ...screen } = await setUp(); - await user.type(page.getByLabelText(/^Name/), 'the_name'); - await user.type(page.getByLabelText(/^URL/), 'https://existing_url.com'); - await user.type(page.getByLabelText(/^API key/), 'existing_api_key'); + await user.type(screen.getByLabelText(/^Name/), 'the_name'); + await user.type(screen.getByLabelText(/^URL/), 'https://existing_url.com'); + await user.type(screen.getByLabelText(/^API key/), 'existing_api_key'); - await user.click(page.getByRole('button', { name: 'Create server' })); + await user.click(screen.getByRole('button', { name: 'Create server' })); - await expect.element(page.getByRole('dialog')).toBeInTheDocument(); - await user.click(page.getByRole('button', { name: 'Discard' })); + await expect.element(screen.getByRole('dialog')).toBeInTheDocument(); + await user.click(screen.getByRole('button', { name: 'Discard' })); expect(history.location.pathname).toEqual('/foo'); // Goes back to first route from history's initialEntries }); diff --git a/test/servers/DeleteServerButton.test.tsx b/test/servers/DeleteServerButton.test.tsx index 1b47e7ce..94fbde6b 100644 --- a/test/servers/DeleteServerButton.test.tsx +++ b/test/servers/DeleteServerButton.test.tsx @@ -28,21 +28,21 @@ describe('', () => { }); it('displays modal when button is clicked', async () => { - const { user, ...page } = await setUp(); + const { user, ...screen } = await setUp(); - await expect.element(page.getByText(/Are you sure you want to remove/)).not.toBeInTheDocument(); - await user.click(page.getByText('Remove this server')); - await expect.element(page.getByText(/Are you sure you want to remove/)).toBeInTheDocument(); + await expect.element(screen.getByText(/Are you sure you want to remove/)).not.toBeInTheDocument(); + await user.click(screen.getByText('Remove this server')); + await expect.element(screen.getByText(/Are you sure you want to remove/)).toBeInTheDocument(); }); it('navigates to home when deletion is confirmed', async () => { - const { user, history, ...page } = await setUp(); + const { user, history, ...screen } = await setUp(); // Open modal - await user.click(page.getByText('Remove this server')); + await user.click(screen.getByText('Remove this server')); expect(history.location.pathname).toEqual('/foo'); - await user.click(page.getByRole('button', { name: 'Delete' })); + await user.click(screen.getByRole('button', { name: 'Delete' })); expect(history.location.pathname).toEqual('/'); }); }); diff --git a/test/servers/DeleteServerModal.test.tsx b/test/servers/DeleteServerModal.test.tsx index 03abc5cc..bf635bfb 100644 --- a/test/servers/DeleteServerModal.test.tsx +++ b/test/servers/DeleteServerModal.test.tsx @@ -19,38 +19,38 @@ describe('', () => { it('passes a11y checks', () => checkAccessibility(setUp())); it('renders a modal window', async () => { - const page = await setUp(); + const screen = await setUp(); - await expect.element(page.getByRole('dialog')).toBeInTheDocument(); - await expect.element(page.getByRole('heading')).toHaveTextContent('Remove server'); + await expect.element(screen.getByRole('dialog')).toBeInTheDocument(); + await expect.element(screen.getByRole('heading')).toHaveTextContent('Remove server'); }); it('displays the name of the server as part of the content', async () => { - const page = await setUp(); + const screen = await setUp(); - await expect.element(page.getByText(/^Are you sure you want to remove/)).toBeInTheDocument(); - await expect.element(page.getByText(serverName)).toBeInTheDocument(); + await expect.element(screen.getByText(/^Are you sure you want to remove/)).toBeInTheDocument(); + await expect.element(screen.getByText(serverName)).toBeInTheDocument(); }); it.each([ - [(page: RenderResult) => page.getByRole('button', { name: 'Cancel' })], - [(page: RenderResult) => page.getByLabelText('Close dialog')], + [(screen: RenderResult) => screen.getByRole('button', { name: 'Cancel' })], + [(screen: RenderResult) => screen.getByLabelText('Close dialog')], ])('closes dialog when clicking cancel button', async (getButton) => { - const { user, store, ...page } = await setUp(); + const { user, store, ...screen } = await setUp(); - await expect.element(page.getByRole('dialog')).toBeInTheDocument(); - await user.click(getButton(page)); - await expect.element(page.getByRole('dialog')).not.toBeInTheDocument(); + await expect.element(screen.getByRole('dialog')).toBeInTheDocument(); + await user.click(getButton(screen)); + await expect.element(screen.getByRole('dialog')).not.toBeInTheDocument(); // No server has been deleted expect(Object.keys(store.getState().servers)).toHaveLength(1); }); it('deletes server when clicking accept button', async () => { - const { user, store, ...page } = await setUp(); + const { user, store, ...screen } = await setUp(); expect(Object.keys(store.getState().servers)).toHaveLength(1); - await user.click(page.getByRole('button', { name: 'Delete' })); + await user.click(screen.getByRole('button', { name: 'Delete' })); expect(Object.keys(store.getState().servers)).toHaveLength(0); }); }); diff --git a/test/servers/EditServer.test.tsx b/test/servers/EditServer.test.tsx index dfc515b4..a5cbfe62 100644 --- a/test/servers/EditServer.test.tsx +++ b/test/servers/EditServer.test.tsx @@ -35,31 +35,31 @@ describe('', () => { it('passes a11y checks', () => checkAccessibility(setUp())); it('renders nothing if selected server is not reachable', async () => { - const page = await setUp(fromPartial({})); + const screen = await setUp(fromPartial({})); - await expect.element(page.getByText('Edit')).not.toBeInTheDocument(); - await expect.element(page.getByText('Cancel')).not.toBeInTheDocument(); - await expect.element(page.getByText('Save')).not.toBeInTheDocument(); + await expect.element(screen.getByText('Edit')).not.toBeInTheDocument(); + await expect.element(screen.getByText('Cancel')).not.toBeInTheDocument(); + await expect.element(screen.getByText('Save')).not.toBeInTheDocument(); }); it('renders server title', async () => { - const page = await setUp(); - expect(page.getByText(`Edit "${defaultSelectedServer.name}"`)).toBeInTheDocument(); + const screen = await setUp(); + expect(screen.getByText(`Edit "${defaultSelectedServer.name}"`)).toBeInTheDocument(); }); it('display the server info in the form components', 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(screen.getByLabelText(/^Name/)).toBeInTheDocument(); + await expect.element(screen.getByLabelText(/^URL/)).toBeInTheDocument(); + await expect.element(screen.getByLabelText(/^API key/)).toBeInTheDocument(); }); it('edits server and redirects to it when form is submitted', async () => { - const { user, history, store, ...page } = await setUp(); + const { user, history, store, ...screen } = await setUp(); - await user.type(page.getByLabelText(/^Name/), ' edited'); - await user.click(page.getByRole('button', { name: 'Save' })); + await user.type(screen.getByLabelText(/^Name/), ' edited'); + await user.click(screen.getByRole('button', { name: 'Save' })); expect(store.getState().servers[defaultSelectedServer.id]).toEqual( expect.objectContaining({ @@ -74,11 +74,11 @@ describe('', () => { it.each([{ forwardCredentials: true }, { forwardCredentials: false }])( 'edits advanced options - forward credentials', async ({ forwardCredentials }) => { - const { user, store, ...page } = await setUp({ ...defaultSelectedServer, forwardCredentials }); + const { user, store, ...screen } = await setUp({ ...defaultSelectedServer, forwardCredentials }); - await user.click(page.getByText('Advanced options')); - await user.click(page.getByLabelText('Forward credentials to this server on every request.')); - await user.click(page.getByRole('button', { name: 'Save' })); + await user.click(screen.getByText('Advanced options')); + await user.click(screen.getByLabelText('Forward credentials to this server on every request.')); + await user.click(screen.getByRole('button', { name: 'Save' })); expect(store.getState().servers[defaultSelectedServer.id]).toEqual( expect.objectContaining({ diff --git a/test/servers/ManageServers.test.tsx b/test/servers/ManageServers.test.tsx index 66db2ab1..ddfffd9d 100644 --- a/test/servers/ManageServers.test.tsx +++ b/test/servers/ManageServers.test.tsx @@ -32,43 +32,44 @@ describe('', () => { )); it('shows search field which allows searching servers, affecting te amount of rendered rows', async () => { - const { user, ...page } = await setUp({ + const { user, ...screen } = await setUp({ foo: createServerMock('foo'), bar: createServerMock('bar'), baz: createServerMock('baz'), }); const search = async (searchTerm: string) => { - await user.clear(page.getByPlaceholder('Search...')); - await user.type(page.getByPlaceholder('Search...'), searchTerm); + await user.clear(screen.getByPlaceholder('Search...')); + await user.type(screen.getByPlaceholder('Search...'), searchTerm); }; // Add one for the header row - const expectRows = (amount: number) => expect.poll(() => page.getByRole('row').elements()).toHaveLength(amount + 1); + const expectRows = (amount: number) => + expect.poll(() => screen.getByRole('row').elements()).toHaveLength(amount + 1); await expectRows(3); - await expect.element(page.getByText('No servers found.')).not.toBeInTheDocument(); + await expect.element(screen.getByText('No servers found.')).not.toBeInTheDocument(); await search('foo'); await expectRows(1); - await expect.element(page.getByText('No servers found.')).not.toBeInTheDocument(); + await expect.element(screen.getByText('No servers found.')).not.toBeInTheDocument(); await search('Ba'); await expectRows(2); - await expect.element(page.getByText('No servers found.')).not.toBeInTheDocument(); + await expect.element(screen.getByText('No servers found.')).not.toBeInTheDocument(); await search('invalid'); await expectRows(1); - await expect.element(page.getByText('No servers found.')).toBeInTheDocument(); + await expect.element(screen.getByText('No servers found.')).toBeInTheDocument(); }); it.each([[createServerMock('foo')], [createServerMock('foo', true)]])( 'shows different amount of columns if there are at least one auto-connect server', async (server) => { - const page = await setUp({ server }); + const screen = await setUp({ server }); if (server.autoConnect) { - await expect.element(page.getByTestId('auto-connect')).toBeInTheDocument(); + await expect.element(screen.getByTestId('auto-connect')).toBeInTheDocument(); } else { - await expect.element(page.getByTestId('auto-connect')).not.toBeInTheDocument(); + await expect.element(screen.getByTestId('auto-connect')).not.toBeInTheDocument(); } }, ); @@ -77,30 +78,30 @@ describe('', () => { [{}, 0], [{ foo: createServerMock('foo') }, 1], ])('shows export button if the list of servers is not empty', async (servers, expectedButtons) => { - const page = await setUp(servers); - expect(page.getByRole('button', { name: 'Export servers' }).elements()).toHaveLength(expectedButtons); + const screen = await setUp(servers); + expect(screen.getByRole('button', { name: 'Export servers' }).elements()).toHaveLength(expectedButtons); }); it('allows exporting servers when clicking on button', async () => { - const { user, ...page } = await setUp({ foo: createServerMock('foo') }); + const { user, ...screen } = await setUp({ foo: createServerMock('foo') }); expect(exportServers).not.toHaveBeenCalled(); - await user.click(page.getByRole('button', { name: 'Export servers' })); + await user.click(screen.getByRole('button', { name: 'Export servers' })); expect(exportServers).toHaveBeenCalled(); }); it.each([[true], [false]])('shows an error message if an error occurs while importing servers', async (hasError) => { useTimeoutToggle.mockReturnValue([hasError, vi.fn()]); - const page = await setUp({ foo: createServerMock('foo') }); + const screen = await setUp({ foo: createServerMock('foo') }); if (hasError) { await expect - .element(page.getByText('The servers could not be imported. Make sure the format is correct.')) + .element(screen.getByText('The servers could not be imported. Make sure the format is correct.')) .toBeInTheDocument(); } else { await expect - .element(page.getByText('The servers could not be imported. Make sure the format is correct.')) + .element(screen.getByText('The servers could not be imported. Make sure the format is correct.')) .not.toBeInTheDocument(); } }); diff --git a/test/servers/ManageServersRow.test.tsx b/test/servers/ManageServersRow.test.tsx index 0ad92848..e31d2052 100644 --- a/test/servers/ManageServersRow.test.tsx +++ b/test/servers/ManageServersRow.test.tsx @@ -27,13 +27,13 @@ describe('', () => { [true, 4], [false, 3], ])('renders expected amount of columns', async (hasAutoConnect, expectedCols) => { - const page = await setUp(hasAutoConnect); - expect(page.getByRole('cell').elements()).toHaveLength(expectedCols); + const screen = await setUp(hasAutoConnect); + expect(screen.getByRole('cell').elements()).toHaveLength(expectedCols); }); it('renders an options dropdown', async () => { - const page = await setUp(); - await expect.element(page.getByRole('button', { name: 'Options' })).toBeInTheDocument(); + const screen = await setUp(); + await expect.element(screen.getByRole('button', { name: 'Options' })).toBeInTheDocument(); }); it.each([[true], [false]])('renders auto-connect icon only if server is autoConnect', async (autoConnect) => { @@ -42,11 +42,11 @@ describe('', () => { }); it('renders server props where appropriate', async () => { - const page = await setUp(); - const link = page.getByRole('link'); + const screen = await setUp(); + const link = screen.getByRole('link'); await expect.element(link).toHaveAttribute('href', `/server/${server.id}`); await expect.element(link).toHaveTextContent(server.name); - await expect.element(page.getByText(server.url)).toBeInTheDocument(); + await expect.element(screen.getByText(server.url)).toBeInTheDocument(); }); }); diff --git a/test/servers/ManageServersRowDropdown.test.tsx b/test/servers/ManageServersRowDropdown.test.tsx index 8b24e54d..921727e4 100644 --- a/test/servers/ManageServersRowDropdown.test.tsx +++ b/test/servers/ManageServersRowDropdown.test.tsx @@ -21,50 +21,50 @@ describe('', () => { }, ); }; - const toggleDropdown = (user: UserEvent, page: RenderResult) => user.click(page.getByRole('button')); + const toggleDropdown = (user: UserEvent, screen: RenderResult) => user.click(screen.getByRole('button')); it('passes a11y checks', async () => { - const { user, ...page } = await setUp(); + const { user, ...screen } = await setUp(); // Open menu - await toggleDropdown(user, page); + await toggleDropdown(user, screen); - return checkAccessibility(page); + return checkAccessibility(screen); }); it('renders expected amount of dropdown items', async () => { - const { user, ...page } = await setUp(); + const { user, ...screen } = await setUp(); - await expect.element(page.getByRole('menu')).not.toBeInTheDocument(); - await toggleDropdown(user, page); - await expect.element(page.getByRole('menu')).toBeInTheDocument(); + await expect.element(screen.getByRole('menu')).not.toBeInTheDocument(); + await toggleDropdown(user, screen); + await expect.element(screen.getByRole('menu')).toBeInTheDocument(); - expect(page.getByRole('menuitem').elements()).toHaveLength(4); + expect(screen.getByRole('menuitem').elements()).toHaveLength(4); await expect - .element(page.getByRole('menuitem', { name: 'Connect', exact: true })) + .element(screen.getByRole('menuitem', { name: 'Connect', exact: true })) .toHaveAttribute('href', '/server/abc123'); await expect - .element(page.getByRole('menuitem', { name: 'Edit server' })) + .element(screen.getByRole('menuitem', { name: 'Edit server' })) .toHaveAttribute('href', '/server/abc123/edit'); }); it.each([true, false])('allows toggling auto-connect', async (autoConnect) => { - const { user, store, ...page } = await setUp(autoConnect); + const { user, store, ...screen } = await setUp(autoConnect); - await toggleDropdown(user, page); - await user.click(page.getByRole('menuitem', { name: autoConnect ? 'Do not auto-connect' : 'Auto-connect' })); + await toggleDropdown(user, screen); + await user.click(screen.getByRole('menuitem', { name: autoConnect ? 'Do not auto-connect' : 'Auto-connect' })); expect(Object.values(store.getState().servers)[0].autoConnect).toEqual(!autoConnect); }); it('renders deletion modal', async () => { - const { user, ...page } = await setUp(); + const { user, ...screen } = await setUp(); - expect(page.getByRole('dialog')).not.toBeInTheDocument(); + expect(screen.getByRole('dialog')).not.toBeInTheDocument(); - await toggleDropdown(user, page); - await user.click(page.getByRole('menuitem', { name: 'Remove server' })); + await toggleDropdown(user, screen); + await user.click(screen.getByRole('menuitem', { name: 'Remove server' })); - await expect.element(page.getByRole('dialog')).toBeInTheDocument(); + await expect.element(screen.getByRole('dialog')).toBeInTheDocument(); }); it.each([[true], [false]])('renders expected size and icon', async (autoConnect) => { diff --git a/test/servers/ServersDropdown.test.tsx b/test/servers/ServersDropdown.test.tsx index 53a9184a..b2bc8ef4 100644 --- a/test/servers/ServersDropdown.test.tsx +++ b/test/servers/ServersDropdown.test.tsx @@ -24,18 +24,18 @@ describe('', () => { ); it('passes a11y checks', async () => { - const { user, container, ...page } = await setUp(); + const { user, container, ...screen } = await setUp(); // Open menu - await user.click(page.getByText('Servers')); + await user.click(screen.getByText('Servers')); return checkAccessibility({ container }); }); it('contains the list of servers and the "mange servers" button', async () => { - const { user, ...page } = await setUp(); + const { user, ...screen } = await setUp(); - await user.click(page.getByText('Servers')); - const items = page.getByRole('menuitem').elements(); + await user.click(screen.getByText('Servers')); + const items = screen.getByRole('menuitem').elements(); // We have to add two for the "Manage servers" and the "Settings" menu items expect(items).toHaveLength(Object.values(fallbackServers).length + 2); @@ -46,23 +46,23 @@ describe('', () => { }); it('contains a toggle with proper text', async () => { - const page = await setUp(); - await expect.element(page.getByRole('button')).toHaveTextContent('Servers'); + const screen = await setUp(); + await expect.element(screen.getByRole('button')).toHaveTextContent('Servers'); }); it('contains a button to manage servers', async () => { - const { user, ...page } = await setUp(); + const { user, ...screen } = await setUp(); - await user.click(page.getByText('Servers')); + await user.click(screen.getByText('Servers')); await expect - .element(page.getByRole('menuitem', { name: 'Manage servers' })) + .element(screen.getByRole('menuitem', { name: 'Manage servers' })) .toHaveAttribute('href', '/manage-servers'); }); it('shows only create link when no servers exist yet', async () => { - const { user, ...page } = await setUp({}); + const { user, ...screen } = await setUp({}); - await user.click(page.getByText('Servers')); - await expect.element(page.getByRole('menuitem', { name: 'Add a server' })).toBeInTheDocument(); + await user.click(screen.getByText('Servers')); + await expect.element(screen.getByRole('menuitem', { name: 'Add a server' })).toBeInTheDocument(); }); }); diff --git a/test/servers/helpers/DuplicatedServersModal.test.tsx b/test/servers/helpers/DuplicatedServersModal.test.tsx index f111b4e3..5fa968e8 100644 --- a/test/servers/helpers/DuplicatedServersModal.test.tsx +++ b/test/servers/helpers/DuplicatedServersModal.test.tsx @@ -22,8 +22,8 @@ describe('', () => { [[mockServer(), mockServer(), mockServer()], 3], [[mockServer(), mockServer(), mockServer(), mockServer()], 4], ])('renders expected amount of items', async (duplicatedServers, expectedItems) => { - const page = await setUp(duplicatedServers); - expect(page.getByRole('listitem')).toHaveLength(expectedItems); + const screen = await setUp(duplicatedServers); + expect(screen.getByRole('listitem')).toHaveLength(expectedItems); }); it.each([ @@ -48,13 +48,13 @@ describe('', () => { }, ], ])('renders expected texts based on amount of servers', async (duplicatedServers, assertions) => { - const page = await setUp(duplicatedServers); + const screen = await setUp(duplicatedServers); - await expect.element(page.getByRole('heading')).toHaveTextContent(assertions.header); - await expect.element(page.getByText(assertions.firstParagraph)).toBeInTheDocument(); - await expect.element(page.getByText(assertions.lastParagraph)).toBeInTheDocument(); - await expect.element(page.getByRole('button', { name: assertions.discardBtn })).toBeInTheDocument(); - await expect.element(page.getByRole('button', { name: assertions.confirmButton })).toBeInTheDocument(); + await expect.element(screen.getByRole('heading')).toHaveTextContent(assertions.header); + await expect.element(screen.getByText(assertions.firstParagraph)).toBeInTheDocument(); + await expect.element(screen.getByText(assertions.lastParagraph)).toBeInTheDocument(); + await expect.element(screen.getByRole('button', { name: assertions.discardBtn })).toBeInTheDocument(); + await expect.element(screen.getByRole('button', { name: assertions.confirmButton })).toBeInTheDocument(); }); it.each([ @@ -62,19 +62,19 @@ describe('', () => { [[mockServer({ url: 'url', apiKey: 'apiKey' })]], [[mockServer({ url: 'url_1', apiKey: 'apiKey_1' }), mockServer({ url: 'url_2', apiKey: 'apiKey_2' })]], ])('displays provided server data', async (duplicatedServers) => { - const page = await setUp(duplicatedServers); + const screen = await setUp(duplicatedServers); if (duplicatedServers.length === 0) { - await expect.element(page.getByRole('listitem')).not.toBeInTheDocument(); + await expect.element(screen.getByRole('listitem')).not.toBeInTheDocument(); } else if (duplicatedServers.length === 1) { - const [firstItem, secondItem] = page.getByRole('listitem').elements(); + const [firstItem, secondItem] = screen.getByRole('listitem').elements(); await expect.element(firstItem).toHaveTextContent(`URL: ${duplicatedServers[0].url}`); await expect.element(secondItem).toHaveTextContent(`API key: ${duplicatedServers[0].apiKey}`); } else { expect.assertions(duplicatedServers.length); await Promise.all( - page + screen .getByRole('listitem') .elements() .map((item, index) => { @@ -86,18 +86,18 @@ describe('', () => { }); it('invokes onClose when appropriate button is clicked', async () => { - const { user, ...page } = await setUp(); + const { user, ...screen } = await setUp(); expect(onClose).not.toHaveBeenCalled(); - await user.click(page.getByRole('button', { name: 'Discard' })); + await user.click(screen.getByRole('button', { name: 'Discard' })); expect(onClose).toHaveBeenCalled(); }); it('invokes onConfirm when appropriate button is clicked', async () => { - const { user, ...page } = await setUp(); + const { user, ...screen } = await setUp(); expect(onConfirm).not.toHaveBeenCalled(); - await user.click(page.getByRole('button', { name: 'Save duplicate' })); + await user.click(screen.getByRole('button', { name: 'Save duplicate' })); expect(onConfirm).toHaveBeenCalled(); }); }); diff --git a/test/servers/helpers/ImportServersBtn.test.tsx b/test/servers/helpers/ImportServersBtn.test.tsx index 13e878f2..2d7d7194 100644 --- a/test/servers/helpers/ImportServersBtn.test.tsx +++ b/test/servers/helpers/ImportServersBtn.test.tsx @@ -19,11 +19,11 @@ describe('', () => { 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('', () => { ['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('', () => { ['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('', () => { 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) { diff --git a/test/servers/helpers/ServerForm.test.tsx b/test/servers/helpers/ServerForm.test.tsx index 6356bf5e..05da61da 100644 --- a/test/servers/helpers/ServerForm.test.tsx +++ b/test/servers/helpers/ServerForm.test.tsx @@ -15,36 +15,36 @@ describe('', () => { 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(); }); });