@moontra/moonui 2.0.7 → 2.0.9

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

@@ -0,0 +1,318 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Input } from '../input'
+import { Search, Eye, EyeOff } from 'lucide-react'
+
+describe('Input Component', () => {
+  it('renders correctly with default props', () => {
+    render(<Input placeholder="Enter text" />)
+    const input = screen.getByPlaceholderText('Enter text')
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveClass('h-10')
+    expect(input).toHaveClass('w-full')
+    expect(input).toHaveClass('text-sm')
+  })
+
+  it('handles value changes', () => {
+    const handleChange = jest.fn()
+    render(<Input onChange={handleChange} />)
+    
+    const input = screen.getByRole('textbox')
+    fireEvent.change(input, { target: { value: 'test value' } })
+    
+    expect(handleChange).toHaveBeenCalled()
+    expect(input).toHaveValue('test value')
+  })
+
+  it('handles different input types', () => {
+    const { rerender } = render(<Input type="password" data-testid="input" />)
+    expect(screen.getByTestId('input')).toHaveAttribute('type', 'password')
+
+    rerender(<Input type="email" data-testid="input" />)
+    expect(screen.getByTestId('input')).toHaveAttribute('type', 'email')
+
+    rerender(<Input type="number" data-testid="input" />)
+    expect(screen.getByTestId('input')).toHaveAttribute('type', 'number')
+  })
+
+  it('handles disabled state', () => {
+    render(<Input disabled />)
+    const input = screen.getByRole('textbox')
+    expect(input).toBeDisabled()
+    expect(input).toHaveClass('disabled:cursor-not-allowed')
+  })
+
+  it('applies custom className', () => {
+    render(<Input className="custom-input" />)
+    expect(screen.getByRole('textbox')).toHaveClass('custom-input')
+  })
+
+  it('forwards ref correctly', () => {
+    const ref = jest.fn()
+    render(<Input ref={ref} />)
+    expect(ref).toHaveBeenCalled()
+  })
+
+  it('handles focus and blur events', () => {
+    const handleFocus = jest.fn()
+    const handleBlur = jest.fn()
+    
+    render(<Input onFocus={handleFocus} onBlur={handleBlur} />)
+    
+    const input = screen.getByRole('textbox')
+    fireEvent.focus(input)
+    expect(handleFocus).toHaveBeenCalled()
+    
+    fireEvent.blur(input)
+    expect(handleBlur).toHaveBeenCalled()
+  })
+
+  it('supports controlled component pattern', () => {
+    const TestComponent = () => {
+      const [value, setValue] = React.useState('')
+      return (
+        <Input 
+          value={value} 
+          onChange={(e) => setValue(e.target.value)}
+          data-testid="controlled-input"
+        />
+      )
+    }
+    
+    render(<TestComponent />)
+    const input = screen.getByTestId('controlled-input') as HTMLInputElement
+    
+    fireEvent.change(input, { target: { value: 'controlled' } })
+    expect(input.value).toBe('controlled')
+  })
+
+  describe('Variants', () => {
+    it('renders standard variant correctly', () => {
+      render(<Input variant="standard" data-testid="input" />)
+      const input = screen.getByTestId('input')
+      expect(input).toHaveClass('border')
+      expect(input).toHaveClass('border-gray-300')
+      expect(input).toHaveClass('rounded-md')
+    })
+
+    it('renders filled variant correctly', () => {
+      render(<Input variant="filled" data-testid="input" />)
+      const input = screen.getByTestId('input')
+      expect(input).toHaveClass('bg-gray-100')
+      expect(input).toHaveClass('border-transparent')
+    })
+
+    it('renders ghost variant correctly', () => {
+      render(<Input variant="ghost" data-testid="input" />)
+      const input = screen.getByTestId('input')
+      expect(input).toHaveClass('border-none')
+      expect(input).toHaveClass('bg-transparent')
+    })
+
+    it('renders underline variant correctly', () => {
+      render(<Input variant="underline" data-testid="input" />)
+      const input = screen.getByTestId('input')
+      expect(input).toHaveClass('border-b')
+      expect(input).toHaveClass('rounded-none')
+    })
+  })
+
+  describe('Sizes', () => {
+    it('renders small size correctly', () => {
+      render(<Input size="sm" data-testid="input" />)
+      const input = screen.getByTestId('input')
+      expect(input).toHaveClass('h-8')
+      expect(input).toHaveClass('text-xs')
+    })
+
+    it('renders medium size correctly (default)', () => {
+      render(<Input data-testid="input" />)
+      const input = screen.getByTestId('input')
+      expect(input).toHaveClass('h-10')
+      expect(input).toHaveClass('text-sm')
+    })
+
+    it('renders large size correctly', () => {
+      render(<Input size="lg" data-testid="input" />)
+      const input = screen.getByTestId('input')
+      expect(input).toHaveClass('h-12')
+      expect(input).toHaveClass('text-base')
+    })
+  })
+
+  describe('Icons and Buttons', () => {
+    it('renders with left icon', () => {
+      render(<Input leftIcon={<Search data-testid="search-icon" />} />)
+      expect(screen.getByTestId('search-icon')).toBeInTheDocument()
+      expect(screen.getByRole('textbox')).toHaveClass('pl-10')
+    })
+
+    it('renders with right icon', () => {
+      render(<Input rightIcon={<Search data-testid="search-icon" />} />)
+      expect(screen.getByTestId('search-icon')).toBeInTheDocument()
+      expect(screen.getByRole('textbox')).toHaveClass('pr-10')
+    })
+
+    it('renders with right button', () => {
+      const button = <button data-testid="toggle-btn">Toggle</button>
+      render(<Input rightButton={button} />)
+      expect(screen.getByTestId('toggle-btn')).toBeInTheDocument()
+      expect(screen.getByRole('textbox')).toHaveClass('pr-10')
+    })
+
+    it('handles password toggle functionality', () => {
+      const PasswordInput = () => {
+        const [showPassword, setShowPassword] = React.useState(false)
+        return (
+          <Input
+            type={showPassword ? 'text' : 'password'}
+            rightButton={
+              <button
+                onClick={() => setShowPassword(!showPassword)}
+                data-testid="password-toggle"
+              >
+                {showPassword ? <EyeOff /> : <Eye />}
+              </button>
+            }
+          />
+        )
+      }
+      
+      render(<PasswordInput />)
+      const input = screen.getByDisplayValue('') // Get input by display value
+      const toggleBtn = screen.getByTestId('password-toggle')
+      
+      // Initially should be password type
+      expect(input).toHaveAttribute('type', 'password')
+      fireEvent.click(toggleBtn)
+      expect(input).toHaveAttribute('type', 'text')
+    })
+  })
+
+  describe('Loading State', () => {
+    it('shows loading spinner when loading is true', () => {
+      render(<Input loading />)
+      expect(screen.getByRole('textbox')).toBeDisabled()
+      expect(screen.getByRole('textbox')).toHaveAttribute('data-loading', '')
+    })
+
+    it('shows loading spinner with left icon', () => {
+      render(<Input loading leftIcon={<Search />} />)
+      const input = screen.getByRole('textbox')
+      expect(input).toBeDisabled()
+      expect(input).toHaveClass('pl-10')
+    })
+
+    it('shows loading spinner without left icon', () => {
+      render(<Input loading />)
+      const input = screen.getByRole('textbox')
+      expect(input).toBeDisabled()
+      expect(input).toHaveClass('pl-10')
+    })
+
+    it('hides right icon when loading', () => {
+      render(<Input loading rightIcon={<Search data-testid="search-icon" />} />)
+      expect(screen.queryByTestId('search-icon')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Error and Success States', () => {
+    it('displays error message', () => {
+      render(<Input error="This field is required" id="test-input" />)
+      const input = screen.getByRole('textbox')
+      const errorMessage = screen.getByText('This field is required')
+      
+      expect(input).toHaveAttribute('aria-invalid', 'true')
+      expect(input).toHaveAttribute('aria-describedby', 'test-input-error')
+      expect(input).toHaveAttribute('data-error', '')
+      expect(input).toHaveClass('border-error')
+      expect(errorMessage).toHaveClass('text-error')
+      expect(errorMessage).toHaveAttribute('id', 'test-input-error')
+    })
+
+    it('displays success message', () => {
+      render(<Input success="Valid input" id="test-input" />)
+      const input = screen.getByRole('textbox')
+      const successMessage = screen.getByText('Valid input')
+      
+      expect(input).toHaveAttribute('aria-describedby', 'test-input-success')
+      expect(input).toHaveAttribute('data-success', '')
+      expect(input).toHaveClass('border-success')
+      expect(successMessage).toHaveClass('text-success')
+      expect(successMessage).toHaveAttribute('id', 'test-input-success')
+    })
+
+    it('prioritizes error over success', () => {
+      render(<Input error="Error message" success="Success message" />)
+      expect(screen.getByText('Error message')).toBeInTheDocument()
+      expect(screen.queryByText('Success message')).not.toBeInTheDocument()
+    })
+
+    it('shows message when alwaysShowMessage is true', () => {
+      render(<Input alwaysShowMessage success="Test message" />)
+      // Should show message container with success message
+      const messageContainer = screen.getByText('Test message')
+      expect(messageContainer).toBeInTheDocument()
+      expect(messageContainer).toHaveClass('text-success')
+    })
+
+    it('applies custom message className', () => {
+      render(<Input error="Error" messageClassName="custom-message" />)
+      const message = screen.getByText('Error')
+      expect(message).toHaveClass('custom-message')
+    })
+  })
+
+  describe('Custom Styling', () => {
+    it('applies custom wrapper className', () => {
+      render(
+        <Input 
+          wrapperClassName="custom-wrapper" 
+          data-testid="input"
+        />
+      )
+      const wrapper = screen.getByTestId('input').parentElement
+      expect(wrapper).toHaveClass('custom-wrapper')
+    })
+
+    it('combines multiple class names correctly', () => {
+      render(
+        <Input 
+          className="custom-input"
+          variant="filled"
+          size="lg"
+          error="Error message"
+          data-testid="input"
+        />
+      )
+      const input = screen.getByTestId('input')
+      expect(input).toHaveClass('custom-input')
+      expect(input).toHaveClass('bg-gray-100')
+      expect(input).toHaveClass('h-12')
+      expect(input).toHaveClass('border-error')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes for error state', () => {
+      render(<Input error="Required field" id="accessible-input" />)
+      const input = screen.getByRole('textbox')
+      
+      expect(input).toHaveAttribute('aria-invalid', 'true')
+      expect(input).toHaveAttribute('aria-describedby', 'accessible-input-error')
+    })
+
+    it('has proper ARIA attributes for success state', () => {
+      render(<Input success="Valid input" id="accessible-input" />)
+      const input = screen.getByRole('textbox')
+      
+      expect(input).toHaveAttribute('aria-describedby', 'accessible-input-success')
+    })
+
+    it('has proper loading indicators', () => {
+      render(<Input loading />)
+      const spinner = screen.getByRole('textbox').parentElement?.querySelector('[aria-hidden="true"]')
+      expect(spinner).toBeInTheDocument()
+    })
+  })
+})

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

@@ -0,0 +1,103 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Label } from '../label'
+
+describe('Label Component', () => {
+  it('renders correctly with default props', () => {
+    render(<Label>Default Label</Label>)
+    const label = screen.getByText('Default Label')
+    expect(label).toBeInTheDocument()
+    expect(label).toHaveClass('text-sm')
+    expect(label).toHaveClass('font-medium')
+    expect(label).toHaveClass('leading-none')
+    expect(label).toHaveClass('text-gray-900')
+    expect(label).toHaveClass('dark:text-gray-200')
+    expect(label).toHaveClass('peer-disabled:cursor-not-allowed')
+    expect(label).toHaveClass('peer-disabled:opacity-70')
+    expect(label).toHaveClass('dark:peer-disabled:opacity-60')
+    expect(label).toHaveClass('transition-colors')
+    expect(label).toHaveClass('duration-200')
+  })
+
+  it('renders with custom text content', () => {
+    render(<Label>Custom Label Text</Label>)
+    const label = screen.getByText('Custom Label Text')
+    expect(label).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(<Label className="custom-label">Test Label</Label>)
+    const label = screen.getByText('Test Label')
+    expect(label).toHaveClass('custom-label')
+    // Should still have default classes
+    expect(label).toHaveClass('text-sm')
+    expect(label).toHaveClass('font-medium')
+  })
+
+  it('forwards ref correctly', () => {
+    const ref = React.createRef<HTMLLabelElement>()
+    render(<Label ref={ref}>Ref Label</Label>)
+    expect(ref.current).toBeInstanceOf(HTMLLabelElement)
+    expect(ref.current).toHaveTextContent('Ref Label')
+  })
+
+  it('passes through HTML label props', () => {
+    render(<Label htmlFor="test-input" id="test-label">Form Label</Label>)
+    const label = screen.getByText('Form Label')
+    expect(label).toHaveAttribute('for', 'test-input')
+    expect(label).toHaveAttribute('id', 'test-label')
+  })
+
+  it('handles onClick events', () => {
+    const onClick = jest.fn()
+    render(<Label onClick={onClick}>Clickable Label</Label>)
+    const label = screen.getByText('Clickable Label')
+    label.click()
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders as a label element', () => {
+    render(<Label>Label Element</Label>)
+    const label = screen.getByText('Label Element')
+    expect(label.tagName).toBe('LABEL')
+  })
+
+  it('supports data attributes', () => {
+    render(<Label data-testid="custom-label" data-custom="value">Data Label</Label>)
+    const label = screen.getByTestId('custom-label')
+    expect(label).toHaveAttribute('data-custom', 'value')
+  })
+
+  it('supports aria attributes', () => {
+    render(<Label aria-label="Accessible Label" aria-describedby="description">ARIA Label</Label>)
+    const label = screen.getByText('ARIA Label')
+    expect(label).toHaveAttribute('aria-label', 'Accessible Label')
+    expect(label).toHaveAttribute('aria-describedby', 'description')
+  })
+
+  it('handles empty content', () => {
+    render(<Label data-testid="empty-label"></Label>)
+    const label = screen.getByTestId('empty-label')
+    expect(label).toBeInTheDocument()
+    expect(label).toHaveClass('text-sm')
+    expect(label.tagName).toBe('LABEL')
+  })
+
+  it('handles children as React nodes', () => {
+    render(
+      <Label>
+        <span>Child</span> Label
+      </Label>
+    )
+    const label = screen.getByText((content, element) => {
+      return element?.tagName === 'LABEL' && element.textContent === 'Child Label'
+    })
+    expect(label).toBeInTheDocument()
+    expect(label.querySelector('span')).toHaveTextContent('Child')
+  })
+
+  it('maintains displayName from Radix primitive', () => {
+    expect(Label.displayName).toBeDefined()
+  })
+})