test(customize): add additional coverage for ThemeSelector component

Author: Subhooo5

app/customize/components/ThemeSelector.test.tsx

@@ -2,6 +2,7 @@ import { describe, it, expect, vi, afterEach } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { ThemeSelector } from './ThemeSelector';
 import { THEME_KEYS } from '../types';
+import userEvent from '@testing-library/user-event';
 
 describe('ThemeSelector', () => {
   const onThemeChange = vi.fn();
@@ -40,4 +41,35 @@ describe('ThemeSelector', () => {
     render(<ThemeSelector theme="dark" onThemeChange={onThemeChange} />);
     screen.getByText(/bg · accent · text/i);
   });
+
+  it('renders the Shuffle button', () => {
+    render(<ThemeSelector theme="dark" onThemeChange={onThemeChange} />);
+    expect(screen.getByTitle('Pick a random theme')).toBeTruthy();
+  });
+
+  it('clicking Shuffle calls onThemeChange with a valid theme key', async () => {
+    const user = userEvent.setup();
+    render(<ThemeSelector theme="dark" onThemeChange={onThemeChange} />);
+    const shuffleBtn = screen.getByTitle('Pick a random theme');
+    await user.click(shuffleBtn);
+    expect(onThemeChange).toHaveBeenCalledTimes(1);
+    const calledWith = onThemeChange.mock.calls[0][0];
+    expect(THEME_KEYS).toContain(calledWith);
+    expect(calledWith).not.toBe('auto');
+    expect(calledWith).not.toBe('random');
+  });
+
+  it('changing the select calls onThemeChange with the selected value', async () => {
+    const user = userEvent.setup();
+    render(<ThemeSelector theme="dark" onThemeChange={onThemeChange} />);
+    const select = screen.getByRole('combobox');
+    await user.selectOptions(select, 'neon');
+    expect(onThemeChange).toHaveBeenCalledWith('neon');
+  });
+
+  it('renders color swatches for a normal theme', () => {
+    render(<ThemeSelector theme="dark" onThemeChange={onThemeChange} />);
+    const swatches = screen.getAllByTitle(/^(bg|accent|text):/i);
+    expect(swatches.length).toBe(3);
+  });
 });