test(app): add coverage for recent searches UI interactions (JhaSourav07#751)

* year selection

* recent searches

Author: kanishka-2007-tech

app/customize/components/ThemeSelector.tsx

@@ -20,7 +20,7 @@ function StyledSelect({
       id={id}
       value={value}
       onChange={(e) => onChange(e.target.value)}
-      className="w-full bg-gray-100/80 backdrop-blur-md border border-black/10 dark:bg-white/[0.03] dark:border-white/10 rounded-xl px-4 py-2.5 text-sm text-black dark:text-white outline-none focus:border-emerald-500/50 transition-colors appearance-none cursor-pointer"
+      className="w-full bg-gray-100/80 backdrop-blur-md border border-black/10 dark:bg-white/[0.03] dark:border-white/10 rounded-xl px-4 py-2.5 text-sm text-black dark:text-white outline-none focus:border-emerald-500/50 transition-colors appearance-none cursor-pointer [color-scheme:light] dark:[color-scheme:dark] [&>option]:bg-white [&>option]:text-black dark:[&>option]:bg-[#0a0a0a] dark:[&>option]:text-white"
     >
       {children}
     </select>

app/page.test.tsx

@@ -52,7 +52,7 @@ vi.mock('framer-motion', () => ({
 
 vi.mock('@/hooks/useRecentSearches', () => ({
   useRecentSearches: () => ({
-    searches: [],
+    searches: ['octocat', 'torvalds'],
     addSearch: vi.fn(),
     clearSearches: vi.fn(),
   }),
@@ -100,6 +100,19 @@ describe('LandingPage', () => {
     expect(input.value).toBe('');
   });
 
+  it('renders recent searches and applies a recent search when clicked', () => {
+    render(<LandingPage />);
+    const input = screen.getByPlaceholderText('Enter GitHub Username') as HTMLInputElement;
+    const octocatButton = screen.getByRole('button', { name: 'octocat' });
+
+    expect(octocatButton).toBeDefined();
+    expect(screen.getByRole('button', { name: 'Clear' })).toBeDefined();
+
+    fireEvent.click(octocatButton);
+
+    expect(input.value).toBe('octocat');
+  });
+
   it('renders an empty state before a username is entered', () => {
     render(<LandingPage />);