@moontra/moonui 3.0.1 → 3.2.0

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

@@ -0,0 +1,291 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+// Embla, jsdom'da boyut ölçemediği için (tüm elemanlar 0px) gerçek scroll davranışı
+// üretemez — API'yi deterministik test edebilmek için embla-carousel-react mock'lanır.
+jest.mock('embla-carousel-react', () => {
+  const mockApi = {
+    canScrollPrev: jest.fn(() => true),
+    canScrollNext: jest.fn(() => true),
+    scrollPrev: jest.fn(),
+    scrollNext: jest.fn(),
+    on: jest.fn(),
+    off: jest.fn(),
+  }
+  return {
+    __esModule: true,
+    default: jest.fn(() => [jest.fn(), mockApi]),
+    __mockApi: mockApi,
+  }
+})
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  useCarousel,
+} from '../carousel'
+
+const embla = jest.requireMock('embla-carousel-react') as {
+  default: jest.Mock
+  __mockApi: {
+    canScrollPrev: jest.Mock
+    canScrollNext: jest.Mock
+    scrollPrev: jest.Mock
+    scrollNext: jest.Mock
+    on: jest.Mock
+    off: jest.Mock
+  }
+}
+const mockApi = embla.__mockApi
+
+const renderCarousel = (props: React.ComponentProps<typeof Carousel> = {}) =>
+  render(
+    <Carousel data-testid="carousel" {...props}>
+      <CarouselContent data-testid="carousel-content">
+        <CarouselItem data-testid="carousel-item-1">Slide 1</CarouselItem>
+        <CarouselItem data-testid="carousel-item-2">Slide 2</CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious data-testid="carousel-previous" />
+      <CarouselNext data-testid="carousel-next" />
+    </Carousel>
+  )
+
+describe('Carousel Components', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockApi.canScrollPrev.mockReturnValue(true)
+    mockApi.canScrollNext.mockReturnValue(true)
+  })
+
+  describe('Carousel Root', () => {
+    it('renders with carousel accessibility attributes', () => {
+      renderCarousel()
+
+      const carousel = screen.getByTestId('carousel')
+      expect(carousel).toBeInTheDocument()
+      expect(carousel).toHaveAttribute('role', 'region')
+      expect(carousel).toHaveAttribute('aria-roledescription', 'carousel')
+    })
+
+    it('applies moonui-theme and custom className', () => {
+      renderCarousel({ className: 'custom-carousel' })
+
+      const carousel = screen.getByTestId('carousel')
+      expect(carousel).toHaveClass('moonui-theme', 'relative', 'custom-carousel')
+    })
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(
+        <Carousel ref={ref}>
+          <CarouselContent>
+            <CarouselItem>Slide 1</CarouselItem>
+          </CarouselContent>
+        </Carousel>
+      )
+
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('maintains displayName', () => {
+      expect(Carousel.displayName).toBe('Carousel')
+      expect(CarouselContent.displayName).toBe('CarouselContent')
+      expect(CarouselItem.displayName).toBe('CarouselItem')
+      expect(CarouselPrevious.displayName).toBe('CarouselPrevious')
+      expect(CarouselNext.displayName).toBe('CarouselNext')
+    })
+
+    it('calls setApi with the embla api', () => {
+      const setApi = jest.fn()
+      renderCarousel({ setApi })
+
+      expect(setApi).toHaveBeenCalledWith(mockApi)
+    })
+
+    it('passes horizontal axis to embla by default', () => {
+      renderCarousel()
+
+      expect(embla.default).toHaveBeenCalledWith(
+        expect.objectContaining({ axis: 'x' }),
+        undefined
+      )
+    })
+
+    it('passes vertical axis to embla when orientation is vertical', () => {
+      renderCarousel({ orientation: 'vertical' })
+
+      expect(embla.default).toHaveBeenCalledWith(
+        expect.objectContaining({ axis: 'y' }),
+        undefined
+      )
+    })
+
+    it('forwards opts and plugins to embla', () => {
+      const plugins: never[] = []
+      renderCarousel({ opts: { loop: true }, plugins })
+
+      expect(embla.default).toHaveBeenCalledWith(
+        expect.objectContaining({ loop: true, axis: 'x' }),
+        plugins
+      )
+    })
+
+    it('subscribes to embla select and reInit events', () => {
+      renderCarousel()
+
+      expect(mockApi.on).toHaveBeenCalledWith('select', expect.any(Function))
+      expect(mockApi.on).toHaveBeenCalledWith('reInit', expect.any(Function))
+    })
+  })
+
+  describe('Keyboard Navigation', () => {
+    it('scrolls next on ArrowRight in horizontal orientation', () => {
+      renderCarousel()
+
+      fireEvent.keyDown(screen.getByTestId('carousel'), { key: 'ArrowRight' })
+      expect(mockApi.scrollNext).toHaveBeenCalledTimes(1)
+    })
+
+    it('scrolls prev on ArrowLeft in horizontal orientation', () => {
+      renderCarousel()
+
+      fireEvent.keyDown(screen.getByTestId('carousel'), { key: 'ArrowLeft' })
+      expect(mockApi.scrollPrev).toHaveBeenCalledTimes(1)
+    })
+
+    it('scrolls with ArrowUp/ArrowDown in vertical orientation', () => {
+      renderCarousel({ orientation: 'vertical' })
+
+      const carousel = screen.getByTestId('carousel')
+      fireEvent.keyDown(carousel, { key: 'ArrowDown' })
+      expect(mockApi.scrollNext).toHaveBeenCalledTimes(1)
+
+      fireEvent.keyDown(carousel, { key: 'ArrowUp' })
+      expect(mockApi.scrollPrev).toHaveBeenCalledTimes(1)
+    })
+
+    it('ignores horizontal arrow keys in vertical orientation', () => {
+      renderCarousel({ orientation: 'vertical' })
+
+      fireEvent.keyDown(screen.getByTestId('carousel'), { key: 'ArrowRight' })
+      expect(mockApi.scrollNext).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('CarouselContent', () => {
+    it('applies horizontal orientation classes by default', () => {
+      renderCarousel()
+
+      const content = screen.getByTestId('carousel-content')
+      expect(content).toHaveClass('flex', '-ml-4')
+      // Dış sarmalayıcı overflow-hidden olmalı (embla viewport)
+      expect(content.parentElement).toHaveClass('overflow-hidden')
+    })
+
+    it('applies vertical orientation classes', () => {
+      renderCarousel({ orientation: 'vertical' })
+
+      const content = screen.getByTestId('carousel-content')
+      expect(content).toHaveClass('flex', '-mt-4', 'flex-col')
+    })
+
+    it('applies custom className', () => {
+      render(
+        <Carousel>
+          <CarouselContent className="custom-content" data-testid="content">
+            <CarouselItem>Slide</CarouselItem>
+          </CarouselContent>
+        </Carousel>
+      )
+
+      expect(screen.getByTestId('content')).toHaveClass('custom-content')
+    })
+  })
+
+  describe('CarouselItem', () => {
+    it('renders with slide accessibility attributes', () => {
+      renderCarousel()
+
+      const item = screen.getByTestId('carousel-item-1')
+      expect(item).toHaveAttribute('role', 'group')
+      expect(item).toHaveAttribute('aria-roledescription', 'slide')
+    })
+
+    it('applies horizontal item classes by default', () => {
+      renderCarousel()
+
+      const item = screen.getByTestId('carousel-item-1')
+      expect(item).toHaveClass('min-w-0', 'shrink-0', 'grow-0', 'basis-full', 'pl-4')
+    })
+
+    it('applies vertical item classes', () => {
+      renderCarousel({ orientation: 'vertical' })
+
+      const item = screen.getByTestId('carousel-item-1')
+      expect(item).toHaveClass('pt-4')
+    })
+  })
+
+  describe('CarouselPrevious / CarouselNext', () => {
+    it('scrolls prev when previous button is clicked', async () => {
+      const user = userEvent.setup()
+      renderCarousel()
+
+      await user.click(screen.getByTestId('carousel-previous'))
+      expect(mockApi.scrollPrev).toHaveBeenCalledTimes(1)
+    })
+
+    it('scrolls next when next button is clicked', async () => {
+      const user = userEvent.setup()
+      renderCarousel()
+
+      await user.click(screen.getByTestId('carousel-next'))
+      expect(mockApi.scrollNext).toHaveBeenCalledTimes(1)
+    })
+
+    it('renders screen reader labels', () => {
+      renderCarousel()
+
+      expect(screen.getByText('Previous slide')).toHaveClass('sr-only')
+      expect(screen.getByText('Next slide')).toHaveClass('sr-only')
+    })
+
+    it('disables buttons when scrolling is not possible', () => {
+      mockApi.canScrollPrev.mockReturnValue(false)
+      mockApi.canScrollNext.mockReturnValue(false)
+      renderCarousel()
+
+      expect(screen.getByTestId('carousel-previous')).toBeDisabled()
+      expect(screen.getByTestId('carousel-next')).toBeDisabled()
+    })
+
+    it('does not scroll when disabled button is clicked', async () => {
+      mockApi.canScrollNext.mockReturnValue(false)
+      const user = userEvent.setup()
+      renderCarousel()
+
+      await user.click(screen.getByTestId('carousel-next'))
+      expect(mockApi.scrollNext).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('useCarousel', () => {
+    it('throws when used outside of Carousel', () => {
+      const Broken = () => {
+        useCarousel()
+        return null
+      }
+
+      // React'in error boundary console çıktısını sustur
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
+      expect(() => render(<Broken />)).toThrow(
+        'useCarousel must be used within a <Carousel />'
+      )
+      consoleSpy.mockRestore()
+    })
+  })
+})

package/src/components/ui/__tests__/input-otp.test.tsx

@@ -0,0 +1,228 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+  inputOTPSlotVariants,
+  REGEXP_ONLY_DIGITS,
+} from '../input-otp'
+
+// Kontrollü test bileşeni — gerçek input-otp kütüphanesiyle uçtan uca çalışır
+const ControlledOTP = ({
+  onChange,
+  maxLength = 6,
+  ...props
+}: {
+  onChange?: (value: string) => void
+  maxLength?: number
+} & Partial<React.ComponentProps<typeof InputOTP>>) => {
+  const [value, setValue] = React.useState('')
+  return (
+    <InputOTP
+      maxLength={maxLength}
+      value={value}
+      onChange={(newValue) => {
+        setValue(newValue)
+        onChange?.(newValue)
+      }}
+      {...props}
+    >
+      <InputOTPGroup data-testid="otp-group">
+        {Array.from({ length: maxLength }, (_, i) => (
+          <InputOTPSlot key={i} index={i} data-testid={`otp-slot-${i}`} />
+        ))}
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
+
+describe('InputOTP Components', () => {
+  describe('InputOTP Root', () => {
+    it('renders a textbox with the given maxLength', () => {
+      render(<ControlledOTP maxLength={6} />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toBeInTheDocument()
+      expect(input).toHaveAttribute('maxlength', '6')
+    })
+
+    it('applies moonui-theme to the container', () => {
+      const { container } = render(<ControlledOTP />)
+
+      expect(container.querySelector('.moonui-theme')).toBeInTheDocument()
+    })
+
+    it('merges custom containerClassName', () => {
+      const { container } = render(
+        <ControlledOTP containerClassName="custom-container" />
+      )
+
+      const otpContainer = container.querySelector('.custom-container')
+      expect(otpContainer).toBeInTheDocument()
+      expect(otpContainer).toHaveClass('flex', 'items-center', 'gap-2')
+    })
+
+    it('forwards ref to the underlying input', () => {
+      const ref = React.createRef<HTMLInputElement>()
+      render(
+        <InputOTP ref={ref} maxLength={4}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+          </InputOTPGroup>
+        </InputOTP>
+      )
+
+      expect(ref.current).toBeInstanceOf(HTMLInputElement)
+    })
+
+    it('maintains displayName', () => {
+      expect(InputOTP.displayName).toBe('InputOTP')
+      expect(InputOTPGroup.displayName).toBe('InputOTPGroup')
+      expect(InputOTPSlot.displayName).toBe('InputOTPSlot')
+      expect(InputOTPSeparator.displayName).toBe('InputOTPSeparator')
+    })
+
+    it('passes through aria-label to the input', () => {
+      render(<ControlledOTP aria-label="One-time password" />)
+
+      expect(screen.getByRole('textbox')).toHaveAttribute(
+        'aria-label',
+        'One-time password'
+      )
+    })
+
+    it('disables the input when disabled prop is set', () => {
+      render(
+        <InputOTP maxLength={4} disabled>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+          </InputOTPGroup>
+        </InputOTP>
+      )
+
+      expect(screen.getByRole('textbox')).toBeDisabled()
+    })
+  })
+
+  describe('Value Entry', () => {
+    it('calls onChange and renders characters into slots when typing', () => {
+      const handleChange = jest.fn()
+      render(<ControlledOTP onChange={handleChange} />)
+
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: '123' } })
+
+      expect(handleChange).toHaveBeenLastCalledWith('123')
+      expect(screen.getByTestId('otp-slot-0')).toHaveTextContent('1')
+      expect(screen.getByTestId('otp-slot-1')).toHaveTextContent('2')
+      expect(screen.getByTestId('otp-slot-2')).toHaveTextContent('3')
+      expect(screen.getByTestId('otp-slot-3')).toHaveTextContent('')
+    })
+
+    it('supports pasting a full code at once', () => {
+      const handleChange = jest.fn()
+      render(<ControlledOTP onChange={handleChange} />)
+
+      // Paste davranışı: input değeri tek seferde tamamen değişir
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: '123456' } })
+
+      expect(handleChange).toHaveBeenLastCalledWith('123456')
+      expect(screen.getByTestId('otp-slot-5')).toHaveTextContent('6')
+    })
+
+    it('does not exceed maxLength', () => {
+      const handleChange = jest.fn()
+      render(<ControlledOTP maxLength={4} onChange={handleChange} />)
+
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: '12345' } })
+
+      // input-otp maxLength üstünü keser veya reddeder — 5 karakterlik değer asla yayılmaz
+      expect(handleChange).not.toHaveBeenCalledWith('12345')
+    })
+
+    it('rejects non-matching characters when pattern is digits-only', () => {
+      const handleChange = jest.fn()
+      render(<ControlledOTP pattern={REGEXP_ONLY_DIGITS} onChange={handleChange} />)
+
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: 'abc' } })
+
+      expect(handleChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('InputOTPSlot', () => {
+    it('renders base styles with token-based border classes', () => {
+      render(<ControlledOTP />)
+
+      const slot = screen.getByTestId('otp-slot-0')
+      expect(slot).toHaveClass('border-y', 'border-r', 'border-input')
+    })
+
+    it('applies custom className', () => {
+      render(
+        <InputOTP maxLength={2}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} className="custom-slot" data-testid="slot" />
+          </InputOTPGroup>
+        </InputOTP>
+      )
+
+      expect(screen.getByTestId('slot')).toHaveClass('custom-slot')
+    })
+
+    it('marks the active slot with data-active and ring styles on focus', () => {
+      render(<ControlledOTP />)
+
+      const input = screen.getByRole('textbox')
+      fireEvent.focus(input)
+
+      const slot = screen.getByTestId('otp-slot-0')
+      expect(slot).toHaveAttribute('data-active')
+      expect(slot).toHaveClass('ring-2', 'ring-ring')
+    })
+
+    it('exposes active ring styling through inputOTPSlotVariants', () => {
+      // Aktif slot vurgusu token tabanlı ring sınıflarını içermeli
+      expect(inputOTPSlotVariants({ isActive: true })).toContain('ring-2')
+      expect(inputOTPSlotVariants({ isActive: true })).toContain('ring-ring')
+      expect(inputOTPSlotVariants({ isActive: false })).not.toContain('ring-2')
+    })
+  })
+
+  describe('InputOTPSeparator', () => {
+    it('renders with separator role', () => {
+      render(
+        <InputOTP maxLength={4}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+          </InputOTPGroup>
+          <InputOTPSeparator data-testid="separator" />
+          <InputOTPGroup>
+            <InputOTPSlot index={1} />
+          </InputOTPGroup>
+        </InputOTP>
+      )
+
+      const separator = screen.getByTestId('separator')
+      expect(separator).toHaveAttribute('role', 'separator')
+    })
+
+    it('applies custom className', () => {
+      render(
+        <InputOTP maxLength={2}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+          </InputOTPGroup>
+          <InputOTPSeparator className="custom-separator" data-testid="separator" />
+        </InputOTP>
+      )
+
+      expect(screen.getByTestId('separator')).toHaveClass('custom-separator')
+    })
+  })
+})

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

