@moontra/moonui 5.0.0 → 5.1.0

package/src/components/ui/__tests__/command.test.tsx

@@ -12,23 +12,43 @@ import {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-  commandVariants,
-  commandInputVariants,
-  commandListVariants,
-  commandGroupVariants,
-  commandItemVariants,
 } from '../command'
 
-// Mock Dialog component
-jest.mock('./dialog', () => ({
-  Dialog: ({ children, open, ...props }: any) => (
-    <div data-testid="dialog" data-open={open ? 'true' : 'false'} {...props}>{children}</div>
+// Dialog mock — CommandDialog kaynakta Dialog + DialogContent + DialogTitle kullanır.
+// Üçü de mock'lanmalı; eksik biri `undefined` element type hatası verir.
+jest.mock('../dialog', () => ({
+  Dialog: ({ children, open, onOpenChange, ...props }: any) => (
+    <div
+      data-testid="dialog"
+      data-open={open ? 'true' : 'false'}
+      data-has-open-change={onOpenChange ? 'true' : 'false'}
+      {...props}
+    >
+      {children}
+    </div>
   ),
-  DialogContent: ({ children, className, ...props }: React.ComponentProps<'div'>) => (
-    <div data-testid="dialog-content" className={className} {...props}>{children}</div>
+  DialogContent: ({ children, className, ...props }: any) => {
+    // hideCloseButton gerçek DialogContent'in prop'u; mock'taki div'e sızarsa React uyarır
+    delete props.hideCloseButton
+    return <div data-testid="dialog-content" className={className} {...props}>{children}</div>
+  },
+  DialogTitle: ({ children, className, ...props }: any) => (
+    <div data-testid="dialog-title" className={className} {...props}>{children}</div>
   ),
 }))
 
+// jsdom `Element.prototype.scrollIntoView` implement etmez; cmdk bir item seçildiğinde
+// bunu çağırır. Polyfill olmadan her item render'ı TypeError ile patlar.
+beforeAll(() => {
+  ;(Element.prototype as any).scrollIntoView = jest.fn()
+})
+
+// cmdk alt bileşenleri (Input/List/Empty/Group/Item/Separator) Command kökündeki context
+// store'a bağlıdır; kök olmadan render edilirlerse "Cannot read properties of undefined
+// (reading 'subscribe')" ile patlar. Tüm alt bileşen testleri bu yardımcı ile sarılır.
+const renderInCommand = (ui: React.ReactNode, commandProps: Record<string, unknown> = {}) =>
+  render(<Command {...commandProps}>{ui}</Command>)
+
 describe('Command Components', () => {
   describe('Command Component', () => {
     it('renders correctly with default props', () => {
@@ -82,21 +102,21 @@ describe('Command Components', () => {
       render(<Command size="sm" data-testid="command">Content</Command>)
 
       const command = screen.getByTestId('command')
-      expect(command).toHaveClass('p-2')
+      expect(command).toHaveClass('min-h-[200px]')
     })
 
     it('renders default size correctly', () => {
       render(<Command data-testid="command">Content</Command>)
 
       const command = screen.getByTestId('command')
-      expect(command).toHaveClass('p-4')
+      expect(command).toHaveClass('min-h-[300px]')
     })
 
     it('renders lg size correctly', () => {
       render(<Command size="lg" data-testid="command">Content</Command>)
 
       const command = screen.getByTestId('command')
-      expect(command).toHaveClass('p-6')
+      expect(command).toHaveClass('min-h-[400px]')
     })
 
     it('passes through HTML attributes', () => {
@@ -119,6 +139,9 @@ describe('Command Components', () => {
       const dialogContent = screen.getByTestId('dialog-content')
       expect(dialog).toBeInTheDocument()
       expect(dialogContent).toBeInTheDocument()
+      // Erişilebilirlik: dialog'un sr-only başlığı her zaman render edilir
+      expect(screen.getByTestId('dialog-title')).toHaveTextContent('Command Menu')
+      expect(screen.getByText('Dialog Content')).toBeInTheDocument()
     })
 
     it('applies custom commandClassName', () => {
@@ -142,12 +165,14 @@ describe('Command Components', () => {
 
       const dialog = screen.getByTestId('dialog')
       expect(dialog).toHaveAttribute('data-open', 'true')
+      // onOpenChange alttaki Dialog'a iletilmeli (CommandDialog kendisi tüketmemeli)
+      expect(dialog).toHaveAttribute('data-has-open-change', 'true')
     })
   })
 
   describe('CommandInput Component', () => {
     it('renders correctly with default props', () => {
-      render(<CommandInput data-testid="command-input" />)
+      renderInCommand(<CommandInput data-testid="command-input" />)
 
       const input = screen.getByTestId('command-input')
       expect(input).toBeInTheDocument()
@@ -157,7 +182,7 @@ describe('Command Components', () => {
     })
 
     it('renders search icon', () => {
-      render(<CommandInput />)
+      renderInCommand(<CommandInput />)
 
       const searchIcon = document.querySelector('svg')
       expect(searchIcon).toBeInTheDocument()
@@ -165,7 +190,7 @@ describe('Command Components', () => {
     })
 
     it('applies custom className', () => {
-      render(<CommandInput className="custom-input" data-testid="command-input" />)
+      renderInCommand(<CommandInput className="custom-input" data-testid="command-input" />)
 
       const input = screen.getByTestId('command-input')
       expect(input).toHaveClass('custom-input')
@@ -173,7 +198,7 @@ describe('Command Components', () => {
 
     it('forwards ref correctly', () => {
       const ref = React.createRef<HTMLInputElement>()
-      render(<CommandInput ref={ref} />)
+      renderInCommand(<CommandInput ref={ref} />)
 
       expect(ref.current).toBeInstanceOf(HTMLInputElement)
     })
@@ -182,41 +207,61 @@ describe('Command Components', () => {
       expect(CommandInput.displayName).toBe('CommandInput')
     })
 
-    it('renders minimal variant correctly', () => {
-      render(<CommandInput variant="minimal" data-testid="command-input" />)
+    it('renders inside the cmdk input wrapper', () => {
+      renderInCommand(<CommandInput data-testid="command-input" />)
 
       const input = screen.getByTestId('command-input')
-      expect(input).toHaveClass('h-9')
-    })
-
-    it('renders bordered variant correctly', () => {
-      render(<CommandInput variant="bordered" data-testid="command-input" />)
+      const wrapper = input.closest('[cmdk-input-wrapper]')
+      expect(wrapper).toBeInTheDocument()
+      expect(wrapper).toHaveClass('flex items-center border-b px-3')
+      // Arama ikonu wrapper içinde, input'tan önce yer alır
+      expect(wrapper?.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('exposes combobox ARIA wiring', () => {
+      renderInCommand(
+        <>
+          <CommandInput data-testid="command-input" />
+          <CommandList data-testid="command-list" />
+        </>
+      )
 
       const input = screen.getByTestId('command-input')
-      expect(input).toHaveClass('border-b border-border')
+      expect(input).toHaveAttribute('role', 'combobox')
+      expect(input).toHaveAttribute('aria-autocomplete', 'list')
+      expect(input).toHaveAttribute('aria-expanded', 'true')
+      // aria-controls, listenin id'sini işaret etmeli
+      expect(input).toHaveAttribute('aria-controls', screen.getByTestId('command-list').id)
     })
 
     it('handles input events', () => {
-      const onChange = jest.fn()
-      render(<CommandInput onChange={onChange} />)
+      // cmdk input'u kontrollüdür ve kendi onChange'ini bağlar; tüketici arama değerini
+      // `onValueChange` ile alır.
+      const onValueChange = jest.fn()
+      renderInCommand(<CommandInput onValueChange={onValueChange} data-testid="command-input" />)
 
-      const input = screen.getByRole('textbox')
+      const input = screen.getByTestId('command-input')
       fireEvent.change(input, { target: { value: 'test' } })
-      expect(onChange).toHaveBeenCalled()
+
+      expect(onValueChange).toHaveBeenCalledWith('test')
+      expect(input).toHaveValue('test')
     })
 
     it('passes through HTML attributes', () => {
-      render(<CommandInput placeholder="Search..." id="search-input" />)
+      // NOT: `id` cmdk tarafından label eşleşmesi için üretilir ve override edilir;
+      // diğer HTML attribute'ları olduğu gibi input'a geçer.
+      renderInCommand(<CommandInput placeholder="Search..." name="search-input" maxLength={20} />)
 
-      const input = screen.getByRole('textbox')
+      const input = screen.getByRole('combobox')
       expect(input).toHaveAttribute('placeholder', 'Search...')
-      expect(input).toHaveAttribute('id', 'search-input')
+      expect(input).toHaveAttribute('name', 'search-input')
+      expect(input).toHaveAttribute('maxlength', '20')
     })
   })
 
   describe('CommandList Component', () => {
     it('renders correctly with default props', () => {
-      render(<CommandList data-testid="command-list">List Content</CommandList>)
+      renderInCommand(<CommandList data-testid="command-list">List Content</CommandList>)
 
       const list = screen.getByTestId('command-list')
       expect(list).toBeInTheDocument()
@@ -225,7 +270,7 @@ describe('Command Components', () => {
     })
 
     it('applies custom className', () => {
-      render(<CommandList className="custom-list" data-testid="command-list">Content</CommandList>)
+      renderInCommand(<CommandList className="custom-list" data-testid="command-list">Content</CommandList>)
 
       const list = screen.getByTestId('command-list')
       expect(list).toHaveClass('custom-list')
@@ -233,7 +278,7 @@ describe('Command Components', () => {
 
     it('forwards ref correctly', () => {
       const ref = React.createRef<HTMLDivElement>()
-      render(<CommandList ref={ref}>Content</CommandList>)
+      renderInCommand(<CommandList ref={ref}>Content</CommandList>)
 
       expect(ref.current).toBeInstanceOf(HTMLDivElement)
     })
@@ -242,31 +287,41 @@ describe('Command Components', () => {
       expect(CommandList.displayName).toBe('CommandList')
     })
 
-    it('renders scrollable variant correctly', () => {
-      render(<CommandList variant="scrollable" data-testid="command-list">Content</CommandList>)
+    it('wraps children in the cmdk list sizer', () => {
+      renderInCommand(<CommandList data-testid="command-list">List Content</CommandList>)
 
       const list = screen.getByTestId('command-list')
-      expect(list).toHaveClass('max-h-[400px]')
+      const sizer = list.querySelector('[cmdk-list-sizer]')
+      expect(sizer).toBeInTheDocument()
+      expect(sizer).toHaveTextContent('List Content')
     })
 
-    it('renders compact variant correctly', () => {
-      render(<CommandList variant="compact" data-testid="command-list">Content</CommandList>)
+    it('uses the default accessible label and honours a custom one', () => {
+      const { unmount } = renderInCommand(<CommandList data-testid="command-list">Content</CommandList>)
+      expect(screen.getByTestId('command-list')).toHaveAttribute('aria-label', 'Suggestions')
+      unmount()
 
-      const list = screen.getByTestId('command-list')
-      expect(list).toHaveClass('max-h-[200px]')
+      renderInCommand(<CommandList label="Results" data-testid="command-list">Content</CommandList>)
+      expect(screen.getByTestId('command-list')).toHaveAttribute('aria-label', 'Results')
     })
 
     it('passes through HTML attributes', () => {
-      render(<CommandList data-testid="command-list" id="list-1">Content</CommandList>)
+      // NOT: `id` cmdk tarafından input'un aria-controls'ü için üretilir; diğer
+      // attribute'lar olduğu gibi geçer.
+      renderInCommand(<CommandList data-testid="command-list" title="Command list">Content</CommandList>)
 
       const list = screen.getByTestId('command-list')
-      expect(list).toHaveAttribute('id', 'list-1')
+      expect(list).toHaveAttribute('title', 'Command list')
     })
   })
 
   describe('CommandEmpty Component', () => {
     it('renders correctly with default props', () => {
-      render(<CommandEmpty data-testid="command-empty">No results</CommandEmpty>)
+      renderInCommand(
+        <CommandList>
+          <CommandEmpty data-testid="command-empty">No results</CommandEmpty>
+        </CommandList>
+      )
 
       const empty = screen.getByTestId('command-empty')
       expect(empty).toBeInTheDocument()
@@ -274,7 +329,11 @@ describe('Command Components', () => {
     })
 
     it('applies custom className', () => {
-      render(<CommandEmpty className="custom-empty" data-testid="command-empty">No results</CommandEmpty>)
+      renderInCommand(
+        <CommandList>
+          <CommandEmpty className="custom-empty" data-testid="command-empty">No results</CommandEmpty>
+        </CommandList>
+      )
 
       const empty = screen.getByTestId('command-empty')
       expect(empty).toHaveClass('custom-empty')
@@ -282,7 +341,11 @@ describe('Command Components', () => {
 
     it('forwards ref correctly', () => {
       const ref = React.createRef<HTMLDivElement>()
-      render(<CommandEmpty ref={ref}>No results</CommandEmpty>)
+      renderInCommand(
+        <CommandList>
+          <CommandEmpty ref={ref}>No results</CommandEmpty>
+        </CommandList>
+      )
 
       expect(ref.current).toBeInstanceOf(HTMLDivElement)
     })
@@ -292,7 +355,11 @@ describe('Command Components', () => {
     })
 
     it('passes through HTML attributes', () => {
-      render(<CommandEmpty data-testid="command-empty" id="empty-1">No results</CommandEmpty>)
+      renderInCommand(
+        <CommandList>
+          <CommandEmpty data-testid="command-empty" id="empty-1">No results</CommandEmpty>
+        </CommandList>
+      )
 
       const empty = screen.getByTestId('command-empty')
       expect(empty).toHaveAttribute('id', 'empty-1')
@@ -301,7 +368,7 @@ describe('Command Components', () => {
 
   describe('CommandGroup Component', () => {
     it('renders correctly with default props', () => {
-      render(<CommandGroup data-testid="command-group">Group Content</CommandGroup>)
+      renderInCommand(<CommandGroup data-testid="command-group">Group Content</CommandGroup>)
 
       const group = screen.getByTestId('command-group')
       expect(group).toBeInTheDocument()
@@ -309,7 +376,7 @@ describe('Command Components', () => {
     })
 
     it('applies custom className', () => {
-      render(<CommandGroup className="custom-group" data-testid="command-group">Content</CommandGroup>)
+      renderInCommand(<CommandGroup className="custom-group" data-testid="command-group">Content</CommandGroup>)
 
       const group = screen.getByTestId('command-group')
       expect(group).toHaveClass('custom-group')
@@ -317,7 +384,7 @@ describe('Command Components', () => {
 
     it('forwards ref correctly', () => {
       const ref = React.createRef<HTMLDivElement>()
-      render(<CommandGroup ref={ref}>Content</CommandGroup>)
+      renderInCommand(<CommandGroup ref={ref}>Content</CommandGroup>)
 
       expect(ref.current).toBeInstanceOf(HTMLDivElement)
     })
@@ -327,40 +394,55 @@ describe('Command Components', () => {
     })
 
     it('renders heading when provided', () => {
-      render(
+      renderInCommand(
         <CommandGroup heading="Group Title" data-testid="command-group">
           Group Content
         </CommandGroup>
       )
 
-      expect(screen.getByText('Group Title')).toBeInTheDocument()
       const heading = screen.getByText('Group Title')
-      expect(heading).toHaveClass('px-2 py-1.5 text-xs font-medium text-muted-foreground')
+      expect(heading).toBeInTheDocument()
+      expect(heading).toHaveAttribute('cmdk-group-heading', '')
+      // Başlık stilleri, group üzerindeki arbitrary-variant sınıflarıyla verilir
+      const group = screen.getByTestId('command-group')
+      expect(group).toHaveClass('[&_[cmdk-group-heading]]:px-2')
+      expect(group).toHaveClass('[&_[cmdk-group-heading]]:py-1.5')
+      expect(group).toHaveClass('[&_[cmdk-group-heading]]:text-xs')
+      expect(group).toHaveClass('[&_[cmdk-group-heading]]:font-medium')
+      expect(group).toHaveClass('[&_[cmdk-group-heading]]:text-muted-foreground')
     })
 
     it('renders without heading', () => {
-      render(<CommandGroup data-testid="command-group">Group Content</CommandGroup>)
+      renderInCommand(<CommandGroup data-testid="command-group">Group Content</CommandGroup>)
 
       const group = screen.getByTestId('command-group')
-      expect(group.querySelector('.px-2.py-1\\.5')).not.toBeInTheDocument()
+      expect(group.querySelector('[cmdk-group-heading]')).not.toBeInTheDocument()
     })
 
-    it('renders separated variant correctly', () => {
-      render(<CommandGroup variant="separated" data-testid="command-group">Content</CommandGroup>)
+    it('renders items inside a labelled group container', () => {
+      renderInCommand(
+        <CommandGroup heading="Group Title" data-testid="command-group">
+          <CommandItem value="a">Item A</CommandItem>
+        </CommandGroup>
+      )
 
       const group = screen.getByTestId('command-group')
-      expect(group).toHaveClass('mt-2 border-t border-border pt-2')
+      const items = group.querySelector('[cmdk-group-items]')
+      expect(items).toBeInTheDocument()
+      expect(items).toHaveAttribute('role', 'group')
+      // Başlık, item konteynerine aria-labelledby ile bağlanır
+      expect(items).toHaveAttribute('aria-labelledby', screen.getByText('Group Title').id)
     })
 
-    it('renders indented variant correctly', () => {
-      render(<CommandGroup variant="indented" data-testid="command-group">Content</CommandGroup>)
+    it('marks the group as presentation for assistive tech', () => {
+      renderInCommand(<CommandGroup data-testid="command-group">Content</CommandGroup>)
 
       const group = screen.getByTestId('command-group')
-      expect(group).toHaveClass('pl-4')
+      expect(group).toHaveAttribute('role', 'presentation')
     })
 
     it('passes through HTML attributes', () => {
-      render(<CommandGroup data-testid="command-group" id="group-1">Content</CommandGroup>)
+      renderInCommand(<CommandGroup data-testid="command-group" id="group-1">Content</CommandGroup>)
 
       const group = screen.getByTestId('command-group')
       expect(group).toHaveAttribute('id', 'group-1')
@@ -369,7 +451,7 @@ describe('Command Components', () => {
 
   describe('CommandItem Component', () => {
     it('renders correctly with default props', () => {
-      render(<CommandItem data-testid="command-item">Item Content</CommandItem>)
+      renderInCommand(<CommandItem data-testid="command-item">Item Content</CommandItem>)
 
       const item = screen.getByTestId('command-item')
       expect(item).toBeInTheDocument()
@@ -378,7 +460,7 @@ describe('Command Components', () => {
     })
 
     it('applies custom className', () => {
-      render(<CommandItem className="custom-item" data-testid="command-item">Content</CommandItem>)
+      renderInCommand(<CommandItem className="custom-item" data-testid="command-item">Content</CommandItem>)
 
       const item = screen.getByTestId('command-item')
       expect(item).toHaveClass('custom-item')
@@ -386,7 +468,7 @@ describe('Command Components', () => {
 
     it('forwards ref correctly', () => {
       const ref = React.createRef<HTMLDivElement>()
-      render(<CommandItem ref={ref}>Content</CommandItem>)
+      renderInCommand(<CommandItem ref={ref}>Content</CommandItem>)
 
       expect(ref.current).toBeInstanceOf(HTMLDivElement)
     })
@@ -396,22 +478,28 @@ describe('Command Components', () => {
     })
 
     it('handles selected state', () => {
-      render(<CommandItem selected={true} data-testid="command-item">Content</CommandItem>)
+      // Seçim, Command kökünün `value`'su ile item'ın value'sunun eşleşmesiyle olur.
+      renderInCommand(
+        <CommandItem value="test-value" data-testid="command-item">Content</CommandItem>,
+        { value: 'test-value' }
+      )
 
       const item = screen.getByTestId('command-item')
       expect(item).toHaveAttribute('aria-selected', 'true')
+      expect(item).toHaveAttribute('data-selected', 'true')
     })
 
     it('handles disabled state', () => {
-      render(<CommandItem disabled={true} data-testid="command-item">Content</CommandItem>)
+      renderInCommand(<CommandItem disabled={true} data-testid="command-item">Content</CommandItem>)
 
       const item = screen.getByTestId('command-item')
-      expect(item).toHaveAttribute('data-disabled', '')
+      expect(item).toHaveAttribute('data-disabled', 'true')
+      expect(item).toHaveAttribute('aria-disabled', 'true')
     })
 
     it('handles click events with onSelect', () => {
       const onSelect = jest.fn()
-      render(
+      renderInCommand(
         <CommandItem onSelect={onSelect} value="test-value" data-testid="command-item">
           Content
         </CommandItem>
@@ -424,7 +512,7 @@ describe('Command Components', () => {
 
     it('does not call onSelect when disabled', () => {
       const onSelect = jest.fn()
-      render(
+      renderInCommand(
         <CommandItem onSelect={onSelect} disabled={true} value="test-value" data-testid="command-item">
           Content
         </CommandItem>
@@ -435,25 +523,46 @@ describe('Command Components', () => {
       expect(onSelect).not.toHaveBeenCalled()
     })
 
-    it('renders subtle variant correctly', () => {
-      render(<CommandItem variant="subtle" data-testid="command-item">Content</CommandItem>)
+    it('filters out items that do not match the search', () => {
+      renderInCommand(
+        <>
+          <CommandInput data-testid="command-input" />
+          <CommandList>
+            <CommandItem value="apple">Apple</CommandItem>
+            <CommandItem value="banana">Banana</CommandItem>
+          </CommandList>
+        </>
+      )
+
+      expect(screen.getByText('Apple')).toBeInTheDocument()
+      expect(screen.getByText('Banana')).toBeInTheDocument()
 
-      const item = screen.getByTestId('command-item')
-      expect(item).toHaveClass('aria-selected:bg-accent/10')
+      fireEvent.change(screen.getByTestId('command-input'), { target: { value: 'ban' } })
+
+      expect(screen.queryByText('Apple')).not.toBeInTheDocument()
+      expect(screen.getByText('Banana')).toBeInTheDocument()
     })
 
-    it('renders ghost variant correctly', () => {
-      render(<CommandItem variant="ghost" data-testid="command-item">Content</CommandItem>)
+    it('selects the active item with the Enter key', () => {
+      const onSelect = jest.fn()
+      render(
+        <Command value="calendar" data-testid="command">
+          <CommandList>
+            <CommandItem value="calendar" onSelect={onSelect}>Calendar</CommandItem>
+          </CommandList>
+        </Command>
+      )
 
-      const item = screen.getByTestId('command-item')
-      expect(item).toHaveClass('hover:bg-muted/10')
+      fireEvent.keyDown(screen.getByTestId('command'), { key: 'Enter' })
+      expect(onSelect).toHaveBeenCalledWith('calendar')
     })
 
     it('passes through HTML attributes', () => {
-      render(<CommandItem data-testid="command-item" id="item-1">Content</CommandItem>)
+      // NOT: `id` cmdk tarafından aria-activedescendant için üretilir ve override edilir.
+      renderInCommand(<CommandItem data-testid="command-item" title="Item one">Content</CommandItem>)
 
       const item = screen.getByTestId('command-item')
-      expect(item).toHaveAttribute('id', 'item-1')
+      expect(item).toHaveAttribute('title', 'Item one')
     })
   })
 
@@ -487,15 +596,16 @@ describe('Command Components', () => {
 
   describe('CommandSeparator Component', () => {
     it('renders correctly with default props', () => {
-      render(<CommandSeparator data-testid="command-separator" />)
+      renderInCommand(<CommandSeparator data-testid="command-separator" />)
 
       const separator = screen.getByTestId('command-separator')
       expect(separator).toBeInTheDocument()
       expect(separator).toHaveClass('-mx-1 h-px bg-border')
+      expect(separator).toHaveAttribute('role', 'separator')
     })
 
     it('applies custom className', () => {
-      render(<CommandSeparator className="custom-separator" data-testid="command-separator" />)
+      renderInCommand(<CommandSeparator className="custom-separator" data-testid="command-separator" />)
 
       const separator = screen.getByTestId('command-separator')
       expect(separator).toHaveClass('custom-separator')
@@ -503,7 +613,7 @@ describe('Command Components', () => {
 
     it('forwards ref correctly', () => {
       const ref = React.createRef<HTMLDivElement>()
-      render(<CommandSeparator ref={ref} />)
+      renderInCommand(<CommandSeparator ref={ref} />)
 
       expect(ref.current).toBeInstanceOf(HTMLDivElement)
     })
@@ -513,42 +623,61 @@ describe('Command Components', () => {
     })
 
     it('passes through HTML attributes', () => {
-      render(<CommandSeparator data-testid="command-separator" id="separator-1" />)
+      renderInCommand(<CommandSeparator data-testid="command-separator" id="separator-1" />)
 
       const separator = screen.getByTestId('command-separator')
       expect(separator).toHaveAttribute('id', 'separator-1')
     })
   })
 
-  describe('Variant Functions', () => {
-    it('commandVariants generates correct classes', () => {
-      expect(commandVariants()).toContain('flex h-full w-full flex-col')
-      expect(commandVariants({ variant: 'glass' })).toContain('bg-background/80')
-      expect(commandVariants({ size: 'lg' })).toContain('p-6')
+  // Kaynakta yalnızca `commandVariants` (dışa aktarılmayan) CVA haritası vardır; alt
+  // bileşenlerin variant prop'u yoktur. Sınıf üretimi bu yüzden public API üzerinden,
+  // render edilen elemanların sınıfları üzerinden doğrulanır.
+  describe('Variant Classes', () => {
+    it('Command generates correct variant and size classes', () => {
+      const { unmount } = render(<Command data-testid="command">Content</Command>)
+      expect(screen.getByTestId('command')).toHaveClass('flex h-full w-full flex-col')
+      expect(screen.getByTestId('command')).toHaveClass('min-h-[300px]')
+      unmount()
+
+      const glass = render(<Command variant="glass" data-testid="command">Content</Command>)
+      expect(screen.getByTestId('command')).toHaveClass('bg-background/80')
+      glass.unmount()
+
+      render(<Command size="lg" data-testid="command">Content</Command>)
+      expect(screen.getByTestId('command')).toHaveClass('min-h-[400px]')
     })
 
-    it('commandInputVariants generates correct classes', () => {
-      expect(commandInputVariants()).toContain('flex h-11 w-full')
-      expect(commandInputVariants({ variant: 'minimal' })).toContain('h-9')
-      expect(commandInputVariants({ variant: 'bordered' })).toContain('border-b')
+    it('CommandInput generates correct classes', () => {
+      renderInCommand(<CommandInput data-testid="command-input" />)
+
+      expect(screen.getByTestId('command-input')).toHaveClass(
+        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm'
+      )
     })
 
-    it('commandListVariants generates correct classes', () => {
-      expect(commandListVariants()).toContain('max-h-[300px]')
-      expect(commandListVariants({ variant: 'scrollable' })).toContain('max-h-[400px]')
-      expect(commandListVariants({ variant: 'compact' })).toContain('max-h-[200px]')
+    it('CommandList generates correct classes', () => {
+      renderInCommand(<CommandList data-testid="command-list">Content</CommandList>)
+
+      expect(screen.getByTestId('command-list')).toHaveClass(
+        'max-h-[300px] overflow-y-auto overflow-x-hidden'
+      )
     })
 
-    it('commandGroupVariants generates correct classes', () => {
-      expect(commandGroupVariants()).toContain('overflow-hidden p-1')
-      expect(commandGroupVariants({ variant: 'separated' })).toContain('border-t')
-      expect(commandGroupVariants({ variant: 'indented' })).toContain('pl-4')
+    it('CommandGroup generates correct classes', () => {
+      renderInCommand(<CommandGroup data-testid="command-group">Content</CommandGroup>)
+
+      expect(screen.getByTestId('command-group')).toHaveClass('overflow-hidden p-1 text-foreground')
+      expect(screen.getByTestId('command-group')).toHaveClass('[&_[cmdk-group-heading]]:text-xs')
     })
 
-    it('commandItemVariants generates correct classes', () => {
-      expect(commandItemVariants()).toContain('relative flex cursor-default')
-      expect(commandItemVariants({ variant: 'subtle' })).toContain('aria-selected:bg-accent/10')
-      expect(commandItemVariants({ variant: 'ghost' })).toContain('hover:bg-muted/10')
+    it('CommandItem generates correct classes', () => {
+      renderInCommand(<CommandItem data-testid="command-item">Content</CommandItem>)
+
+      expect(screen.getByTestId('command-item')).toHaveClass(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm'
+      )
+      expect(screen.getByTestId('command-item')).toHaveClass('aria-selected:bg-accent')
     })
   })
 
@@ -561,11 +690,11 @@ describe('Command Components', () => {
             <CommandEmpty>No results found.</CommandEmpty>
             <CommandGroup heading="Suggestions">
               <CommandItem value="calendar">
-                Calendar
+                <span>Calendar</span>
                 <CommandShortcut>⌘C</CommandShortcut>
               </CommandItem>
               <CommandItem value="search">
-                Search
+                <span>Search</span>
                 <CommandShortcut>⌘S</CommandShortcut>
               </CommandItem>
             </CommandGroup>
@@ -583,6 +712,7 @@ describe('Command Components', () => {
       expect(screen.getByText('Suggestions')).toBeInTheDocument()
       expect(screen.getByText('Calendar')).toBeInTheDocument()
       expect(screen.getByText('⌘C')).toBeInTheDocument()
+      expect(screen.getAllByRole('option')).toHaveLength(4)
     })
 
     it('renders command dialog with all components', () => {
@@ -602,26 +732,38 @@ describe('Command Components', () => {
       expect(screen.getByTestId('dialog')).toBeInTheDocument()
       expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument()
       expect(screen.getByText('Actions')).toBeInTheDocument()
+      expect(screen.getByText('Action 1')).toBeInTheDocument()
     })
 
     it('handles all props and variants together', () => {
       render(
-        <Command variant="bordered" size="lg" className="custom-command" data-testid="command">
-          <CommandInput variant="bordered" className="custom-input" />
-          <CommandList variant="scrollable" className="custom-list">
-            <CommandGroup variant="separated" heading="Test Group">
-              <CommandItem variant="subtle" selected={true} value="test">
-                Test Item
+        <Command
+          variant="bordered"
+          size="lg"
+          value="test"
+          className="custom-command"
+          data-testid="command"
+        >
+          <CommandInput className="custom-input" data-testid="command-input" />
+          <CommandList className="custom-list" data-testid="command-list">
+            <CommandGroup heading="Test Group" data-testid="command-group">
+              <CommandItem value="test" data-testid="command-item">
+                <span>Test Item</span>
                 <CommandShortcut className="custom-shortcut">⌘T</CommandShortcut>
               </CommandItem>
             </CommandGroup>
-            <CommandSeparator className="custom-separator" />
+            <CommandSeparator className="custom-separator" data-testid="command-separator" />
           </CommandList>
         </Command>
       )
 
-      const command = screen.getByTestId('command')
-      expect(command).toHaveClass('custom-command border p-6')
+      expect(screen.getByTestId('command')).toHaveClass('custom-command border border-border min-h-[400px]')
+      expect(screen.getByTestId('command-input')).toHaveClass('custom-input')
+      expect(screen.getByTestId('command-list')).toHaveClass('custom-list')
+      expect(screen.getByTestId('command-separator')).toHaveClass('custom-separator')
+      expect(screen.getByText('⌘T')).toHaveClass('custom-shortcut')
+      // Command value'su item ile eşleştiği için item seçili render edilir
+      expect(screen.getByTestId('command-item')).toHaveAttribute('aria-selected', 'true')
     })
   })
 
@@ -634,16 +776,18 @@ describe('Command Components', () => {
     })
 
     it('handles command item without value', () => {
+      // value verilmediğinde cmdk item değerini children metninden türetir.
       const onSelect = jest.fn()
-      render(<CommandItem onSelect={onSelect} data-testid="command-item">Item</CommandItem>)
+      renderInCommand(<CommandItem onSelect={onSelect} data-testid="command-item">Item</CommandItem>)
 
       const item = screen.getByTestId('command-item')
+      expect(item).toHaveAttribute('data-value', 'Item')
       fireEvent.click(item)
-      expect(onSelect).not.toHaveBeenCalled()
+      expect(onSelect).toHaveBeenCalledWith('Item')
     })
 
     it('handles command group with complex heading', () => {
-      render(
+      renderInCommand(
         <CommandGroup heading={<span className="custom-heading">Complex Heading</span>}>
           Content
         </CommandGroup>
@@ -663,13 +807,13 @@ describe('Command Components', () => {
         </Command>
       )
 
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
     })
 
     it('handles disabled input', () => {
-      render(<CommandInput disabled placeholder="Disabled input" />)
+      renderInCommand(<CommandInput disabled placeholder="Disabled input" />)
 
-      const input = screen.getByRole('textbox')
+      const input = screen.getByRole('combobox')
       expect(input).toBeDisabled()
       expect(input).toHaveClass('disabled:cursor-not-allowed disabled:opacity-50')
     })