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

Replace rendering with store with react testing library by vitest-browser-react

Browse Source
This commit is contained in:
Alejandro Celaya
2026-08-16 20:55:48 +02:00
parent 7b9f084f9c
commit c5c994a603
18 changed files with 113 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
package-lock.json generated
View File

@@ -40,7 +40,6 @@
"devDependencies": {
"@shlinkio/eslint-config-js-coding-standard": "~4.1.0",
"@tailwindcss/vite": "^4.3.3",
"@testing-library/react": "^16.3.2",
"@total-typescript/shoehorn": "^0.1.2",
"@types/node": "^26.1.2",
"@types/react": "^19.2.18",
@@ -3647,70 +3646,6 @@
"vite": "^5.2.0 || ^6 || ^7 || ^8"
}
},
"node_modules/@testing-library/dom": {
"version": "10.4.0",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
"integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
"@types/aria-query": "^5.0.1",
"aria-query": "5.3.0",
"chalk": "^4.1.0",
"dom-accessibility-api": "^0.5.9",
"lz-string": "^1.5.0",
"pretty-format": "^27.0.2"
},
"engines": {
"node": ">=18"
}
},
"node_modules/@testing-library/dom/node_modules/chalk": {
"version": "4.1.2",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/@testing-library/react": {
"version": "16.3.2",
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
"integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.12.5"
},
"engines": {
"node": ">=18"
},
"peerDependencies": {
"@testing-library/dom": "^10.0.0",
"@types/react": "^18.0.0 || ^19.0.0",
"@types/react-dom": "^18.0.0 || ^19.0.0",
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@total-typescript/shoehorn": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@total-typescript/shoehorn/-/shoehorn-0.1.2.tgz",
@@ -3732,13 +3667,6 @@
"node": ">=12"
}
},
"node_modules/@types/aria-query": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
"integrity": "sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==",
"dev": true,
"peer": true
},
"node_modules/@types/chai": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
@@ -4412,41 +4340,6 @@
"node": ">=14.0"
}
},
"node_modules/ansi-regex": {
"version": "5.0.1",
"dev": true,
"license": "MIT",
"peer": true,
"engines": {
"node": ">=8"
}
},
"node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"peer": true,
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/aria-query": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
"dev": true,
"peer": true,
"dependencies": {
"dequal": "^2.0.3"
}
},
"node_modules/array-buffer-byte-length": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
@@ -4767,26 +4660,6 @@
"node": ">=6"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"peer": true,
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"peer": true
},
"node_modules/common-tags": {
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
@@ -5130,16 +5003,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/dequal": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
"dev": true,
"peer": true,
"engines": {
"node": ">=6"
}
},
"node_modules/detect-libc": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -5148,12 +5011,6 @@
"node": ">=8"
}
},
"node_modules/dom-accessibility-api": {
"version": "0.5.13",
"dev": true,
"license": "MIT",
"peer": true
},
"node_modules/dunder-proto": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -6654,16 +6511,6 @@
"node": "20 || >=22"
}
},
"node_modules/lz-string": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
"dev": true,
"peer": true,
"bin": {
"lz-string": "bin/bin.js"
}
},
"node_modules/magic-string": {
"version": "0.30.21",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -7097,38 +6944,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/pretty-format": {
"version": "27.5.1",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"ansi-regex": "^5.0.1",
"ansi-styles": "^5.0.0",
"react-is": "^17.0.1"
},
"engines": {
"node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
}
},
"node_modules/pretty-format/node_modules/ansi-styles": {
"version": "5.2.0",
"dev": true,
"license": "MIT",
"peer": true,
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/pretty-format/node_modules/react-is": {
"version": "17.0.2",
"dev": true,
"license": "MIT",
"peer": true
},
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -11350,43 +11165,6 @@
"tailwindcss": "4.3.3"
}
},
"@testing-library/dom": {
"version": "10.4.0",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
"integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
"dev": true,
"peer": true,
"requires": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
"@types/aria-query": "^5.0.1",
"aria-query": "5.3.0",
"chalk": "^4.1.0",
"dom-accessibility-api": "^0.5.9",
"lz-string": "^1.5.0",
"pretty-format": "^27.0.2"
},
"dependencies": {
"chalk": {
"version": "4.1.2",
"dev": true,
"peer": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
}
}
},
"@testing-library/react": {
"version": "16.3.2",
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
"integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5"
}
},
"@total-typescript/shoehorn": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@total-typescript/shoehorn/-/shoehorn-0.1.2.tgz",
@@ -11405,13 +11183,6 @@
"string.prototype.matchall": "^4.0.12"
}
},
"@types/aria-query": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
"integrity": "sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==",
"dev": true,
"peer": true
},
"@types/chai": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
@@ -11807,31 +11578,6 @@
"integrity": "sha512-XleryMhbuksdKtofnWZ9Sk+4CUTbms4Mb/EU32SZwToAyZ5RgVos/ki8n+yr0LWHOGKuakbXTuuYNHLQjhddgg==",
"dev": true
},
"ansi-regex": {
"version": "5.0.1",
"dev": true,
"peer": true
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"peer": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"aria-query": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
"dev": true,
"peer": true,
"requires": {
"dequal": "^2.0.3"
}
},
"array-buffer-byte-length": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
@@ -12044,23 +11790,6 @@
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"peer": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"peer": true
},
"common-tags": {
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
@@ -12290,23 +12019,11 @@
"object-keys": "^1.1.1"
}
},
"dequal": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
"dev": true,
"peer": true
},
"detect-libc": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="
},
"dom-accessibility-api": {
"version": "0.5.13",
"dev": true,
"peer": true
},
"dunder-proto": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -13251,13 +12968,6 @@
"integrity": "sha512-Gf/KoL3C/MlI7Bt0PGI9I+TeTC/I6r/csU58N4BSNc4lppLBeKsOdFYkK+dX0ABDUMJNfCHTyPpzwwO21Awd3A==",
"dev": true
},
"lz-string": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
"dev": true,
"peer": true
},
"magic-string": {
"version": "0.30.21",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -13522,28 +13232,6 @@
"integrity": "sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==",
"dev": true
},
"pretty-format": {
"version": "27.5.1",
"dev": true,
"peer": true,
"requires": {
"ansi-regex": "^5.0.1",
"ansi-styles": "^5.0.0",
"react-is": "^17.0.1"
},
"dependencies": {
"ansi-styles": {
"version": "5.2.0",
"dev": true,
"peer": true
},
"react-is": {
"version": "17.0.2",
"dev": true,
"peer": true
}
}
},
"punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

