Skip to content

Commit ebcbf04

Browse files
authored
test(Icons-mouse-interactivity): verify Interactive Tooltips, Cursor Hovers & Touch Event Propagation (Variation 5) (JhaSourav07#3112)
## Description This PR adds test coverage to verify interactive Tooltips, Cursor Hovers, and Touch Event Propagation for the `Icons` components. It validates that the SVGs properly allow DOM mouse events (like `onClick`) to propagate up to their interactive parent wrapper elements without interference, ensuring a smooth user experience. Fixes JhaSourav07#2817 ## 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 addition only, no visual changes). ## 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 1272159 + 4f0fd0b commit ebcbf04

1 file changed

Lines changed: 79 additions & 0 deletions

File tree

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { fireEvent, render } from '@testing-library/react';
2+
import { describe, expect, it, vi } from 'vitest';
3+
4+
import { BoxIcon, CheckIcon, CloseIcon, CopyIcon, ZapIcon } from './Icons';
5+
6+
describe('Icons mouse interactivity & event propagation', () => {
7+
it('allows mouse event propagation when CopyIcon is clicked', () => {
8+
const handleClick = vi.fn();
9+
const { container } = render(
10+
<button onClick={handleClick}>
11+
<CopyIcon />
12+
</button>
13+
);
14+
15+
const svg = container.querySelector('svg');
16+
if (svg) {
17+
fireEvent.click(svg);
18+
}
19+
20+
// Verifies that clicks on the SVG propagate up to interactive parent elements
21+
expect(handleClick).toHaveBeenCalledTimes(1);
22+
});
23+
24+
it('allows mouse event propagation when ZapIcon is clicked', () => {
25+
const handleClick = vi.fn();
26+
const { container } = render(
27+
<button onClick={handleClick}>
28+
<ZapIcon />
29+
</button>
30+
);
31+
32+
const svg = container.querySelector('svg');
33+
if (svg) fireEvent.click(svg);
34+
35+
expect(handleClick).toHaveBeenCalledTimes(1);
36+
});
37+
38+
it('allows mouse event propagation when BoxIcon is clicked', () => {
39+
const handleClick = vi.fn();
40+
const { container } = render(
41+
<div onClick={handleClick}>
42+
<BoxIcon />
43+
</div>
44+
);
45+
46+
const svg = container.querySelector('svg');
47+
if (svg) fireEvent.click(svg);
48+
49+
expect(handleClick).toHaveBeenCalledTimes(1);
50+
});
51+
52+
it('allows mouse event propagation when CheckIcon is clicked', () => {
53+
const handleClick = vi.fn();
54+
const { container } = render(
55+
<button onClick={handleClick}>
56+
<CheckIcon />
57+
</button>
58+
);
59+
60+
const svg = container.querySelector('svg');
61+
if (svg) fireEvent.click(svg);
62+
63+
expect(handleClick).toHaveBeenCalledTimes(1);
64+
});
65+
66+
it('allows mouse event propagation when CloseIcon is clicked', () => {
67+
const handleClick = vi.fn();
68+
const { container } = render(
69+
<button onClick={handleClick}>
70+
<CloseIcon />
71+
</button>
72+
);
73+
74+
const svg = container.querySelector('svg');
75+
if (svg) fireEvent.click(svg);
76+
77+
expect(handleClick).toHaveBeenCalledTimes(1);
78+
});
79+
});

0 commit comments

Comments
 (0)