merge: test(theme-quick-presets): add isolated mock integration tests for preset rendering and interactions (#8072)

## Description

This PR introduces a dedicated mock integration test suite for
ThemeQuickPresets to improve component reliability and validate its
behavior in an isolated environment. The tests mock external
dependencies such as theme definitions and available theme keys while
focusing on rendering and user interactions.

## Changes Made
Added
app/customize/components/ThemeQuickPresets.mock-integrations.test.tsx
Mocked the themes configuration to provide deterministic test data.
Mocked THEME_KEYS to isolate the component from application-wide theme
configuration.
Added tests to verify:
Only selectable themes are rendered (excluding auto and random).
The active preset correctly updates the aria-pressed accessibility
attribute.
Clicking a preset invokes onThemeChange with the selected theme.
The correct number of preset buttons is rendered.
Active theme styling (tqp-on) is applied correctly.

Fixes #6886 

## Pillar

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


## 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).
- [ ] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

app/customize/components/ThemeQuickPresets.mock-integration.test.tsx

@@ -0,0 +1,77 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeQuickPresets } from './ThemeQuickPresets';
+import react from 'react';
+
+vi.mock('../../../lib/svg/themes', () => ({
+  themes: {
+    dark: {
+      bg: '000000',
+      text: 'ffffff',
+      accent: '00ff00',
+    },
+    light: {
+      bg: 'ffffff',
+      text: '000000',
+      accent: '0066ff',
+    },
+    neon: {
+      bg: '111111',
+      text: 'ffffff',
+      accent: 'ff00ff',
+    },
+  },
+}));
+
+vi.mock('../types', () => ({
+  THEME_KEYS: ['dark', 'light', 'neon', 'auto', 'random'],
+}));
+
+describe('ThemeQuickPresets', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders only selectable themes', () => {
+    render(<ThemeQuickPresets theme="dark" onThemeChange={vi.fn()} />);
+
+    expect(screen.getByLabelText('Apply dark theme')).toBeInTheDocument();
+    expect(screen.getByLabelText('Apply light theme')).toBeInTheDocument();
+    expect(screen.getByLabelText('Apply neon theme')).toBeInTheDocument();
+
+    expect(screen.queryByLabelText('Apply auto theme')).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Apply random theme')).not.toBeInTheDocument();
+  });
+
+  it('marks active theme with aria-pressed', () => {
+    render(<ThemeQuickPresets theme="light" onThemeChange={vi.fn()} />);
+
+    expect(screen.getByLabelText('Apply light theme')).toHaveAttribute('aria-pressed', 'true');
+
+    expect(screen.getByLabelText('Apply dark theme')).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('calls onThemeChange when clicked', () => {
+    const onThemeChange = vi.fn();
+
+    render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
+
+    fireEvent.click(screen.getByLabelText('Apply neon theme'));
+
+    expect(onThemeChange).toHaveBeenCalledTimes(1);
+    expect(onThemeChange).toHaveBeenCalledWith('neon');
+  });
+
+  it('renders one button for every selectable theme', () => {
+    render(<ThemeQuickPresets theme="dark" onThemeChange={vi.fn()} />);
+
+    expect(screen.getAllByRole('button')).toHaveLength(3);
+  });
+
+  it('shows active theme styling', () => {
+    render(<ThemeQuickPresets theme="dark" onThemeChange={vi.fn()} />);
+
+    expect(screen.getByLabelText('Apply dark theme')).toHaveClass('tqp-on');
+    expect(screen.getByLabelText('Apply light theme')).not.toHaveClass('tqp-on');
+  });
+});