@jmruthers/pace-core 0.6.8 → 0.6.10

package/src/components/Checkbox/Checkbox.test.tsx

@@ -22,126 +22,85 @@ describe('Checkbox Component', () => {
   });
 
   describe('Rendering', () => {
-    it('renders with default props', () => {
-      renderWithProviders(<Checkbox />);
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toBeInTheDocument();
-      expect(checkbox).not.toBeChecked();
-    });
-
-    it('renders with custom className', () => {
-      renderWithProviders(<Checkbox className="custom-checkbox" />);
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toHaveClass('custom-checkbox');
-    });
-
-    it('renders with custom id', () => {
-      renderWithProviders(<Checkbox id="test-checkbox" />);
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toHaveAttribute('id', 'test-checkbox');
-    });
-
-    it('renders with custom name (Radix UI handles this internally)', () => {
-      renderWithProviders(<Checkbox name="test-name" />);
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toBeInTheDocument();
-      // Note: Radix UI Checkbox doesn't expose name attribute directly
-    });
-
-    it('renders with value prop', () => {
-      renderWithProviders(<Checkbox value="test-value" />);
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toHaveAttribute('value', 'test-value');
-    });
-
-    it('forwards ref correctly', () => {
+    it('renders with default props, custom className, id, value, and HTML attributes', () => {
       const ref = React.createRef<HTMLButtonElement>();
-      renderWithProviders(<Checkbox ref={ref} />);
-      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
-    });
-
-    it('applies all HTML attributes', () => {
       renderWithProviders(
         <Checkbox 
+          ref={ref}
+          className="custom-checkbox"
+          id="test-checkbox"
+          value="test-value"
+          name="test-name"
           data-testid="test-checkbox" 
           aria-label="Test checkbox"
           title="Test title"
         />
       );
       const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toBeInTheDocument();
+      expect(checkbox).not.toBeChecked();
+      expect(checkbox).toHaveClass('custom-checkbox');
+      expect(checkbox).toHaveAttribute('id', 'test-checkbox');
+      expect(checkbox).toHaveAttribute('value', 'test-value');
       expect(checkbox).toHaveAttribute('data-testid', 'test-checkbox');
       expect(checkbox).toHaveAttribute('aria-label', 'Test checkbox');
       expect(checkbox).toHaveAttribute('title', 'Test title');
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
     });
   });
 
   describe('State Management', () => {
-    it('renders as unchecked by default', () => {
-      renderWithProviders(<Checkbox />);
-      const checkbox = screen.getByRole('checkbox');
+    it('renders as unchecked by default and handles checked states', () => {
+      const { rerender } = renderWithProviders(<Checkbox />);
+      let checkbox = screen.getByRole('checkbox');
       expect(checkbox).not.toBeChecked();
-    });
 
-    it('renders as checked when checked prop is true', () => {
-      renderWithProviders(<Checkbox checked={true} />);
-      const checkbox = screen.getByRole('checkbox');
+      rerender(<Checkbox checked={true} />);
+      checkbox = screen.getByRole('checkbox');
       expect(checkbox).toBeChecked();
-    });
 
-    it('renders as unchecked when checked prop is false', () => {
-      renderWithProviders(<Checkbox checked={false} />);
-      const checkbox = screen.getByRole('checkbox');
+      rerender(<Checkbox checked={false} />);
+      checkbox = screen.getByRole('checkbox');
       expect(checkbox).not.toBeChecked();
     });
 
-    it('handles controlled state changes', () => {
+    it('handles controlled state changes and indeterminate state', () => {
       const handleCheckedChange = vi.fn();
-      renderWithProviders(
+      const { rerender } = renderWithProviders(
         <Checkbox 
           checked={false} 
           onCheckedChange={handleCheckedChange} 
         />
       );
-      const checkbox = screen.getByRole('checkbox');
+      let checkbox = screen.getByRole('checkbox');
       expect(checkbox).not.toBeChecked();
-    });
 
-    it('handles indeterminate state', () => {
-      renderWithProviders(<Checkbox checked="indeterminate" />);
-      const checkbox = screen.getByRole('checkbox');
+      rerender(<Checkbox checked="indeterminate" />);
+      checkbox = screen.getByRole('checkbox');
       expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
     });
   });
 
   describe('Disabled State', () => {
-    it('renders as disabled when disabled prop is true', () => {
-      renderWithProviders(<Checkbox disabled={true} />);
-      const checkbox = screen.getByRole('checkbox');
+    it('renders as disabled when disabled prop is true and applies disabled styling', () => {
+      const { rerender } = renderWithProviders(<Checkbox disabled={true} />);
+      let checkbox = screen.getByRole('checkbox');
       expect(checkbox).toBeDisabled();
-    });
+      expect(checkbox).toHaveAttribute('disabled');
 
-    it('renders as enabled when disabled prop is false', () => {
-      renderWithProviders(<Checkbox disabled={false} />);
-      const checkbox = screen.getByRole('checkbox');
+      rerender(<Checkbox disabled={false} />);
+      checkbox = screen.getByRole('checkbox');
       expect(checkbox).not.toBeDisabled();
     });
-
-    it('applies disabled styling', () => {
-      renderWithProviders(<Checkbox disabled={true} />);
-      const checkbox = screen.getByRole('checkbox');
-      // Verify disabled state is visually indicated
-      expect(checkbox).toBeDisabled();
-      expect(checkbox).toHaveAttribute('disabled');
-    });
   });
 
   describe('Event Handling', () => {
-    it('handles click events', async () => {
+    it('handles click events and toggles state', async () => {
       const handleCheckedChange = vi.fn();
       const user = userEvent.setup();
       
-      renderWithProviders(
-        <Checkbox onCheckedChange={handleCheckedChange} />
+      const { rerender } = renderWithProviders(
+        <Checkbox checked={false} onCheckedChange={handleCheckedChange} />
       );
       
       const checkbox = screen.getByRole('checkbox');
@@ -149,6 +108,14 @@ describe('Checkbox Component', () => {
       
       expect(handleCheckedChange).toHaveBeenCalledTimes(1);
       expect(handleCheckedChange).toHaveBeenCalledWith(true);
+      
+      // Simulate state change
+      rerender(<Checkbox checked={true} onCheckedChange={handleCheckedChange} />);
+      expect(checkbox).toBeChecked();
+      
+      await user.click(checkbox);
+      expect(handleCheckedChange).toHaveBeenCalledTimes(2);
+      expect(handleCheckedChange).toHaveBeenCalledWith(false);
     });
 
     it('handles keyboard events (Space)', async () => {
@@ -167,44 +134,6 @@ describe('Checkbox Component', () => {
       expect(handleCheckedChange).toHaveBeenCalledWith(true);
     });
 
-    it('handles keyboard events (Enter - Radix UI uses Space)', async () => {
-      const handleCheckedChange = vi.fn();
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <Checkbox onCheckedChange={handleCheckedChange} />
-      );
-      
-      const checkbox = screen.getByRole('checkbox');
-      checkbox.focus();
-      await user.keyboard('{Enter}');
-      
-      // Note: Radix UI Checkbox primarily uses Space key, Enter may not trigger
-      // This test documents the expected behavior
-      expect(handleCheckedChange).toHaveBeenCalledTimes(0);
-    });
-
-    it('toggles state on click', async () => {
-      const handleCheckedChange = vi.fn();
-      const user = userEvent.setup();
-      
-      const { rerender } = renderWithProviders(
-        <Checkbox checked={false} onCheckedChange={handleCheckedChange} />
-      );
-      
-      const checkbox = screen.getByRole('checkbox');
-      await user.click(checkbox);
-      
-      expect(handleCheckedChange).toHaveBeenCalledWith(true);
-      
-      // Simulate state change
-      rerender(<Checkbox checked={true} onCheckedChange={handleCheckedChange} />);
-      expect(checkbox).toBeChecked();
-      
-      await user.click(checkbox);
-      expect(handleCheckedChange).toHaveBeenCalledWith(false);
-    });
-
     it('does not trigger events when disabled', async () => {
       const handleCheckedChange = vi.fn();
       const user = userEvent.setup();
@@ -221,96 +150,51 @@ describe('Checkbox Component', () => {
   });
 
   describe('Accessibility', () => {
-    it('has proper ARIA attributes', () => {
-      renderWithProviders(<Checkbox />);
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toHaveAttribute('type', 'button');
-    });
-
-    it('supports aria-label', () => {
-      renderWithProviders(<Checkbox aria-label="Accept terms" />);
-      const checkbox = screen.getByRole('checkbox', { name: 'Accept terms' });
-      expect(checkbox).toBeInTheDocument();
-    });
-
-    it('supports aria-labelledby', () => {
+    it('has proper ARIA attributes and supports aria-label, aria-labelledby, and aria-describedby', () => {
       renderWithProviders(
         <>
           <label id="terms-label">Accept terms and conditions</label>
-          <Checkbox aria-labelledby="terms-label" />
+          <Checkbox 
+            aria-label="Accept terms"
+            aria-labelledby="terms-label"
+            aria-describedby="terms-help"
+          />
+          <span id="terms-help">Please read the terms carefully</span>
         </>
       );
       const checkbox = screen.getByRole('checkbox', { name: 'Accept terms and conditions' });
       expect(checkbox).toBeInTheDocument();
-    });
-
-    it('supports aria-describedby', () => {
-      renderWithProviders(
-        <>
-          <Checkbox aria-describedby="terms-help" />
-          <span id="terms-help">Please read the terms carefully</span>
-        </>
-      );
-      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toHaveAttribute('type', 'button');
       expect(checkbox).toHaveAttribute('aria-describedby', 'terms-help');
+      expect(checkbox).not.toHaveAttribute('tabindex', '-1');
     });
 
-    it('announces state changes to screen readers', () => {
+    it('announces state changes to screen readers and has focus visible styles', async () => {
+      const user = userEvent.setup();
       const { rerender } = renderWithProviders(<Checkbox checked={false} />);
       let checkbox = screen.getByRole('checkbox');
       expect(checkbox).toHaveAttribute('aria-checked', 'false');
       
+      checkbox.focus();
+      expect(checkbox).toHaveFocus();
+      
       rerender(<Checkbox checked={true} />);
       checkbox = screen.getByRole('checkbox');
       expect(checkbox).toHaveAttribute('aria-checked', 'true');
     });
-
-    it('is keyboard accessible', () => {
-      renderWithProviders(<Checkbox />);
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).not.toHaveAttribute('tabindex', '-1');
-    });
-
-    it('has focus visible styles', async () => {
-      const user = userEvent.setup();
-      renderWithProviders(<Checkbox />);
-      const checkbox = screen.getByRole('checkbox');
-      
-      // Verify focus is visible when keyboard navigating
-      checkbox.focus();
-      expect(checkbox).toHaveFocus();
-    });
   });
 
   describe('Visual States', () => {
-    it('applies checked state styling', () => {
+    it('applies checked state styling and shows check icon when checked', () => {
       renderWithProviders(<Checkbox checked={true} />);
       const checkbox = screen.getByRole('checkbox');
-      // Verify checked state is visually indicated
       expect(checkbox).toBeChecked();
       expect(checkbox).toHaveAttribute('aria-checked', 'true');
     });
 
-    it('shows check icon when checked', () => {
-      renderWithProviders(<Checkbox checked={true} />);
-      const checkbox = screen.getByRole('checkbox');
-      // The check icon is rendered by Radix UI internally
-      // We verify the checkbox is checked, which indicates the icon is visible
-      expect(checkbox).toBeChecked();
-    });
-
-    it('has proper sizing', () => {
-      renderWithProviders(<Checkbox />);
-      const checkbox = screen.getByRole('checkbox');
-      // Verify checkbox is rendered and has expected dimensions
-      expect(checkbox).toBeInTheDocument();
-      expect(checkbox).toBeVisible();
-    });
-
-    it('has proper border and background styling', () => {
+    it('has proper sizing and visual structure', () => {
       renderWithProviders(<Checkbox />);
       const checkbox = screen.getByRole('checkbox');
-      // Verify checkbox is rendered with proper visual structure
       expect(checkbox).toBeInTheDocument();
       expect(checkbox).toBeVisible();
     });
@@ -370,7 +254,7 @@ describe('Checkbox Component', () => {
     });
 
     it('handles unknown props gracefully', () => {
-      // Radix UI Checkbox forwards unknown props, so component should still render
+      // @ts-expect-error Testing unknown props
       renderWithProviders(
         <Checkbox {...({ 'data-custom': 'value' } as any)} />
       );

package/src/components/ContextSelector/ContextSelector.tsx

@@ -151,7 +151,7 @@ export function ContextSelector({
       return `org:${selectedOrganisation.id}`;
     }
     return '';
-  }, [showOrganisations, showEvents, selectedOrganisation?.id, selectedEvent]);
+  }, [showOrganisations, showEvents, selectedOrganisation, selectedEvent]);
 
   // Format display value
   // Priority: Event selection takes precedence over organisation selection (matches currentValue)
@@ -231,12 +231,12 @@ export function ContextSelector({
         showOrganisations ? "Loading organisations..." :
           "Loading events...";
     return (
-      <p className={className}>
+      <div className={className}>
         <LoadingSpinner size="sm" /><br/>
         <span className="text-sm text-muted-foreground">
           {loadingText}
         </span>
-      </p>
+      </div>
     );
   }