test(ui): verify responsive rendering of ThemeQuickPresets

Author: aarushlohit

app/customize/components/ThemeQuickPresets.test.tsx

@@ -1,8 +1,8 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { ThemeQuickPresets } from './ThemeQuickPresets';
 import { THEME_KEYS } from '../types';
+import { themes } from '../../../lib/svg/themes';
 
 const validKeys = THEME_KEYS.filter((k) => k !== 'auto' && k !== 'random');
 
@@ -40,13 +40,41 @@ describe('ThemeQuickPresets', () => {
   });
 
   it('clicking a button calls onThemeChange with correct theme key', async () => {
-    const user = userEvent.setup();
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
     const inactiveKey = validKeys.find((k) => k !== 'dark')!;
     const inactiveBtn = screen.getByRole('button', {
       name: new RegExp(`apply ${inactiveKey} theme`, 'i'),
     });
-    await user.click(inactiveBtn);
+    fireEvent.click(inactiveBtn);
     expect(onThemeChange).toHaveBeenCalledWith(inactiveKey);
   });
 });
+
+describe('ThemeQuickPresets responsive rendering', () => {
+  const onThemeChange = vi.fn();
+
+  beforeEach(() => {
+    onThemeChange.mockClear();
+  });
+
+  it('renders every preset with accessible labels, high-contrast styling, and wrap layout', () => {
+    render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
+
+    const presetButtons = screen.getAllByRole('button', { name: /apply .+ theme/i });
+    expect(presetButtons).toHaveLength(validKeys.length);
+
+    expect(
+      screen.getByRole('button', { name: /apply dark theme/i }).getAttribute('aria-pressed')
+    ).toBe('true');
+
+    const highContrastButton = screen.getByRole('button', { name: /apply highcontrast theme/i });
+    expect(highContrastButton).toBeDefined();
+    expect(highContrastButton.getAttribute('title')).toBe('Highcontrast');
+    expect(highContrastButton.getAttribute('style')).toContain('rgb(10, 10, 10)');
+
+    const grid = highContrastButton.closest('div');
+    expect(grid).not.toBeNull();
+    expect(grid?.style.display).toBe('flex');
+    expect(grid?.style.flexWrap).toBe('wrap');
+  });
+});