test(historical-trend-view): add theme contrast coverage (JhaSourav07#3427)

## Description

Fixes JhaSourav07#2675

Adds theme contrast test coverage for `HistoricalTrendView` to verify
visual cohesion across light and dark color schemes.

The test suite verifies:

- Light mode styling classes are rendered correctly
- Dark mode styling classes are present and applied
- Text content remains accessible in both themes
- Foreground content is rendered without clipping or overlay conflicts
- Heatmap and statistical sections render correctly in theme-capable
layouts

## Pillar

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

## Visual Preview

Not applicable — test-only change.

## Checklist before requesting a review:

- [x] I have read the `CONTRIBUTING.md` file.
- [ ] 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.
- [ ] 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/HistoricalTrendView.theme-contrast.test.tsx

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+import HistoricalTrendView from './HistoricalTrendView';
+import type { ActivityData } from '@/types/dashboard';
+import type { DashboardPeriod } from '@/utils/dashboardPeriod';
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+  }),
+}));
+
+vi.mock('./Heatmap', () => ({
+  default: () => <div data-testid="heatmap">Heatmap</div>,
+}));
+
+const period: DashboardPeriod = {
+  kind: 'month',
+  month: '2025-05',
+  label: 'May 2025',
+  from: '2025-05-01T00:00:00.000Z',
+  to: '2025-05-31T23:59:59.999Z',
+};
+
+const activity: ActivityData[] = [
+  {
+    date: '2025-05-01',
+    count: 5,
+    intensity: 4,
+  },
+  {
+    date: '2025-05-02',
+    count: 2,
+    intensity: 2,
+  },
+];
+
+describe('HistoricalTrendView theme contrast', () => {
+  it('renders light mode background classes', () => {
+    const { container } = render(
+      <HistoricalTrendView username="tester" activity={activity} period={period} />
+    );
+
+    expect(container.innerHTML).toContain('bg-white');
+    expect(container.innerHTML).toContain('text-gray-900');
+  });
+
+  it('includes dark mode styling classes', () => {
+    const { container } = render(
+      <HistoricalTrendView username="tester" activity={activity} period={period} />
+    );
+
+    expect(container.innerHTML).toContain('dark:bg-[#0a0a0a]');
+    expect(container.innerHTML).toContain('dark:text-white');
+  });
+
+  it('renders text content with contrast-aware classes', () => {
+    render(<HistoricalTrendView username="tester" activity={activity} period={period} />);
+
+    expect(screen.getByText(/Explore long-term activity patterns/i)).toBeInTheDocument();
+
+    expect(screen.getByText(/Contributions/i)).toBeInTheDocument();
+  });
+
+  it('renders foreground content without clipping overlays', () => {
+    render(<HistoricalTrendView username="tester" activity={activity} period={period} />);
+
+    expect(screen.getByText(/Monthly Summary/i)).toBeInTheDocument();
+    expect(screen.getByText(/Yearly Summary/i)).toBeInTheDocument();
+  });
+
+  it('renders heatmap and statistics in both theme-capable layouts', () => {
+    render(<HistoricalTrendView username="tester" activity={activity} period={period} />);
+
+    expect(screen.getByTestId('heatmap')).toBeInTheDocument();
+    expect(screen.getByText(/Current Streak/i)).toBeInTheDocument();
+  });
+});