@opensaas/stack-ui 0.1.7 → 0.3.0

package/tests/browser/primitives/Button.browser.test.tsx

@@ -0,0 +1,122 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from 'vitest/browser'
+import { Button } from '../../../src/primitives/button.js'
+
+describe('Button (Browser)', () => {
+  it('should render with default variant', async () => {
+    render(<Button>Click me</Button>)
+
+    const button = screen.getByRole('button', { name: 'Click me' })
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveClass('bg-primary')
+  })
+
+  it('should handle click events', async () => {
+    let clicked = false
+    const handleClick = () => {
+      clicked = true
+    }
+
+    render(<Button onClick={handleClick}>Click me</Button>)
+
+    const button = screen.getByRole('button', { name: 'Click me' })
+    await userEvent.click(button)
+
+    expect(clicked).toBe(true)
+  })
+
+  it('should render different variants correctly', async () => {
+    const { rerender } = render(<Button variant="destructive">Delete</Button>)
+    let button = screen.getByRole('button', { name: 'Delete' })
+    expect(button).toHaveClass('bg-destructive')
+
+    rerender(<Button variant="outline">Cancel</Button>)
+    button = screen.getByRole('button', { name: 'Cancel' })
+    expect(button).toHaveClass('border')
+
+    rerender(<Button variant="ghost">Ghost</Button>)
+    button = screen.getByRole('button', { name: 'Ghost' })
+    expect(button).toHaveClass('hover:bg-accent')
+  })
+
+  it('should render different sizes correctly', async () => {
+    const { rerender } = render(<Button size="sm">Small</Button>)
+    let button = screen.getByRole('button', { name: 'Small' })
+    expect(button).toHaveClass('h-9')
+
+    rerender(<Button size="lg">Large</Button>)
+    button = screen.getByRole('button', { name: 'Large' })
+    expect(button).toHaveClass('h-11')
+
+    rerender(<Button size="icon">Icon</Button>)
+    button = screen.getByRole('button', { name: 'Icon' })
+    expect(button).toHaveClass('h-10', 'w-10')
+  })
+
+  it('should be disabled when disabled prop is true', async () => {
+    render(<Button disabled>Disabled</Button>)
+
+    const button = screen.getByRole('button', { name: 'Disabled' })
+    expect(button).toBeDisabled()
+    expect(button).toHaveClass('disabled:opacity-50')
+  })
+
+  it('should not trigger click when disabled', async () => {
+    let clicked = false
+    const handleClick = () => {
+      clicked = true
+    }
+
+    render(
+      <Button disabled onClick={handleClick}>
+        Disabled
+      </Button>,
+    )
+
+    const button = screen.getByRole('button', { name: 'Disabled' })
+
+    // Verify button is disabled - browsers prevent clicking disabled buttons
+    expect(button).toBeDisabled()
+    expect(button).toHaveClass('disabled:pointer-events-none')
+
+    // In real browsers, disabled buttons cannot be clicked
+    // The pointer-events-none class prevents any interaction
+    expect(clicked).toBe(false)
+  })
+
+  it('should handle keyboard navigation', async () => {
+    let clicked = false
+    const handleClick = () => {
+      clicked = true
+    }
+
+    render(<Button onClick={handleClick}>Press Enter</Button>)
+
+    const button = screen.getByRole('button', { name: 'Press Enter' })
+    button.focus()
+    expect(document.activeElement).toBe(button)
+
+    await userEvent.keyboard('{Enter}')
+    expect(clicked).toBe(true)
+  })
+
+  it('should support custom className', async () => {
+    render(<Button className="custom-class">Custom</Button>)
+
+    const button = screen.getByRole('button', { name: 'Custom' })
+    expect(button).toHaveClass('custom-class')
+  })
+
+  it('should render as child component when asChild is true', async () => {
+    render(
+      <Button asChild>
+        <a href="/test">Link Button</a>
+      </Button>,
+    )
+
+    const link = screen.getByRole('link', { name: 'Link Button' })
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('href', '/test')
+  })
+})

package/tests/browser/primitives/Dialog.browser.test.tsx