1
package.json
View File

@@ -57,7 +57,6 @@
"devDependencies": {
"@shlinkio/eslint-config-js-coding-standard": "~4.1.0",
"@tailwindcss/vite": "^4.3.3",
"@testing-library/react": "^16.3.2",
"@total-typescript/shoehorn": "^0.1.2",
"@types/node": "^26.1.2",
"@types/react": "^19.2.18",

11
test/__helpers__/setUpTest.tsx
View File

@@ -1,10 +1,8 @@
import type { ShlinkApiClient } from '@shlinkio/shlink-js-sdk';
import type { RenderOptions } from '@testing-library/react';
import { render as testingLibRender } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import type { PropsWithChildren, ReactElement } from 'react';
import { Provider } from 'react-redux';
import type { RenderOptions as VitestRenderOptions } from 'vitest-browser-react';
import type { RenderOptions } from 'vitest-browser-react';
import { render as vitestRender } from 'vitest-browser-react';
import { userEvent } from 'vitest/browser';
import { ContainerProvider } from '../../src/container/context';
@@ -13,7 +11,7 @@ import { setUpStore } from '../../src/store';
export const render = vitestRender;
export const renderWithEvents = async (element: ReactElement, options?: VitestRenderOptions) => ({
export const renderWithEvents = async (element: ReactElement, options?: RenderOptions) => ({
user: userEvent.setup(),
...(await render(element, options)),
});
@@ -36,7 +34,7 @@ export type RenderOptionsWithState = Omit<RenderOptions, 'wrapper'> & {
* Render provided ReactElement wrapped in a redux `Provider` and a `ContainerProvider` with a single
* `buildShlinkApiClient` dependency.
*/
export const renderWithStore = (
export const renderWithStore = async (
element: ReactElement,
{ initialState = {}, buildShlinkApiClient = vi.fn(), ...options }: RenderOptionsWithState = {},
) => {
@@ -49,7 +47,6 @@ export const renderWithStore = (
return {
store,
user: userEvent.setup(),
...testingLibRender(element, { ...options, wrapper: Wrapper }),
...(await renderWithEvents(element, { ...options, wrapper: Wrapper })),
};
};

10
test/app/App.test.tsx
View File

@@ -1,8 +1,6 @@
import type { HttpClient } from '@shlinkio/shlink-js-sdk';
import { fromPartial } from '@total-typescript/shoehorn';
import { act } from 'react';
import { MemoryRouter } from 'react-router';
import { page } from 'vitest/browser';
import { App } from '../../src/app/App';
import { ContainerProvider } from '../../src/container/context';
import { checkAccessibility } from '../__helpers__/accessibility';
@@ -13,8 +11,7 @@ vi.mock(import('../../src/common/ShlinkWebComponentContainer'), () => ({
}));
describe('<App />', () => {
const setUp = async (activeRoute = '/') =>
act(() =>
const setUp = (activeRoute = '/') =>
renderWithStore(
<MemoryRouter initialEntries={[{ pathname: activeRoute }]}>
<ContainerProvider
@@ -37,7 +34,6 @@ describe('<App />', () => {
appUpdated: false,
},
},
),
);
it('passes a11y checks', () => checkAccessibility(setUp()));
@@ -53,7 +49,7 @@ describe('<App />', () => {
['/server/def456/bar', 'ShlinkWebComponentContainer'],
['/other', 'Oops! We could not find requested route.'],
])('renders expected route', async (activeRoute, expectedComponent) => {
await setUp(activeRoute);
const page = await setUp(activeRoute);
await expect.element(page.getByText(expectedComponent)).toBeInTheDocument();
});
@@ -62,7 +58,7 @@ describe('<App />', () => {
['/bar', false],
['/', true],
])('renders expected classes on shlink-wrapper based on current pathname', async (pathname, isFlex) => {
await setUp(pathname);
const page = await setUp(pathname);
const shlinkWrapper = page.getByTestId('shlink-wrapper');
if (isFlex) {

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

@@ -1,6 +1,5 @@
import { fromPartial } from '@total-typescript/shoehorn';
import { MemoryRouter } from 'react-router';
import { page } from 'vitest/browser';
import { Home } from '../../src/common/Home';
import type { ServersMap, ServerWithId } from '../../src/servers/data';
import { checkAccessibility } from '../__helpers__/accessibility';
@@ -21,7 +20,7 @@ describe('<Home />', () => {
checkAccessibility(setUp({ '1a': fromPartial<ServerWithId>({ name: 'foo', id: '1' }) })));
it('renders title', async () => {
setUp();
const page = await setUp();
await expect.element(page.getByRole('heading', { name: 'Welcome!' })).toBeInTheDocument();
});
@@ -36,7 +35,7 @@ describe('<Home />', () => {
],
[{}, 2],
])('shows link to create or set-up server only when no servers exist', async (servers, expectedServers) => {
setUp(servers);
const page = await setUp(servers);
const links = page.getByRole('link').elements();
expect(links).toHaveLength(expectedServers);

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

@@ -1,6 +1,5 @@
import { createMemoryHistory } from 'history';
import { Router } from 'react-router';
import { page } from 'vitest/browser';
import { MainHeader } from '../../src/common/MainHeader';
import { checkAccessibility } from '../__helpers__/accessibility';
import { renderWithStore } from '../__helpers__/setUpTest';
@@ -20,7 +19,7 @@ describe('<MainHeader />', () => {
it('passes a11y checks', () => checkAccessibility(setUp()));
it('renders ServersDropdown', async () => {
setUp();
const page = await setUp();
await expect.element(page.getByRole('button', { name: 'Servers' })).toBeInTheDocument();
});
@@ -31,7 +30,7 @@ describe('<MainHeader />', () => {
['/settings/foo', true],
['/settings/bar', true],
])('sets link to settings as active only when current path is settings', async (currentPath, isActive) => {
setUp(currentPath);
const page = await setUp(currentPath);
await expect
.element(page.getByRole('menuitem', { name: /Settings$/ }))
.toHaveAttribute('data-active', isActive ? 'true' : 'false');

2
test/common/ShlinkVersionsContainer.test.tsx
View File

@@ -21,7 +21,7 @@ describe('<ShlinkVersionsContainer />', () => {
[fromPartial<SelectedServer>({}), false],
[fromPartial<ReachableServer>({ version: '1.0.0' }), true],
])('renders proper col classes based on sidebar status', async (selectedServer, shouldAddMargin) => {
const { container } = setUp(selectedServer);
const { container } = await setUp(selectedServer);
if (shouldAddMargin) {
await expect.element(container.firstChild as HTMLElement).toHaveClass('md:ml-(--aside-menu-width)');

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

@@ -1,6 +1,5 @@
import { fromPartial } from '@total-typescript/shoehorn';
import { MemoryRouter } from 'react-router';
import { page } from 'vitest/browser';
import { ShlinkWebComponentContainer } from '../../src/common/ShlinkWebComponentContainer';
import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../src/servers/data';
import { checkAccessibility } from '../__helpers__/accessibility';
@@ -26,7 +25,7 @@ describe('<ShlinkWebComponentContainer />', () => {
it('passes a11y checks', () => checkAccessibility(setUp(fromPartial({ version: '3.0.0' }))));
it('shows loading indicator while loading server', async () => {
setUp(null);
const page = await setUp(null);
await expect.element(page.getByText('Loading...')).toBeInTheDocument();
await expect.element(page.getByText('ShlinkWebComponent')).not.toBeInTheDocument();
@@ -39,7 +38,7 @@ describe('<ShlinkWebComponentContainer />', () => {
/Could not connect to this Shlink server/,
],
])('shows error for non reachable servers', async (selectedServer, expectedError) => {
setUp(selectedServer);
const page = await setUp(selectedServer);
await expect.element(page.getByText('Loading...')).not.toBeInTheDocument();
await expect.element(page.getByText(expectedError)).toBeInTheDocument();
@@ -47,7 +46,7 @@ describe('<ShlinkWebComponentContainer />', () => {
});
it('renders ShlinkWebComponent for reachable servers', async () => {
setUp(fromPartial({ version: '3.0.0' }));
const page = await setUp(fromPartial({ version: '3.0.0' }));
await expect.element(page.getByText('Loading...')).not.toBeInTheDocument();
await expect.element(page.getByText('ShlinkWebComponent')).toBeInTheDocument();

19
test/servers/CreateServer.test.tsx
View File

@@ -1,7 +1,6 @@
import { fromPartial } from '@total-typescript/shoehorn';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router';
import { page } from 'vitest/browser';
import { CreateServer } from '../../src/servers/CreateServer';
import type { ServersMap } from '../../src/servers/data';
import { checkAccessibility } from '../__helpers__/accessibility';
@@ -17,7 +16,11 @@ describe('<CreateServer />', () => {
const defaultServers: ServersMap = {
foo: fromPartial({ url: 'https://existing_url.com', apiKey: 'existing_api_key', id: 'foo' }),
};
const setUp = ({ serversImported = false, importFailed = false, servers = defaultServers }: SetUpOptions = {}) => {
const setUp = async ({
serversImported = false,
importFailed = false,
servers = defaultServers,
}: SetUpOptions = {}) => {
let callCount = 0;
const useTimeoutToggle = vi.fn().mockImplementation(() => {
const result = [callCount % 2 === 0 ? serversImported : importFailed, () => null];
@@ -28,21 +31,21 @@ describe('<CreateServer />', () => {
return {
history,
...renderWithStore(
...(await renderWithStore(
<Router location={history.location} navigator={history}>
<CreateServer useTimeoutToggle={useTimeoutToggle} />
</Router>,
{
initialState: { servers },
},
),
)),
};
};
it('passes a11y checks', () => checkAccessibility(setUp()));
it('shows success message when imported is true', async () => {
setUp({ serversImported: true });
const page = await setUp({ serversImported: true });
await expect
.element(page.getByText('Servers properly imported. You can now select one from the list :)'))
@@ -54,7 +57,7 @@ describe('<CreateServer />', () => {
});
it('shows error message when import failed', async () => {
setUp({ importFailed: true });
const page = await setUp({ importFailed: true });
await expect
.element(page.getByText('Servers properly imported. You can now select one from the list :)'))
@@ -65,7 +68,7 @@ describe('<CreateServer />', () => {
});
it('creates server data when form is submitted', async () => {
const { user, history, store } = setUp();
const { user, history, store, ...page } = await setUp();
const expectedServerId = 'the_name-the_url.com';
await user.type(page.getByLabelText(/^Name/), 'the_name');
@@ -88,7 +91,7 @@ describe('<CreateServer />', () => {
});
it('displays dialog when trying to create a duplicated server', async () => {
const { user, history } = setUp();
const { user, history, ...page } = await setUp();
await user.type(page.getByLabelText(/^Name/), 'the_name');
await user.type(page.getByLabelText(/^URL/), 'https://existing_url.com');

11
test/servers/DeleteServerButton.test.tsx
View File

@@ -2,15 +2,14 @@ import { fromPartial } from '@total-typescript/shoehorn';
import { createMemoryHistory } from 'history';
import type { ReactNode } from 'react';
import { Router } from 'react-router';
import { page } from 'vitest/browser';
import { DeleteServerButton } from '../../src/servers/DeleteServerButton';
import { checkAccessibility } from '../__helpers__/accessibility';
import { renderWithStore } from '../__helpers__/setUpTest';
describe('<DeleteServerButton />', () => {
const setUp = (children: ReactNode = 'Remove this server') => {
const setUp = async (children: ReactNode = 'Remove this server') => {
const history = createMemoryHistory({ initialEntries: ['/foo'] });
const result = renderWithStore(
const result = await renderWithStore(
<Router location={history.location} navigator={history}>
<DeleteServerButton server={fromPartial({})}>{children}</DeleteServerButton>
</Router>,
@@ -22,14 +21,14 @@ describe('<DeleteServerButton />', () => {
it('passes a11y checks', () => checkAccessibility(setUp('Delete me')));
it.each([['Foo bar'], ['baz'], ['something']])('renders expected content', async (children) => {
const { container } = setUp(children);
const { container } = await setUp(children);
expect(container.firstChild).toBeTruthy();
expect(container.firstChild).toMatchSnapshot();
});
it('displays modal when button is clicked', async () => {
const { user } = setUp();
const { user, ...page } = await setUp();
await expect.element(page.getByText(/Are you sure you want to remove/)).not.toBeInTheDocument();
await user.click(page.getByText('Remove this server'));
@@ -37,7 +36,7 @@ describe('<DeleteServerButton />', () => {
});
it('navigates to home when deletion is confirmed', async () => {
const { user, history } = setUp();
const { user, history, ...page } = await setUp();
// Open modal
await user.click(page.getByText('Remove this server'));

22
test/servers/DeleteServerModal.test.tsx
View File

@@ -1,5 +1,5 @@
import { fromPartial } from '@total-typescript/shoehorn';
import { page } from 'vitest/browser';
import type { RenderResult } from 'vitest-browser-react';
import type { ServerWithId } from '../../src/servers/data';
import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
import { checkAccessibility } from '../__helpers__/accessibility';
@@ -19,35 +19,35 @@ describe('<DeleteServerModal />', () => {
it('passes a11y checks', () => checkAccessibility(setUp()));
it('renders a modal window', async () => {
setUp();
const page = await setUp();
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
await expect.element(page.getByRole('heading')).toHaveTextContent('Remove server');
});
it('displays the name of the server as part of the content', async () => {
setUp();
const page = await setUp();
await expect.element(page.getByText(/^Are you sure you want to remove/)).toBeInTheDocument();
await expect.element(page.getByText(serverName)).toBeInTheDocument();
});
it.each([[() => page.getByRole('button', { name: 'Cancel' })], [() => page.getByLabelText('Close dialog')]])(
'closes dialog when clicking cancel button',
async (getButton) => {
const { user, store } = setUp();
it.each([
[(page: RenderResult) => page.getByRole('button', { name: 'Cancel' })],
[(page: RenderResult) => page.getByLabelText('Close dialog')],
])('closes dialog when clicking cancel button', async (getButton) => {
const { user, store, ...page } = await setUp();
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
await user.click(getButton());
await user.click(getButton(page));
await expect.element(page.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 } = setUp();
const { user, store, ...page } = await setUp();
expect(Object.keys(store.getState().servers)).toHaveLength(1);
await user.click(page.getByRole('button', { name: 'Delete' }));

19
test/servers/EditServer.test.tsx
View File

@@ -1,7 +1,6 @@
import { fromPartial } from '@total-typescript/shoehorn';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router';
import { page } from 'vitest/browser';
import type { ReachableServer, SelectedServer } from '../../src/servers/data';
import { isServerWithId } from '../../src/servers/data';
import { EditServer } from '../../src/servers/EditServer';
@@ -15,11 +14,11 @@ describe('<EditServer />', () => {
url: 'https://example.com',
apiKey: 'the_api_key',
});
const setUp = (selectedServer: SelectedServer = defaultSelectedServer) => {
const setUp = async (selectedServer: SelectedServer = defaultSelectedServer) => {
const history = createMemoryHistory({ initialEntries: ['/foo', '/bar'] });
return {
history,
...renderWithStore(
...(await renderWithStore(
<Router location={history.location} navigator={history}>
<EditServer />
</Router>,
@@ -29,27 +28,27 @@ describe('<EditServer />', () => {
servers: isServerWithId(selectedServer) ? { [selectedServer.id]: selectedServer } : {},
},
},
),
)),
};
};
it('passes a11y checks', () => checkAccessibility(setUp()));
it('renders nothing if selected server is not reachable', async () => {
setUp(fromPartial<SelectedServer>({}));
const page = await setUp(fromPartial<SelectedServer>({}));
await expect.element(page.getByText('Edit')).not.toBeInTheDocument();
await expect.element(page.getByText('Cancel')).not.toBeInTheDocument();
await expect.element(page.getByText('Save')).not.toBeInTheDocument();
});
it('renders server title', () => {
setUp();
it('renders server title', async () => {
const page = await setUp();
expect(page.getByText(`Edit "${defaultSelectedServer.name}"`)).toBeInTheDocument();
});
it('display the server info in the form components', async () => {
setUp();
const page = await setUp();
await expect.element(page.getByLabelText(/^Name/)).toBeInTheDocument();
await expect.element(page.getByLabelText(/^URL/)).toBeInTheDocument();
@@ -57,7 +56,7 @@ describe('<EditServer />', () => {
});
it('edits server and redirects to it when form is submitted', async () => {
const { user, history, store } = setUp();
const { user, history, store, ...page } = await setUp();
await user.type(page.getByLabelText(/^Name/), ' edited');
await user.click(page.getByRole('button', { name: 'Save' }));
@@ -75,7 +74,7 @@ describe('<EditServer />', () => {
it.each([{ forwardCredentials: true }, { forwardCredentials: false }])(
'edits advanced options - forward credentials',
async ({ forwardCredentials }) => {
const { user, store } = setUp({ ...defaultSelectedServer, forwardCredentials });
const { user, store, ...page } = await setUp({ ...defaultSelectedServer, forwardCredentials });
await user.click(page.getByText('Advanced options'));
await user.click(page.getByLabelText('Forward credentials to this server on every request.'));

13
test/servers/ManageServers.test.tsx
View File

@@ -1,6 +1,5 @@
import { fromPartial } from '@total-typescript/shoehorn';
import { MemoryRouter } from 'react-router';
import { page } from 'vitest/browser';
import type { ServersMap, ServerWithId } from '../../src/servers/data';
import { ManageServers } from '../../src/servers/ManageServers';
import type { ServersExporter } from '../../src/servers/services/ServersExporter';
@@ -33,7 +32,7 @@ describe('<ManageServers />', () => {
));
it('shows search field which allows searching servers, affecting te amount of rendered rows', async () => {
const { user } = setUp({
const { user, ...page } = await setUp({
foo: createServerMock('foo'),
bar: createServerMock('bar'),
baz: createServerMock('baz'),
@@ -64,7 +63,7 @@ describe('<ManageServers />', () => {
it.each([[createServerMock('foo')], [createServerMock('foo', true)]])(
'shows different amount of columns if there are at least one auto-connect server',
async (server) => {
setUp({ server });
const page = await setUp({ server });
if (server.autoConnect) {
await expect.element(page.getByTestId('auto-connect')).toBeInTheDocument();
@@ -77,13 +76,13 @@ describe('<ManageServers />', () => {
it.each([
[{}, 0],
[{ foo: createServerMock('foo') }, 1],
])('shows export button if the list of servers is not empty', (servers, expectedButtons) => {
setUp(servers);
])('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);
});
it('allows exporting servers when clicking on button', async () => {
const { user } = setUp({ foo: createServerMock('foo') });
const { user, ...page } = await setUp({ foo: createServerMock('foo') });
expect(exportServers).not.toHaveBeenCalled();
await user.click(page.getByRole('button', { name: 'Export servers' }));
@@ -93,7 +92,7 @@ describe('<ManageServers />', () => {
it.each([[true], [false]])('shows an error message if an error occurs while importing servers', async (hasError) => {
useTimeoutToggle.mockReturnValue([hasError, vi.fn()]);
setUp({ foo: createServerMock('foo') });
const page = await setUp({ foo: createServerMock('foo') });
if (hasError) {
await expect

14
test/servers/ManageServersRow.test.tsx
View File

@@ -1,6 +1,5 @@
import { Table } from '@shlinkio/shlink-frontend-kit';
import { MemoryRouter } from 'react-router';
import { page } from 'vitest/browser';
import type { ServerWithId } from '../../src/servers/data';
import { ManageServersRow } from '../../src/servers/ManageServersRow';
import { checkAccessibility } from '../__helpers__/accessibility';
@@ -27,24 +26,23 @@ describe('<ManageServersRow />', () => {
it.each([
[true, 4],
[false, 3],
])('renders expected amount of columns', (hasAutoConnect, expectedCols) => {
setUp(hasAutoConnect);
])('renders expected amount of columns', async (hasAutoConnect, expectedCols) => {
const page = await setUp(hasAutoConnect);
expect(page.getByRole('cell').elements()).toHaveLength(expectedCols);
});
it('renders an options dropdown', async () => {
setUp();
const page = await setUp();
await expect.element(page.getByRole('button', { name: 'Options' })).toBeInTheDocument();
});
it.each([[true], [false]])('renders auto-connect icon only if server is autoConnect', (autoConnect) => {
const { container } = setUp(true, autoConnect);
it.each([[true], [false]])('renders auto-connect icon only if server is autoConnect', async (autoConnect) => {
const { container } = await setUp(true, autoConnect);
expect(container).toMatchSnapshot();
});
it('renders server props where appropriate', async () => {
setUp();
const page = await setUp();
const link = page.getByRole('link');
await expect.element(link).toHaveAttribute('href', `/server/${server.id}`);

26
test/servers/ManageServersRowDropdown.test.tsx
View File

@@ -1,6 +1,6 @@
import { fromPartial } from '@total-typescript/shoehorn';
import { MemoryRouter } from 'react-router';
import { page } from 'vitest/browser';
import type { RenderResult } from 'vitest-browser-react';
import type { UserEvent } from 'vitest/browser';
import type { ServerWithId } from '../../src/servers/data';
import { ManageServersRowDropdown } from '../../src/servers/ManageServersRowDropdown';
@@ -21,21 +21,21 @@ describe('<ManageServersRowDropdown />', () => {
},
);
};
const toggleDropdown = (user: UserEvent) => user.click(page.getByRole('button'));
const toggleDropdown = (user: UserEvent, page: RenderResult) => user.click(page.getByRole('button'));
it('passes a11y checks', async () => {
const { user, container } = setUp();
const { user, ...page } = await setUp();
// Open menu
await toggleDropdown(user);
await toggleDropdown(user, page);
return checkAccessibility({ container });
return checkAccessibility(page);
});
it('renders expected amount of dropdown items', async () => {
const { user } = setUp();
const { user, ...page } = await setUp();
await expect.element(page.getByRole('menu')).not.toBeInTheDocument();
await toggleDropdown(user);
await toggleDropdown(user, page);
await expect.element(page.getByRole('menu')).toBeInTheDocument();
expect(page.getByRole('menuitem').elements()).toHaveLength(4);
@@ -48,27 +48,27 @@ describe('<ManageServersRowDropdown />', () => {
});
it.each([true, false])('allows toggling auto-connect', async (autoConnect) => {
const { user, store } = setUp(autoConnect);
const { user, store, ...page } = await setUp(autoConnect);
await toggleDropdown(user);
await toggleDropdown(user, page);
await user.click(page.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 } = setUp();
const { user, ...page } = await setUp();
expect(page.getByRole('dialog')).not.toBeInTheDocument();
await toggleDropdown(user);
await toggleDropdown(user, page);
await user.click(page.getByRole('menuitem', { name: 'Remove server' }));
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
});
it.each([[true], [false]])('renders expected size and icon', (autoConnect) => {
const { container } = setUp(autoConnect);
it.each([[true], [false]])('renders expected size and icon', async (autoConnect) => {
const { container } = await setUp(autoConnect);
expect(container).toMatchSnapshot();
});
});

13
test/servers/ServersDropdown.test.tsx
View File

@@ -1,6 +1,5 @@
import { fromPartial } from '@total-typescript/shoehorn';
import { MemoryRouter } from 'react-router';
import { page } from 'vitest/browser';
import type { ServersMap } from '../../src/servers/data';
import { ServersDropdown } from '../../src/servers/ServersDropdown';
import { checkAccessibility } from '../__helpers__/accessibility';
@@ -25,15 +24,15 @@ describe('<ServersDropdown />', () => {
);
it('passes a11y checks', async () => {
const { user, ...rest } = setUp();
const { user, container, ...page } = await setUp();
// Open menu
await user.click(page.getByText('Servers'));
return checkAccessibility(rest);
return checkAccessibility({ container });
});
it('contains the list of servers and the "mange servers" button', async () => {
const { user } = setUp();
const { user, ...page } = await setUp();
await user.click(page.getByText('Servers'));
const items = page.getByRole('menuitem').elements();
@@ -47,12 +46,12 @@ describe('<ServersDropdown />', () => {
});
it('contains a toggle with proper text', async () => {
setUp();
const page = await setUp();
await expect.element(page.getByRole('button')).toHaveTextContent('Servers');
});
it('contains a button to manage servers', async () => {
const { user } = setUp();
const { user, ...page } = await setUp();
await user.click(page.getByText('Servers'));
await expect
@@ -61,7 +60,7 @@ describe('<ServersDropdown />', () => {
});
it('shows only create link when no servers exist yet', async () => {
const { user } = setUp({});
const { user, ...page } = await setUp({});
await user.click(page.getByText('Servers'));
await expect.element(page.getByRole('menuitem', { name: 'Add a server' })).toBeInTheDocument();

11
test/servers/helpers/ImportServersBtn.test.tsx
View File

@@ -1,5 +1,4 @@
import { fromPartial } from '@total-typescript/shoehorn';
import { page } from 'vitest/browser';
import type { ServerData, ServersMap, ServerWithId } from '../../../src/servers/data';
import type { ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn';
import { ImportServersBtn } from '../../../src/servers/helpers/ImportServersBtn';
@@ -20,7 +19,7 @@ describe('<ImportServersBtn />', () => {
it('passes a11y checks', () => checkAccessibility(setUp()));
it('shows tooltip on button hover', async () => {
const { user } = setUp();
const { user, ...page } = await setUp();
await expect.element(page.getByText('You can create servers by importing a CSV file')).not.toBeInTheDocument();
await user.hover(page.getByRole('button'));
@@ -32,7 +31,7 @@ describe('<ImportServersBtn />', () => {
['foo', 'foo'],
['bar', 'bar'],
])('allows a class name to be provided', async (providedClassName, expectedClassName) => {
setUp({ className: providedClassName });
const page = await setUp({ className: providedClassName });
await expect.element(page.getByRole('button')).toHaveAttribute('class', expect.stringContaining(expectedClassName));
});
@@ -41,12 +40,12 @@ describe('<ImportServersBtn />', () => {
['foo', 'foo'],
['bar', 'bar'],
])('has expected text', async (children, expectedText) => {
setUp({ children });
const page = await setUp({ children });
await expect.element(page.getByRole('button')).toHaveTextContent(expectedText);
});
it('imports servers when file input changes', async () => {
const { user } = setUp();
const { user, ...page } = await setUp();
await user.upload(page.getByTestId('csv-file-input'), csvFile);
expect(importServersFromFile).toHaveBeenCalledTimes(1);
@@ -68,7 +67,7 @@ describe('<ImportServersBtn />', () => {
id: 'existingserver-s.test',
};
const newServer: ServerData = { name: 'newServer', url: 'http://s.test/newUrl', apiKey: 'newApiKey' };
const { user, store } = setUp({}, { [existingServer.id]: existingServer });
const { user, store, ...page } = await setUp({}, { [existingServer.id]: existingServer });
importServersFromFile.mockResolvedValue([existingServerData, newServer]);

5
test/servers/helpers/ServerError.test.tsx
View File

@@ -1,4 +1,3 @@
import { screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import { MemoryRouter } from 'react-router';
import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../../src/servers/data';
@@ -46,9 +45,9 @@ describe('<ServerError />', () => {
},
],
])('renders expected information based on provided server type', async (selectedServer, { found, notFound }) => {
setUp(selectedServer);
const screen = await setUp(selectedServer);
await Promise.all(found.map((text) => expect.element(screen.getByText(text)).toBeInTheDocument()));
await Promise.all(notFound.map((text) => expect.element(screen.queryByText(text)).not.toBeInTheDocument()));
await Promise.all(notFound.map((text) => expect.element(screen.getByText(text)).not.toBeInTheDocument()));
});
});