merge: Add Unit Tests for Heatmap Mouse Interactivity and Tooltips (#8266)

## Description
Adds mouse interaction and tooltip behavior test coverage for
`components/dashboard/Heatmap.tsx` through the new test file
`components/dashboard/Heatmap.mouse-interactivity.test.tsx`.

## Changes

* Added tests simulating mouse hover, pointer movement, and touch
interactions on interactive heatmap cells.
* Verified responsive tooltip rendering and positioning based on user
interaction coordinates.
* Tested click and touch event propagation to ensure interactions
trigger the expected callbacks.
* Confirmed interactive elements expose appropriate cursor styles during
hover.
* Validated tooltip dismissal and overlay cleanup on mouse leave events.

## Test Coverage

Implemented 5 test cases covering:

1. Mouse enter and hover interactions on active heatmap cells.
2. Responsive tooltip rendering with correct positioning and visibility.
3. Click and touch gesture propagation triggering expected event
handlers.
4. Pointer cursor styling applied to interactive heatmap elements.
5. Mouse leave behavior hiding temporary tooltip and overlay elements.

## Validation

* All tests pass successfully with `vitest run`.
* Mouse and touch interactions are fully mocked for deterministic
execution.
* No production code changes required.
* Improves confidence that interactive heatmap behavior remains stable
across future updates.

## Verification

✅ `vitest run` passes successfully.

Fixes #2557

## Pillar

- [ ] 🎨 Pillar 1 — New Theme Design
- [ ] 📐 Pillar 2 — Geometric SVG Improvement
- [ ] 🕐 Pillar 3 — Timezone Logic Optimization
- [x] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview
Can Check in the Files Changed Section.

## 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): ...`).
- [x] 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.

Author: JhaSourav07

components/dashboard/Heatmap.mouse-interactivity.test.tsx

@@ -0,0 +1,144 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import Heatmap from './Heatmap';
+import type { ActivityData } from '@/types/dashboard';
+
+// Mock TranslationContext to return translation keys or formatted fallback strings
+vi.mock('@/context/TranslationContext', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: Record<string, string>) => {
+      if (options?.count && options?.date) {
+        return `${options.count} contributions on ${options.date}`;
+      }
+      return key;
+    },
+  }),
+}));
+
+// Mock VisualizationTooltip component for precise inspection during tests
+vi.mock('./VisualizationTooltip', () => ({
+  default: ({
+    title,
+    children,
+    x,
+    y,
+  }: {
+    title: string;
+    children: React.ReactNode;
+    x: number;
+    y: number;
+  }) => (
+    <div role="tooltip" data-testid="visualization-tooltip" data-x={x} data-y={y}>
+      <div>{title}</div>
+      {children}
+    </div>
+  ),
+}));
+
+// Mock ResizeObserver which is used inside Heatmap.tsx
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+describe('Heatmap Mouse Interactivity & Touch Event Propagation', () => {
+  const mockData: ActivityData[] = [
+    { date: '2026-06-01', count: 5, intensity: 3 },
+    { date: '2026-06-02', count: 0, intensity: 0 },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Test 1: Tooltip display & computed coordinates on mouseenter / hover
+  it('displays tooltip with computed coordinates on mouseenter over a grid cell', async () => {
+    render(<Heatmap data={mockData} />);
+
+    const gridCell = screen.getAllByRole('gridcell')[0];
+
+    // Mock bounding rectangle for coordinate calculations
+    vi.spyOn(gridCell, 'getBoundingClientRect').mockReturnValue({
+      left: 100,
+      top: 200,
+      width: 14,
+      height: 14,
+      right: 114,
+      bottom: 214,
+      x: 100,
+      y: 200,
+      toJSON: () => {},
+    });
+
+    await userEvent.hover(gridCell);
+
+    const tooltip = screen.getByTestId('visualization-tooltip');
+    expect(tooltip).toBeInTheDocument();
+
+    // Check calculated tooltip coordinates (x = 100 + 14/2 = 107, y = 200 - 10 = 190)
+    expect(tooltip).toHaveAttribute('data-x', '107');
+    expect(tooltip).toHaveAttribute('data-y', '190');
+    // formatTooltipDate formats '2026-06-01' -> 'Jun 1, 2026'
+    expect(tooltip).toHaveTextContent('5 contributions on Jun 1, 2026');
+  });
+
+  // Test 2: Hide tooltip on mouseleave
+  it('hides the temporary tooltip visual overlay on mouseleave', async () => {
+    render(<Heatmap data={mockData} />);
+
+    const gridCell = screen.getAllByRole('gridcell')[0];
+
+    await userEvent.hover(gridCell);
+    expect(screen.getByTestId('visualization-tooltip')).toBeInTheDocument();
+
+    await userEvent.unhover(gridCell);
+    expect(screen.queryByTestId('visualization-tooltip')).not.toBeInTheDocument();
+  });
+
+  // Test 3: Cursor styles and interactive feedback classes
+  it('applies interactive cursor classes (cursor-pointer) and focus styles to grid cells', () => {
+    render(<Heatmap data={mockData} />);
+
+    const gridCell = screen.getAllByRole('gridcell')[0];
+
+    expect(gridCell).toHaveClass('cursor-pointer');
+    expect(gridCell).toHaveClass('hover:scale-125');
+  });
+
+  // Test 4: Focus and Blur interactivity (Keyboard/Touch Accessibility)
+  it('shows and hides tooltip on focus and blur events for accessibility', () => {
+    render(<Heatmap data={mockData} />);
+
+    const gridCell = screen.getAllByRole('gridcell')[0];
+
+    fireEvent.focus(gridCell);
+    expect(screen.getByTestId('visualization-tooltip')).toBeInTheDocument();
+
+    fireEvent.blur(gridCell);
+    expect(screen.queryByTestId('visualization-tooltip')).not.toBeInTheDocument();
+  });
+
+  // Test 5: Touch gesture and event propagation on cell interaction
+  it('handles touch/click gesture propagation without throwing errors', () => {
+    const handleClick = vi.fn();
+
+    render(
+      <div onClick={handleClick}>
+        <Heatmap data={mockData} />
+      </div>
+    );
+
+    const gridCell = screen.getAllByRole('gridcell')[0];
+
+    // Trigger touchStart event
+    fireEvent.touchStart(gridCell, {
+      touches: [{ clientX: 105, clientY: 205 }],
+    });
+
+    // Trigger click to check propagation to parent containers
+    fireEvent.click(gridCell);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});