test(ComparePage-mouse-interactivity): add mouse interactivity test suite (JhaSourav07#2797) (JhaSourav07#3193)

## Description

Adds the comprehensive ComparePage.mouse-interactivity.test.tsx test
suite to verify hover triggers, tooltip coordinates, touch event
propagation, and cursor style states.

Fixes JhaSourav07#2797

## 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 (Utility/Unit Tests only)

## 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.
- [x] My commits follow the Conventional Commits format.
- [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.
- [ ] The SVG output matches the CommitPulse "premium quality" aesthetic
standard.
- [ ] (Recommended) I joined the CommitPulse Discord community.

Author: JhaSourav07

app/compare/page.mouse-interactivity.test.tsx

@@ -0,0 +1,259 @@
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import CompareClient from './CompareClient';
+import React, { type ReactNode } from 'react';
+
+const replaceMock = vi.fn();
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    replace: replaceMock,
+  }),
+  useSearchParams: () => ({
+    get: vi.fn(() => null),
+  }),
+}));
+
+vi.mock('framer-motion', () => ({
+  motion: new Proxy(
+    {},
+    {
+      get: (_, tag) => {
+        return ({ children, ...props }: { children?: ReactNode; [key: string]: unknown }) =>
+          React.createElement(tag as string, props, children);
+      },
+    }
+  ),
+  AnimatePresence: ({ children }: { children?: ReactNode }) => <>{children}</>,
+}));
+
+const mockResponse = {
+  user1: {
+    profile: {
+      username: 'userA',
+      name: 'User A',
+      avatarUrl: 'avatar-a.png',
+      isPro: true,
+      bio: 'Frontend Developer',
+      location: 'India',
+      joinedDate: '2023',
+      developerScore: 90,
+      stats: {
+        repositories: 100,
+        followers: 200,
+        following: 50,
+        stars: 500,
+      },
+    },
+    stats: {
+      currentStreak: 50,
+      peakStreak: 100,
+      totalContributions: 5000,
+      codingHabit: 'Night Owl',
+      totalPRs: 20,
+      totalIssues: 10,
+    },
+    languages: [
+      {
+        name: 'TypeScript',
+        color: '#3178c6',
+        percentage: 80,
+      },
+    ],
+    activity: [
+      {
+        date: '2026-06-01',
+        count: 5,
+        intensity: 2,
+        locAdditions: 150,
+        locDeletions: 50,
+      },
+    ],
+  },
+  user2: {
+    profile: {
+      username: 'userB',
+      name: 'User B',
+      avatarUrl: 'avatar-b.png',
+      isPro: false,
+      bio: 'Backend Developer',
+      location: 'USA',
+      joinedDate: '2022',
+      developerScore: 80,
+      stats: {
+        repositories: 80,
+        followers: 100,
+        following: 40,
+        stars: 300,
+      },
+    },
+    stats: {
+      currentStreak: 30,
+      peakStreak: 70,
+      totalContributions: 3000,
+      codingHabit: 'Early Bird',
+      totalPRs: 15,
+      totalIssues: 5,
+    },
+    languages: [
+      {
+        name: 'JavaScript',
+        color: '#f7df1e',
+        percentage: 70,
+      },
+    ],
+    activity: [
+      {
+        date: '2026-06-01',
+        count: 2,
+        intensity: 1,
+        locAdditions: 80,
+        locDeletions: 30,
+      },
+    ],
+  },
+};
+
+describe('CompareClient Mouse Interactivity & Touch Events', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    global.fetch = vi.fn(
+      async () =>
+        ({
+          ok: true,
+          json: async () => mockResponse,
+        }) as Response
+    );
+  });
+
+  it('verifies mouse hover styling and hover class application on search and action elements', () => {
+    render(<CompareClient />);
+
+    const user1Input = screen.getByPlaceholderText(/github username #1/i);
+    const user2Input = screen.getByPlaceholderText(/github username #2/i);
+    const compareBtn = screen.getByRole('button', { name: /compare/i });
+
+    // Verify presence of cursor-pointer or transition-colors classes
+    expect(compareBtn).toHaveClass('transition-colors');
+    expect(compareBtn).toHaveClass('hover:bg-zinc-800');
+
+    // Simulate mouse interaction
+    fireEvent.mouseEnter(compareBtn);
+    fireEvent.mouseLeave(compareBtn);
+
+    fireEvent.mouseEnter(user1Input);
+    fireEvent.mouseLeave(user1Input);
+
+    fireEvent.mouseEnter(user2Input);
+    fireEvent.mouseLeave(user2Input);
+  });
+
+  it('renders stats showdown cards and verifies hover-related border transitions', async () => {
+    render(<CompareClient />);
+
+    fireEvent.change(screen.getByPlaceholderText(/github username #1/i), {
+      target: { value: 'userA' },
+    });
+    fireEvent.change(screen.getByPlaceholderText(/github username #2/i), {
+      target: { value: 'userB' },
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: /compare/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/stats showdown/i)).toBeInTheDocument();
+    });
+
+    // Check StatBattle border elements transitions on mouseEnter / mouseLeave
+    const repositoryCard = screen.getByText('5,000').closest('div');
+    expect(repositoryCard).toBeInTheDocument();
+
+    fireEvent.mouseEnter(repositoryCard!);
+    fireEvent.mouseLeave(repositoryCard!);
+  });
+
+  it('triggers mouse hover interactions on coding habits cards', async () => {
+    render(<CompareClient />);
+
+    fireEvent.change(screen.getByPlaceholderText(/github username #1/i), {
+      target: { value: 'userA' },
+    });
+    fireEvent.change(screen.getByPlaceholderText(/github username #2/i), {
+      target: { value: 'userB' },
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: /compare/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/coding habits/i)).toBeInTheDocument();
+    });
+
+    const habitCards = screen.getAllByRole('heading', { level: 3 });
+    const userAHabit = habitCards.find((c) => c.textContent === 'Night Owl');
+    const userBHabit = habitCards.find((c) => c.textContent === 'Early Bird');
+
+    expect(userAHabit).toBeInTheDocument();
+    expect(userBHabit).toBeInTheDocument();
+
+    // Trigger hover events to verify standard scale and glow hover properties
+    const containerA = userAHabit!.closest('div');
+    const containerB = userBHabit!.closest('div');
+
+    expect(containerA).toHaveClass('transition-all');
+    expect(containerB).toHaveClass('transition-all');
+
+    fireEvent.mouseEnter(containerA!);
+    fireEvent.mouseLeave(containerA!);
+
+    fireEvent.mouseEnter(containerB!);
+    fireEvent.mouseLeave(containerB!);
+  });
+
+  it('verifies touch start propagation on controls and action buttons', () => {
+    render(<CompareClient />);
+
+    const user1Input = screen.getByPlaceholderText(/github username #1/i);
+    const user2Input = screen.getByPlaceholderText(/github username #2/i);
+    const compareBtn = screen.getByRole('button', { name: /compare/i });
+
+    // Simulate mobile touch event start to verify they propagate properly without being prevented
+    const touchStartEvent1 = fireEvent.touchStart(user1Input);
+    const touchStartEvent2 = fireEvent.touchStart(user2Input);
+    const touchStartEvent3 = fireEvent.touchStart(compareBtn);
+
+    expect(touchStartEvent1).toBe(true);
+    expect(touchStartEvent2).toBe(true);
+    expect(touchStartEvent3).toBe(true);
+  });
+
+  it('renders contribution activity heatmap and verifies hover title-tooltips exist', async () => {
+    render(<CompareClient />);
+
+    fireEvent.change(screen.getByPlaceholderText(/github username #1/i), {
+      target: { value: 'userA' },
+    });
+    fireEvent.change(screen.getByPlaceholderText(/github username #2/i), {
+      target: { value: 'userB' },
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: /compare/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/stats showdown/i)).toBeInTheDocument();
+    });
+
+    // Find custom heatmap items having 'contributions' in the title attribute
+    const allCells = document.querySelectorAll('[title*="contributions"]');
+    expect(allCells.length).toBeGreaterThan(0);
+
+    // Verify hover details on a heatmap cell
+    const sampleCell = allCells[0];
+    expect(sampleCell).toHaveAttribute('title');
+    expect(sampleCell.getAttribute('title')).toContain('contributions');
+
+    fireEvent.mouseEnter(sampleCell);
+    fireEvent.mouseLeave(sampleCell);
+  });
+});

