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();
});
});