@moontra/moonui 2.0.7 → 2.0.9

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

@@ -0,0 +1,91 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Button } from '../button'
+
+describe('Button Component', () => {
+  it('renders correctly with default props', () => {
+    render(<Button>Click me</Button>)
+    const button = screen.getByRole('button', { name: /click me/i })
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveClass('bg-primary')
+  })
+
+  it('renders different variants correctly', () => {
+    const { rerender } = render(<Button variant="secondary">Secondary</Button>)
+    expect(screen.getByRole('button')).toHaveClass('bg-secondary')
+    expect(screen.getByRole('button')).toHaveClass('text-secondary-foreground')
+
+    rerender(<Button variant="outline">Outline</Button>)
+    expect(screen.getByRole('button')).toHaveClass('bg-background')
+    expect(screen.getByRole('button')).toHaveClass('text-foreground')
+
+    rerender(<Button variant="ghost">Ghost</Button>)
+    expect(screen.getByRole('button')).toHaveClass('text-foreground')
+
+    rerender(<Button variant="link">Link</Button>)
+    expect(screen.getByRole('button')).toHaveClass('text-primary')
+    expect(screen.getByRole('button')).toHaveClass('underline-offset-4')
+  })
+
+  it('renders different sizes correctly', () => {
+    const { rerender } = render(<Button size="sm">Small</Button>)
+    expect(screen.getByRole('button')).toHaveClass('h-8')
+    expect(screen.getByRole('button')).toHaveClass('px-3')
+    expect(screen.getByRole('button')).toHaveClass('text-sm')
+
+    rerender(<Button size="lg">Large</Button>)
+    expect(screen.getByRole('button')).toHaveClass('h-12')
+    expect(screen.getByRole('button')).toHaveClass('px-6')
+    expect(screen.getByRole('button')).toHaveClass('text-lg')
+
+    rerender(<Button size="icon">Icon</Button>)
+    const button = screen.getByRole('button')
+    expect(button).toHaveClass('h-10')
+    expect(button).toHaveClass('w-10')
+  })
+
+  it('handles disabled state correctly', () => {
+    render(<Button disabled>Disabled</Button>)
+    const button = screen.getByRole('button')
+    expect(button).toBeDisabled()
+    expect(button).toHaveClass('disabled:pointer-events-none')
+  })
+
+  it('handles click events', () => {
+    const handleClick = jest.fn()
+    render(<Button onClick={handleClick}>Click me</Button>)
+    
+    fireEvent.click(screen.getByRole('button'))
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not trigger click when disabled', () => {
+    const handleClick = jest.fn()
+    render(<Button disabled onClick={handleClick}>Disabled</Button>)
+    
+    fireEvent.click(screen.getByRole('button'))
+    expect(handleClick).not.toHaveBeenCalled()
+  })
+
+  it('renders as child component when asChild is true', () => {
+    render(
+      <Button asChild>
+        <a href="/test">Link Button</a>
+      </Button>
+    )
+    
+    const link = screen.getByRole('link')
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('href', '/test')
+  })
+
+  it('applies custom className', () => {
+    render(<Button className="custom-class">Custom</Button>)
+    expect(screen.getByRole('button')).toHaveClass('custom-class')
+  })
+
+  it('forwards ref correctly', () => {
+    const ref = jest.fn()
+    render(<Button ref={ref}>Button</Button>)
+    expect(ref).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,104 @@
+import { render, screen } from '@testing-library/react'
+import { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from '../card'
+
+describe('Card Components', () => {
+  describe('Card', () => {
+    it('renders correctly with default props', () => {
+      render(<Card data-testid="card">Card content</Card>)
+      const card = screen.getByTestId('card')
+      expect(card).toBeInTheDocument()
+      expect(card).toHaveClass('rounded-lg')
+      expect(card).toHaveClass('border')
+      expect(card).toHaveClass('bg-card')
+    })
+
+    it('applies custom className', () => {
+      render(<Card className="custom-card" data-testid="card">Content</Card>)
+      expect(screen.getByTestId('card')).toHaveClass('custom-card')
+    })
+
+    it('forwards ref correctly', () => {
+      const ref = jest.fn()
+      render(<Card ref={ref}>Content</Card>)
+      expect(ref).toHaveBeenCalled()
+    })
+  })
+
+  describe('CardHeader', () => {
+    it('renders correctly', () => {
+      render(<CardHeader data-testid="header">Header content</CardHeader>)
+      const header = screen.getByTestId('header')
+      expect(header).toBeInTheDocument()
+      expect(header).toHaveClass('flex')
+      expect(header).toHaveClass('flex-col')
+      expect(header).toHaveClass('space-y-1.5')
+    })
+  })
+
+  describe('CardTitle', () => {
+    it('renders correctly', () => {
+      render(<CardTitle data-testid="title">Card Title</CardTitle>)
+      const title = screen.getByTestId('title')
+      expect(title).toBeInTheDocument()
+      expect(title).toHaveClass('text-lg')
+      expect(title).toHaveClass('font-semibold')
+      expect(title).toHaveClass('leading-none')
+      expect(title).toHaveClass('tracking-tight')
+    })
+  })
+
+  describe('CardDescription', () => {
+    it('renders correctly', () => {
+      render(<CardDescription data-testid="description">Card description</CardDescription>)
+      const description = screen.getByTestId('description')
+      expect(description).toBeInTheDocument()
+      expect(description).toHaveClass('text-sm')
+      expect(description).toHaveClass('text-muted-foreground')
+    })
+  })
+
+  describe('CardContent', () => {
+    it('renders correctly', () => {
+      render(<CardContent data-testid="content">Card Content</CardContent>)
+      const content = screen.getByTestId('content')
+      expect(content).toBeInTheDocument()
+      expect(content).toHaveClass('pt-0')
+    })
+  })
+
+  describe('CardFooter', () => {
+    it('renders correctly', () => {
+      render(<CardFooter data-testid="footer">Card Footer</CardFooter>)
+      const footer = screen.getByTestId('footer')
+      expect(footer).toBeInTheDocument()
+      expect(footer).toHaveClass('flex')
+      expect(footer).toHaveClass('items-center')
+      expect(footer).toHaveClass('pt-4')
+    })
+  })
+
+  describe('Complete Card Structure', () => {
+    it('renders full card structure correctly', () => {
+      render(
+        <Card data-testid="full-card">
+          <CardHeader>
+            <CardTitle>Test Title</CardTitle>
+            <CardDescription>Test Description</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p>Test content</p>
+          </CardContent>
+          <CardFooter>
+            <button>Action</button>
+          </CardFooter>
+        </Card>
+      )
+
+      expect(screen.getByTestId('full-card')).toBeInTheDocument()
+      expect(screen.getByText('Test Title')).toBeInTheDocument()
+      expect(screen.getByText('Test Description')).toBeInTheDocument()
+      expect(screen.getByText('Test content')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument()
+    })
+  })
+})