diff --git a/package-lock.json b/package-lock.json index 65992a88..b3efccb3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 72ea626d..d0376356 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/test/__helpers__/setUpTest.tsx b/test/__helpers__/setUpTest.tsx index 0b0972a5..ff4f2760 100644 --- a/test/__helpers__/setUpTest.tsx +++ b/test/__helpers__/setUpTest.tsx @@ -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 & { * 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 })), }; }; diff --git a/test/app/App.test.tsx b/test/app/App.test.tsx index e75a2858..33e4ca2f 100644 --- a/test/app/App.test.tsx +++ b/test/app/App.test.tsx @@ -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,31 +11,29 @@ vi.mock(import('../../src/common/ShlinkWebComponentContainer'), () => ({ })); describe('', () => { - const setUp = async (activeRoute = '/') => - act(() => - renderWithStore( - - ({}), - buildShlinkApiClient: vi.fn(), - useTimeoutToggle: vi.fn().mockReturnValue([false, vi.fn()]), - })} - > - - - , - { - initialState: { - servers: { - abc123: fromPartial({ id: 'abc123', name: 'abc123 server' }), - def456: fromPartial({ id: 'def456', name: 'def456 server' }), - }, - settings: fromPartial({}), - appUpdated: false, + const setUp = (activeRoute = '/') => + renderWithStore( + + ({}), + buildShlinkApiClient: vi.fn(), + useTimeoutToggle: vi.fn().mockReturnValue([false, vi.fn()]), + })} + > + + + , + { + initialState: { + servers: { + abc123: fromPartial({ id: 'abc123', name: 'abc123 server' }), + def456: fromPartial({ id: 'def456', name: 'def456 server' }), }, + settings: fromPartial({}), + appUpdated: false, }, - ), + }, ); it('passes a11y checks', () => checkAccessibility(setUp())); @@ -53,7 +49,7 @@ describe('', () => { ['/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('', () => { ['/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) { diff --git a/test/common/Home.test.tsx b/test/common/Home.test.tsx index 30fd5b76..50be0aba 100644 --- a/test/common/Home.test.tsx +++ b/test/common/Home.test.tsx @@ -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('', () => { checkAccessibility(setUp({ '1a': fromPartial({ 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('', () => { ], [{}, 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); diff --git a/test/common/MainHeader.test.tsx b/test/common/MainHeader.test.tsx index 06567e2d..85567ec8 100644 --- a/test/common/MainHeader.test.tsx +++ b/test/common/MainHeader.test.tsx @@ -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('', () => { 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('', () => { ['/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'); diff --git a/test/common/ShlinkVersionsContainer.test.tsx b/test/common/ShlinkVersionsContainer.test.tsx index 6d5f0dc2..7809335e 100644 --- a/test/common/ShlinkVersionsContainer.test.tsx +++ b/test/common/ShlinkVersionsContainer.test.tsx @@ -21,7 +21,7 @@ describe('', () => { [fromPartial({}), false], [fromPartial({ 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)'); diff --git a/test/common/ShlinkWebComponentContainer.test.tsx b/test/common/ShlinkWebComponentContainer.test.tsx index 145d9500..c2c8a9af 100644 --- a/test/common/ShlinkWebComponentContainer.test.tsx +++ b/test/common/ShlinkWebComponentContainer.test.tsx @@ -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('', () => { 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('', () => { /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('', () => { }); 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(); diff --git a/test/servers/CreateServer.test.tsx b/test/servers/CreateServer.test.tsx index 425de37c..ccf49abf 100644 --- a/test/servers/CreateServer.test.tsx +++ b/test/servers/CreateServer.test.tsx @@ -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('', () => { 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('', () => { return { history, - ...renderWithStore( + ...(await renderWithStore( , { 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('', () => { }); 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('', () => { }); 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('', () => { }); 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'); diff --git a/test/servers/DeleteServerButton.test.tsx b/test/servers/DeleteServerButton.test.tsx index ad832d33..1b47e7ce 100644 --- a/test/servers/DeleteServerButton.test.tsx +++ b/test/servers/DeleteServerButton.test.tsx @@ -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('', () => { - 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( {children} , @@ -22,14 +21,14 @@ describe('', () => { 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('', () => { }); 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')); diff --git a/test/servers/DeleteServerModal.test.tsx b/test/servers/DeleteServerModal.test.tsx index 425ceaa8..03abc5cc 100644 --- a/test/servers/DeleteServerModal.test.tsx +++ b/test/servers/DeleteServerModal.test.tsx @@ -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('', () => { 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 expect.element(page.getByRole('dialog')).not.toBeInTheDocument(); + await expect.element(page.getByRole('dialog')).toBeInTheDocument(); + 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); - }, - ); + // 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' })); diff --git a/test/servers/EditServer.test.tsx b/test/servers/EditServer.test.tsx index 71b576d0..dfc515b4 100644 --- a/test/servers/EditServer.test.tsx +++ b/test/servers/EditServer.test.tsx @@ -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('', () => { 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( , @@ -29,27 +28,27 @@ describe('', () => { servers: isServerWithId(selectedServer) ? { [selectedServer.id]: selectedServer } : {}, }, }, - ), + )), }; }; it('passes a11y checks', () => checkAccessibility(setUp())); it('renders nothing if selected server is not reachable', async () => { - setUp(fromPartial({})); + const page = 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(); }); - 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('', () => { }); 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('', () => { 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.')); diff --git a/test/servers/ManageServers.test.tsx b/test/servers/ManageServers.test.tsx index 063f7b02..66db2ab1 100644 --- a/test/servers/ManageServers.test.tsx +++ b/test/servers/ManageServers.test.tsx @@ -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('', () => { )); 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('', () => { 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('', () => { 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('', () => { 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 diff --git a/test/servers/ManageServersRow.test.tsx b/test/servers/ManageServersRow.test.tsx index 4d984ec2..0ad92848 100644 --- a/test/servers/ManageServersRow.test.tsx +++ b/test/servers/ManageServersRow.test.tsx @@ -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('', () => { 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}`); diff --git a/test/servers/ManageServersRowDropdown.test.tsx b/test/servers/ManageServersRowDropdown.test.tsx index 74607349..8b24e54d 100644 --- a/test/servers/ManageServersRowDropdown.test.tsx +++ b/test/servers/ManageServersRowDropdown.test.tsx @@ -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('', () => { }, ); }; - 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('', () => { }); 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(); }); }); diff --git a/test/servers/ServersDropdown.test.tsx b/test/servers/ServersDropdown.test.tsx index ab10f3c3..53a9184a 100644 --- a/test/servers/ServersDropdown.test.tsx +++ b/test/servers/ServersDropdown.test.tsx @@ -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('', () => { ); 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('', () => { }); 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('', () => { }); 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(); diff --git a/test/servers/helpers/ImportServersBtn.test.tsx b/test/servers/helpers/ImportServersBtn.test.tsx index 044f08de..13e878f2 100644 --- a/test/servers/helpers/ImportServersBtn.test.tsx +++ b/test/servers/helpers/ImportServersBtn.test.tsx @@ -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('', () => { 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('', () => { ['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('', () => { ['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('', () => { 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]); diff --git a/test/servers/helpers/ServerError.test.tsx b/test/servers/helpers/ServerError.test.tsx index 24ef3cd1..706b1d85 100644 --- a/test/servers/helpers/ServerError.test.tsx +++ b/test/servers/helpers/ServerError.test.tsx @@ -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('', () => { }, ], ])('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())); }); });