Skip to content

Commit 388ec3a

Browse files
authored
test(commitpulse-logo-accessibility): add accessibility coverage (JhaSourav07#3303)
## Description Fixes JhaSourav07#2666 ## Summary Added a dedicated accessibility-focused test suite for `CommitPulseLogo`. The tests verify: * SVG logo rendering * `aria-hidden` accessibility behavior * custom `className` application * SVG path rendering structure * accessibility-safe SVG presentation attributes ## Changes Made * Created `components/commitpulse-logo.accessibility.test.tsx` * Added 5 focused Vitest test cases for SVG accessibility behavior ## Validation ```bash npx vitest components/commitpulse-logo.accessibility.test.tsx npm run lint npm run format ``` ## Pillar - [ ] 🎨 Pillar 1 — New Theme Design - [ ] 📐 Pillar 2 — Geometric SVG Improvement - [ ] 🕐 Pillar 3 — Timezone Logic Optimization - [x] 🛠️ Other (Bug fix, refactoring, docs) ## Visual Preview ## Checklist before requesting a review: - [x] I have read the `CONTRIBUTING.md` file. - [x] I have tested these changes locally (`localhost:3000/api/streak?user=YOUR_USERNAME`). - [x] I have run `npm run format` and `npm run lint` locally and resolved all errors (CI will fail otherwise). - [x] My commits follow the Conventional Commits format (e.g., `feat(themes): ...`, `fix(calculate): ...`). - [ ] I have updated `README.md` if I added a new theme or URL parameter. - [x] I have started the repo. - [x] I have made sure that i have only one commit to merge in this PR. - [x] The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts). - [x] (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.
2 parents 49d21b4 + 0658a95 commit 388ec3a

1 file changed

Lines changed: 49 additions & 0 deletions

File tree

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { render } from '@testing-library/react';
2+
import { describe, expect, it } from 'vitest';
3+
4+
import { CommitPulseLogo } from './commitpulse-logo';
5+
6+
describe('CommitPulseLogo accessibility', () => {
7+
it('renders the SVG logo correctly', () => {
8+
const { container } = render(<CommitPulseLogo />);
9+
10+
const svg = container.querySelector('svg');
11+
12+
expect(svg).toBeTruthy();
13+
});
14+
15+
it('marks the SVG as aria-hidden for screen readers', () => {
16+
const { container } = render(<CommitPulseLogo />);
17+
18+
const svg = container.querySelector('svg');
19+
20+
expect(svg?.getAttribute('aria-hidden')).toBe('true');
21+
});
22+
23+
it('applies custom class names correctly', () => {
24+
const { container } = render(<CommitPulseLogo className="h-10 w-10 text-cyan-400" />);
25+
26+
const svg = container.querySelector('svg');
27+
28+
expect(svg?.getAttribute('class')).toContain('h-10');
29+
expect(svg?.getAttribute('class')).toContain('w-10');
30+
expect(svg?.getAttribute('class')).toContain('text-cyan-400');
31+
});
32+
33+
it('renders SVG paths for logo structure', () => {
34+
const { container } = render(<CommitPulseLogo />);
35+
36+
const paths = container.querySelectorAll('path');
37+
38+
expect(paths.length).toBe(4);
39+
});
40+
41+
it('uses accessibility-safe SVG presentation attributes', () => {
42+
const { container } = render(<CommitPulseLogo />);
43+
44+
const svg = container.querySelector('svg');
45+
46+
expect(svg?.getAttribute('fill')).toBe('none');
47+
expect(svg?.getAttribute('stroke')).toBe('currentColor');
48+
});
49+
});

0 commit comments

Comments
 (0)