app/components/CopyRepoButton.responsive-breakpoints.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import CopyRepoButton from './CopyRepoButton';
+
+vi.mock('lucide-react', () => ({
+  Copy: () => <svg data-testid="copy-icon" />,
+}));
+
+describe('CopyRepoButton - Responsive Breakpoints Layout Cohesion', () => {
+  beforeEach(() => {
+    window.innerWidth = 375;
+    window.dispatchEvent(new Event('resize'));
+  });
+
+  it('mocks standard mobile-width media coordinates correctly', () => {
+    render(<CopyRepoButton />);
+    expect(window.innerWidth).toBe(375);
+    expect(screen.getByRole('button', { name: /copy url/i })).toBeDefined();
+  });
+
+  it('asserts that container layout reflows into a single vertical flex element or maintains appropriate inline-flex behavior on mobile', () => {
+    render(<CopyRepoButton />);
+    const button = screen.getByRole('button');
+    expect(button.className).toContain('inline-flex');
+    expect(button.className).toContain('items-center');
+  });
+
+  it('verifies that styling values use flexible styles and padding rather than absolute widths to prevent horizontal scrollbars on smaller viewports', () => {
+    render(<CopyRepoButton />);
+    const button = screen.getByRole('button');
+    expect(button.className).toContain('px-8');
+    expect(button.className).toContain('py-4');
+    expect(button.className).not.toContain('w-[500px]');
+  });
+
+  it('checks that button contents (icon and text) scale down gracefully on mobile screen sizes', () => {
+    render(<CopyRepoButton />);
+    const button = screen.getByRole('button');
+    expect(button.className).toContain('gap-2');
+    expect(screen.getByTestId('copy-icon')).toBeDefined();
+  });
+
+  it('asserts viewport changes do not affect state transitions of the copy action', async () => {
+    render(<CopyRepoButton />);
+    const button = screen.getByRole('button');
+
+    // Resize to desktop
+    window.innerWidth = 1440;
+    window.dispatchEvent(new Event('resize'));
+
+    expect(window.innerWidth).toBe(1440);
+    expect(button.className).toContain('transition-all');
+  });
+});