@opensaas/stack-ui 0.1.6 → 0.3.0

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

@@ -0,0 +1,245 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, act } from '@testing-library/react'
+import { userEvent } from 'vitest/browser'
+import React from 'react'
+import { CheckboxField } from '../../../src/components/fields/CheckboxField.js'
+
+describe('CheckboxField (Browser)', () => {
+  describe('edit mode', () => {
+    it('should render checkbox with label', async () => {
+      render(<CheckboxField name="active" value={false} onChange={() => {}} label="Is Active" />)
+
+      expect(screen.getByLabelText('Is Active')).toBeInTheDocument()
+      expect(screen.getByRole('checkbox')).toBeInTheDocument()
+    })
+
+    it('should display checked state when value is true', async () => {
+      render(<CheckboxField name="active" value={true} onChange={() => {}} label="Is Active" />)
+
+      const checkbox = screen.getByRole('checkbox')
+      expect(checkbox).toBeChecked()
+    })
+
+    it('should display unchecked state when value is false', async () => {
+      render(<CheckboxField name="active" value={false} onChange={() => {}} label="Is Active" />)
+
+      const checkbox = screen.getByRole('checkbox')
+      expect(checkbox).not.toBeChecked()
+    })
+
+    it('should call onChange with true when clicked', async () => {
+      let currentValue = false
+      const handleChange = (value: boolean) => {
+        currentValue = value
+      }
+
+      render(
+        <CheckboxField
+          name="active"
+          value={currentValue}
+          onChange={handleChange}
+          label="Is Active"
+        />,
+      )
+
+      const checkbox = screen.getByRole('checkbox')
+      await userEvent.click(checkbox)
+
+      expect(currentValue).toBe(true)
+    })
+
+    it('should call onChange with false when unchecked', async () => {
+      let currentValue = true
+      const handleChange = (value: boolean) => {
+        currentValue = value
+      }
+
+      render(
+        <CheckboxField
+          name="active"
+          value={currentValue}
+          onChange={handleChange}
+          label="Is Active"
+        />,
+      )
+
+      const checkbox = screen.getByRole('checkbox')
+      await userEvent.click(checkbox)
+
+      expect(currentValue).toBe(false)
+    })
+
+    it('should toggle state with multiple clicks', async () => {
+      function TestComponent() {
+        const [value, setValue] = React.useState(false)
+        return (
+          <CheckboxField
+            name="active"
+            value={value}
+            onChange={setValue}
+            label="Is Active"
+            data-testid="checkbox-field"
+          />
+        )
+      }
+
+      await act(async () => {
+        render(<TestComponent />)
+      })
+
+      const checkbox = screen.getByRole('checkbox')
+
+      // First click - check
+      expect(checkbox).not.toBeChecked()
+      await act(async () => {
+        await userEvent.click(checkbox)
+      })
+      expect(checkbox).toBeChecked()
+
+      // Second click - uncheck
+      await act(async () => {
+        await userEvent.click(checkbox)
+      })
+      expect(checkbox).not.toBeChecked()
+
+      // Third click - check again
+      await act(async () => {
+        await userEvent.click(checkbox)
+      })
+      expect(checkbox).toBeChecked()
+    })
+
+    it('should display error message', async () => {
+      render(
+        <CheckboxField
+          name="terms"
+          value={false}
+          onChange={() => {}}
+          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', async () => {
+      render(
+        <CheckboxField
+          name="active"
+          value={false}
+          onChange={() => {}}
+          label="Is Active"
+          disabled
+        />,
+      )
+
+      const checkbox = screen.getByRole('checkbox')
+      expect(checkbox).toBeDisabled()
+    })
+
+    it('should not be clickable when disabled', async () => {
+      let currentValue = false
+      const handleChange = (value: boolean) => {
+        currentValue = value
+      }
+
+      render(
+        <CheckboxField
+          name="active"
+          value={currentValue}
+          onChange={handleChange}
+          label="Is Active"
+          disabled
+        />,
+      )
+
+      const checkbox = screen.getByRole('checkbox')
+
+      // Verify checkbox is disabled - browsers prevent clicking disabled checkboxes
+      expect(checkbox).toBeDisabled()
+
+      // In real browsers, disabled checkboxes cannot be clicked
+      expect(currentValue).toBe(false)
+    })
+
+    it('should support keyboard interaction with Space', async () => {
+      let currentValue = false
+      const handleChange = (value: boolean) => {
+        currentValue = value
+      }
+
+      render(
+        <CheckboxField
+          name="active"
+          value={currentValue}
+          onChange={handleChange}
+          label="Is Active"
+        />,
+      )
+
+      const checkbox = screen.getByRole('checkbox')
+      checkbox.focus()
+      expect(document.activeElement).toBe(checkbox)
+
+      await userEvent.keyboard(' ')
+
+      expect(currentValue).toBe(true)
+    })
+
+    it('should support clicking on label to toggle', async () => {
+      let currentValue = false
+      const handleChange = (value: boolean) => {
+        currentValue = value
+      }
+
+      render(
+        <CheckboxField
+          name="active"
+          value={currentValue}
+          onChange={handleChange}
+          label="Is Active"
+        />,
+      )
+
+      const label = screen.getByText('Is Active')
+      await userEvent.click(label)
+
+      expect(currentValue).toBe(true)
+    })
+  })
+
+  describe('read mode', () => {
+    it('should render "Yes" when value is true', async () => {
+      render(
+        <CheckboxField
+          name="active"
+          value={true}
+          onChange={() => {}}
+          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', async () => {
+      render(
+        <CheckboxField
+          name="active"
+          value={false}
+          onChange={() => {}}
+          label="Is Active"
+          mode="read"
+        />,
+      )
+
+      expect(screen.getByText('Is Active')).toBeInTheDocument()
+      expect(screen.getByText('No')).toBeInTheDocument()
+      expect(screen.queryByRole('checkbox')).not.toBeInTheDocument()
+    })
+  })
+})

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