@@ -0,0 +1,86 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Kbd } from '../kbd'
+
+describe('Kbd Component', () => {
+  it('renders a <kbd> element with children', () => {
+    render(<Kbd>K</Kbd>)
+    const kbd = screen.getByText('K')
+    expect(kbd).toBeInTheDocument()
+    expect(kbd.tagName).toBe('KBD')
+  })
+
+  it('applies base keyboard-key styles (token based)', () => {
+    render(<Kbd>Ctrl</Kbd>)
+    const kbd = screen.getByText('Ctrl')
+    expect(kbd).toHaveClass('inline-flex')
+    expect(kbd).toHaveClass('items-center')
+    expect(kbd).toHaveClass('border-border')
+    expect(kbd).toHaveClass('bg-muted')
+    expect(kbd).toHaveClass('text-muted-foreground')
+    expect(kbd).toHaveClass('font-mono')
+  })
+
+  it('applies custom className', () => {
+    render(<Kbd className="custom-kbd">Esc</Kbd>)
+    expect(screen.getByText('Esc')).toHaveClass('custom-kbd')
+  })
+
+  describe('Sizes', () => {
+    it('renders medium size by default', () => {
+      render(<Kbd>Enter</Kbd>)
+      const kbd = screen.getByText('Enter')
+      expect(kbd).toHaveClass('h-6')
+      expect(kbd).toHaveClass('min-w-6')
+      expect(kbd).toHaveClass('text-xs')
+    })
+
+    it('renders small size correctly', () => {
+      render(<Kbd size="sm">Shift</Kbd>)
+      const kbd = screen.getByText('Shift')
+      expect(kbd).toHaveClass('h-5')
+      expect(kbd).toHaveClass('min-w-5')
+      expect(kbd).toHaveClass('text-[10px]')
+    })
+
+    it('renders medium size explicitly', () => {
+      render(<Kbd size="md">Tab</Kbd>)
+      const kbd = screen.getByText('Tab')
+      expect(kbd).toHaveClass('h-6')
+      expect(kbd).toHaveClass('min-w-6')
+      expect(kbd).toHaveClass('text-xs')
+    })
+  })
+
+  describe('Children content', () => {
+    it('renders symbol content visibly', () => {
+      render(<Kbd>⌘</Kbd>)
+      expect(screen.getByText('⌘')).toBeInTheDocument()
+    })
+
+    it('renders multi-character content visibly', () => {
+      render(<Kbd>Ctrl</Kbd>)
+      expect(screen.getByText('Ctrl')).toBeInTheDocument()
+    })
+  })
+
+  describe('Ref forwarding', () => {
+    it('forwards ref to the kbd element', () => {
+      const ref = React.createRef<HTMLElement>()
+      render(<Kbd ref={ref}>K</Kbd>)
+      expect(ref.current).toBeInstanceOf(HTMLElement)
+      expect(ref.current?.tagName).toBe('KBD')
+    })
+  })
+
+  it('maintains displayName', () => {
+    expect(Kbd.displayName).toBe('Kbd')
+  })
+
+  it('passes through HTML attributes', () => {
+    render(<Kbd data-testid="kbd-test" id="kbd-1">K</Kbd>)
+    const kbd = screen.getByTestId('kbd-test')
+    expect(kbd).toHaveAttribute('id', 'kbd-1')
+  })
+})