@opensaas/stack-ui 0.1.7 → 0.3.0

package/tests/components/SelectField.test.tsx

@@ -0,0 +1,192 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { SelectField } from '../../src/components/fields/SelectField.js'
+
+describe('SelectField', () => {
+  const mockOptions = [
+    { label: 'Draft', value: 'draft' },
+    { label: 'Published', value: 'published' },
+    { label: 'Archived', value: 'archived' },
+  ]
+
+  describe('edit mode', () => {
+    it('should render select with label', () => {
+      render(
+        <SelectField
+          name="status"
+          value=""
+          onChange={vi.fn()}
+          label="Status"
+          options={mockOptions}
+        />,
+      )
+
+      expect(screen.getByText('Status')).toBeInTheDocument()
+      // Select is rendered as a button with role combobox
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
+    })
+
+    it('should display default placeholder when no value selected', () => {
+      render(
+        <SelectField
+          name="status"
+          value=""
+          onChange={vi.fn()}
+          label="Status"
+          options={mockOptions}
+        />,
+      )
+
+      // The component uses a hard-coded placeholder text
+      expect(screen.getByText('Select an option...')).toBeInTheDocument()
+    })
+
+    it('should display current selected value label', () => {
+      render(
+        <SelectField
+          name="status"
+          value="published"
+          onChange={vi.fn()}
+          label="Status"
+          options={mockOptions}
+        />,
+      )
+
+      // Should show the selected option label in the select trigger
+      expect(screen.getByText('Published')).toBeInTheDocument()
+    })
+
+    it('should show required indicator when required', () => {
+      render(
+        <SelectField
+          name="status"
+          value=""
+          onChange={vi.fn()}
+          label="Status"
+          options={mockOptions}
+          required
+        />,
+      )
+
+      expect(screen.getByText('*')).toBeInTheDocument()
+    })
+
+    it('should display error message', () => {
+      render(
+        <SelectField
+          name="status"
+          value=""
+          onChange={vi.fn()}
+          label="Status"
+          options={mockOptions}
+          error="Status is required"
+        />,
+      )
+
+      expect(screen.getByText('Status is required')).toBeInTheDocument()
+    })
+
+    it('should be disabled when disabled prop is true', () => {
+      render(
+        <SelectField
+          name="status"
+          value=""
+          onChange={vi.fn()}
+          label="Status"
+          options={mockOptions}
+          disabled
+        />,
+      )
+
+      const select = screen.getByRole('combobox')
+      expect(select).toBeDisabled()
+    })
+
+    it('should render select trigger element', () => {
+      render(
+        <SelectField
+          name="status"
+          value=""
+          onChange={vi.fn()}
+          label="Status"
+          options={mockOptions}
+        />,
+      )
+
+      // Select trigger should be present
+      const select = screen.getByRole('combobox')
+      expect(select).toBeInTheDocument()
+    })
+  })
+
+  describe('read mode', () => {
+    it('should render selected value as text', () => {
+      render(
+        <SelectField
+          name="status"
+          value="published"
+          onChange={vi.fn()}
+          label="Status"
+          options={mockOptions}
+          mode="read"
+        />,
+      )
+
+      expect(screen.getByText('Status')).toBeInTheDocument()
+      expect(screen.getByText('Published')).toBeInTheDocument()
+      expect(screen.queryByRole('combobox')).not.toBeInTheDocument()
+    })
+
+    it('should show dash when no value selected', () => {
+      render(
+        <SelectField
+          name="status"
+          value=""
+          onChange={vi.fn()}
+          label="Status"
+          options={mockOptions}
+          mode="read"
+        />,
+      )
+
+      expect(screen.getByText('-')).toBeInTheDocument()
+    })
+
+    it('should show dash for invalid value', () => {
+      render(
+        <SelectField
+          name="status"
+          value="invalid"
+          onChange={vi.fn()}
+          label="Status"
+          options={mockOptions}
+          mode="read"
+        />,
+      )
+
+      expect(screen.getByText('-')).toBeInTheDocument()
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle empty options array', () => {
+      render(<SelectField name="status" value="" onChange={vi.fn()} label="Status" options={[]} />)
+
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
+    })
+
+    it('should handle single option array', () => {
+      render(
+        <SelectField
+          name="status"
+          value=""
+          onChange={vi.fn()}
+          label="Status"
+          options={[{ label: 'Only Option', value: 'only' }]}
+        />,
+      )
+
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
+    })
+  })
+})

package/vitest.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 import path from 'path'
+import { playwright } from '@vitest/browser-playwright'
 
 export default defineConfig({
   plugins: [react()],
@@ -8,11 +9,30 @@ export default defineConfig({
     environment: 'happy-dom',
     globals: true,
     setupFiles: ['./tests/setup.ts'],
+    // Exclude browser tests from regular test runs
+    exclude: process.env.BROWSER_TEST === 'true' ? [] : ['**/browser/**'],
+    // Include only browser tests when in browser mode
+    include:
+      process.env.BROWSER_TEST === 'true'
+        ? ['tests/browser/**/*.test.{ts,tsx}']
+        : ['tests/**/*.test.{ts,tsx}', '!tests/browser/**'],
     coverage: {
       provider: 'v8',
       reporter: ['text', 'json', 'html', 'json-summary'],
       exclude: ['node_modules/', 'tests/', 'dist/', '**/*.d.ts', '**/*.config.*', '**/index.ts'],
     },
+    // Browser mode configuration
+    browser: {
+      enabled: process.env.BROWSER_TEST === 'true',
+      instances: [
+        {
+          browser: 'chromium',
+        },
+      ],
+      provider: playwright(),
+      headless: true,
+      screenshotFailures: true,
+    },
   },
   resolve: {
     alias: {