@@ -0,0 +1,279 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, waitFor, act } from '@testing-library/react'
+import { userEvent } from 'vitest/browser'
+import React from 'react'
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose,
+} from '../../../src/primitives/dialog.js'
+import { Button } from '../../../src/primitives/button.js'
+
+describe('Dialog (Browser)', () => {
+  it('should render dialog trigger', async () => {
+    await act(async () => {
+      render(
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button>Open Dialog</Button>
+          </DialogTrigger>
+        </Dialog>,
+      )
+    })
+
+    const trigger = screen.getByRole('button', { name: 'Open Dialog' })
+    expect(trigger).toBeInTheDocument()
+  })
+
+  it('should open dialog when trigger is clicked', async () => {
+    function TestDialog() {
+      const [open, setOpen] = React.useState(false)
+      return (
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button>Open Dialog</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Dialog Title</DialogTitle>
+              <DialogDescription>Dialog description</DialogDescription>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      )
+    }
+
+    await act(async () => {
+      render(<TestDialog />)
+    })
+
+    const trigger = screen.getByRole('button', { name: 'Open Dialog' })
+
+    await act(async () => {
+      await userEvent.click(trigger)
+    })
+
+    await waitFor(
+      () => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
+        expect(screen.getByText('Dialog Title')).toBeInTheDocument()
+        expect(screen.getByText('Dialog description')).toBeInTheDocument()
+      },
+      { timeout: 3000 },
+    )
+  })
+
+  it('should close dialog when close button is clicked', async () => {
+    function TestDialog() {
+      const [open, setOpen] = React.useState(false)
+      return (
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button>Open Dialog</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Dialog Title</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      )
+    }
+
+    await act(async () => {
+      render(<TestDialog />)
+    })
+
+    const trigger = screen.getByRole('button', { name: 'Open Dialog' })
+
+    await act(async () => {
+      await userEvent.click(trigger)
+    })
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    // Click the X close button
+    const closeButton = screen.getByRole('button', { name: 'Close' })
+
+    await act(async () => {
+      await userEvent.click(closeButton)
+    })
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    })
+  })
+
+  it('should close dialog with DialogClose component', async () => {
+    function TestDialog() {
+      const [open, setOpen] = React.useState(false)
+      return (
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button>Open Dialog</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Dialog Title</DialogTitle>
+            </DialogHeader>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )
+    }
+
+    await act(async () => {
+      render(<TestDialog />)
+    })
+
+    const trigger = screen.getByRole('button', { name: 'Open Dialog' })
+
+    await act(async () => {
+      await userEvent.click(trigger)
+    })
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    const cancelButton = screen.getByRole('button', { name: 'Cancel' })
+
+    await act(async () => {
+      await userEvent.click(cancelButton)
+    })
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    })
+  })
+
+  it('should close dialog when escape key is pressed', async () => {
+    function TestDialog() {
+      const [open, setOpen] = React.useState(false)
+      return (
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button>Open Dialog</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Dialog Title</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      )
+    }
+
+    await act(async () => {
+      render(<TestDialog />)
+    })
+
+    const trigger = screen.getByRole('button', { name: 'Open Dialog' })
+
+    await act(async () => {
+      await userEvent.click(trigger)
+    })
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    await act(async () => {
+      await userEvent.keyboard('{Escape}')
+    })
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    })
+  })
+
+  it('should render overlay when dialog is open', async () => {
+    function TestDialog() {
+      const [open, setOpen] = React.useState(false)
+      return (
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button>Open Dialog</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Dialog Title</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      )
+    }
+
+    await act(async () => {
+      render(<TestDialog />)
+    })
+
+    const trigger = screen.getByRole('button', { name: 'Open Dialog' })
+
+    await act(async () => {
+      await userEvent.click(trigger)
+    })
+
+    await waitFor(() => {
+      const overlay = document.querySelector('[data-state="open"]')
+      expect(overlay).toBeInTheDocument()
+    })
+  })
+
+  it('should trap focus within dialog when open', async () => {
+    function TestDialog() {
+      const [open, setOpen] = React.useState(false)
+      return (
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button>Open Dialog</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Dialog Title</DialogTitle>
+            </DialogHeader>
+            <DialogFooter>
+              <Button>First Button</Button>
+              <Button>Second Button</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )
+    }
+
+    await act(async () => {
+      render(<TestDialog />)
+    })
+
+    const trigger = screen.getByRole('button', { name: 'Open Dialog' })
+
+    await act(async () => {
+      await userEvent.click(trigger)
+    })
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    // Tab through focusable elements
+    await act(async () => {
+      await userEvent.keyboard('{Tab}')
+    })
+
+    // Focus should be within the dialog
+    const dialog = screen.getByRole('dialog')
+    const activeElement = document.activeElement
+    expect(dialog.contains(activeElement)).toBe(true)
+  })
+})

