@jmruthers/pace-core 0.5.115 → 0.5.116

package/src/components/DataTable/components/__tests__/ExpandButton.test.tsx

@@ -0,0 +1,462 @@
+/**
+ * @file ExpandButton Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components/__tests__
+ * @since 0.4.35
+ * 
+ * Comprehensive test suite for ExpandButton component following testing guidelines.
+ * Tests cover all major functionality, edge cases, and user interactions.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ExpandButton, ExpandButtonMinimal } from '../ExpandButton';
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  ChevronRightIcon: ({ className }: { className?: string }) => (
+    <div data-testid="chevron-right-icon" className={className}>ChevronRight</div>
+  ),
+  ChevronDownIcon: ({ className }: { className?: string }) => (
+    <div data-testid="chevron-down-icon" className={className}>ChevronDown</div>
+  ),
+}));
+
+describe('[component] ExpandButton', () => {
+  const defaultProps = {
+    rowId: 'row-1',
+    isExpanded: false,
+    hasChildren: true,
+    onClick: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('returns null when hasChildren is false', () => {
+      const { container } = render(
+        <ExpandButton
+          {...defaultProps}
+          hasChildren={false}
+        />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders button when hasChildren is true', () => {
+      render(<ExpandButton {...defaultProps} />);
+
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('renders ChevronRight icon when not expanded', () => {
+      render(<ExpandButton {...defaultProps} isExpanded={false} />);
+
+      expect(screen.getByTestId('chevron-right-icon')).toBeInTheDocument();
+      expect(screen.queryByTestId('chevron-down-icon')).not.toBeInTheDocument();
+    });
+
+    it('renders ChevronDown icon when expanded', () => {
+      render(<ExpandButton {...defaultProps} isExpanded={true} />);
+
+      expect(screen.getByTestId('chevron-down-icon')).toBeInTheDocument();
+      expect(screen.queryByTestId('chevron-right-icon')).not.toBeInTheDocument();
+    });
+
+    it('has correct testId attribute', () => {
+      render(<ExpandButton {...defaultProps} rowId="test-row-123" />);
+
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('data-testid', 'expand-button-test-row-123');
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('calls onClick when button is clicked', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      render(
+        <ExpandButton
+          {...defaultProps}
+          onClick={handleClick}
+        />
+      );
+
+      const button = screen.getByRole('button');
+      await user.click(button);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onClick when Enter key is pressed', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      render(
+        <ExpandButton
+          {...defaultProps}
+          onClick={handleClick}
+        />
+      );
+
+      const button = screen.getByRole('button');
+      button.focus();
+      await user.keyboard('{Enter}');
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onClick when Space key is pressed', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      render(
+        <ExpandButton
+          {...defaultProps}
+          onClick={handleClick}
+        />
+      );
+
+      const button = screen.getByRole('button');
+      button.focus();
+      await user.keyboard(' ');
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('stops event propagation on click', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+      const handleParentClick = vi.fn();
+
+      render(
+        <div onClick={handleParentClick}>
+          <ExpandButton
+            {...defaultProps}
+            onClick={handleClick}
+          />
+        </div>
+      );
+
+      const button = screen.getByRole('button');
+      await user.click(button);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+      expect(handleParentClick).not.toHaveBeenCalled();
+    });
+
+    it('stops event propagation on keyboard events', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+      const handleParentKeyDown = vi.fn();
+
+      render(
+        <div onKeyDown={handleParentKeyDown}>
+          <ExpandButton
+            {...defaultProps}
+            onClick={handleClick}
+          />
+        </div>
+      );
+
+      const button = screen.getByRole('button');
+      button.focus();
+      await user.keyboard('{Enter}');
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+      expect(handleParentKeyDown).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has aria-label for collapsed state', () => {
+      render(<ExpandButton {...defaultProps} isExpanded={false} />);
+
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-label', 'Expand row');
+    });
+
+    it('has aria-label for expanded state', () => {
+      render(<ExpandButton {...defaultProps} isExpanded={true} />);
+
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-label', 'Collapse row');
+    });
+
+    it('has aria-expanded attribute', () => {
+      render(<ExpandButton {...defaultProps} isExpanded={false} />);
+
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('updates aria-expanded when state changes', () => {
+      const { rerender } = render(<ExpandButton {...defaultProps} isExpanded={false} />);
+
+      let button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-expanded', 'false');
+
+      rerender(<ExpandButton {...defaultProps} isExpanded={true} />);
+
+      button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+
+  describe('Styling', () => {
+    it('applies custom className', () => {
+      render(
+        <ExpandButton
+          {...defaultProps}
+          className="custom-class"
+        />
+      );
+
+      const button = screen.getByRole('button');
+      expect(button.className).toContain('custom-class');
+    });
+
+    it('has proper button styling classes', () => {
+      render(<ExpandButton {...defaultProps} />);
+
+      const button = screen.getByRole('button');
+      expect(button.className).toContain('inline-flex');
+      expect(button.className).toContain('items-center');
+      expect(button.className).toContain('justify-center');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles rapid clicks', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      render(
+        <ExpandButton
+          {...defaultProps}
+          onClick={handleClick}
+        />
+      );
+
+      const button = screen.getByRole('button');
+      await user.click(button);
+      await user.click(button);
+      await user.click(button);
+
+      expect(handleClick).toHaveBeenCalledTimes(3);
+    });
+
+    it('handles undefined onClick gracefully', () => {
+      expect(() => {
+        render(
+          <ExpandButton
+            {...defaultProps}
+            onClick={undefined as any}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('handles empty rowId', () => {
+      render(
+        <ExpandButton
+          {...defaultProps}
+          rowId=""
+        />
+      );
+
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('data-testid', 'expand-button-');
+    });
+  });
+});
+
+describe('[component] ExpandButtonMinimal', () => {
+  const defaultProps = {
+    rowId: 'row-1',
+    isExpanded: false,
+    hasChildren: true,
+    onClick: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('returns null when hasChildren is false', () => {
+      const { container } = render(
+        <ExpandButtonMinimal
+          {...defaultProps}
+          hasChildren={false}
+        />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders button when hasChildren is true', () => {
+      render(<ExpandButtonMinimal {...defaultProps} />);
+
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('renders minus sign when expanded', () => {
+      render(<ExpandButtonMinimal {...defaultProps} isExpanded={true} />);
+
+      expect(screen.getByText('−')).toBeInTheDocument();
+      expect(screen.queryByText('+')).not.toBeInTheDocument();
+    });
+
+    it('renders plus sign when not expanded', () => {
+      render(<ExpandButtonMinimal {...defaultProps} isExpanded={false} />);
+
+      expect(screen.getByText('+')).toBeInTheDocument();
+      expect(screen.queryByText('−')).not.toBeInTheDocument();
+    });
+
+    it('has correct testId attribute', () => {
+      render(<ExpandButtonMinimal {...defaultProps} rowId="test-row-456" />);
+
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('data-testid', 'expand-button-minimal-test-row-456');
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('calls onClick when button is clicked', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      render(
+        <ExpandButtonMinimal
+          {...defaultProps}
+          onClick={handleClick}
+        />
+      );
+
+      const button = screen.getByRole('button');
+      await user.click(button);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onClick when Enter key is pressed', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      render(
+        <ExpandButtonMinimal
+          {...defaultProps}
+          onClick={handleClick}
+        />
+      );
+
+      const button = screen.getByRole('button');
+      button.focus();
+      await user.keyboard('{Enter}');
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onClick when Space key is pressed', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+
+      render(
+        <ExpandButtonMinimal
+          {...defaultProps}
+          onClick={handleClick}
+        />
+      );
+
+      const button = screen.getByRole('button');
+      button.focus();
+      await user.keyboard(' ');
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('stops event propagation on click', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+      const handleParentClick = vi.fn();
+
+      render(
+        <div onClick={handleParentClick}>
+          <ExpandButtonMinimal
+            {...defaultProps}
+            onClick={handleClick}
+          />
+        </div>
+      );
+
+      const button = screen.getByRole('button');
+      await user.click(button);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+      expect(handleParentClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has aria-label for collapsed state', () => {
+      render(<ExpandButtonMinimal {...defaultProps} isExpanded={false} />);
+
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-label', 'Expand row');
+    });
+
+    it('has aria-label for expanded state', () => {
+      render(<ExpandButtonMinimal {...defaultProps} isExpanded={true} />);
+
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-label', 'Collapse row');
+    });
+
+    it('has aria-expanded attribute', () => {
+      render(<ExpandButtonMinimal {...defaultProps} isExpanded={false} />);
+
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-expanded', 'false');
+    });
+  });
+
+  describe('Styling', () => {
+    it('applies custom className', () => {
+      render(
+        <ExpandButtonMinimal
+          {...defaultProps}
+          className="custom-class"
+        />
+      );
+
+      const button = screen.getByRole('button');
+      expect(button.className).toContain('custom-class');
+    });
+
+    it('has proper button styling classes', () => {
+      render(<ExpandButtonMinimal {...defaultProps} />);
+
+      const button = screen.getByRole('button');
+      expect(button.className).toContain('inline-flex');
+      expect(button.className).toContain('items-center');
+      expect(button.className).toContain('justify-center');
+    });
+  });
+});
+