mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add first accessibility tests

Browse source
This commit is contained in:
Alejandro Celaya 2023-09-30 10:20:28 +02:00
parent ed83d4e842
commit 6d1d3c021a
17 changed files with 168 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
config/test/setupTests.ts
View file

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

88
package-lock.json generated
View file

@ -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",

4
package.json
View file

@ -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%",

3
src/servers/ServersListGroup.tsx
View file

@ -21,9 +21,10 @@ const ServerListItem = ({ id, name }: { id: string; name: string }) => (
export const ServersListGroup: FC<ServersListGroupProps> = ({ servers, children, embedded = false }) => (
<>
{children && <h5 className="mb-md-3">{children}</h5>}
{children && <div className="mb-0 fs-5 fw-normal lh-sm">{children}</div>}
{servers.length > 0 && (
<ListGroup
tag="div"
className={classNames('servers-list__list-group', { 'servers-list__list-group--embedded': embedded })}
>
{servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}

6
src/servers/helpers/ServerError.tsx
View file

@ -36,17 +36,19 @@ const ServerError: FCWithDeps<ServerErrorProps, ServerErrorDeps> = ({ servers, s
</Message>
<ServersListGroup servers={Object.values(servers)}>
<p className="mb-md-3">
These are the Shlink servers currently configured. Choose one of
them or <Link to="/server/create">add a new one</Link>.
</p>
</ServersListGroup>
{isServerWithId(selectedServer) && (
<div className="container mt-3 mt-md-5">
<h5>
<p className="fs-5 fw-normal lh-sm">
Alternatively, if you think you may have miss-configured this server, you
can <DeleteServerButton server={selectedServer} className="server-error__delete-btn">remove it</DeleteServerButton> or&nbsp;
<Link to={`/server/${selectedServer.id}/edit?reconnect=true`}>edit it</Link>.
</h5>
</p>
</div>
)}
</div>

14
test/__helpers__/accessibility.ts Normal file
View file

@ -0,0 +1,14 @@
import { screen } from '@testing-library/react';
import { run } from 'axe-core';
type ContainerWrapper = { container: HTMLElement };
type AccessibilityTestSubject = ContainerWrapper | Promise<ContainerWrapper>;
export const checkAccessibility = async (subject: AccessibilityTestSubject) => {
const { container } = await subject;
screen.debug(container);
const { violations } = await run(container);
expect(violations).toStrictEqual([]);
};

3
test/app/App.test.tsx
View file

@ -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('<App />', () => {
const App = AppFactory(
@ -34,6 +35,8 @@ describe('<App />', () => {
);
};
it('passes a11y checks', () => checkAccessibility(setUp()));
it('renders children components', () => {
setUp();

3
test/common/AppUpdateBanner.test.tsx
View file

@ -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('<AppUpdateBanner />', () => {
@ -7,6 +8,8 @@ describe('<AppUpdateBanner />', () => {
const forceUpdate = vi.fn();
const setUp = () => renderWithEvents(<AppUpdateBanner isOpen toggle={toggle} forceUpdate={forceUpdate} />);
it('passes a11y checks', () => checkAccessibility(setUp()));
it('renders initial state', () => {
setUp();

14
test/common/ErrorHandler.test.tsx
View file

@ -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('<ErrorHandler />', () => {
const location = fromPartial<Window['location']>({ reload });
const cons = fromPartial<Console>({ error: vi.fn() });
const ErrorHandler = (props: PropsWithChildren) => <BaseErrorHandler console={cons} location={location} {...props} />;
const setUp = (children: ReactNode = 'Error') => renderWithEvents(<ErrorHandler>{children}</ErrorHandler>);
beforeEach(() => {
vi.spyOn(console, 'error').mockImplementation(() => {}); // Silence react errors
});
it('passes a11y checks', () => checkAccessibility(setUp()));
it('renders children when no error has occurred', () => {
render(<ErrorHandler><span>Foo</span></ErrorHandler>);
setUp(<span>Foo</span>);
expect(screen.getByText('Foo')).toBeInTheDocument();
expect(screen.queryByText('Oops! This is awkward :S')).not.toBeInTheDocument();
@ -27,14 +31,14 @@ describe('<ErrorHandler />', () => {
});
it('renders error page when error has occurred', () => {
render(<ErrorHandler><ComponentWithError /></ErrorHandler>);
setUp(<ComponentWithError />);
expect(screen.getByText('Oops! This is awkward :S')).toBeInTheDocument();
expect(screen.getByRole('button')).toBeInTheDocument();
});
it('reloads page on button click', async () => {
const { user } = renderWithEvents(<ErrorHandler><ComponentWithError /></ErrorHandler>);
const { user } = setUp(<ComponentWithError />);
expect(reload).not.toHaveBeenCalled();
await user.click(screen.getByRole('button'));

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

@ -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('<Home />', () => {
const setUp = (servers: ServersMap = {}) => render(
@ -11,6 +12,10 @@ describe('<Home />', () => {
</MemoryRouter>,
);
it('passes a11y checks', () => checkAccessibility(
setUp({ '1a': fromPartial<ServerWithId>({ name: 'foo', id: '1' }) }),
));
it('renders title', () => {
setUp();
expect(screen.getByRole('heading', { name: 'Welcome!' })).toBeInTheDocument();

6
test/common/MainHeader.test.tsx
View file

@ -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('<MainHeader />', () => {
const MainHeader = MainHeaderFactory(fromPartial({
ServersDropdown: () => <>ServersDropdown</>,
// Fake this component as a li, as it gets rendered inside a ul
ServersDropdown: () => <li>ServersDropdown</li>,
}));
const setUp = (pathname = '') => {
const history = createMemoryHistory();
@ -20,6 +22,8 @@ describe('<MainHeader />', () => {
);
};
it('passes a11y checks', () => checkAccessibility(setUp()));
it('renders ServersDropdown', () => {
setUp();
expect(screen.getByText('ServersDropdown')).toBeInTheDocument();

3
test/common/NotFound.test.tsx
View file

@ -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('<NotFound />', () => {
const setUp = (props = {}) => render(<MemoryRouter><NotFound {...props} /></MemoryRouter>);
it('passes a11y checks', () => checkAccessibility(setUp()));
it('shows expected error title', () => {
setUp();
expect(screen.getByText('Oops! We could not find requested route.')).toBeInTheDocument();

7
test/common/ScrollToTop.test.tsx
View file

@ -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('<ScrollToTop />', () => {
const setUp = (children = 'Foo') => render(<MemoryRouter><ScrollToTop>{children}</ScrollToTop></MemoryRouter>);
it('passes a11y checks', () => checkAccessibility(setUp()));
it.each([
['Foobar'],
['Barfoo'],
['Something'],
])('just renders children', (children) => {
render(<MemoryRouter><ScrollToTop>{children}</ScrollToTop></MemoryRouter>);
setUp(children);
expect(screen.getByText(children)).toBeInTheDocument();
});
});

5
test/common/ShlinkVersions.test.tsx
View file

@ -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('<ShlinkVersions />', () => {
const setUp = (props: ShlinkVersionsProps) => render(<ShlinkVersions {...props} />);
it('passes a11y checks', () => checkAccessibility(
setUp({ selectedServer: fromPartial({ version: '1.0.0', printableVersion: '1.0.0' }) }),
));
it.each([
['1.2.3', fromPartial<ReachableServer>({ version: '1.0.0', printableVersion: 'foo' }), 'v1.2.3', 'foo'],
['foo', fromPartial<ReachableServer>({ version: '1.0.0', printableVersion: '1.2.3' }), 'latest', '1.2.3'],

5
test/common/ShlinkVersionsContainer.test.tsx
View file

@ -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('<ShlinkVersionsContainer />', () => {
const setUp = (activeRoute: string) => {
const setUp = (activeRoute: string = '') => {
const history = createMemoryHistory();
history.push(activeRoute);
@ -16,6 +17,8 @@ describe('<ShlinkVersionsContainer />', () => {
);
};
it('passes a11y checks', () => checkAccessibility(setUp()));
it.each([
['/something', 'text-center'],
['/server/foo/edit', 'text-center'],

3
test/common/ShlinkWebComponentContainer.test.tsx
View file

@ -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<any>('react-router-dom')),
@ -24,6 +25,8 @@ describe('<ShlinkWebComponentContainer />', () => {
(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);

5
test/common/img/ShlinkLogo.test.tsx
View file

@ -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('<ShlinkLogo />', () => {
const setUp = (props: ShlinkLogoProps) => render(<ShlinkLogo {...props} />);
const setUp = (props: ShlinkLogoProps = {}) => render(<ShlinkLogo {...props} />);
it('passes a11y checks', () => checkAccessibility(setUp()));
it.each([
[undefined, MAIN_COLOR],