package/tests/components/CheckboxField.test.tsx

@@ -0,0 +1,130 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { CheckboxField } from '../../src/components/fields/CheckboxField.js'
+
+describe('CheckboxField', () => {
+  describe('edit mode', () => {
+    it('should render checkbox with label', () => {
+      render(<CheckboxField name="active" value={false} onChange={vi.fn()} label="Is Active" />)
+
+      expect(screen.getByLabelText('Is Active')).toBeInTheDocument()
+      expect(screen.getByRole('checkbox')).toBeInTheDocument()
+    })
+
+    it('should display checked state when value is true', () => {
+      render(<CheckboxField name="active" value={true} onChange={vi.fn()} label="Is Active" />)
+
+      const checkbox = screen.getByRole('checkbox')
+      expect(checkbox).toBeChecked()
+    })
+
+    it('should display unchecked state when value is false', () => {
+      render(<CheckboxField name="active" value={false} onChange={vi.fn()} label="Is Active" />)
+
+      const checkbox = screen.getByRole('checkbox')
+      expect(checkbox).not.toBeChecked()
+    })
+
+    it('should call onChange with true when clicked', async () => {
+      const onChange = vi.fn()
+      const user = userEvent.setup()
+
+      render(<CheckboxField name="active" value={false} onChange={onChange} label="Is Active" />)
+
+      const checkbox = screen.getByRole('checkbox')
+      await user.click(checkbox)
+
+      expect(onChange).toHaveBeenCalledWith(true)
+    })
+
+    it('should call onChange with false when unchecked', async () => {
+      const onChange = vi.fn()
+      const user = userEvent.setup()
+
+      render(<CheckboxField name="active" value={true} onChange={onChange} label="Is Active" />)
+
+      const checkbox = screen.getByRole('checkbox')
+      await user.click(checkbox)
+
+      expect(onChange).toHaveBeenCalledWith(false)
+    })
+
+    it('should display error message', () => {
+      render(
+        <CheckboxField
+          name="terms"
+          value={false}
+          onChange={vi.fn()}
+          label="Accept Terms"
+          error="You must accept the terms"
+        />,
+      )
+
+      expect(screen.getByText('You must accept the terms')).toBeInTheDocument()
+    })
+
+    it('should be disabled when disabled prop is true', () => {
+      render(
+        <CheckboxField name="active" value={false} onChange={vi.fn()} label="Is Active" disabled />,
+      )
+
+      const checkbox = screen.getByRole('checkbox')
+      expect(checkbox).toBeDisabled()
+    })
+
+    it('should not be clickable when disabled', async () => {
+      const onChange = vi.fn()
+      const user = userEvent.setup()
+
+      render(
+        <CheckboxField
+          name="active"
+          value={false}
+          onChange={onChange}
+          label="Is Active"
+          disabled
+        />,
+      )
+
+      const checkbox = screen.getByRole('checkbox')
+      await user.click(checkbox)
+
+      expect(onChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('read mode', () => {
+    it('should render "Yes" when value is true', () => {
+      render(
+        <CheckboxField
+          name="active"
+          value={true}
+          onChange={vi.fn()}
+          label="Is Active"
+          mode="read"
+        />,
+      )
+
+      expect(screen.getByText('Is Active')).toBeInTheDocument()
+      expect(screen.getByText('Yes')).toBeInTheDocument()
+      expect(screen.queryByRole('checkbox')).not.toBeInTheDocument()
+    })
+
+    it('should render "No" when value is false', () => {
+      render(
+        <CheckboxField
+          name="active"
+          value={false}
+          onChange={vi.fn()}
+          label="Is Active"
+          mode="read"
+        />,
+      )
+
+      expect(screen.getByText('Is Active')).toBeInTheDocument()
+      expect(screen.getByText('No')).toBeInTheDocument()
+      expect(screen.queryByRole('checkbox')).not.toBeInTheDocument()
+    })
+  })
+})