test(dashboard): add vitest suite for commit clock component (JhaSourav07#834)

## Description

Fixes JhaSourav07#678 

Added a comprehensive Vitest test suite for the `CommitClock` dashboard
component (`components/dashboard/CommitClock.test.tsx`).

**Changes made:**
- Mocked `framer-motion` to ensure clean, error-free DOM rendering
during tests.
- Implemented all 5 test cases outlined in the issue's Definition of
Done:
  - Verifies the 'Commit Clock' heading renders.
  - Verifies the 'Weekly activity cycle' subtitle renders.
  - Verifies all 7 day labels render correctly.
  - Verifies the SVG element renders.
- Verifies the component does not crash when passed an all-zero data
array.

## 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 - This PR only adds test files, no visual UI changes were made.*

## 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/CommitClock.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import type { ReactNode } from 'react';
+import CommitClock from './CommitClock';
+import type { CommitClockData } from '@/types/dashboard';
+
+// 1. Mock framer-motion to prevent animation errors during DOM testing
+vi.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, className }: { children: ReactNode; className?: string }) => (
+      <div className={className}>{children}</div>
+    ),
+    g: ({ children }: { children: ReactNode }) => <g>{children}</g>,
+  },
+}));
+
+describe('CommitClock', () => {
+  // Helper to generate properly typed mock data
+  const generateMockData = (commits: number): CommitClockData[] => [
+    { day: 'Sun', commits },
+    { day: 'Mon', commits },
+    { day: 'Tue', commits },
+    { day: 'Wed', commits },
+    { day: 'Thu', commits },
+    { day: 'Fri', commits },
+    { day: 'Sat', commits },
+  ];
+
+  it("renders 'Commit Clock' heading", () => {
+    render(<CommitClock data={generateMockData(5)} />);
+    expect(screen.getByRole('heading', { name: /commit clock/i })).toBeDefined();
+  });
+
+  it("renders 'Weekly activity cycle' subtitle", () => {
+    render(<CommitClock data={generateMockData(5)} />);
+    expect(screen.getByText(/weekly activity cycle/i)).toBeDefined();
+  });
+
+  it('renders all 7 day labels', () => {
+    render(<CommitClock data={generateMockData(5)} />);
+    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    days.forEach((day) => {
+      expect(screen.getByText(day)).toBeDefined();
+    });
+  });
+
+  it('renders an SVG element', () => {
+    const { container } = render(<CommitClock data={generateMockData(5)} />);
+    expect(container.querySelector('svg')).not.toBeNull();
+  });
+
+  it('renders with all-zero commit data without crashing', () => {
+    expect(() => render(<CommitClock data={generateMockData(0)} />)).not.toThrow();
+  });
+});