forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-10-17 03:04:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

20
test/common/AppUpdateBanner.test.tsx
View File

@@ -10,28 +10,28 @@ describe('<AppUpdateBanner />', () => {
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();
});
});

18
test/common/ErrorHandler.test.tsx
View File

@@ -26,25 +26,25 @@ describe('<ErrorHandler />', () => {
it('passes a11y checks', () => checkAccessibility(setUp()));
it('renders children when no error has occurred', async () => {
const page = await setUp(<span>Foo</span>);
const screen = await setUp(<span>Foo</span>);
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(<ComponentWithError />);
const screen = await setUp(<ComponentWithError />);
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(<ComponentWithError />);
const { user, ...screen } = await setUp(<ComponentWithError />);
expect(reload).not.toHaveBeenCalled();
await user.click(page.getByRole('button'));
await user.click(screen.getByRole('button'));
expect(reload).toHaveBeenCalled();
});
});

12
test/common/Home.test.tsx
View File

@@ -20,8 +20,8 @@ describe('<Home />', () => {
checkAccessibility(setUp({ '1a': fromPartial<ServerWithId>({ 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('<Home />', () => {
],
[{}, 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();
}
});
});

8
test/common/MainHeader.test.tsx
View File

@@ -19,8 +19,8 @@ describe('<MainHeader />', () => {
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('<MainHeader />', () => {
['/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');
});
});

12
test/common/NotFound.test.tsx
View File

@@ -14,15 +14,15 @@ describe('<NotFound />', () => {
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('<NotFound />', () => {
[{ 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);

20
test/common/ShlinkWebComponentContainer.test.tsx
View File

@@ -25,10 +25,10 @@ describe('<ShlinkWebComponentContainer />', () => {
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('<ShlinkWebComponentContainer />', () => {
/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();
});
});