@fpkit/acss 6.0.0 → 6.2.0

package/src/components/form/select.test.tsx

@@ -0,0 +1,541 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import Select, { Option } from './select'
+
+describe('Select', () => {
+  describe('rendering', () => {
+    it('renders select element', () => {
+      render(
+        <Select id="country" name="country">
+          <option value="us">United States</option>
+        </Select>
+      )
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
+    })
+
+    it('renders with provided id and name', () => {
+      render(
+        <Select id="country" name="country">
+          <option value="us">United States</option>
+        </Select>
+      )
+      const select = screen.getByRole('combobox')
+      expect(select).toHaveAttribute('id', 'country')
+      expect(select).toHaveAttribute('name', 'country')
+    })
+
+    it('renders children options', () => {
+      render(
+        <Select id="country">
+          <option value="us">United States</option>
+          <option value="uk">United Kingdom</option>
+          <option value="ca">Canada</option>
+        </Select>
+      )
+      expect(screen.getByText('United States')).toBeInTheDocument()
+      expect(screen.getByText('United Kingdom')).toBeInTheDocument()
+      expect(screen.getByText('Canada')).toBeInTheDocument()
+    })
+
+    it('renders empty option when no children provided', () => {
+      render(<Select id="empty" />)
+      const select = screen.getByRole('combobox')
+      expect(select.children).toHaveLength(1)
+      expect(select.children[0]).toHaveAttribute('value', '')
+    })
+
+    it('accepts classes prop without error', () => {
+      // Test that the component accepts the classes prop
+      // The actual className rendering is handled by the UI component
+      expect(() => {
+        render(
+          <Select id="test" classes="custom-class">
+            <option value="1">Option 1</option>
+          </Select>
+        )
+      }).not.toThrow()
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
+    })
+
+    it('applies custom styles', () => {
+      render(
+        <Select id="test" styles={{ fontSize: '1.5rem' }}>
+          <option value="1">Option 1</option>
+        </Select>
+      )
+      expect(screen.getByRole('combobox')).toHaveStyle({ fontSize: '1.5rem' })
+    })
+  })
+
+  describe('disabled state', () => {
+    it('applies disabled attribute when disabled', () => {
+      render(
+        <Select id="test" disabled>
+          <option value="1">Option 1</option>
+        </Select>
+      )
+      const select = screen.getByRole('combobox')
+      // useDisabledState hook manages disabled state via aria-disabled
+      // The actual disabled behavior is handled by the hook
+      expect(select).toHaveAttribute('aria-disabled', 'true')
+    })
+
+    it('applies aria-disabled when disabled', () => {
+      render(
+        <Select id="test" disabled>
+          <option value="1">Option 1</option>
+        </Select>
+      )
+      expect(screen.getByRole('combobox')).toHaveAttribute('aria-disabled', 'true')
+    })
+
+    it('does not call onSelectionChange when disabled', async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+
+      render(
+        <Select id="test" disabled onSelectionChange={handleChange}>
+          <option value="1">Option 1</option>
+          <option value="2">Option 2</option>
+        </Select>
+      )
+
+      const select = screen.getByRole('combobox')
+      await user.selectOptions(select, '2')
+
+      expect(handleChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('required state', () => {
+    it('applies required attribute when required', () => {
+      render(
+        <Select id="test" required>
+          <option value="1">Option 1</option>
+        </Select>
+      )
+      expect(screen.getByRole('combobox')).toBeRequired()
+    })
+
+    it('applies aria-required when required', () => {
+      render(
+        <Select id="test" required>
+          <option value="1">Option 1</option>
+        </Select>
+      )
+      expect(screen.getByRole('combobox')).toHaveAttribute('aria-required', 'true')
+    })
+  })
+
+  describe('validation states', () => {
+    it('applies aria-invalid when validation state is invalid', () => {
+      render(
+        <Select id="test" validationState="invalid">
+          <option value="1">Option 1</option>
+        </Select>
+      )
+      expect(screen.getByRole('combobox')).toHaveAttribute('aria-invalid', 'true')
+    })
+
+    it('does not apply aria-invalid when validation state is valid', () => {
+      render(
+        <Select id="test" validationState="valid">
+          <option value="1">Option 1</option>
+        </Select>
+      )
+      expect(screen.getByRole('combobox')).toHaveAttribute('aria-invalid', 'false')
+    })
+
+    it('does not apply aria-invalid when validation state is none', () => {
+      render(
+        <Select id="test" validationState="none">
+          <option value="1">Option 1</option>
+        </Select>
+      )
+      expect(screen.getByRole('combobox')).toHaveAttribute('aria-invalid', 'false')
+    })
+
+    it('associates error message with aria-describedby', () => {
+      render(
+        <Select id="test" validationState="invalid" errorMessage="This field is required">
+          <option value="1">Option 1</option>
+        </Select>
+      )
+      expect(screen.getByRole('combobox')).toHaveAttribute('aria-describedby', 'test-error')
+    })
+
+    it('associates hint text with aria-describedby', () => {
+      render(
+        <Select id="test" hintText="Choose your country">
+          <option value="1">Option 1</option>
+        </Select>
+      )
+      expect(screen.getByRole('combobox')).toHaveAttribute('aria-describedby', 'test-hint')
+    })
+
+    it('associates both error and hint with aria-describedby', () => {
+      render(
+        <Select
+          id="test"
+          validationState="invalid"
+          errorMessage="Invalid selection"
+          hintText="Choose carefully"
+        >
+          <option value="1">Option 1</option>
+        </Select>
+      )
+      expect(screen.getByRole('combobox')).toHaveAttribute('aria-describedby', 'test-error test-hint')
+    })
+
+    it('does not set aria-describedby when no error or hint provided', () => {
+      render(
+        <Select id="test">
+          <option value="1">Option 1</option>
+        </Select>
+      )
+      expect(screen.getByRole('combobox')).not.toHaveAttribute('aria-describedby')
+    })
+  })
+
+  describe('selection', () => {
+    it('sets default selected value', () => {
+      render(
+        <Select id="test" selected="2">
+          <option value="1">Option 1</option>
+          <option value="2">Option 2</option>
+        </Select>
+      )
+      expect(screen.getByRole('combobox')).toHaveValue('2')
+    })
+
+    it('calls onSelectionChange when selection changes', async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+
+      render(
+        <Select id="test" onSelectionChange={handleChange}>
+          <option value="1">Option 1</option>
+          <option value="2">Option 2</option>
+        </Select>
+      )
+
+      const select = screen.getByRole('combobox')
+      await user.selectOptions(select, '2')
+
+      expect(handleChange).toHaveBeenCalledOnce()
+      expect(handleChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          target: expect.objectContaining({ value: '2' })
+        })
+      )
+    })
+  })
+
+  describe('keyboard interactions', () => {
+    it('calls onEnter when Enter key is pressed', async () => {
+      const user = userEvent.setup()
+      const handleEnter = vi.fn()
+
+      render(
+        <Select id="test" onEnter={handleEnter}>
+          <option value="1">Option 1</option>
+        </Select>
+      )
+
+      const select = screen.getByRole('combobox')
+      select.focus()
+      await user.keyboard('{Enter}')
+
+      expect(handleEnter).toHaveBeenCalledOnce()
+    })
+
+    it('calls both onEnter and onKeyDown when Enter is pressed', async () => {
+      const user = userEvent.setup()
+      const handleEnter = vi.fn()
+      const handleKeyDown = vi.fn()
+
+      render(
+        <Select id="test" onEnter={handleEnter} onKeyDown={handleKeyDown}>
+          <option value="1">Option 1</option>
+        </Select>
+      )
+
+      const select = screen.getByRole('combobox')
+      select.focus()
+      await user.keyboard('{Enter}')
+
+      expect(handleEnter).toHaveBeenCalledOnce()
+      expect(handleKeyDown).toHaveBeenCalledOnce()
+    })
+
+    it('calls only onKeyDown for non-Enter keys', async () => {
+      const user = userEvent.setup()
+      const handleEnter = vi.fn()
+      const handleKeyDown = vi.fn()
+
+      render(
+        <Select id="test" onEnter={handleEnter} onKeyDown={handleKeyDown}>
+          <option value="1">Option 1</option>
+        </Select>
+      )
+
+      const select = screen.getByRole('combobox')
+      select.focus()
+      await user.keyboard('{ArrowDown}')
+
+      expect(handleKeyDown).toHaveBeenCalledOnce()
+      expect(handleEnter).not.toHaveBeenCalled()
+    })
+
+    it('does not call onEnter when disabled', async () => {
+      const user = userEvent.setup()
+      const handleEnter = vi.fn()
+
+      render(
+        <Select id="test" disabled onEnter={handleEnter}>
+          <option value="1">Option 1</option>
+        </Select>
+      )
+
+      const select = screen.getByRole('combobox')
+      select.focus()
+      await user.keyboard('{Enter}')
+
+      expect(handleEnter).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('event handlers', () => {
+    it('calls onBlur when select loses focus', async () => {
+      const user = userEvent.setup()
+      const handleBlur = vi.fn()
+
+      render(
+        <Select id="test" onBlur={handleBlur}>
+          <option value="1">Option 1</option>
+        </Select>
+      )
+
+      const select = screen.getByRole('combobox')
+      select.focus()
+      await user.tab()
+
+      expect(handleBlur).toHaveBeenCalledOnce()
+    })
+
+    it('calls onPointerDown on pointer interaction', async () => {
+      const user = userEvent.setup()
+      const handlePointerDown = vi.fn()
+
+      render(
+        <Select id="test" onPointerDown={handlePointerDown}>
+          <option value="1">Option 1</option>
+        </Select>
+      )
+
+      const select = screen.getByRole('combobox')
+      await user.pointer({ target: select, keys: '[MouseLeft>]' })
+
+      expect(handlePointerDown).toHaveBeenCalled()
+    })
+  })
+
+  describe('ref forwarding', () => {
+    it('forwards ref to select element', () => {
+      const ref = vi.fn()
+
+      render(
+        <Select id="test" ref={ref}>
+          <option value="1">Option 1</option>
+        </Select>
+      )
+
+      expect(ref).toHaveBeenCalledWith(expect.any(HTMLSelectElement))
+    })
+  })
+})
+
+describe('Option', () => {
+  describe('rendering', () => {
+    it('renders option element', () => {
+      render(
+        <Select id="test">
+          <Option value="us" label="United States" />
+        </Select>
+      )
+      expect(screen.getByText('United States')).toBeInTheDocument()
+    })
+
+    it('renders with value attribute', () => {
+      render(
+        <Select id="test">
+          <Option value="us" label="United States" />
+        </Select>
+      )
+      const option = screen.getByText('United States')
+      expect(option).toHaveAttribute('value', 'us')
+    })
+
+    it('uses label as display text', () => {
+      render(
+        <Select id="test">
+          <Option value="us" label="United States" />
+        </Select>
+      )
+      expect(screen.getByText('United States')).toBeInTheDocument()
+    })
+
+    it('uses children over label when provided', () => {
+      render(
+        <Select id="test">
+          <Option value="us" label="Ignored">
+            United States
+          </Option>
+        </Select>
+      )
+      expect(screen.getByText('United States')).toBeInTheDocument()
+      expect(screen.queryByText('Ignored')).not.toBeInTheDocument()
+    })
+
+    it('uses value as display when label not provided', () => {
+      render(
+        <Select id="test">
+          <Option value="United States" />
+        </Select>
+      )
+      expect(screen.getByText('United States')).toBeInTheDocument()
+    })
+  })
+
+  describe('disabled state', () => {
+    it('applies disabled attribute when disabled', () => {
+      render(
+        <Select id="test">
+          <Option value="us" label="United States" disabled />
+        </Select>
+      )
+      expect(screen.getByText('United States')).toBeDisabled()
+    })
+  })
+
+  describe('styling variants', () => {
+    it('applies variant data attribute', () => {
+      render(
+        <Select id="test">
+          <Option value="us" label="United States" variant="primary" />
+        </Select>
+      )
+      expect(screen.getByText('United States')).toHaveAttribute('data-option', 'primary')
+    })
+
+    it('applies size data attribute', () => {
+      render(
+        <Select id="test">
+          <Option value="us" label="United States" size="lg" />
+        </Select>
+      )
+      expect(screen.getByText('United States')).toHaveAttribute('data-size', 'lg')
+    })
+
+    it('applies custom data attributes', () => {
+      render(
+        <Select id="test">
+          <Option
+            value="us"
+            label="United States"
+            dataAttributes={{ 'data-highlighted': true, 'data-category': 'premium' }}
+          />
+        </Select>
+      )
+      const option = screen.getByText('United States')
+      expect(option).toHaveAttribute('data-highlighted', 'true')
+      expect(option).toHaveAttribute('data-category', 'premium')
+    })
+
+    it('accepts classes prop without error', () => {
+      // Test that the Option component accepts the classes prop
+      // The actual className rendering is handled by the UI component
+      expect(() => {
+        render(
+          <Select id="test">
+            <Option value="us" label="United States" classes="custom-option" />
+          </Select>
+        )
+      }).not.toThrow()
+      expect(screen.getByText('United States')).toBeInTheDocument()
+    })
+
+    it('applies custom styles', () => {
+      render(
+        <Select id="test">
+          <Option value="us" label="United States" styles={{ color: 'red' }} />
+        </Select>
+      )
+      // Browsers convert color values to rgb format
+      expect(screen.getByText('United States')).toHaveStyle({ color: 'rgb(255, 0, 0)' })
+    })
+  })
+
+  describe('legacy props support', () => {
+    it('supports selectValue prop for backwards compatibility', () => {
+      render(
+        <Select id="test">
+          <Option selectValue="us" selectLabel="United States" />
+        </Select>
+      )
+      const option = screen.getByText('United States')
+      expect(option).toHaveAttribute('value', 'us')
+    })
+
+    it('prefers value over selectValue', () => {
+      render(
+        <Select id="test">
+          <Option value="uk" selectValue="us" label="United Kingdom" />
+        </Select>
+      )
+      const option = screen.getByText('United Kingdom')
+      expect(option).toHaveAttribute('value', 'uk')
+    })
+
+    it('prefers label over selectLabel', () => {
+      render(
+        <Select id="test">
+          <Option value="uk" label="United Kingdom" selectLabel="Ignored" />
+        </Select>
+      )
+      expect(screen.getByText('United Kingdom')).toBeInTheDocument()
+      expect(screen.queryByText('Ignored')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('ref forwarding', () => {
+    it('forwards ref to option element', () => {
+      const ref = vi.fn()
+
+      render(
+        <Select id="test">
+          <Option ref={ref} value="us" label="United States" />
+        </Select>
+      )
+
+      expect(ref).toHaveBeenCalledWith(expect.any(HTMLOptionElement))
+    })
+  })
+
+  describe('compound component', () => {
+    it('is accessible via Select.Option', () => {
+      render(
+        <Select id="test">
+          <Select.Option value="us" label="United States" />
+        </Select>
+      )
+      expect(screen.getByText('United States')).toBeInTheDocument()
+    })
+
+    it('has correct display name', () => {
+      expect(Option.displayName).toBe('Select.Option')
+    })
+  })
+})