chore: update test case

web-app/src/containers/__tests__/ModelCombobox.test.tsx

@@ -1,4 +1,12 @@
-import { describe, it, expect, vi, beforeEach, beforeAll, afterAll } from 'vitest'
+import {
+  describe,
+  it,
+  expect,
+  vi,
+  beforeEach,
+  beforeAll,
+  afterAll,
+} from 'vitest'
 import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom/vitest'
@@ -11,7 +19,8 @@ vi.mock('@/i18n/react-i18next-compat', () => ({
     t: (key: string, options?: Record<string, string>) => {
       if (key === 'common:failedToLoadModels') return 'Failed to load models'
       if (key === 'common:loading') return 'Loading'
-      if (key === 'common:noModelsFoundFor') return `No models found for "${options?.searchValue}"`
+      if (key === 'common:noModelsFoundFor')
+        return `No models found for "${options?.searchValue}"`
       if (key === 'common:noModels') return 'No models available'
       return key
     },
@@ -118,16 +127,6 @@ describe('ModelCombobox', () => {
     expect(button).toBeDisabled()
   })
 
-  it('shows loading spinner in trigger button', () => {
-    act(() => {
-      render(<ModelCombobox {...defaultProps} loading />)
-    })
-    
-    const button = screen.getByRole('button')
-    const spinner = button.querySelector('.animate-spin')
-    expect(spinner).toBeInTheDocument()
-  })
-
   it('shows loading section when dropdown is opened during loading', async () => {
     const user = userEvent.setup()
     render(<ModelCombobox {...defaultProps} loading />)
@@ -138,7 +137,9 @@ describe('ModelCombobox', () => {
 
     // Wait for dropdown to appear and check loading section
     await waitFor(() => {
-      const dropdown = document.querySelector('[data-dropdown="model-combobox"]')
+      const dropdown = document.querySelector(
+        '[data-dropdown="model-combobox"]'
+      )
       expect(dropdown).toBeInTheDocument()
       expect(screen.getByText('Loading')).toBeInTheDocument()
     })
@@ -273,7 +274,9 @@ describe('ModelCombobox', () => {
     await user.click(button)
 
     await waitFor(() => {
-      const dropdown = document.querySelector('[data-dropdown="model-combobox"]')
+      const dropdown = document.querySelector(
+        '[data-dropdown="model-combobox"]'
+      )
       expect(dropdown).toBeInTheDocument()
     })
   })
@@ -287,7 +290,9 @@ describe('ModelCombobox', () => {
 
     expect(input).toHaveFocus()
     await waitFor(() => {
-      const dropdown = document.querySelector('[data-dropdown="model-combobox"]')
+      const dropdown = document.querySelector(
+        '[data-dropdown="model-combobox"]'
+      )
       expect(dropdown).toBeInTheDocument()
     })
   })
@@ -313,7 +318,9 @@ describe('ModelCombobox', () => {
 
     await waitFor(() => {
       // Dropdown should be open
-      const dropdown = document.querySelector('[data-dropdown="model-combobox"]')
+      const dropdown = document.querySelector(
+        '[data-dropdown="model-combobox"]'
+      )
       expect(dropdown).toBeInTheDocument()
 
       // Should show GPT models
@@ -344,10 +351,14 @@ describe('ModelCombobox', () => {
 
     await waitFor(() => {
       // Dropdown should be open
-      const dropdown = document.querySelector('[data-dropdown="model-combobox"]')
+      const dropdown = document.querySelector(
+        '[data-dropdown="model-combobox"]'
+      )
       expect(dropdown).toBeInTheDocument()
       // Should show empty state message
-      expect(screen.getByText('No models found for "nonexistent"')).toBeInTheDocument()
+      expect(
+        screen.getByText('No models found for "nonexistent"')
+      ).toBeInTheDocument()
     })
   })
 
@@ -385,7 +396,9 @@ describe('ModelCombobox', () => {
 
   it('displays error message in dropdown', async () => {
     const user = userEvent.setup()
-    render(<ModelCombobox {...defaultProps} error="Network connection failed" />)
+    render(
+      <ModelCombobox {...defaultProps} error="Network connection failed" />
+    )
 
     const input = screen.getByRole('textbox')
     // Click input to open dropdown
@@ -393,7 +406,9 @@ describe('ModelCombobox', () => {
 
     await waitFor(() => {
       // Dropdown should be open
-      const dropdown = document.querySelector('[data-dropdown="model-combobox"]')
+      const dropdown = document.querySelector(
+        '[data-dropdown="model-combobox"]'
+      )
       expect(dropdown).toBeInTheDocument()
       // Error messages should be displayed
       expect(screen.getByText('Failed to load models')).toBeInTheDocument()
@@ -404,7 +419,13 @@ describe('ModelCombobox', () => {
   it('calls onRefresh when refresh button is clicked', async () => {
     const user = userEvent.setup()
     const localMockOnRefresh = vi.fn()
-    render(<ModelCombobox {...defaultProps} error="Network error" onRefresh={localMockOnRefresh} />)
+    render(
+      <ModelCombobox
+        {...defaultProps}
+        error="Network error"
+        onRefresh={localMockOnRefresh}
+      />
+    )
 
     const input = screen.getByRole('textbox')
     // Click input to open dropdown
@@ -412,13 +433,19 @@ describe('ModelCombobox', () => {
 
     await waitFor(() => {
       // Dropdown should be open with error section
-      const dropdown = document.querySelector('[data-dropdown="model-combobox"]')
+      const dropdown = document.querySelector(
+        '[data-dropdown="model-combobox"]'
+      )
       expect(dropdown).toBeInTheDocument()
-      const refreshButton = document.querySelector('[aria-label="Refresh models"]')
+      const refreshButton = document.querySelector(
+        '[aria-label="Refresh models"]'
+      )
       expect(refreshButton).toBeInTheDocument()
     })
 
-    const refreshButton = document.querySelector('[aria-label="Refresh models"]')
+    const refreshButton = document.querySelector(
+      '[aria-label="Refresh models"]'
+    )
     if (refreshButton) {
       await user.click(refreshButton)
       expect(localMockOnRefresh).toHaveBeenCalledTimes(1)
@@ -435,7 +462,9 @@ describe('ModelCombobox', () => {
 
     expect(input).toHaveFocus()
     await waitFor(() => {
-      const dropdown = document.querySelector('[data-dropdown="model-combobox"]')
+      const dropdown = document.querySelector(
+        '[data-dropdown="model-combobox"]'
+      )
       expect(dropdown).toBeInTheDocument()
     })
   })
@@ -452,7 +481,9 @@ describe('ModelCombobox', () => {
 
     await waitFor(() => {
       // Dropdown should be open
-      const dropdown = document.querySelector('[data-dropdown="model-combobox"]')
+      const dropdown = document.querySelector(
+        '[data-dropdown="model-combobox"]'
+      )
       expect(dropdown).toBeInTheDocument()
     })
 
@@ -477,7 +508,9 @@ describe('ModelCombobox', () => {
 
     await waitFor(() => {
       // Dropdown should be open with filtered models
-      const dropdown = document.querySelector('[data-dropdown="model-combobox"]')
+      const dropdown = document.querySelector(
+        '[data-dropdown="model-combobox"]'
+      )
       expect(dropdown).toBeInTheDocument()
     })