From 6d1d3c021a169989d17e8d6adc4cda4691710e96 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 30 Sep 2023 10:20:28 +0200 Subject: [PATCH 1/3] Add first accessibility tests --- config/test/setupTests.ts | 12 +++ package-lock.json | 88 +++++++++++++++++-- package.json | 4 +- src/servers/ServersListGroup.tsx | 3 +- src/servers/helpers/ServerError.tsx | 10 ++- test/__helpers__/accessibility.ts | 14 +++ test/app/App.test.tsx | 3 + test/common/AppUpdateBanner.test.tsx | 3 + test/common/ErrorHandler.test.tsx | 14 +-- test/common/Home.test.tsx | 5 ++ test/common/MainHeader.test.tsx | 6 +- test/common/NotFound.test.tsx | 3 + test/common/ScrollToTop.test.tsx | 7 +- test/common/ShlinkVersions.test.tsx | 5 ++ test/common/ShlinkVersionsContainer.test.tsx | 5 +- .../ShlinkWebComponentContainer.test.tsx | 3 + test/common/img/ShlinkLogo.test.tsx | 5 +- 17 files changed, 168 insertions(+), 22 deletions(-) create mode 100644 test/__helpers__/accessibility.ts diff --git a/config/test/setupTests.ts b/config/test/setupTests.ts index e0f7cfd6..f4123ea9 100644 --- a/config/test/setupTests.ts +++ b/config/test/setupTests.ts @@ -1,7 +1,19 @@ +import 'vitest-canvas-mock'; import '@testing-library/jest-dom/vitest'; import { cleanup } from '@testing-library/react'; +import axe from 'axe-core'; import { afterEach } from 'vitest'; +axe.configure({ + checks: [ + { + // Disable color contrast checking, as it doesn't work in jsdom + id: 'color-contrast', + enabled: false, + }, + ], +}); + // Clear all mocks and cleanup DOM after every test afterEach(() => { vi.clearAllMocks(); diff --git a/package-lock.json b/package-lock.json index 49b0c5ed..9525711a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53,6 +53,7 @@ "@vitejs/plugin-react": "^4.0.4", "@vitest/coverage-v8": "^0.34.5", "adm-zip": "^0.5.10", + "axe-core": "^4.8.2", "chalk": "^5.3.0", "eslint": "^8.50.0", "history": "^5.3.0", @@ -62,7 +63,8 @@ "typescript": "^5.2.2", "vite": "^4.4.9", "vite-plugin-pwa": "^0.16.5", - "vitest": "^0.34.5" + "vitest": "^0.34.5", + "vitest-canvas-mock": "^0.3.3" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -4261,10 +4263,10 @@ } }, "node_modules/axe-core": { - "version": "4.4.1", + "version": "4.8.2", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz", + "integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==", "dev": true, - "license": "MPL-2.0", - "peer": true, "engines": { "node": ">=4" } @@ -4798,6 +4800,12 @@ "node": ">=4" } }, + "node_modules/cssfontparser": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz", + "integrity": "sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==", + "dev": true + }, "node_modules/cssstyle": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz", @@ -6931,6 +6939,16 @@ "node": ">=8" } }, + "node_modules/jest-canvas-mock": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jest-canvas-mock/-/jest-canvas-mock-2.5.2.tgz", + "integrity": "sha512-vgnpPupjOL6+L5oJXzxTxFrlGEIbHdZqFU+LFNdtLxZ3lRDCl17FlTMM7IatoRQkrcyOTMlDinjUguqmQ6bR2A==", + "dev": true, + "dependencies": { + "cssfontparser": "^1.2.1", + "moo-color": "^1.0.2" + } + }, "node_modules/jest-worker": { "version": "26.6.2", "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz", @@ -7517,6 +7535,15 @@ "ufo": "^1.3.0" } }, + "node_modules/moo-color": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/moo-color/-/moo-color-1.0.3.tgz", + "integrity": "sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==", + "dev": true, + "dependencies": { + "color-name": "^1.1.4" + } + }, "node_modules/ms": { "version": "2.0.0", "dev": true, @@ -10001,6 +10028,18 @@ } } }, + "node_modules/vitest-canvas-mock": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/vitest-canvas-mock/-/vitest-canvas-mock-0.3.3.tgz", + "integrity": "sha512-3P968tYBpqYyzzOaVtqnmYjqbe13576/fkjbDEJSfQAkHtC5/UjuRHOhFEN/ZV5HVZIkaROBUWgazDKJ+Ibw+Q==", + "dev": true, + "dependencies": { + "jest-canvas-mock": "~2.5.2" + }, + "peerDependencies": { + "vitest": "*" + } + }, "node_modules/vitest/node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -13339,9 +13378,10 @@ "dev": true }, "axe-core": { - "version": "4.4.1", - "dev": true, - "peer": true + "version": "4.8.2", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz", + "integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==", + "dev": true }, "axobject-query": { "version": "2.2.0", @@ -13689,6 +13729,12 @@ "version": "3.0.0", "dev": true }, + "cssfontparser": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz", + "integrity": "sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==", + "dev": true + }, "cssstyle": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz", @@ -15114,6 +15160,16 @@ } } }, + "jest-canvas-mock": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jest-canvas-mock/-/jest-canvas-mock-2.5.2.tgz", + "integrity": "sha512-vgnpPupjOL6+L5oJXzxTxFrlGEIbHdZqFU+LFNdtLxZ3lRDCl17FlTMM7IatoRQkrcyOTMlDinjUguqmQ6bR2A==", + "dev": true, + "requires": { + "cssfontparser": "^1.2.1", + "moo-color": "^1.0.2" + } + }, "jest-worker": { "version": "26.6.2", "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz", @@ -15539,6 +15595,15 @@ "ufo": "^1.3.0" } }, + "moo-color": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/moo-color/-/moo-color-1.0.3.tgz", + "integrity": "sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==", + "dev": true, + "requires": { + "color-name": "^1.1.4" + } + }, "ms": { "version": "2.0.0", "dev": true, @@ -17165,6 +17230,15 @@ } } }, + "vitest-canvas-mock": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/vitest-canvas-mock/-/vitest-canvas-mock-0.3.3.tgz", + "integrity": "sha512-3P968tYBpqYyzzOaVtqnmYjqbe13576/fkjbDEJSfQAkHtC5/UjuRHOhFEN/ZV5HVZIkaROBUWgazDKJ+Ibw+Q==", + "dev": true, + "requires": { + "jest-canvas-mock": "~2.5.2" + } + }, "w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", diff --git a/package.json b/package.json index 35d50766..995cd191 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "@vitejs/plugin-react": "^4.0.4", "@vitest/coverage-v8": "^0.34.5", "adm-zip": "^0.5.10", + "axe-core": "^4.8.2", "chalk": "^5.3.0", "eslint": "^8.50.0", "history": "^5.3.0", @@ -78,7 +79,8 @@ "typescript": "^5.2.2", "vite": "^4.4.9", "vite-plugin-pwa": "^0.16.5", - "vitest": "^0.34.5" + "vitest": "^0.34.5", + "vitest-canvas-mock": "^0.3.3" }, "browserslist": [ ">0.2%", diff --git a/src/servers/ServersListGroup.tsx b/src/servers/ServersListGroup.tsx index b9fd3f41..16dd7fd5 100644 --- a/src/servers/ServersListGroup.tsx +++ b/src/servers/ServersListGroup.tsx @@ -21,9 +21,10 @@ const ServerListItem = ({ id, name }: { id: string; name: string }) => ( export const ServersListGroup: FC = ({ servers, children, embedded = false }) => ( <> - {children &&
{children}
} + {children &&
{children}
} {servers.length > 0 && ( {servers.map(({ id, name }) => )} diff --git a/src/servers/helpers/ServerError.tsx b/src/servers/helpers/ServerError.tsx index 6b80fe45..81967073 100644 --- a/src/servers/helpers/ServerError.tsx +++ b/src/servers/helpers/ServerError.tsx @@ -36,17 +36,19 @@ const ServerError: FCWithDeps = ({ servers, s - These are the Shlink servers currently configured. Choose one of - them or add a new one. +

+ These are the Shlink servers currently configured. Choose one of + them or add a new one. +

{isServerWithId(selectedServer) && (
-
+

Alternatively, if you think you may have miss-configured this server, you can remove it or  edit it. -

+

)} diff --git a/test/__helpers__/accessibility.ts b/test/__helpers__/accessibility.ts new file mode 100644 index 00000000..79f070e3 --- /dev/null +++ b/test/__helpers__/accessibility.ts @@ -0,0 +1,14 @@ +import { screen } from '@testing-library/react'; +import { run } from 'axe-core'; + +type ContainerWrapper = { container: HTMLElement }; + +type AccessibilityTestSubject = ContainerWrapper | Promise; + +export const checkAccessibility = async (subject: AccessibilityTestSubject) => { + const { container } = await subject; + screen.debug(container); + const { violations } = await run(container); + + expect(violations).toStrictEqual([]); +}; diff --git a/test/app/App.test.tsx b/test/app/App.test.tsx index 2466c068..32e52a4d 100644 --- a/test/app/App.test.tsx +++ b/test/app/App.test.tsx @@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn'; import { createMemoryHistory } from 'history'; import { Router } from 'react-router-dom'; import { AppFactory } from '../../src/app/App'; +import { checkAccessibility } from '../__helpers__/accessibility'; describe('', () => { const App = AppFactory( @@ -34,6 +35,8 @@ describe('', () => { ); }; + it('passes a11y checks', () => checkAccessibility(setUp())); + it('renders children components', () => { setUp(); diff --git a/test/common/AppUpdateBanner.test.tsx b/test/common/AppUpdateBanner.test.tsx index 023ee27d..bdffe572 100644 --- a/test/common/AppUpdateBanner.test.tsx +++ b/test/common/AppUpdateBanner.test.tsx @@ -1,5 +1,6 @@ import { screen } from '@testing-library/react'; import { AppUpdateBanner } from '../../src/common/AppUpdateBanner'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { @@ -7,6 +8,8 @@ describe('', () => { const forceUpdate = vi.fn(); const setUp = () => renderWithEvents(); + it('passes a11y checks', () => checkAccessibility(setUp())); + it('renders initial state', () => { setUp(); diff --git a/test/common/ErrorHandler.test.tsx b/test/common/ErrorHandler.test.tsx index f95e48c9..2bbd85e2 100644 --- a/test/common/ErrorHandler.test.tsx +++ b/test/common/ErrorHandler.test.tsx @@ -1,7 +1,8 @@ -import { render, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { fromPartial } from '@total-typescript/shoehorn'; -import type { PropsWithChildren } from 'react'; +import type { PropsWithChildren, ReactNode } from 'react'; import { ErrorHandler as BaseErrorHandler } from '../../src/common/ErrorHandler'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; const ComponentWithError = () => { @@ -13,13 +14,16 @@ describe('', () => { const location = fromPartial({ reload }); const cons = fromPartial({ error: vi.fn() }); const ErrorHandler = (props: PropsWithChildren) => ; + const setUp = (children: ReactNode = 'Error') => renderWithEvents({children}); beforeEach(() => { vi.spyOn(console, 'error').mockImplementation(() => {}); // Silence react errors }); + it('passes a11y checks', () => checkAccessibility(setUp())); + it('renders children when no error has occurred', () => { - render(Foo); + setUp(Foo); expect(screen.getByText('Foo')).toBeInTheDocument(); expect(screen.queryByText('Oops! This is awkward :S')).not.toBeInTheDocument(); @@ -27,14 +31,14 @@ describe('', () => { }); it('renders error page when error has occurred', () => { - render(); + setUp(); expect(screen.getByText('Oops! This is awkward :S')).toBeInTheDocument(); expect(screen.getByRole('button')).toBeInTheDocument(); }); it('reloads page on button click', async () => { - const { user } = renderWithEvents(); + const { user } = setUp(); expect(reload).not.toHaveBeenCalled(); await user.click(screen.getByRole('button')); diff --git a/test/common/Home.test.tsx b/test/common/Home.test.tsx index 92a7e1d2..912594d3 100644 --- a/test/common/Home.test.tsx +++ b/test/common/Home.test.tsx @@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn'; import { MemoryRouter } from 'react-router'; import { Home } from '../../src/common/Home'; import type { ServersMap, ServerWithId } from '../../src/servers/data'; +import { checkAccessibility } from '../__helpers__/accessibility'; describe('', () => { const setUp = (servers: ServersMap = {}) => render( @@ -11,6 +12,10 @@ describe('', () => { , ); + it('passes a11y checks', () => checkAccessibility( + setUp({ '1a': fromPartial({ name: 'foo', id: '1' }) }), + )); + it('renders title', () => { setUp(); expect(screen.getByRole('heading', { name: 'Welcome!' })).toBeInTheDocument(); diff --git a/test/common/MainHeader.test.tsx b/test/common/MainHeader.test.tsx index f38fc2ee..a8629687 100644 --- a/test/common/MainHeader.test.tsx +++ b/test/common/MainHeader.test.tsx @@ -3,11 +3,13 @@ import { fromPartial } from '@total-typescript/shoehorn'; import { createMemoryHistory } from 'history'; import { Router } from 'react-router-dom'; import { MainHeaderFactory } from '../../src/common/MainHeader'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { const MainHeader = MainHeaderFactory(fromPartial({ - ServersDropdown: () => <>ServersDropdown, + // Fake this component as a li, as it gets rendered inside a ul + ServersDropdown: () =>
  • ServersDropdown
    • , })); const setUp = (pathname = '') => { const history = createMemoryHistory(); @@ -20,6 +22,8 @@ describe('', () => { ); }; + it('passes a11y checks', () => checkAccessibility(setUp())); + it('renders ServersDropdown', () => { setUp(); expect(screen.getByText('ServersDropdown')).toBeInTheDocument(); diff --git a/test/common/NotFound.test.tsx b/test/common/NotFound.test.tsx index ce5f7dc6..1e13e3c1 100644 --- a/test/common/NotFound.test.tsx +++ b/test/common/NotFound.test.tsx @@ -1,10 +1,13 @@ import { render, screen } from '@testing-library/react'; import { MemoryRouter } from 'react-router'; import { NotFound } from '../../src/common/NotFound'; +import { checkAccessibility } from '../__helpers__/accessibility'; describe('', () => { const setUp = (props = {}) => render(); + it('passes a11y checks', () => checkAccessibility(setUp())); + it('shows expected error title', () => { setUp(); expect(screen.getByText('Oops! We could not find requested route.')).toBeInTheDocument(); diff --git a/test/common/ScrollToTop.test.tsx b/test/common/ScrollToTop.test.tsx index e1d75933..2b22e383 100644 --- a/test/common/ScrollToTop.test.tsx +++ b/test/common/ScrollToTop.test.tsx @@ -1,14 +1,19 @@ import { render, screen } from '@testing-library/react'; import { MemoryRouter } from 'react-router'; import { ScrollToTop } from '../../src/common/ScrollToTop'; +import { checkAccessibility } from '../__helpers__/accessibility'; describe('', () => { + const setUp = (children = 'Foo') => render({children}); + + it('passes a11y checks', () => checkAccessibility(setUp())); + it.each([ ['Foobar'], ['Barfoo'], ['Something'], ])('just renders children', (children) => { - render({children}); + setUp(children); expect(screen.getByText(children)).toBeInTheDocument(); }); }); diff --git a/test/common/ShlinkVersions.test.tsx b/test/common/ShlinkVersions.test.tsx index e079e9c8..32634066 100644 --- a/test/common/ShlinkVersions.test.tsx +++ b/test/common/ShlinkVersions.test.tsx @@ -3,10 +3,15 @@ import { fromPartial } from '@total-typescript/shoehorn'; import type { ShlinkVersionsProps } from '../../src/common/ShlinkVersions'; import { ShlinkVersions } from '../../src/common/ShlinkVersions'; import type { NonReachableServer, NotFoundServer, ReachableServer } from '../../src/servers/data'; +import { checkAccessibility } from '../__helpers__/accessibility'; describe('', () => { const setUp = (props: ShlinkVersionsProps) => render(); + it('passes a11y checks', () => checkAccessibility( + setUp({ selectedServer: fromPartial({ version: '1.0.0', printableVersion: '1.0.0' }) }), + )); + it.each([ ['1.2.3', fromPartial({ version: '1.0.0', printableVersion: 'foo' }), 'v1.2.3', 'foo'], ['foo', fromPartial({ version: '1.0.0', printableVersion: '1.2.3' }), 'latest', '1.2.3'], diff --git a/test/common/ShlinkVersionsContainer.test.tsx b/test/common/ShlinkVersionsContainer.test.tsx index cdf6d34e..da46852b 100644 --- a/test/common/ShlinkVersionsContainer.test.tsx +++ b/test/common/ShlinkVersionsContainer.test.tsx @@ -3,9 +3,10 @@ import { fromPartial } from '@total-typescript/shoehorn'; import { createMemoryHistory } from 'history'; import { Router } from 'react-router-dom'; import { ShlinkVersionsContainer } from '../../src/common/ShlinkVersionsContainer'; +import { checkAccessibility } from '../__helpers__/accessibility'; describe('', () => { - const setUp = (activeRoute: string) => { + const setUp = (activeRoute: string = '') => { const history = createMemoryHistory(); history.push(activeRoute); @@ -16,6 +17,8 @@ describe('', () => { ); }; + it('passes a11y checks', () => checkAccessibility(setUp())); + it.each([ ['/something', 'text-center'], ['/server/foo/edit', 'text-center'], diff --git a/test/common/ShlinkWebComponentContainer.test.tsx b/test/common/ShlinkWebComponentContainer.test.tsx index 71438dbb..d39b00ea 100644 --- a/test/common/ShlinkWebComponentContainer.test.tsx +++ b/test/common/ShlinkWebComponentContainer.test.tsx @@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn'; import { useParams } from 'react-router-dom'; import { ShlinkWebComponentContainerFactory } from '../../src/common/ShlinkWebComponentContainer'; import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../src/servers/data'; +import { checkAccessibility } from '../__helpers__/accessibility'; vi.mock('react-router-dom', async () => ({ ...(await vi.importActual('react-router-dom')), @@ -24,6 +25,8 @@ describe('', () => { (useParams as any).mockReturnValue({ serverId: 'abc123' }); }); + it('passes a11y checks', () => checkAccessibility(setUp(fromPartial({ version: '3.0.0' })))); + it('shows loading indicator while loading server', () => { setUp(null); diff --git a/test/common/img/ShlinkLogo.test.tsx b/test/common/img/ShlinkLogo.test.tsx index d6ce4597..99b9aee9 100644 --- a/test/common/img/ShlinkLogo.test.tsx +++ b/test/common/img/ShlinkLogo.test.tsx @@ -2,9 +2,12 @@ import { MAIN_COLOR } from '@shlinkio/shlink-frontend-kit'; import { render } from '@testing-library/react'; import type { ShlinkLogoProps } from '../../../src/common/img/ShlinkLogo'; import { ShlinkLogo } from '../../../src/common/img/ShlinkLogo'; +import { checkAccessibility } from '../../__helpers__/accessibility'; describe('', () => { - const setUp = (props: ShlinkLogoProps) => render(); + const setUp = (props: ShlinkLogoProps = {}) => render(); + + it('passes a11y checks', () => checkAccessibility(setUp())); it.each([ [undefined, MAIN_COLOR], From 7a216a195afee46bf9c7c05dfeec3d2444d31674 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 30 Sep 2023 10:45:52 +0200 Subject: [PATCH 2/3] Add more accessibility tests --- package-lock.json | 18 +++++++++--------- package.json | 2 +- src/servers/ManageServers.tsx | 4 ++-- src/servers/ManageServersRowDropdown.tsx | 2 +- src/servers/ServersDropdown.tsx | 2 +- src/servers/ServersListGroup.tsx | 3 ++- src/servers/helpers/ImportServersBtn.tsx | 2 +- test/__helpers__/accessibility.ts | 2 -- test/servers/CreateServer.test.tsx | 3 +++ test/servers/DeleteServerButton.test.tsx | 3 +++ test/servers/DeleteServerModal.test.tsx | 3 +++ test/servers/EditServer.test.tsx | 3 +++ test/servers/ManageServers.test.tsx | 7 +++++++ test/servers/ManageServersRow.test.tsx | 3 +++ .../servers/ManageServersRowDropdown.test.tsx | 19 ++++++++++++++++--- test/servers/ServersDropdown.test.tsx | 9 ++++++++- test/servers/ServersListGroup.test.tsx | 13 ++++++++----- .../helpers/DuplicatedServersModal.test.tsx | 3 +++ .../servers/helpers/ImportServersBtn.test.tsx | 3 +++ test/servers/helpers/ServerError.test.tsx | 19 +++++++++++++------ test/servers/helpers/ServerForm.test.tsx | 3 +++ .../settings/RealTimeUpdatesSettings.test.tsx | 3 +++ test/settings/Settings.test.tsx | 3 +++ .../ShortUrlCreationSettings.test.tsx | 3 +++ test/settings/ShortUrlsListSettings.test.tsx | 3 +++ test/settings/TagsSettings.test.tsx | 3 +++ test/settings/UserInterfaceSettings.test.tsx | 3 +++ test/settings/VisitsSettings.test.tsx | 3 +++ .../utils/dates/DateIntervalSelector.test.tsx | 3 +++ 29 files changed, 117 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9525711a..451000fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "@fortawesome/react-fontawesome": "^0.2.0", "@json2csv/plainjs": "^7.0.3", "@reduxjs/toolkit": "^1.9.5", - "@shlinkio/shlink-frontend-kit": "^0.3.0", + "@shlinkio/shlink-frontend-kit": "^0.4.0", "@shlinkio/shlink-js-sdk": "^0.1.0", "@shlinkio/shlink-web-component": "^0.3.4", "bootstrap": "5.2.3", @@ -2802,13 +2802,13 @@ } }, "node_modules/@shlinkio/shlink-frontend-kit": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.3.0.tgz", - "integrity": "sha512-MjftbQKc+Vq2rGsjsTQHcnq4IFSjaazBZ82T/TSEz9wza/y/Siy7bBQlTdALyaHW+FT0Lv5nOf/V5RH+iotsCA==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.4.0.tgz", + "integrity": "sha512-Z9GqIqc6iHGMs9GHEQ+ERv5NfdvnoReHJbz5WPgXMlVT0s5ooL7s0hdsR/zgppLVF0r8HsKLXKlKR8bMY8B22g==", "dependencies": { "classnames": "^2.3.2", "qs": "^6.11.2", - "uuid": "^9.0.0" + "uuid": "^9.0.1" }, "peerDependencies": { "@fortawesome/fontawesome-free": "^6.4.2", @@ -12420,13 +12420,13 @@ } }, "@shlinkio/shlink-frontend-kit": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.3.0.tgz", - "integrity": "sha512-MjftbQKc+Vq2rGsjsTQHcnq4IFSjaazBZ82T/TSEz9wza/y/Siy7bBQlTdALyaHW+FT0Lv5nOf/V5RH+iotsCA==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.4.0.tgz", + "integrity": "sha512-Z9GqIqc6iHGMs9GHEQ+ERv5NfdvnoReHJbz5WPgXMlVT0s5ooL7s0hdsR/zgppLVF0r8HsKLXKlKR8bMY8B22g==", "requires": { "classnames": "^2.3.2", "qs": "^6.11.2", - "uuid": "^9.0.0" + "uuid": "^9.0.1" } }, "@shlinkio/shlink-js-sdk": { diff --git a/package.json b/package.json index 995cd191..2a00c980 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "@fortawesome/react-fontawesome": "^0.2.0", "@json2csv/plainjs": "^7.0.3", "@reduxjs/toolkit": "^1.9.5", - "@shlinkio/shlink-frontend-kit": "^0.3.0", + "@shlinkio/shlink-frontend-kit": "^0.4.0", "@shlinkio/shlink-js-sdk": "^0.1.0", "@shlinkio/shlink-web-component": "^0.3.4", "bootstrap": "5.2.3", diff --git a/src/servers/ManageServers.tsx b/src/servers/ManageServers.tsx index 067632d9..5b38cc73 100644 --- a/src/servers/ManageServers.tsx +++ b/src/servers/ManageServers.tsx @@ -70,10 +70,10 @@ const ManageServers: FCWithDeps = ({ serv - {hasAutoConnect && } - diff --git a/src/servers/ManageServersRowDropdown.tsx b/src/servers/ManageServersRowDropdown.tsx index 3b106045..e9e1c9db 100644 --- a/src/servers/ManageServersRowDropdown.tsx +++ b/src/servers/ManageServersRowDropdown.tsx @@ -47,7 +47,7 @@ const ManageServersRowDropdown: FCWithDeps setAutoConnect(server, !isAutoConnect)}> {isAutoConnect ? 'Do not a' : 'A'}uto-connect - + Remove server diff --git a/src/servers/ServersDropdown.tsx b/src/servers/ServersDropdown.tsx index 934e8206..0265c610 100644 --- a/src/servers/ServersDropdown.tsx +++ b/src/servers/ServersDropdown.tsx @@ -30,7 +30,7 @@ export const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProp {name} ))} - + Manage servers diff --git a/src/servers/ServersListGroup.tsx b/src/servers/ServersListGroup.tsx index 16dd7fd5..5a5b2574 100644 --- a/src/servers/ServersListGroup.tsx +++ b/src/servers/ServersListGroup.tsx @@ -21,9 +21,10 @@ const ServerListItem = ({ id, name }: { id: string; name: string }) => ( export const ServersListGroup: FC = ({ servers, children, embedded = false }) => ( <> - {children &&
    {children}
    } + {children &&
    {children}
    } {servers.length > 0 && ( diff --git a/src/servers/helpers/ImportServersBtn.tsx b/src/servers/helpers/ImportServersBtn.tsx index 132c8520..d93688df 100644 --- a/src/servers/helpers/ImportServersBtn.tsx +++ b/src/servers/helpers/ImportServersBtn.tsx @@ -88,7 +88,7 @@ const ImportServersBtn: FCWithDepsname, apiKey and url columns. - + ; export const checkAccessibility = async (subject: AccessibilityTestSubject) => { const { container } = await subject; - screen.debug(container); const { violations } = await run(container); expect(violations).toStrictEqual([]); diff --git a/test/servers/CreateServer.test.tsx b/test/servers/CreateServer.test.tsx index 70693636..5a7d6256 100644 --- a/test/servers/CreateServer.test.tsx +++ b/test/servers/CreateServer.test.tsx @@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn'; import { useNavigate } from 'react-router-dom'; import { CreateServerFactory } from '../../src/servers/CreateServer'; import type { ServersMap } from '../../src/servers/data'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; vi.mock('react-router-dom', async () => ({ @@ -39,6 +40,8 @@ describe('', () => { return renderWithEvents(); }; + it('passes a11y checks', () => checkAccessibility(setUp())); + it('shows success message when imported is true', () => { setUp({ serversImported: true }); diff --git a/test/servers/DeleteServerButton.test.tsx b/test/servers/DeleteServerButton.test.tsx index a9e188e7..e67217bc 100644 --- a/test/servers/DeleteServerButton.test.tsx +++ b/test/servers/DeleteServerButton.test.tsx @@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn'; import type { ReactNode } from 'react'; import { DeleteServerButtonFactory } from '../../src/servers/DeleteServerButton'; import type { DeleteServerModalProps } from '../../src/servers/DeleteServerModal'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { @@ -13,6 +14,8 @@ describe('', () => { {children}, ); + it('passes a11y checks', () => checkAccessibility(setUp('Delete me'))); + it.each([ ['Foo bar'], ['baz'], diff --git a/test/servers/DeleteServerModal.test.tsx b/test/servers/DeleteServerModal.test.tsx index c2f7b334..2af0fe63 100644 --- a/test/servers/DeleteServerModal.test.tsx +++ b/test/servers/DeleteServerModal.test.tsx @@ -2,6 +2,7 @@ import { screen, waitFor } from '@testing-library/react'; import { fromPartial } from '@total-typescript/shoehorn'; import { useNavigate } from 'react-router-dom'; import { DeleteServerModal } from '../../src/servers/DeleteServerModal'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; import { TestModalWrapper } from '../__helpers__/TestModalWrapper'; @@ -30,6 +31,8 @@ describe('', () => { ); }; + it('passes a11y checks', () => checkAccessibility(setUp())); + it('renders a modal window', () => { setUp(); diff --git a/test/servers/EditServer.test.tsx b/test/servers/EditServer.test.tsx index f3c379c7..640505cc 100644 --- a/test/servers/EditServer.test.tsx +++ b/test/servers/EditServer.test.tsx @@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn'; import { MemoryRouter, useNavigate } from 'react-router-dom'; import type { ReachableServer, SelectedServer } from '../../src/servers/data'; import { EditServerFactory } from '../../src/servers/EditServer'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; vi.mock('react-router-dom', async () => ({ @@ -31,6 +32,8 @@ describe('', () => { (useNavigate as any).mockReturnValue(navigate); }); + it('passes a11y checks', () => checkAccessibility(setUp())); + it('renders nothing if selected server is not reachable', () => { setUp(fromPartial({})); diff --git a/test/servers/ManageServers.test.tsx b/test/servers/ManageServers.test.tsx index 7a87f49f..6ed23b7d 100644 --- a/test/servers/ManageServers.test.tsx +++ b/test/servers/ManageServers.test.tsx @@ -4,6 +4,7 @@ import { MemoryRouter } from 'react-router-dom'; import type { ServersMap, ServerWithId } from '../../src/servers/data'; import { ManageServersFactory } from '../../src/servers/ManageServers'; import type { ServersExporter } from '../../src/servers/services/ServersExporter'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { @@ -25,6 +26,12 @@ describe('', () => { , ); + it('passes a11y checks', () => checkAccessibility(setUp({ + foo: createServerMock('foo'), + bar: createServerMock('bar'), + baz: createServerMock('baz'), + }))); + it('shows search field which allows searching servers, affecting te amount of rendered rows', async () => { const { user } = setUp({ foo: createServerMock('foo'), diff --git a/test/servers/ManageServersRow.test.tsx b/test/servers/ManageServersRow.test.tsx index e9160c4e..7446938f 100644 --- a/test/servers/ManageServersRow.test.tsx +++ b/test/servers/ManageServersRow.test.tsx @@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn'; import { MemoryRouter } from 'react-router-dom'; import type { ServerWithId } from '../../src/servers/data'; import { ManageServersRowFactory } from '../../src/servers/ManageServersRow'; +import { checkAccessibility } from '../__helpers__/accessibility'; describe('', () => { const ManageServersRow = ManageServersRowFactory(fromPartial({ @@ -24,6 +25,8 @@ describe('', () => { , ); + it('passes a11y checks', () => checkAccessibility(setUp())); + it.each([ [true, 4], [false, 3], diff --git a/test/servers/ManageServersRowDropdown.test.tsx b/test/servers/ManageServersRowDropdown.test.tsx index e9aa93b1..88f11ef8 100644 --- a/test/servers/ManageServersRowDropdown.test.tsx +++ b/test/servers/ManageServersRowDropdown.test.tsx @@ -1,8 +1,10 @@ import { screen } from '@testing-library/react'; +import type { UserEvent } from '@testing-library/user-event'; import { fromPartial } from '@total-typescript/shoehorn'; import { MemoryRouter } from 'react-router-dom'; import type { ServerWithId } from '../../src/servers/data'; import { ManageServersRowDropdownFactory } from '../../src/servers/ManageServersRowDropdown'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { @@ -20,12 +22,23 @@ describe('', () => { , ); }; + const toggleDropdown = (user: UserEvent) => user.click(screen.getByRole('button')); + + it.each([ + [setUp], + [async () => { + const { user, container } = setUp(); + await toggleDropdown(user); + + return { container }; + }], + ])('passes a11y checks', (setUp) => checkAccessibility(setUp())); it('renders expected amount of dropdown items', async () => { const { user } = setUp(); expect(screen.queryByRole('menu')).not.toBeInTheDocument(); - await user.click(screen.getByRole('button')); + await toggleDropdown(user); expect(screen.getByRole('menu')).toBeInTheDocument(); expect(screen.getAllByRole('menuitem')).toHaveLength(4); @@ -37,7 +50,7 @@ describe('', () => { const { user } = setUp(); expect(setAutoConnect).not.toHaveBeenCalled(); - await user.click(screen.getByRole('button')); + await toggleDropdown(user); await user.click(screen.getByRole('menuitem', { name: 'Auto-connect' })); expect(setAutoConnect).toHaveBeenCalledWith(expect.objectContaining({ id: 'abc123' }), true); }); @@ -48,7 +61,7 @@ describe('', () => { expect(screen.queryByText('DeleteServerModal [OPEN]')).not.toBeInTheDocument(); expect(screen.getByText('DeleteServerModal [CLOSED]')).toBeInTheDocument(); - await user.click(screen.getByRole('button')); + await toggleDropdown(user); await user.click(screen.getByRole('menuitem', { name: 'Remove server' })); expect(screen.getByText('DeleteServerModal [OPEN]')).toBeInTheDocument(); diff --git a/test/servers/ServersDropdown.test.tsx b/test/servers/ServersDropdown.test.tsx index c78ed5f6..c1a2e548 100644 --- a/test/servers/ServersDropdown.test.tsx +++ b/test/servers/ServersDropdown.test.tsx @@ -4,6 +4,7 @@ import { values } from 'ramda'; import { MemoryRouter } from 'react-router-dom'; import type { ServersMap } from '../../src/servers/data'; import { ServersDropdown } from '../../src/servers/ServersDropdown'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { @@ -13,9 +14,15 @@ describe('', () => { '3c': fromPartial({ name: 'baz', id: '3c' }), }; const setUp = (servers: ServersMap = fallbackServers) => renderWithEvents( - , + +
      + +
    +     , ); + it('passes a11y checks', () => checkAccessibility(setUp())); + it('contains the list of servers and the "mange servers" button', async () => { const { user } = setUp(); diff --git a/test/servers/ServersListGroup.test.tsx b/test/servers/ServersListGroup.test.tsx index d99f68e0..3cce37b1 100644 --- a/test/servers/ServersListGroup.test.tsx +++ b/test/servers/ServersListGroup.test.tsx @@ -3,13 +3,14 @@ import { fromPartial } from '@total-typescript/shoehorn'; import { MemoryRouter } from 'react-router-dom'; import type { ServerWithId } from '../../src/servers/data'; import { ServersListGroup } from '../../src/servers/ServersListGroup'; +import { checkAccessibility } from '../__helpers__/accessibility'; describe('', () => { const servers: ServerWithId[] = [ fromPartial({ name: 'foo', id: '123' }), fromPartial({ name: 'bar', id: '456' }), ]; - const setUp = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean }) => { + const setUp = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean } = {}) => { const { servers = [], withChildren = true, embedded } = params; return render( @@ -21,14 +22,16 @@ describe('', () => { ); }; + it('passes a11y checks', () => checkAccessibility(setUp())); + it('renders title', () => { setUp({}); - expect(screen.getByRole('heading')).toHaveTextContent('The list of servers'); + expect(screen.getByTestId('title')).toHaveTextContent('The list of servers'); }); it('does not render title when children is not provided', () => { setUp({ withChildren: false }); - expect(screen.queryByRole('heading')).not.toBeInTheDocument(); + expect(screen.queryByTestId('title')).not.toBeInTheDocument(); }); it.each([ @@ -37,7 +40,7 @@ describe('', () => { ])('shows servers list', (servers) => { setUp({ servers }); - expect(screen.queryAllByRole('list')).toHaveLength(servers.length ? 1 : 0); + expect(screen.queryAllByTestId('list')).toHaveLength(servers.length ? 1 : 0); expect(screen.queryAllByRole('link')).toHaveLength(servers.length); }); @@ -47,6 +50,6 @@ describe('', () => { [undefined, 'servers-list__list-group'], ])('renders proper classes for embedded', (embedded, expectedClasses) => { setUp({ servers, embedded }); - expect(screen.getByRole('list')).toHaveAttribute('class', `${expectedClasses} list-group`); + expect(screen.getByTestId('list')).toHaveAttribute('class', `${expectedClasses} list-group`); }); }); diff --git a/test/servers/helpers/DuplicatedServersModal.test.tsx b/test/servers/helpers/DuplicatedServersModal.test.tsx index 807728c1..7c838701 100644 --- a/test/servers/helpers/DuplicatedServersModal.test.tsx +++ b/test/servers/helpers/DuplicatedServersModal.test.tsx @@ -2,6 +2,7 @@ import { screen } from '@testing-library/react'; import { fromPartial } from '@total-typescript/shoehorn'; import type { ServerData } from '../../../src/servers/data'; import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal'; +import { checkAccessibility } from '../../__helpers__/accessibility'; import { renderWithEvents } from '../../__helpers__/setUpTest'; describe('', () => { @@ -12,6 +13,8 @@ describe('', () => { ); const mockServer = (data: Partial = {}) => fromPartial(data); + it('passes a11y checks', () => checkAccessibility(setUp())); + it.each([ [[], 0], [[mockServer()], 2], diff --git a/test/servers/helpers/ImportServersBtn.test.tsx b/test/servers/helpers/ImportServersBtn.test.tsx index 22f9643c..b2ef75d0 100644 --- a/test/servers/helpers/ImportServersBtn.test.tsx +++ b/test/servers/helpers/ImportServersBtn.test.tsx @@ -5,6 +5,7 @@ import type { ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn'; import { ImportServersBtnFactory } from '../../../src/servers/helpers/ImportServersBtn'; import type { ServersImporter } from '../../../src/servers/services/ServersImporter'; +import { checkAccessibility } from '../../__helpers__/accessibility'; import { renderWithEvents } from '../../__helpers__/setUpTest'; describe('', () => { @@ -22,6 +23,8 @@ describe('', () => { />, ); + it('passes a11y checks', () => checkAccessibility(setUp())); + it('shows tooltip on button hover', async () => { const { user } = setUp(); diff --git a/test/servers/helpers/ServerError.test.tsx b/test/servers/helpers/ServerError.test.tsx index cb0e49a4..d15a609c 100644 --- a/test/servers/helpers/ServerError.test.tsx +++ b/test/servers/helpers/ServerError.test.tsx @@ -1,11 +1,22 @@ import { render, screen } from '@testing-library/react'; import { fromPartial } from '@total-typescript/shoehorn'; import { MemoryRouter } from 'react-router-dom'; -import type { NonReachableServer, NotFoundServer } from '../../../src/servers/data'; +import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../../src/servers/data'; import { ServerErrorFactory } from '../../../src/servers/helpers/ServerError'; +import { checkAccessibility } from '../../__helpers__/accessibility'; describe('', () => { const ServerError = ServerErrorFactory(fromPartial({ DeleteServerButton: () => null })); + const setUp = (selectedServer: SelectedServer) => render( + + + , + ); + + it.each([ + [fromPartial({})], + [fromPartial({ id: 'abc123' })], + ])('passes a11y checks', (selectedServer) => checkAccessibility(setUp(selectedServer))); it.each([ [ @@ -31,11 +42,7 @@ describe('', () => { }, ], ])('renders expected information based on provided server type', (selectedServer, { found, notFound }) => { - render( - - - , - ); + setUp(selectedServer); found.forEach((text) => expect(screen.getByText(text)).toBeInTheDocument()); notFound.forEach((text) => expect(screen.queryByText(text)).not.toBeInTheDocument()); diff --git a/test/servers/helpers/ServerForm.test.tsx b/test/servers/helpers/ServerForm.test.tsx index 8373a823..63207f6c 100644 --- a/test/servers/helpers/ServerForm.test.tsx +++ b/test/servers/helpers/ServerForm.test.tsx @@ -1,10 +1,13 @@ import { fireEvent, render, screen } from '@testing-library/react'; import { ServerForm } from '../../../src/servers/helpers/ServerForm'; +import { checkAccessibility } from '../../__helpers__/accessibility'; describe('', () => { const onSubmit = vi.fn(); const setUp = () => render(Something); + it('passes a11y checks', () => checkAccessibility(setUp())); + it('renders components', () => { setUp(); diff --git a/test/settings/RealTimeUpdatesSettings.test.tsx b/test/settings/RealTimeUpdatesSettings.test.tsx index dc3695cb..65bb04d4 100644 --- a/test/settings/RealTimeUpdatesSettings.test.tsx +++ b/test/settings/RealTimeUpdatesSettings.test.tsx @@ -2,6 +2,7 @@ import type { RealTimeUpdatesSettings as RealTimeUpdatesSettingsOptions } from ' import { screen } from '@testing-library/react'; import { fromPartial } from '@total-typescript/shoehorn'; import { RealTimeUpdatesSettings } from '../../src/settings/RealTimeUpdatesSettings'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { @@ -15,6 +16,8 @@ describe('', () => { />, ); + it('passes a11y checks', () => checkAccessibility(setUp())); + it('renders enabled real time updates as expected', () => { setUp({ enabled: true }); diff --git a/test/settings/Settings.test.tsx b/test/settings/Settings.test.tsx index 5c2321d0..a35e6af5 100644 --- a/test/settings/Settings.test.tsx +++ b/test/settings/Settings.test.tsx @@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn'; import { createMemoryHistory } from 'history'; import { Router } from 'react-router-dom'; import { SettingsFactory } from '../../src/settings/Settings'; +import { checkAccessibility } from '../__helpers__/accessibility'; describe('', () => { const Settings = SettingsFactory(fromPartial({ @@ -19,6 +20,8 @@ describe('', () => { return render(); }; + it('passes a11y checks', () => checkAccessibility(setUp())); + it.each([ ['/general', { visibleComps: ['UserInterface', 'RealTimeUpdates'], diff --git a/test/settings/ShortUrlCreationSettings.test.tsx b/test/settings/ShortUrlCreationSettings.test.tsx index fb58cbcb..d33c7726 100644 --- a/test/settings/ShortUrlCreationSettings.test.tsx +++ b/test/settings/ShortUrlCreationSettings.test.tsx @@ -2,6 +2,7 @@ import type { ShortUrlCreationSettings as ShortUrlsSettings } from '@shlinkio/sh import { screen } from '@testing-library/react'; import { fromPartial } from '@total-typescript/shoehorn'; import { ShortUrlCreationSettings } from '../../src/settings/ShortUrlCreationSettings'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { @@ -13,6 +14,8 @@ describe('', () => { />, ); + it('passes a11y checks', () => checkAccessibility(setUp())); + it.each([ [{ validateUrls: true }, true], [{ validateUrls: false }, false], diff --git a/test/settings/ShortUrlsListSettings.test.tsx b/test/settings/ShortUrlsListSettings.test.tsx index 71edb21e..02cb5f40 100644 --- a/test/settings/ShortUrlsListSettings.test.tsx +++ b/test/settings/ShortUrlsListSettings.test.tsx @@ -2,6 +2,7 @@ import type { ShortUrlsListSettings as ShortUrlsSettings } from '@shlinkio/shlin import { screen } from '@testing-library/react'; import { fromPartial } from '@total-typescript/shoehorn'; import { ShortUrlsListSettings } from '../../src/settings/ShortUrlsListSettings'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { @@ -10,6 +11,8 @@ describe('', () => { , ); + it('passes a11y checks', () => checkAccessibility(setUp())); + it.each([ [undefined, 'Order by: Created at - DESC'], [fromPartial({}), 'Order by: Created at - DESC'], diff --git a/test/settings/TagsSettings.test.tsx b/test/settings/TagsSettings.test.tsx index 55f257cf..b757963e 100644 --- a/test/settings/TagsSettings.test.tsx +++ b/test/settings/TagsSettings.test.tsx @@ -3,6 +3,7 @@ import { screen } from '@testing-library/react'; import { fromPartial } from '@total-typescript/shoehorn'; import type { TagsOrder } from '../../src/settings/TagsSettings'; import { TagsSettings } from '../../src/settings/TagsSettings'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { @@ -11,6 +12,8 @@ describe('', () => { , ); + it('passes a11y checks', () => checkAccessibility(setUp())); + it('renders expected amount of groups', () => { setUp(); diff --git a/test/settings/UserInterfaceSettings.test.tsx b/test/settings/UserInterfaceSettings.test.tsx index b0ef7aae..5627f8e7 100644 --- a/test/settings/UserInterfaceSettings.test.tsx +++ b/test/settings/UserInterfaceSettings.test.tsx @@ -3,6 +3,7 @@ import { screen } from '@testing-library/react'; import { fromPartial } from '@total-typescript/shoehorn'; import type { UiSettings } from '../../src/settings/reducers/settings'; import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { @@ -11,6 +12,8 @@ describe('', () => { , ); + it('passes a11y checks', () => checkAccessibility(setUp())); + it.each([ [{ theme: 'dark' as Theme }, true], [{ theme: 'light' as Theme }, false], diff --git a/test/settings/VisitsSettings.test.tsx b/test/settings/VisitsSettings.test.tsx index 00916120..175dc5ac 100644 --- a/test/settings/VisitsSettings.test.tsx +++ b/test/settings/VisitsSettings.test.tsx @@ -2,6 +2,7 @@ import type { Settings } from '@shlinkio/shlink-web-component'; import { screen } from '@testing-library/react'; import { fromPartial } from '@total-typescript/shoehorn'; import { VisitsSettings } from '../../src/settings/VisitsSettings'; +import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { @@ -10,6 +11,8 @@ describe('', () => { , ); + it('passes a11y checks', () => checkAccessibility(setUp())); + it('renders expected components', () => { setUp(); diff --git a/test/utils/dates/DateIntervalSelector.test.tsx b/test/utils/dates/DateIntervalSelector.test.tsx index 56c38eaf..343bb555 100644 --- a/test/utils/dates/DateIntervalSelector.test.tsx +++ b/test/utils/dates/DateIntervalSelector.test.tsx @@ -1,6 +1,7 @@ import { screen, waitFor } from '@testing-library/react'; import type { DateInterval } from '../../../src/utils/dates/DateIntervalSelector'; import { DateIntervalSelector, INTERVAL_TO_STRING_MAP } from '../../../src/utils/dates/DateIntervalSelector'; +import { checkAccessibility } from '../../__helpers__/accessibility'; import { renderWithEvents } from '../../__helpers__/setUpTest'; describe('', () => { @@ -10,6 +11,8 @@ describe('', () => { , ); + it('passes a11y checks', () => checkAccessibility(setUp())); + it('passes props down to nested DateIntervalDropdownItems', async () => { const { user } = setUp(); const btn = screen.getByRole('button'); From 86c8aa7b9b8ee1a5eb33d6292fe49179135ca9f8 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 30 Sep 2023 20:26:28 +0200 Subject: [PATCH 3/3] Update shlink-web-component to v0.3.5 --- package-lock.json | 52 +++++++++++++++++++++++------------------------ package.json | 2 +- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index 802d1d21..4402e25c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "@reduxjs/toolkit": "^1.9.6", "@shlinkio/shlink-frontend-kit": "^0.4.0", "@shlinkio/shlink-js-sdk": "^0.1.0", - "@shlinkio/shlink-web-component": "^0.3.4", + "@shlinkio/shlink-web-component": "^0.3.5", "bootstrap": "5.2.3", "bottlejs": "^2.0.1", "classnames": "^2.3.2", @@ -2832,9 +2832,9 @@ "integrity": "sha512-03xlTFZH/XbjTDxrMJPD+fhJp+Vysb/lS4MKyOodcxdFieIeiBogCJrRuXiiAwNaXzJoxaon7T3s6yz5DVsbTQ==" }, "node_modules/@shlinkio/shlink-web-component": { - "version": "0.3.4", - "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.3.4.tgz", - "integrity": "sha512-2oGkrYmzMzbpZae2pjzU0jHQ0UBHnQdmPDg3ODkC2/aRGtOh5tXZhtEmwEJsLHU/seKheL83E0WRowxLqUjqew==", + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.3.5.tgz", + "integrity": "sha512-YthW30jx0SEGk+QqmJxeLkC1HdZbnCroxhm4Fa27le2Rhr/wDeTwHnOMkW0e0+3vO0hL9QOc8egk4vly8upMIA==", "dependencies": { "@json2csv/plainjs": "^7.0.3", "bottlejs": "^2.0.1", @@ -2848,11 +2848,11 @@ "ramda": "^0.27.2", "react-chartjs-2": "^5.2.0", "react-copy-to-clipboard": "^5.1.0", - "react-datepicker": "^4.16.0", + "react-datepicker": "^4.18.0", "react-external-link": "^2.2.0", "react-leaflet": "^4.2.1", "react-swipeable": "^7.0.1", - "react-tag-autocomplete": "^7.0.1" + "react-tag-autocomplete": "^7.1.0" }, "peerDependencies": { "@fortawesome/fontawesome-svg-core": "^6.4.2", @@ -2861,7 +2861,7 @@ "@fortawesome/free-solid-svg-icons": "^6.4.2", "@fortawesome/react-fontawesome": "^0.2.0", "@reduxjs/toolkit": "^1.9.5", - "@shlinkio/shlink-frontend-kit": "^0.3.0", + "@shlinkio/shlink-frontend-kit": "^0.4.0", "@shlinkio/shlink-js-sdk": "^0.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -8245,15 +8245,15 @@ } }, "node_modules/react-datepicker": { - "version": "4.16.0", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.16.0.tgz", - "integrity": "sha512-hNQ0PAg/LQoVbDUO/RWAdm/RYmPhN3cz7LuQ3hqbs24OSp69QCiKOJRrQ4jk1gv1jNR5oYu8SjjgfDh8q6Q1yw==", + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.18.0.tgz", + "integrity": "sha512-0MYt3HmLbHVk1sw4v+RCbLAVg5TA3jWP7RyjZbo53PC+SEi+pjdgc92lB53ai/ENZaTOhbXmgni9GzvMrorMAw==", "dependencies": { "@popperjs/core": "^2.11.8", "classnames": "^2.2.6", "date-fns": "^2.30.0", "prop-types": "^15.7.2", - "react-onclickoutside": "^6.12.2", + "react-onclickoutside": "^6.13.0", "react-popper": "^2.3.0" }, "peerDependencies": { @@ -8410,9 +8410,9 @@ } }, "node_modules/react-tag-autocomplete": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/react-tag-autocomplete/-/react-tag-autocomplete-7.0.1.tgz", - "integrity": "sha512-Aw+VJpCY+PUX03aFs1MD9QeXmrDcThCZqI8ttVt4RpsHGEfjgtr3Zq8iJ9+PJgTW6RKPoI8dhheYNYGEN7AG/A==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/react-tag-autocomplete/-/react-tag-autocomplete-7.1.0.tgz", + "integrity": "sha512-2eSOC48BK2MArCw/I89pOm41pKjYifg7X6P3RM4del8yNBq2W6qzM5jYBonnlFFieW4L8igt7oA+CaDAp7okKQ==", "engines": { "node": ">= 16.12.0" }, @@ -12492,9 +12492,9 @@ "integrity": "sha512-03xlTFZH/XbjTDxrMJPD+fhJp+Vysb/lS4MKyOodcxdFieIeiBogCJrRuXiiAwNaXzJoxaon7T3s6yz5DVsbTQ==" }, "@shlinkio/shlink-web-component": { - "version": "0.3.4", - "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.3.4.tgz", - "integrity": "sha512-2oGkrYmzMzbpZae2pjzU0jHQ0UBHnQdmPDg3ODkC2/aRGtOh5tXZhtEmwEJsLHU/seKheL83E0WRowxLqUjqew==", + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.3.5.tgz", + "integrity": "sha512-YthW30jx0SEGk+QqmJxeLkC1HdZbnCroxhm4Fa27le2Rhr/wDeTwHnOMkW0e0+3vO0hL9QOc8egk4vly8upMIA==", "requires": { "@json2csv/plainjs": "^7.0.3", "bottlejs": "^2.0.1", @@ -12508,11 +12508,11 @@ "ramda": "^0.27.2", "react-chartjs-2": "^5.2.0", "react-copy-to-clipboard": "^5.1.0", - "react-datepicker": "^4.16.0", + "react-datepicker": "^4.18.0", "react-external-link": "^2.2.0", "react-leaflet": "^4.2.1", "react-swipeable": "^7.0.1", - "react-tag-autocomplete": "^7.0.1" + "react-tag-autocomplete": "^7.1.0" } }, "@shlinkio/stylelint-config-css-coding-standard": { @@ -16109,15 +16109,15 @@ } }, "react-datepicker": { - "version": "4.16.0", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.16.0.tgz", - "integrity": "sha512-hNQ0PAg/LQoVbDUO/RWAdm/RYmPhN3cz7LuQ3hqbs24OSp69QCiKOJRrQ4jk1gv1jNR5oYu8SjjgfDh8q6Q1yw==", + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.18.0.tgz", + "integrity": "sha512-0MYt3HmLbHVk1sw4v+RCbLAVg5TA3jWP7RyjZbo53PC+SEi+pjdgc92lB53ai/ENZaTOhbXmgni9GzvMrorMAw==", "requires": { "@popperjs/core": "^2.11.8", "classnames": "^2.2.6", "date-fns": "^2.30.0", "prop-types": "^15.7.2", - "react-onclickoutside": "^6.12.2", + "react-onclickoutside": "^6.13.0", "react-popper": "^2.3.0" } }, @@ -16205,9 +16205,9 @@ "requires": {} }, "react-tag-autocomplete": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/react-tag-autocomplete/-/react-tag-autocomplete-7.0.1.tgz", - "integrity": "sha512-Aw+VJpCY+PUX03aFs1MD9QeXmrDcThCZqI8ttVt4RpsHGEfjgtr3Zq8iJ9+PJgTW6RKPoI8dhheYNYGEN7AG/A==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/react-tag-autocomplete/-/react-tag-autocomplete-7.1.0.tgz", + "integrity": "sha512-2eSOC48BK2MArCw/I89pOm41pKjYifg7X6P3RM4del8yNBq2W6qzM5jYBonnlFFieW4L8igt7oA+CaDAp7okKQ==", "requires": {} }, "react-transition-group": { diff --git a/package.json b/package.json index 75eadaf2..cd5416ee 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "@reduxjs/toolkit": "^1.9.6", "@shlinkio/shlink-frontend-kit": "^0.4.0", "@shlinkio/shlink-js-sdk": "^0.1.0", - "@shlinkio/shlink-web-component": "^0.3.4", + "@shlinkio/shlink-web-component": "^0.3.5", "bootstrap": "5.2.3", "bottlejs": "^2.0.1", "classnames": "^2.3.2",
    } + {hasAutoConnect && Auto-connectName Base URL + Options