Add first accessibility tests

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

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'));