@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/Label/Label.test.tsx

@@ -1,7 +1,11 @@
 /**
- * @file Label Component Tests
- * @description Comprehensive test suite for Label component
+ * @file Integration Tests for Label Component
+ * @package @jmruthers/pace-core
  * @module Components/Label
+ * @since 1.0.0
+ * 
+ * Integration tests for Label component focusing on observable behavior,
+ * accessibility, and user interactions.
  */
 
 import React from 'react';
@@ -10,30 +14,27 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { Label } from './Label';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
-describe('Label Component', () => {
+// Following testing standards: use timeout parameter to prevent hanging
+const TEST_TIMEOUT = 10000; // 10 seconds per test
+
+describe('[integration] Label Component', () => {
   describe('Rendering', () => {
     it('renders with text content', () => {
       renderWithProviders(<Label>Email Address</Label>);
       expect(screen.getByText('Email Address')).toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
 
     it('renders with custom className', () => {
       renderWithProviders(<Label className="custom-class">Test Label</Label>);
       const label = screen.getByText('Test Label');
       expect(label).toHaveClass('custom-class');
-    });
+    }, TEST_TIMEOUT);
 
     it('renders with htmlFor attribute', () => {
       renderWithProviders(<Label htmlFor="email-input">Email</Label>);
       const label = screen.getByText('Email');
       expect(label).toHaveAttribute('for', 'email-input');
-    });
-
-    it('renders as a label element', () => {
-      renderWithProviders(<Label>Test Label</Label>);
-      const label = screen.getByText('Test Label');
-      expect(label.tagName).toBe('LABEL');
-    });
+    }, TEST_TIMEOUT);
 
     it('renders with complex children', () => {
       renderWithProviders(
@@ -43,7 +44,7 @@ describe('Label Component', () => {
       );
       expect(screen.getByText('Email Address')).toBeInTheDocument();
       expect(screen.getByText('Icon')).toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
   });
 
   describe('Required Field Indicators', () => {
@@ -53,7 +54,7 @@ describe('Label Component', () => {
       const requiredIndicator = screen.getByLabelText('required');
       expect(requiredIndicator).toBeInTheDocument();
       expect(requiredIndicator).toHaveTextContent('*');
-    });
+    }, TEST_TIMEOUT);
 
     it('displays custom required indicator when provided', () => {
       renderWithProviders(
@@ -64,12 +65,12 @@ describe('Label Component', () => {
       
       const requiredIndicator = screen.getByLabelText('required');
       expect(requiredIndicator).toHaveTextContent('(required)');
-    });
+    }, TEST_TIMEOUT);
 
     it('does not display required indicator when required prop is false', () => {
       renderWithProviders(<Label>Email Address</Label>);
       expect(screen.queryByLabelText('required')).not.toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
 
     it('hides required indicator visually when hideRequiredIndicator is true', () => {
       renderWithProviders(
@@ -80,14 +81,14 @@ describe('Label Component', () => {
       
       const requiredIndicator = screen.getByLabelText('required');
       expect(requiredIndicator).toHaveClass('sr-only');
-    });
+    }, TEST_TIMEOUT);
 
     it('applies destructive color to required indicator', () => {
       renderWithProviders(<Label required>Email Address</Label>);
       
       const requiredIndicator = screen.getByLabelText('required');
       expect(requiredIndicator).toHaveClass('text-destructive');
-    });
+    }, TEST_TIMEOUT);
   });
 
   describe('Helper Text', () => {
@@ -99,7 +100,7 @@ describe('Label Component', () => {
       );
       
       expect(screen.getByText("We'll never share your email")).toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
 
     it('applies custom className to helper text', () => {
       renderWithProviders(
@@ -110,7 +111,7 @@ describe('Label Component', () => {
       
       const helper = screen.getByText('Helper text');
       expect(helper).toHaveClass('custom-helper');
-    });
+    }, TEST_TIMEOUT);
 
     it('does not display helper text when error is present', () => {
       renderWithProviders(
@@ -120,7 +121,7 @@ describe('Label Component', () => {
       );
       
       expect(screen.queryByText('Helper text')).not.toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
 
     it('displays helper text without error', () => {
       renderWithProviders(
@@ -130,7 +131,7 @@ describe('Label Component', () => {
       );
       
       expect(screen.getByText('This is helpful')).toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
   });
 
   describe('Error States', () => {
@@ -143,7 +144,7 @@ describe('Label Component', () => {
       
       const errorMessage = screen.getByText('Please enter a valid email');
       expect(errorMessage).toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
 
     it('applies destructive color to label when error is present', () => {
       renderWithProviders(
@@ -152,7 +153,7 @@ describe('Label Component', () => {
       
       const label = screen.getByText('Email Address');
       expect(label).toHaveClass('text-destructive');
-    });
+    }, TEST_TIMEOUT);
 
     it('sets role="alert" on error message for accessibility', () => {
       renderWithProviders(
@@ -161,7 +162,7 @@ describe('Label Component', () => {
       
       const errorMessage = screen.getByText('Error message');
       expect(errorMessage).toHaveAttribute('role', 'alert');
-    });
+    }, TEST_TIMEOUT);
 
     it('sets aria-live="polite" on error message', () => {
       renderWithProviders(
@@ -170,7 +171,7 @@ describe('Label Component', () => {
       
       const errorMessage = screen.getByText('Error message');
       expect(errorMessage).toHaveAttribute('aria-live', 'polite');
-    });
+    }, TEST_TIMEOUT);
 
     it('applies custom className to error message', () => {
       renderWithProviders(
@@ -181,7 +182,7 @@ describe('Label Component', () => {
       
       const errorMessage = screen.getByText('Error message');
       expect(errorMessage).toHaveClass('custom-error');
-    });
+    }, TEST_TIMEOUT);
 
     it('does not display helper text when error is present', () => {
       renderWithProviders(
@@ -195,14 +196,14 @@ describe('Label Component', () => {
       
       expect(screen.queryByText('Helpful text')).not.toBeInTheDocument();
       expect(screen.getByText('Error occurred')).toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
 
     it('handles empty string error message', () => {
       renderWithProviders(<Label error="">Email</Label>);
       
       // Empty string error should not display anything
       expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
   });
 
   describe('Ref Forwarding', () => {
@@ -213,7 +214,7 @@ describe('Label Component', () => {
       
       expect(ref.current).toBeInstanceOf(HTMLLabelElement);
       expect(ref.current?.textContent).toBe('Email Address');
-    });
+    }, TEST_TIMEOUT);
 
     it('ref points to the correct element', () => {
       const ref = React.createRef<HTMLLabelElement>();
@@ -222,7 +223,7 @@ describe('Label Component', () => {
       
       expect(ref.current).toBeInstanceOf(HTMLLabelElement);
       expect(ref.current?.getAttribute('for')).toBe('email');
-    });
+    }, TEST_TIMEOUT);
   });
 
   describe('Edge Cases', () => {
@@ -235,7 +236,7 @@ describe('Label Component', () => {
       
       expect(screen.getByLabelText('required')).toBeInTheDocument();
       expect(screen.getByText('Helper text')).toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
 
     it('handles error state with required indicator', () => {
       renderWithProviders(
@@ -247,7 +248,7 @@ describe('Label Component', () => {
       expect(screen.getByLabelText('required')).toBeInTheDocument();
       expect(screen.getByText('Error message')).toBeInTheDocument();
       expect(screen.queryByText(/helper/i)).not.toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
 
     it('handles all props together', () => {
       renderWithProviders(
@@ -267,7 +268,7 @@ describe('Label Component', () => {
       expect(screen.getByLabelText('required')).toBeInTheDocument();
       expect(screen.queryByText('Helper text')).not.toBeInTheDocument();
       expect(screen.getByText('Error message')).toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
 
     it('renders with empty string children', () => {
       const { container } = renderWithProviders(<Label>{''}</Label>);
@@ -294,14 +295,14 @@ describe('Label Component', () => {
       const input = screen.getByLabelText('Email Address');
       expect(input).toBeInTheDocument();
       expect(input).toHaveAttribute('id', 'email');
-    });
+    }, TEST_TIMEOUT);
 
     it('required indicator has aria-label for screen readers', () => {
       renderWithProviders(<Label required>Email</Label>);
       
       const requiredIndicator = screen.getByLabelText('required');
       expect(requiredIndicator).toHaveAttribute('aria-label', 'required');
-    });
+    }, TEST_TIMEOUT);
 
     it('error message is announced to screen readers', () => {
       renderWithProviders(<Label error="Invalid input">Email</Label>);
@@ -309,7 +310,7 @@ describe('Label Component', () => {
       const errorMessage = screen.getByText('Invalid input');
       expect(errorMessage).toHaveAttribute('role', 'alert');
       expect(errorMessage).toHaveAttribute('aria-live', 'polite');
-    });
+    }, TEST_TIMEOUT);
 
     it('helper text is properly associated with label', () => {
       renderWithProviders(
@@ -323,7 +324,7 @@ describe('Label Component', () => {
       
       expect(label).toBeInTheDocument();
       expect(helper.tagName).toBe('P');
-    });
+    }, TEST_TIMEOUT);
   });
 
   describe('DOM Structure', () => {
@@ -336,7 +337,7 @@ describe('Label Component', () => {
       
       const label = screen.getByText('Test');
       expect(label.parentElement).toBeDefined();
-    });
+    }, TEST_TIMEOUT);
 
     it('places helper text after label element', () => {
       renderWithProviders(
@@ -352,7 +353,7 @@ describe('Label Component', () => {
       const helperIndex = Array.from(container?.children || []).indexOf(helper);
       
       expect(helperIndex).toBeGreaterThan(labelIndex);
-    });
+    }, TEST_TIMEOUT);
 
     it('places error message after label element', () => {
       renderWithProviders(
@@ -368,7 +369,7 @@ describe('Label Component', () => {
       const errorIndex = Array.from(container?.children || []).indexOf(error);
       
       expect(errorIndex).toBeGreaterThan(labelIndex);
-    });
+    }, TEST_TIMEOUT);
   });
 
   describe('Customization', () => {
@@ -381,7 +382,7 @@ describe('Label Component', () => {
       
       const label = screen.getByTestId('custom-label');
       expect(label).toHaveAttribute('data-custom', 'value');
-    });
+    }, TEST_TIMEOUT);
 
     it('allows custom requiredIndicator as ReactNode', () => {
       renderWithProviders(
@@ -392,7 +393,7 @@ describe('Label Component', () => {
       
       const indicator = screen.getByLabelText('required');
       expect(indicator.querySelector('.req')).toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
   });
 
   describe('Integration with Form Controls', () => {
@@ -409,7 +410,7 @@ describe('Label Component', () => {
       
       expect(label).toHaveAttribute('for', 'test-input');
       expect(input).toHaveAttribute('id', 'test-input');
-    });
+    }, TEST_TIMEOUT);
 
     it('works with required inputs', () => {
       renderWithProviders(
@@ -429,6 +430,6 @@ describe('Label Component', () => {
       expect(required).toBeInTheDocument();
       expect(input).toHaveAttribute('required');
       expect(input).toHaveAttribute('id', 'required-input');
-    });
+    }, TEST_TIMEOUT);
   });
 });

package/src/components/LoadingSpinner/LoadingSpinner.test.tsx

@@ -1,11 +1,11 @@
 /**
- * @file LoadingSpinner Component Tests
+ * @file Integration Tests for LoadingSpinner Component
  * @package @jmruthers/pace-core
  * @module Components/LoadingSpinner
- * @since 0.1.0
- *
- * Comprehensive test suite for the LoadingSpinner component covering all functionality,
- * accessibility features, and edge cases.
+ * @since 1.0.0
+ * 
+ * Integration tests for LoadingSpinner component focusing on observable behavior,
+ * accessibility, and visual properties.
  */
 
 import React from 'react';
@@ -14,7 +14,9 @@ import { describe, it, expect, beforeEach } from 'vitest';
 import { LoadingSpinner, LoadingSpinnerProps } from './LoadingSpinner';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
-describe('LoadingSpinner Component', () => {
+// Following testing standards: use timeout parameter to prevent hanging
+
+describe('[integration] LoadingSpinner Component', () => {
   beforeEach(() => {
     // Reset any global state if needed
   });
@@ -307,9 +309,6 @@ describe('LoadingSpinner Component', () => {
     it('maintains consistent DOM structure across re-renders', () => {
       const { rerender } = renderWithProviders(<LoadingSpinner size="sm" />);
       
-      const initialSpinner = screen.getByRole('status');
-      const initialScreenReaderText = screen.getByText('Loading...');
-      
       rerender(<LoadingSpinner size="lg" className="custom" />);
       
       const updatedSpinner = screen.getByRole('status');
@@ -353,8 +352,6 @@ describe('LoadingSpinner Component', () => {
     it('maintains referential stability for same props', () => {
       const { rerender } = renderWithProviders(<LoadingSpinner size="md" className="test" />);
       
-      const firstRender = screen.getByRole('status');
-      
       rerender(<LoadingSpinner size="md" className="test" />);
       
       const secondRender = screen.getByRole('status');

package/src/components/LoginForm/LoginForm.test.tsx

@@ -721,7 +721,6 @@ describe('LoginForm Component', () => {
         <LoginForm {...stableProps} />
       );
       
-      const initialTitle = screen.getByText('Test Title');
       
       // Re-render with same props
       rerender(<LoginForm {...stableProps} />);

package/src/components/NavigationMenu/HierarchicalNavItem.tsx

@@ -0,0 +1,104 @@
+/**
+ * @file Hierarchical Navigation Item Component
+ * @package @jmruthers/pace-core
+ * @module NavigationMenu/HierarchicalNavItem
+ * @since 0.1.0
+ *
+ * Presentational component for a single item in hierarchical navigation mode.
+ * Renders expandable parent or link/button leaf; used by NavigationMenu.
+ */
+
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import type { NavigationItem } from "./types";
+
+export interface HierarchicalNavItemProps {
+  item: NavigationItem;
+  level: number;
+  expandedIds: Set<string>;
+  onToggle: (itemId: string) => void;
+  onItemClick: (item: NavigationItem) => void;
+  onKeyDown: (event: React.KeyboardEvent, item: NavigationItem) => void;
+  isActiveItem: (item: NavigationItem) => boolean;
+}
+
+/**
+ * Renders a single hierarchical navigation item (parent with children or leaf).
+ */
+export function HierarchicalNavItem({
+  item,
+  level,
+  expandedIds,
+  onToggle,
+  onItemClick,
+  onKeyDown,
+  isActiveItem,
+}: HierarchicalNavItemProps): React.ReactElement {
+  const hasChildren = item.children != null && item.children.length > 0;
+  const isExpanded = expandedIds.has(item.id);
+  const itemIsActive = isActiveItem(item);
+
+  return (
+    <li role="none">
+      {hasChildren ? (
+        <>
+          <button
+            type="button"
+            onClick={() => onToggle(item.id)}
+            onKeyDown={(e) => onKeyDown(e, item)}
+            aria-expanded={isExpanded}
+            aria-controls={`submenu-${item.id}`}
+            aria-current={itemIsActive ? "page" : undefined}
+          >
+            {item.label}
+            <ChevronDown aria-hidden="true" />
+          </button>
+          {isExpanded && item.children != null && (
+            <ul
+              id={`submenu-${item.id}`}
+              role="menu"
+              aria-label={`${item.label} submenu`}
+            >
+              {item.children.map((child) => (
+                <React.Fragment key={child.id}>
+                  <HierarchicalNavItem
+                    item={child}
+                    level={level + 1}
+                    expandedIds={expandedIds}
+                    onToggle={onToggle}
+                    onItemClick={onItemClick}
+                    onKeyDown={onKeyDown}
+                    isActiveItem={isActiveItem}
+                  />
+                </React.Fragment>
+              ))}
+            </ul>
+          )}
+        </>
+      ) : item.href ? (
+        <a
+          href={item.href}
+          onClick={(e) => {
+            e.preventDefault();
+            onItemClick(item);
+          }}
+          onKeyDown={(e) => onKeyDown(e, item)}
+          role="menuitem"
+          aria-current={itemIsActive ? "page" : undefined}
+        >
+          {item.label}
+        </a>
+      ) : (
+        <button
+          type="button"
+          onClick={() => onItemClick(item)}
+          onKeyDown={(e) => onKeyDown(e, item)}
+          role="menuitem"
+          aria-current={itemIsActive ? "page" : undefined}
+        >
+          {item.label}
+        </button>
+      )}
+    </li>
+  );
+}