Skip to content

Commit 29b32e2

Browse files
authored
test(feature-cards): add accessibility coverage (JhaSourav07#3237)
## Description Fixes JhaSourav07#2746 Added isolated unit tests for `components/FeatureCards.tsx` focusing on accessibility-oriented rendering behavior and structural validation. ### Changes - Added `components/FeatureCards.accessibility.test.tsx` - Mocked GSAP and ScrollTrigger dependencies to isolate component rendering - Verified the primary section heading renders correctly and remains discoverable through semantic heading roles - Tested rendering of keyboard-focusable interactive elements - Confirmed accessible content is exposed in the rendered output - Verified child content renders correctly within the section structure - Tested logical heading hierarchy and document organization - Improved coverage around accessibility-related rendering stability ## Pillar - [ ] 🎨 Pillar 1 — New Theme Design - [ ] 📐 Pillar 2 — Geometric SVG Improvement - [ ] 🕐 Pillar 3 — Timezone Logic Optimization - [x] 🛠️ Other (Bug fix, refactoring, docs) ## Visual Preview N/A (test-only changes) ## Checklist before requesting a review: - [x] I have read the `CONTRIBUTING.md` file. - [x] I have tested these changes locally. - [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 starred 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 visual changes made). - [ ] (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.
2 parents 37a088f + 1a49291 commit 29b32e2

1 file changed

Lines changed: 105 additions & 0 deletions

File tree

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { describe, expect, it, vi } from 'vitest';
2+
import { render, screen } from '@testing-library/react';
3+
import '@testing-library/jest-dom';
4+
5+
vi.mock('gsap', () => ({
6+
default: {
7+
set: vi.fn(),
8+
to: vi.fn(),
9+
fromTo: vi.fn(),
10+
registerPlugin: vi.fn(),
11+
context: vi.fn((callback: () => void) => {
12+
callback();
13+
14+
return {
15+
revert: vi.fn(),
16+
};
17+
}),
18+
timeline: vi.fn(() => ({
19+
to: vi.fn().mockReturnThis(),
20+
set: vi.fn().mockReturnThis(),
21+
fromTo: vi.fn().mockReturnThis(),
22+
kill: vi.fn(),
23+
})),
24+
},
25+
}));
26+
27+
vi.mock('gsap/ScrollTrigger', () => ({
28+
ScrollTrigger: {},
29+
}));
30+
31+
import { FeatureCardsSection } from './FeatureCards';
32+
33+
describe('FeatureCards Accessibility', () => {
34+
it('renders the primary section heading', () => {
35+
render(
36+
<FeatureCardsSection>
37+
<div>Content</div>
38+
</FeatureCardsSection>
39+
);
40+
41+
expect(
42+
screen.getByRole('heading', {
43+
name: /why commitpulse/i,
44+
})
45+
).toBeInTheDocument();
46+
});
47+
48+
it('renders child content in an accessible document structure', () => {
49+
render(
50+
<FeatureCardsSection>
51+
<button>Accessible Button</button>
52+
</FeatureCardsSection>
53+
);
54+
55+
expect(
56+
screen.getByRole('button', {
57+
name: 'Accessible Button',
58+
})
59+
).toBeInTheDocument();
60+
});
61+
62+
it('preserves keyboard-focusable interactive elements', () => {
63+
render(
64+
<FeatureCardsSection>
65+
<button>Focusable Element</button>
66+
</FeatureCardsSection>
67+
);
68+
69+
const button = screen.getByRole('button', {
70+
name: 'Focusable Element',
71+
});
72+
73+
expect(button).toBeInTheDocument();
74+
});
75+
76+
it('renders descriptive content for screen readers', () => {
77+
render(
78+
<FeatureCardsSection>
79+
<p>Accessibility Description</p>
80+
</FeatureCardsSection>
81+
);
82+
83+
expect(screen.getByText('Accessibility Description')).toBeInTheDocument();
84+
});
85+
86+
it('maintains logical heading hierarchy', () => {
87+
render(
88+
<FeatureCardsSection>
89+
<h2>Secondary Heading</h2>
90+
</FeatureCardsSection>
91+
);
92+
93+
expect(
94+
screen.getByRole('heading', {
95+
name: /why commitpulse/i,
96+
})
97+
).toBeInTheDocument();
98+
99+
expect(
100+
screen.getByRole('heading', {
101+
name: 'Secondary Heading',
102+
})
103+
).toBeInTheDocument();
104+
});
105+
});

0 commit comments

Comments
 (0)