Skip to content

Commit c0fbe59

Browse files
authored
test(discordbutton): add accessibility coverage (JhaSourav07#3223)
## Description Fixes JhaSourav07#2736 Added accessibility test coverage for `components/DiscordButton.tsx`. ### Tests Added * Verifies the Discord button renders as an accessible link with visible text. * Confirms the Discord invite URL is correctly applied. * Ensures the external link opens safely in a new tab. * Verifies the anchor element is keyboard focusable. * Ensures only one accessible link target is exposed to screen readers. ## 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. * [ ] I have run `npm run format` and `npm run lint` locally and resolved all errors. * [x] My commits follow the Conventional Commits format. * [ ] I have updated `README.md` if I added a new theme or URL parameter. (Not applicable) * [x] I have starred the repo. * [x] I have made sure that I have only one commit to merge in this PR. * [ ] The SVG output matches the CommitPulse "premium quality" aesthetic standard. (Not applicable) * [ ] (Recommended) I joined the CommitPulse Discord community.
2 parents b9202b0 + 695bad8 commit c0fbe59

1 file changed

Lines changed: 59 additions & 0 deletions

File tree

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { render, screen } from '@testing-library/react';
2+
import { describe, expect, it, vi } from 'vitest';
3+
4+
import { DiscordButton } from './DiscordButton';
5+
6+
vi.mock('gsap', () => ({
7+
default: {
8+
to: vi.fn(),
9+
},
10+
}));
11+
12+
vi.mock('framer-motion', () => ({
13+
motion: {
14+
div: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
15+
<div {...props}>{children}</div>
16+
),
17+
a: ({ children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
18+
<a {...props}>{children}</a>
19+
),
20+
},
21+
}));
22+
23+
describe('DiscordButton accessibility behavior', () => {
24+
it('renders as an accessible link with visible text', () => {
25+
render(<DiscordButton />);
26+
27+
expect(screen.getByRole('link', { name: /join the core community on discord/i })).toBeDefined();
28+
});
29+
30+
it('uses the correct Discord invite href', () => {
31+
render(<DiscordButton />);
32+
33+
expect(screen.getByRole('link').getAttribute('href')).toBe('https://discord.gg/Cb73bS79j');
34+
});
35+
36+
it('opens external Discord link safely in a new tab', () => {
37+
render(<DiscordButton />);
38+
39+
const link = screen.getByRole('link');
40+
41+
expect(link.getAttribute('target')).toBe('_blank');
42+
expect(link.getAttribute('rel')).toBe('noopener noreferrer');
43+
});
44+
45+
it('is keyboard focusable through the anchor element', () => {
46+
render(<DiscordButton />);
47+
48+
const link = screen.getByRole('link');
49+
link.focus();
50+
51+
expect(document.activeElement).toBe(link);
52+
});
53+
54+
it('keeps only one accessible link target for screen readers', () => {
55+
render(<DiscordButton />);
56+
57+
expect(screen.getAllByRole('link')).toHaveLength(1);
58+
});
59+
});

0 commit comments

Comments
 (0)