@opensaas/stack-ui 0.1.7 → 0.4.0

package/tests/browser/fields/SelectField.browser.test.tsx

@@ -0,0 +1,263 @@
+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 { SelectField } from '../../../src/components/fields/SelectField.js'
+
+const mockOptions = [
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2' },
+  { label: 'Option 3', value: 'option3' },
+]
+
+describe('SelectField (Browser)', () => {
+  describe('edit mode', () => {
+    it('should render select field with label', async () => {
+      await act(async () => {
+        render(
+          <SelectField
+            name="status"
+            value={null}
+            onChange={() => {}}
+            label="Status"
+            options={mockOptions}
+          />,
+        )
+      })
+
+      expect(screen.getByText('Status')).toBeInTheDocument()
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
+    })
+
+    it('should display selected value', async () => {
+      await act(async () => {
+        render(
+          <SelectField
+            name="status"
+            value="option2"
+            onChange={() => {}}
+            label="Status"
+            options={mockOptions}
+          />,
+        )
+      })
+
+      expect(screen.getByRole('combobox')).toHaveTextContent('Option 2')
+    })
+
+    it('should open dropdown when clicked', async () => {
+      await act(async () => {
+        render(
+          <SelectField
+            name="status"
+            value={null}
+            onChange={() => {}}
+            label="Status"
+            options={mockOptions}
+          />,
+        )
+      })
+
+      const trigger = screen.getByRole('combobox')
+
+      await act(async () => {
+        await userEvent.click(trigger)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByRole('option', { name: 'Option 1' })).toBeInTheDocument()
+        expect(screen.getByRole('option', { name: 'Option 2' })).toBeInTheDocument()
+        expect(screen.getByRole('option', { name: 'Option 3' })).toBeInTheDocument()
+      })
+    })
+
+    it('should call onChange when option is selected', async () => {
+      let selectedValue: string | null = null
+      const handleChange = (value: string | null) => {
+        selectedValue = value
+      }
+
+      await act(async () => {
+        render(
+          <SelectField
+            name="status"
+            value={null}
+            onChange={handleChange}
+            label="Status"
+            options={mockOptions}
+          />,
+        )
+      })
+
+      const trigger = screen.getByRole('combobox')
+
+      await act(async () => {
+        await userEvent.click(trigger)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByRole('option', { name: 'Option 2' })).toBeInTheDocument()
+      })
+
+      const option = screen.getByRole('option', { name: 'Option 2' })
+
+      await act(async () => {
+        await userEvent.click(option)
+      })
+
+      expect(selectedValue).toBe('option2')
+    })
+
+    it('should show required indicator when required', async () => {
+      await act(async () => {
+        render(
+          <SelectField
+            name="status"
+            value={null}
+            onChange={() => {}}
+            label="Status"
+            options={mockOptions}
+            required
+          />,
+        )
+      })
+
+      expect(screen.getByText('*')).toBeInTheDocument()
+    })
+
+    it('should display error message', async () => {
+      await act(async () => {
+        render(
+          <SelectField
+            name="status"
+            value={null}
+            onChange={() => {}}
+            label="Status"
+            options={mockOptions}
+            error="Status is required"
+          />,
+        )
+      })
+
+      expect(screen.getByText('Status is required')).toBeInTheDocument()
+    })
+
+    it('should be disabled when disabled prop is true', async () => {
+      await act(async () => {
+        render(
+          <SelectField
+            name="status"
+            value={null}
+            onChange={() => {}}
+            label="Status"
+            options={mockOptions}
+            disabled
+          />,
+        )
+      })
+
+      const trigger = screen.getByRole('combobox')
+      expect(trigger).toBeDisabled()
+    })
+
+    it('should support keyboard navigation', async () => {
+      await act(async () => {
+        render(
+          <SelectField
+            name="status"
+            value={null}
+            onChange={() => {}}
+            label="Status"
+            options={mockOptions}
+          />,
+        )
+      })
+
+      const trigger = screen.getByRole('combobox')
+      trigger.focus()
+      expect(document.activeElement).toBe(trigger)
+
+      // Open with Space key (more reliable than Enter for Radix Select)
+      await act(async () => {
+        await userEvent.keyboard(' ')
+      })
+
+      await waitFor(
+        () => {
+          expect(screen.getByRole('option', { name: 'Option 1' })).toBeInTheDocument()
+        },
+        { timeout: 3000 },
+      )
+    })
+
+    it('should close dropdown when Escape is pressed', async () => {
+      await act(async () => {
+        render(
+          <SelectField
+            name="status"
+            value={null}
+            onChange={() => {}}
+            label="Status"
+            options={mockOptions}
+          />,
+        )
+      })
+
+      const trigger = screen.getByRole('combobox')
+
+      await act(async () => {
+        await userEvent.click(trigger)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByRole('option', { name: 'Option 1' })).toBeInTheDocument()
+      })
+
+      await act(async () => {
+        await userEvent.keyboard('{Escape}')
+      })
+
+      await waitFor(() => {
+        expect(screen.queryByRole('option', { name: 'Option 1' })).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('read mode', () => {
+    it('should render selected option label', async () => {
+      await act(async () => {
+        render(
+          <SelectField
+            name="status"
+            value="option2"
+            onChange={() => {}}
+            label="Status"
+            options={mockOptions}
+            mode="read"
+          />,
+        )
+      })
+
+      expect(screen.getByText('Status')).toBeInTheDocument()
+      expect(screen.getByText('Option 2')).toBeInTheDocument()
+      expect(screen.queryByRole('combobox')).not.toBeInTheDocument()
+    })
+
+    it('should show dash when value is null', async () => {
+      await act(async () => {
+        render(
+          <SelectField
+            name="status"
+            value={null}
+            onChange={() => {}}
+            label="Status"
+            options={mockOptions}
+            mode="read"
+          />,
+        )
+      })
+
+      expect(screen.getByText('-')).toBeInTheDocument()
+    })
+  })
+})

package/tests/browser/fields/TextField.browser.test.tsx

@@ -0,0 +1,204 @@
+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 { TextField } from '../../../src/components/fields/TextField.js'
+
+describe('TextField (Browser)', () => {
+  describe('edit mode', () => {
+    it('should render text input with label', async () => {
+      render(<TextField name="username" value="" onChange={() => {}} label="Username" />)
+
+      expect(screen.getByLabelText('Username')).toBeInTheDocument()
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+
+    it('should display current value', async () => {
+      render(<TextField name="username" value="john" onChange={() => {}} label="Username" />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveValue('john')
+    })
+
+    it('should call onChange when user types', async () => {
+      let currentValue = ''
+      const handleChange = (value: string) => {
+        currentValue = value
+      }
+
+      render(<TextField name="username" value="" onChange={handleChange} label="Username" />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'test')
+
+      // Check that onChange was called and value updated
+      expect(currentValue).toBeTruthy()
+    })
+
+    it('should handle clearing input', async () => {
+      let currentValue = 'initial'
+      const handleChange = (value: string) => {
+        currentValue = value
+      }
+
+      render(
+        <TextField name="username" value={currentValue} onChange={handleChange} label="Username" />,
+      )
+
+      const input = screen.getByRole('textbox')
+      await userEvent.clear(input)
+
+      expect(currentValue).toBe('')
+    })
+
+    it('should show required indicator when required', async () => {
+      render(<TextField name="username" value="" onChange={() => {}} label="Username" required />)
+
+      expect(screen.getByText('*')).toBeInTheDocument()
+    })
+
+    it('should display error message', async () => {
+      render(
+        <TextField
+          name="username"
+          value=""
+          onChange={() => {}}
+          label="Username"
+          error="Username is required"
+        />,
+      )
+
+      expect(screen.getByText('Username is required')).toBeInTheDocument()
+    })
+
+    it('should be disabled when disabled prop is true', async () => {
+      render(<TextField name="username" value="" onChange={() => {}} label="Username" disabled />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toBeDisabled()
+    })
+
+    it('should not accept input when disabled', async () => {
+      let currentValue = ''
+      const handleChange = (value: string) => {
+        currentValue = value
+      }
+
+      render(
+        <TextField
+          name="username"
+          value={currentValue}
+          onChange={handleChange}
+          label="Username"
+          disabled
+        />,
+      )
+
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'test')
+
+      expect(currentValue).toBe('')
+    })
+
+    it('should show placeholder text', async () => {
+      render(
+        <TextField
+          name="username"
+          value=""
+          onChange={() => {}}
+          label="Username"
+          placeholder="Enter your username"
+        />,
+      )
+
+      expect(screen.getByPlaceholderText('Enter your username')).toBeInTheDocument()
+    })
+
+    it('should handle programmatic value changes', async () => {
+      function TestComponent() {
+        const [value, setValue] = React.useState('')
+        return (
+          <div>
+            <button onClick={() => setValue('programmatic value')}>Set Value</button>
+            <TextField name="username" value={value} onChange={setValue} label="Username" />
+          </div>
+        )
+      }
+
+      await act(async () => {
+        render(<TestComponent />)
+      })
+
+      const input = screen.getByRole('textbox')
+      const button = screen.getByRole('button')
+
+      // Click button to set value programmatically
+      await act(async () => {
+        await userEvent.click(button)
+      })
+
+      await waitFor(() => {
+        expect(input).toHaveValue('programmatic value')
+      })
+    })
+
+    it('should handle focus and blur events', async () => {
+      render(<TextField name="username" value="" onChange={() => {}} label="Username" />)
+
+      const input = screen.getByRole('textbox')
+
+      // Focus
+      input.focus()
+      expect(document.activeElement).toBe(input)
+
+      // Blur
+      input.blur()
+      expect(document.activeElement).not.toBe(input)
+    })
+
+    it('should handle text input with keyboard', async () => {
+      function TestComponent() {
+        const [value, setValue] = React.useState('')
+        return <TextField name="username" value={value} onChange={setValue} label="Username" />
+      }
+
+      await act(async () => {
+        render(<TestComponent />)
+      })
+
+      const input = screen.getByRole('textbox')
+
+      await act(async () => {
+        await userEvent.click(input)
+      })
+
+      await act(async () => {
+        await userEvent.keyboard('test123')
+      })
+
+      await waitFor(() => {
+        expect(input).toHaveValue('test123')
+      })
+    })
+  })
+
+  describe('read mode', () => {
+    it('should render value as text', async () => {
+      render(
+        <TextField name="username" value="john" onChange={() => {}} label="Username" mode="read" />,
+      )
+
+      expect(screen.getByText('Username')).toBeInTheDocument()
+      expect(screen.getByText('john')).toBeInTheDocument()
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+    })
+
+    it('should show dash when value is empty', async () => {
+      render(
+        <TextField name="username" value="" onChange={() => {}} label="Username" mode="read" />,
+      )
+
+      expect(screen.getByText('-')).toBeInTheDocument()
+    })
+  })
+})

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