components.spec.tsx 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. // @vitest-environment jsdom
  2. import { afterEach, describe, expect, it, vi } from 'vitest'
  3. import { cleanup, render, screen } from '@testing-library/react'
  4. import type { GeneralSectionComponentProps } from '../src/client/GeneralSection.tsx'
  5. import { GeneralSection } from '../src/client/GeneralSection.tsx'
  6. import { CloseLabel, HeaderContent, TriggerContent } from '../src/client/chrome.tsx'
  7. import { en } from '../src/client/locales.ts'
  8. afterEach(cleanup)
  9. const t = (key: string) => en[key] ?? key
  10. // Global standard kit stubs: none of these components consume the hooks.
  11. const unusedHook = (() => { throw new Error('unused by settings-general components') }) as never
  12. const kit = { useSessions: unusedHook, useWorkspaces: unusedHook }
  13. describe('chrome content', () => {
  14. it('TriggerContent renders the icon with the label in the wide column', () => {
  15. const { container } = render(<TriggerContent {...kit} wide t={t} />)
  16. expect(container.querySelector('svg')).toBeTruthy()
  17. expect(screen.getByText('Settings')).toBeTruthy()
  18. })
  19. it('TriggerContent drops the label in the rail state', () => {
  20. const { container } = render(<TriggerContent {...kit} wide={false} t={t} />)
  21. expect(container.querySelector('svg')).toBeTruthy()
  22. expect(screen.queryByText('Settings')).toBeNull()
  23. })
  24. it('HeaderContent and CloseLabel render their translated text', () => {
  25. render(<HeaderContent {...kit} t={t} />)
  26. render(<CloseLabel {...kit} t={t} />)
  27. expect(screen.getByText('Settings')).toBeTruthy()
  28. expect(screen.getByText('Close')).toBeTruthy()
  29. })
  30. })
  31. describe('GeneralSection', () => {
  32. function mount() {
  33. const renderSlot = vi.fn(
  34. ((key: string) => <div data-testid={`slot-${key}`} />) as GeneralSectionComponentProps['renderSlot'],
  35. )
  36. const props: GeneralSectionComponentProps = { ...kit, t, renderSlot }
  37. const view = render(<GeneralSection {...props} />)
  38. return { view, renderSlot }
  39. }
  40. it('renders the Permission skeleton row with the disabled selector', () => {
  41. mount()
  42. expect(screen.getByText('Permission')).toBeTruthy()
  43. expect(screen.getByText('Choose default permission mode')).toBeTruthy()
  44. const selector = screen.getByRole<HTMLButtonElement>('button', { name: /Read only/ })
  45. expect(selector.disabled).toBe(true)
  46. })
  47. it('renders the Tool Call skeleton cubes with schema pinned selected', () => {
  48. mount()
  49. expect(screen.getByText('Tool Call')).toBeTruthy()
  50. const schema = screen.getByText('Schema mode')
  51. const code = screen.getByText('Code mode')
  52. expect(schema.parentElement!.className).toContain('selected')
  53. expect(code.parentElement!.className).not.toContain('selected')
  54. expect(screen.getByText('Traditional function calling — invoke tools one at a time')).toBeTruthy()
  55. expect(screen.getByText('Chain multiple tools with code — multi-step orchestration')).toBeTruthy()
  56. })
  57. it('renders the feature-contributed item slot after the skeleton rows', () => {
  58. const { renderSlot } = mount()
  59. expect(renderSlot).toHaveBeenCalledWith('settings.general.item', {})
  60. expect(screen.getByTestId('slot-settings.general.item')).toBeTruthy()
  61. })
  62. })