@opensaas/stack-ui 0.1.7 → 0.4.0

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()
+    })
+  })
+})