test: improve Jotai atom test quality and add model-provider atoms tests

Replace dynamic imports with static imports in marketplace atom tests.
Convert type-only and not-toThrow assertions into proper state-change
verifications. Add comprehensive test suite for model-provider-page
atoms covering all four hooks, cross-hook interaction, selectAtom
granularity, and Provider isolation.

web/app/components/header/account-setting/model-provider-page/atoms.spec.tsx

@@ -0,0 +1,399 @@
+import type { ReactNode } from 'react'
+import { act, renderHook } from '@testing-library/react'
+import { Provider } from 'jotai'
+import { beforeEach, describe, expect, it } from 'vitest'
+import {
+  useExpandModelProviderList,
+  useModelProviderListExpanded,
+  useResetModelProviderListExpanded,
+  useSetModelProviderListExpanded,
+} from './atoms'
+
+const createWrapper = () => {
+  return ({ children }: { children: ReactNode }) => (
+    <Provider>{children}</Provider>
+  )
+}
+
+describe('atoms', () => {
+  let wrapper: ReturnType<typeof createWrapper>
+
+  beforeEach(() => {
+    wrapper = createWrapper()
+  })
+
+  // Read hook: returns whether a specific provider is expanded
+  describe('useModelProviderListExpanded', () => {
+    it('should return false when provider has not been expanded', () => {
+      const { result } = renderHook(
+        () => useModelProviderListExpanded('openai'),
+        { wrapper },
+      )
+
+      expect(result.current).toBe(false)
+    })
+
+    it('should return false for any unknown provider name', () => {
+      const { result } = renderHook(
+        () => useModelProviderListExpanded('nonexistent-provider'),
+        { wrapper },
+      )
+
+      expect(result.current).toBe(false)
+    })
+
+    it('should return true when provider has been expanded via setter', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          setExpanded: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setExpanded(true)
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+  })
+
+  // Setter hook: toggles expanded state for a specific provider
+  describe('useSetModelProviderListExpanded', () => {
+    it('should expand a provider when called with true', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('anthropic'),
+          setExpanded: useSetModelProviderListExpanded('anthropic'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setExpanded(true)
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+
+    it('should collapse a provider when called with false', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('anthropic'),
+          setExpanded: useSetModelProviderListExpanded('anthropic'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setExpanded(true)
+      })
+      act(() => {
+        result.current.setExpanded(false)
+      })
+
+      expect(result.current.expanded).toBe(false)
+    })
+
+    it('should not affect other providers when setting one', () => {
+      const { result } = renderHook(
+        () => ({
+          openaiExpanded: useModelProviderListExpanded('openai'),
+          anthropicExpanded: useModelProviderListExpanded('anthropic'),
+          setOpenai: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setOpenai(true)
+      })
+
+      expect(result.current.openaiExpanded).toBe(true)
+      expect(result.current.anthropicExpanded).toBe(false)
+    })
+  })
+
+  // Expand hook: expands any provider by name
+  describe('useExpandModelProviderList', () => {
+    it('should expand the specified provider', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('google'),
+          expand: useExpandModelProviderList(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('google')
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+
+    it('should expand multiple providers independently', () => {
+      const { result } = renderHook(
+        () => ({
+          openaiExpanded: useModelProviderListExpanded('openai'),
+          anthropicExpanded: useModelProviderListExpanded('anthropic'),
+          expand: useExpandModelProviderList(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('openai')
+      })
+      act(() => {
+        result.current.expand('anthropic')
+      })
+
+      expect(result.current.openaiExpanded).toBe(true)
+      expect(result.current.anthropicExpanded).toBe(true)
+    })
+
+    it('should not collapse already expanded providers when expanding another', () => {
+      const { result } = renderHook(
+        () => ({
+          openaiExpanded: useModelProviderListExpanded('openai'),
+          anthropicExpanded: useModelProviderListExpanded('anthropic'),
+          expand: useExpandModelProviderList(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('openai')
+      })
+      act(() => {
+        result.current.expand('anthropic')
+      })
+
+      expect(result.current.openaiExpanded).toBe(true)
+    })
+  })
+
+  // Reset hook: clears all expanded state back to empty
+  describe('useResetModelProviderListExpanded', () => {
+    it('should reset all expanded providers to false', () => {
+      const { result } = renderHook(
+        () => ({
+          openaiExpanded: useModelProviderListExpanded('openai'),
+          anthropicExpanded: useModelProviderListExpanded('anthropic'),
+          expand: useExpandModelProviderList(),
+          reset: useResetModelProviderListExpanded(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('openai')
+      })
+      act(() => {
+        result.current.expand('anthropic')
+      })
+      act(() => {
+        result.current.reset()
+      })
+
+      expect(result.current.openaiExpanded).toBe(false)
+      expect(result.current.anthropicExpanded).toBe(false)
+    })
+
+    it('should be safe to call when no providers are expanded', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          reset: useResetModelProviderListExpanded(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.reset()
+      })
+
+      expect(result.current.expanded).toBe(false)
+    })
+
+    it('should allow re-expanding providers after reset', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          expand: useExpandModelProviderList(),
+          reset: useResetModelProviderListExpanded(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('openai')
+      })
+      act(() => {
+        result.current.reset()
+      })
+      act(() => {
+        result.current.expand('openai')
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+  })
+
+  // Cross-hook interaction: verify hooks cooperate through the shared atom
+  describe('Cross-hook interaction', () => {
+    it('should reflect state set by useSetModelProviderListExpanded in useModelProviderListExpanded', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          setExpanded: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setExpanded(true)
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+
+    it('should reflect state set by useExpandModelProviderList in useModelProviderListExpanded', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('anthropic'),
+          expand: useExpandModelProviderList(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('anthropic')
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+
+    it('should allow useSetModelProviderListExpanded to collapse a provider expanded by useExpandModelProviderList', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          expand: useExpandModelProviderList(),
+          setExpanded: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('openai')
+      })
+      expect(result.current.expanded).toBe(true)
+
+      act(() => {
+        result.current.setExpanded(false)
+      })
+      expect(result.current.expanded).toBe(false)
+    })
+
+    it('should reset state set by useSetModelProviderListExpanded via useResetModelProviderListExpanded', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          setExpanded: useSetModelProviderListExpanded('openai'),
+          reset: useResetModelProviderListExpanded(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setExpanded(true)
+      })
+      act(() => {
+        result.current.reset()
+      })
+
+      expect(result.current.expanded).toBe(false)
+    })
+  })
+
+  // selectAtom granularity: changing one provider should not affect unrelated reads
+  describe('selectAtom granularity', () => {
+    it('should not cause unrelated provider reads to change when one provider is toggled', () => {
+      const { result } = renderHook(
+        () => ({
+          openai: useModelProviderListExpanded('openai'),
+          anthropic: useModelProviderListExpanded('anthropic'),
+          google: useModelProviderListExpanded('google'),
+          setOpenai: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper },
+      )
+
+      const anthropicBefore = result.current.anthropic
+      const googleBefore = result.current.google
+
+      act(() => {
+        result.current.setOpenai(true)
+      })
+
+      expect(result.current.openai).toBe(true)
+      expect(result.current.anthropic).toBe(anthropicBefore)
+      expect(result.current.google).toBe(googleBefore)
+    })
+
+    it('should keep individual provider states independent across multiple expansions and collapses', () => {
+      const { result } = renderHook(
+        () => ({
+          openai: useModelProviderListExpanded('openai'),
+          anthropic: useModelProviderListExpanded('anthropic'),
+          setOpenai: useSetModelProviderListExpanded('openai'),
+          setAnthropic: useSetModelProviderListExpanded('anthropic'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setOpenai(true)
+      })
+      act(() => {
+        result.current.setAnthropic(true)
+      })
+      act(() => {
+        result.current.setOpenai(false)
+      })
+
+      expect(result.current.openai).toBe(false)
+      expect(result.current.anthropic).toBe(true)
+    })
+  })
+
+  // Isolation: separate Provider instances have independent state
+  describe('Provider isolation', () => {
+    it('should have independent state across different Provider instances', () => {
+      const wrapper1 = createWrapper()
+      const wrapper2 = createWrapper()
+
+      const { result: result1 } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          setExpanded: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper: wrapper1 },
+      )
+
+      const { result: result2 } = renderHook(
+        () => useModelProviderListExpanded('openai'),
+        { wrapper: wrapper2 },
+      )
+
+      act(() => {
+        result1.current.setExpanded(true)
+      })
+
+      expect(result1.current.expanded).toBe(true)
+      expect(result2.current).toBe(false)
+    })
+  })
+})