Public Access
47 lines
1.5 KiB
React
47 lines
1.5 KiB
React
// @vitest-environment jsdom
|
|
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
|
|
import {cleanup, render} from '@testing-library/react';
|
|
import Confetti from './Confetti.jsx';
|
|
|
|
// jsdom has no canvas drawing.
|
|
beforeEach(() => {
|
|
vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
|
|
});
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
vi.unstubAllGlobals();
|
|
vi.restoreAllMocks();
|
|
});
|
|
|
|
const reducedMotion = (reduce) => vi.stubGlobal('matchMedia', (query) => ({
|
|
matches: reduce && query.includes('prefers-reduced-motion'),
|
|
}));
|
|
|
|
describe('Confetti', () => {
|
|
it('draws on a canvas hidden from screen readers', () => {
|
|
reducedMotion(false);
|
|
const {container} = render(<Confetti size="big"/>);
|
|
|
|
const canvas = container.querySelector('canvas');
|
|
expect(canvas.getAttribute('aria-hidden')).toBe('true');
|
|
expect(canvas.dataset.size).toBe('big');
|
|
});
|
|
|
|
it('draws nothing when the user asked for reduced motion', () => {
|
|
reducedMotion(true);
|
|
const {container} = render(<Confetti size="small"/>);
|
|
|
|
expect(container.querySelector('canvas')).toBeNull();
|
|
});
|
|
|
|
it('draws nothing when the reduce animations setting is on', () => {
|
|
reducedMotion(false);
|
|
document.documentElement.setAttribute('data-reduce-motion', '');
|
|
const {container} = render(<Confetti size="small"/>);
|
|
document.documentElement.removeAttribute('data-reduce-motion');
|
|
|
|
expect(container.querySelector('canvas')).toBeNull();
|
|
});
|
|
});
|