@jmruthers/pace-core 0.5.75 → 0.5.76

package/src/components/Select/Select.test.tsx

@@ -2,12 +2,16 @@
  * @file Select Component Tests
  * @description Comprehensive test suite for Select component and its sub-components
  * @package @jmruthers/pace-core
+ * @module Components/Select
+ * 
+ * This test suite follows the testing guidelines in TEST_GUIDE_CURSOR.md
+ * and focuses on observable behavior, accessibility, and user interactions.
  */
 
 import React from 'react';
-import { screen, waitFor, act } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { 
   Select, 
   SelectTrigger, 
@@ -66,46 +70,48 @@ describe('Select Component', () => {
     );
   };
 
-    describe('Basic Rendering', () => {
-    it('renders with default props', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders select trigger with placeholder', () => {
       renderSelect();
       
-      expect(screen.getByTestId('select-root')).toBeInTheDocument();
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-      expect(screen.getByTestId('select-value')).toBeInTheDocument();
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
       expect(screen.getByText('Select an option...')).toBeInTheDocument();
     });
 
     it('renders with custom placeholder', () => {
-      renderSelect({}, []);
-      
-      const selectValue = screen.getByTestId('select-value');
-      expect(selectValue).toHaveTextContent('Select an option...');
-    });
-
-    it('renders with custom className', () => {
-      renderSelect({ className: 'custom-select' });
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Choose..." />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      );
       
-      expect(screen.getByTestId('select-root')).toHaveClass('custom-select');
+      expect(screen.getByText('Choose...')).toBeInTheDocument();
     });
 
     it('renders with disabled state', () => {
       renderSelect({ disabled: true });
       
-      const trigger = screen.getByTestId('select-trigger');
+      const trigger = screen.getByRole('combobox');
       expect(trigger).toBeDisabled();
     });
 
-    it('renders with default value', () => {
-      renderSelect({ defaultValue: 'option1' });
-      
-      expect(screen.getByTestId('select-root')).toHaveAttribute('data-value', 'option1');
-    });
-
-    it('renders with controlled value', () => {
-      renderSelect({ value: 'option2' });
+    it('shows placeholder when no value is selected', () => {
+      renderSelect();
       
-      expect(screen.getByTestId('select-root')).toHaveAttribute('data-value', 'option2');
+      expect(screen.getByText('Select an option...')).toBeInTheDocument();
     });
   });
 
@@ -339,152 +345,157 @@ describe('Select Component', () => {
   });
 
   describe('User Interactions', () => {
-    it('opens dropdown on trigger click', async () => {
+    it('opens dropdown when clicking trigger', async () => {
       const user = userEvent.setup();
       renderSelect();
       
-      const trigger = screen.getByTestId('select-trigger');
+      const trigger = screen.getByRole('combobox');
       await user.click(trigger);
       
-      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
       expect(trigger).toHaveAttribute('aria-expanded', 'true');
     });
 
-    it('closes dropdown on item selection', async () => {
+    it('shows all options when dropdown opens', async () => {
       const user = userEvent.setup();
       renderSelect();
       
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
+      await user.click(screen.getByRole('combobox'));
       
-      const option = screen.getByText('Option 1');
-      await user.click(option);
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+      expect(screen.getByText('Option 2')).toBeInTheDocument();
+      expect(screen.getByText('Option 3')).toBeInTheDocument();
+    });
+
+    it('closes dropdown when an option is selected', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      await user.click(screen.getByRole('combobox'));
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+      
+      await user.click(screen.getByText('Option 1'));
       
       await waitFor(() => {
-        expect(screen.queryByTestId('select-content')).not.toBeInTheDocument();
-      }, { interval: 10 });
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+      });
     });
 
-    it('updates value on item selection', async () => {
+    it('updates displayed value after selection', async () => {
       const user = userEvent.setup();
       const onValueChange = vi.fn();
       renderSelect({ onValueChange });
       
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const option = screen.getByText('Option 2');
-      await user.click(option);
+      await user.click(screen.getByRole('combobox'));
+      await user.click(screen.getByText('Option 2'));
       
       expect(onValueChange).toHaveBeenCalledWith('option2');
+      await waitFor(() => {
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+      });
     });
 
-    it('closes dropdown on outside click', async () => {
+    it('closes dropdown when clicking outside', async () => {
       const user = userEvent.setup();
       renderSelect();
       
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+      await user.click(screen.getByRole('combobox'));
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
       
-      // Click outside
       await user.click(document.body);
       
       await waitFor(() => {
-        expect(screen.queryByTestId('select-content')).not.toBeInTheDocument();
-      }, { interval: 10 });
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+      });
+    });
+
+    it('prevents opening when trigger is disabled', async () => {
+      const user = userEvent.setup();
+      renderSelect({ disabled: true });
+      
+      const trigger = screen.getByRole('combobox');
+      expect(trigger).toBeDisabled();
+      
+      await user.click(trigger);
+      
+      expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
     });
   });
 
   describe('Keyboard Navigation', () => {
-    it('opens dropdown on Enter key', async () => {
+    it('opens dropdown when pressing Enter', async () => {
       const user = userEvent.setup();
       renderSelect();
       
-      const trigger = screen.getByTestId('select-trigger');
+      const trigger = screen.getByRole('combobox');
       trigger.focus();
       await user.keyboard('{Enter}');
       
-      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
     });
 
-    it('opens dropdown on Space key', async () => {
+    it('opens dropdown when pressing Space', async () => {
       const user = userEvent.setup();
       renderSelect();
       
-      const trigger = screen.getByTestId('select-trigger');
+      const trigger = screen.getByRole('combobox');
       trigger.focus();
       await user.keyboard(' ');
       
-      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
     });
 
-    it('opens dropdown on ArrowDown key', async () => {
+    it('opens dropdown when pressing ArrowDown', async () => {
       const user = userEvent.setup();
       renderSelect();
       
-      const trigger = screen.getByTestId('select-trigger');
+      const trigger = screen.getByRole('combobox');
       trigger.focus();
       await user.keyboard('{ArrowDown}');
       
-      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
     });
 
-    it('opens dropdown on ArrowUp key', async () => {
+    it('opens dropdown when pressing ArrowUp', async () => {
       const user = userEvent.setup();
       renderSelect();
       
-      const trigger = screen.getByTestId('select-trigger');
+      const trigger = screen.getByRole('combobox');
       trigger.focus();
       await user.keyboard('{ArrowUp}');
       
-      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
     });
 
-    it('closes dropdown on Escape key', async () => {
+    it('closes dropdown when pressing Escape', async () => {
       const user = userEvent.setup();
       renderSelect();
       
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+      await user.click(screen.getByRole('combobox'));
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
       
       await user.keyboard('{Escape}');
       
       await waitFor(() => {
-        expect(screen.queryByTestId('select-content')).not.toBeInTheDocument();
-      }, { interval: 10 });
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+      });
     });
 
-    it('selects item on click', async () => {
+    it('selects option with keyboard activation', async () => {
       const user = userEvent.setup();
       const onValueChange = vi.fn();
       renderSelect({ onValueChange });
       
-      const trigger = screen.getByTestId('select-trigger');
+      const trigger = screen.getByRole('combobox');
       await user.click(trigger);
       
       const item = screen.getByText('Option 1');
-      await user.click(item);
+      item.focus();
+      await user.keyboard('{Enter}');
       
       expect(onValueChange).toHaveBeenCalledWith('option1');
     });
-
-    it('selects different item on click', async () => {
-      const user = userEvent.setup();
-      const onValueChange = vi.fn();
-      renderSelect({ onValueChange });
-      
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const item = screen.getByText('Option 2');
-      await user.click(item);
-      
-      expect(onValueChange).toHaveBeenCalledWith('option2');
-    });
   });
 
   describe('Search Functionality', () => {
@@ -865,65 +876,50 @@ describe('Select Component', () => {
   });
 
   describe('Accessibility', () => {
-    it('has proper ARIA attributes', () => {
+    it('announces expandable state to screen readers', () => {
       renderSelect();
       
-      const trigger = screen.getByTestId('select-trigger');
-      expect(trigger).toHaveAttribute('role', 'combobox');
+      const trigger = screen.getByRole('combobox');
       expect(trigger).toHaveAttribute('aria-expanded', 'false');
       expect(trigger).toHaveAttribute('aria-haspopup', 'listbox');
     });
 
-    it('updates ARIA attributes when opened', async () => {
+    it('updates expanded state when opened', async () => {
       const user = userEvent.setup();
       renderSelect();
       
-      const trigger = screen.getByTestId('select-trigger');
+      const trigger = screen.getByRole('combobox');
       await user.click(trigger);
       
       expect(trigger).toHaveAttribute('aria-expanded', 'true');
     });
 
-    it('has proper listbox role on content', async () => {
+    it('provides listbox structure for screen readers', async () => {
       const user = userEvent.setup();
       renderSelect();
       
-      const trigger = screen.getByTestId('select-trigger');
+      const trigger = screen.getByRole('combobox');
       await user.click(trigger);
       
-      const content = screen.getByTestId('select-content');
-      expect(content).toHaveAttribute('role', 'listbox');
-    });
-
-    it('has proper option roles on items', async () => {
-      const user = userEvent.setup();
-      renderSelect();
-      
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const items = screen.getAllByRole('option');
-      expect(items).toHaveLength(3);
-      
-      items.forEach(item => {
-        expect(item).toHaveAttribute('role', 'option');
-      });
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+      const options = screen.getAllByRole('option');
+      expect(options).toHaveLength(3);
     });
 
-    it('has proper aria-selected on items', async () => {
+    it('marks selected option for screen readers', async () => {
       const user = userEvent.setup();
       renderSelect({ defaultValue: 'option2' });
       
-      const trigger = screen.getByTestId('select-trigger');
+      const trigger = screen.getByRole('combobox');
       await user.click(trigger);
       
-      const items = screen.getAllByRole('option');
-      expect(items[0]).toHaveAttribute('aria-selected', 'false');
-      expect(items[1]).toHaveAttribute('aria-selected', 'true');
-      expect(items[2]).toHaveAttribute('aria-selected', 'false');
+      const options = screen.getAllByRole('option');
+      expect(options[0]).toHaveAttribute('aria-selected', 'false');
+      expect(options[1]).toHaveAttribute('aria-selected', 'true');
+      expect(options[2]).toHaveAttribute('aria-selected', 'false');
     });
 
-    it('has proper search input accessibility', async () => {
+    it('announces search functionality for screen readers', async () => {
       const user = userEvent.setup();
       renderWithProviders(
         <Select>
@@ -936,11 +932,38 @@ describe('Select Component', () => {
         </Select>
       );
       
-      const trigger = screen.getByTestId('select-trigger');
+      await user.click(screen.getByRole('combobox'));
+      
+      const searchInput = screen.getByLabelText('Search options');
+      expect(searchInput).toBeInTheDocument();
+    });
+
+    it('supports keyboard-only navigation', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByRole('combobox');
+      trigger.focus();
+      
+      await user.keyboard('{Enter}');
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+      
+      await user.keyboard('{Escape}');
+      await waitFor(() => {
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+      });
+    });
+
+    it('maintains focus management when interacting', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByRole('combobox');
       await user.click(trigger);
       
-      const searchInput = screen.getByTestId('select-search-input');
-      expect(searchInput).toHaveAttribute('aria-label', 'Search options');
+      const options = screen.getAllByRole('option');
+      options[0].focus();
+      expect(document.activeElement).toBe(options[0]);
     });
   });