@jmruthers/pace-core 0.5.115 → 0.5.116

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

@@ -0,0 +1,572 @@
+/**
+ * @file BulkOperationsDropdown Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components/__tests__
+ * @since 0.4.0
+ * 
+ * Comprehensive test suite for BulkOperationsDropdown component following testing guidelines.
+ * Tests cover all major functionality, edge cases, and user interactions.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { BulkOperationsDropdown } from '../BulkOperationsDropdown';
+
+// Mock lucide-react icons - use importActual to include ChevronDown for Select
+vi.mock('lucide-react', async () => {
+  const actual = await vi.importActual('lucide-react');
+  return {
+    ...actual,
+    MoreHorizontal: ({ className }: { className?: string }) => (
+      <div data-testid="more-horizontal-icon" className={className}>More</div>
+    ),
+    Download: ({ className }: { className?: string }) => (
+      <div data-testid="download-icon" className={className}>Download</div>
+    ),
+    Trash: ({ className }: { className?: string }) => (
+      <div data-testid="trash-icon" className={className}>Trash</div>
+    ),
+  };
+});
+
+// Mock Button component
+vi.mock('../../Button/Button', () => ({
+  Button: ({ children, onClick, disabled, variant, size, className, ...props }: any) => (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      data-variant={variant}
+      data-size={size}
+      className={className}
+      {...props}
+    >
+      {children}
+    </button>
+  ),
+}));
+
+// Mock Select components - use importActual to avoid missing ChevronDown
+vi.mock('../../Select/Select', async () => {
+  const actual = await vi.importActual('../../Select/Select');
+  return {
+    ...actual,
+    Select: ({ children, disabled }: any) => {
+      // Store disabled state in context or pass to children
+      return (
+        <form data-testid="select-root" data-disabled={disabled}>
+          {children}
+        </form>
+      );
+    },
+    SelectTrigger: ({ children, asChild, className, disabled }: any) => 
+      asChild ? children : <button data-testid="select-trigger" role="combobox" disabled={disabled} className={className}>{children}</button>,
+    SelectContent: ({ children, className }: any) => (
+      <ul data-testid="select-content" role="listbox" className={className}>{children}</ul>
+    ),
+    SelectItem: ({ children, onClick, value, disabled, className }: any) => (
+      <li
+        data-testid="select-item"
+        data-value={value}
+        data-disabled={disabled ? 'true' : undefined}
+        onClick={onClick}
+        role="option"
+        aria-disabled={disabled}
+        className={className}
+      >
+        {children}
+      </li>
+    ),
+  };
+});
+
+describe('[component] BulkOperationsDropdown', () => {
+  const mockSelectedRows = {
+    'row-1': true,
+    'row-2': true,
+    'row-3': false,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders dropdown with operations', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export', 'delete']}
+          selectedRows={mockSelectedRows}
+        />
+      );
+
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+      expect(screen.getByText(/Bulk Actions/i)).toBeInTheDocument();
+    });
+
+    it('displays selected count in button text', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export', 'delete']}
+          selectedRows={mockSelectedRows}
+        />
+      );
+
+      expect(screen.getByText(/Bulk Actions \(2\)/i)).toBeInTheDocument();
+    });
+
+    it('renders MoreHorizontal icon', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export', 'delete']}
+          selectedRows={mockSelectedRows}
+        />
+      );
+
+      expect(screen.getByTestId('more-horizontal-icon')).toBeInTheDocument();
+    });
+
+    it('renders all operation items', async () => {
+      const user = userEvent.setup();
+      render(
+        <BulkOperationsDropdown
+          operations={['export', 'delete']}
+          selectedRows={mockSelectedRows}
+        />
+      );
+
+      // Open the select dropdown
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('select-item');
+        const exportItem = items.find(item => item.getAttribute('data-value') === 'export');
+        const deleteItem = items.find(item => item.getAttribute('data-value') === 'delete');
+        expect(exportItem).toBeInTheDocument();
+        expect(deleteItem).toBeInTheDocument();
+      });
+    });
+
+    it('renders export operation with Download icon', async () => {
+      const user = userEvent.setup();
+      render(
+        <BulkOperationsDropdown
+          operations={['export']}
+          selectedRows={mockSelectedRows}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('select-item');
+        const exportItem = items.find(item => item.getAttribute('data-value') === 'export');
+        expect(exportItem).toBeInTheDocument();
+      });
+
+      expect(screen.getByTestId('download-icon')).toBeInTheDocument();
+      expect(screen.getByText('Export Selected')).toBeInTheDocument();
+    });
+
+    it('renders delete operation with Trash icon', async () => {
+      const user = userEvent.setup();
+      render(
+        <BulkOperationsDropdown
+          operations={['delete']}
+          selectedRows={mockSelectedRows}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('select-item');
+        const deleteItem = items.find(item => item.getAttribute('data-value') === 'delete');
+        expect(deleteItem).toBeInTheDocument();
+      });
+
+      expect(screen.getByTestId('trash-icon')).toBeInTheDocument();
+      expect(screen.getByText('Delete')).toBeInTheDocument();
+    });
+  });
+
+  describe('Disabled State', () => {
+    it('disables dropdown when no rows are selected', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export', 'delete']}
+          selectedRows={{}}
+        />
+      );
+
+      // The disabled state is on the Button (trigger), not the select-root
+      const trigger = screen.getByTestId('select-trigger');
+      expect(trigger).toBeDisabled();
+    });
+
+    it('disables dropdown when selectedRows is empty object', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export', 'delete']}
+          selectedRows={{}}
+        />
+      );
+
+      // The disabled state is on the Button (trigger), not the select-root
+      const trigger = screen.getByTestId('select-trigger');
+      expect(trigger).toBeDisabled();
+    });
+
+    it('disables dropdown when all rows are false', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export', 'delete']}
+          selectedRows={{ 'row-1': false, 'row-2': false }}
+        />
+      );
+
+      // The disabled state is on the Button (trigger), not the select-root
+      const trigger = screen.getByTestId('select-trigger');
+      expect(trigger).toBeDisabled();
+    });
+
+    it('enables dropdown when rows are selected', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export', 'delete']}
+          selectedRows={mockSelectedRows}
+        />
+      );
+
+      // The disabled state is on the Button (trigger), not the select-root
+      const trigger = screen.getByTestId('select-trigger');
+      expect(trigger).not.toBeDisabled();
+    });
+
+    it('disables operation items when no selection', async () => {
+      const user = userEvent.setup();
+      render(
+        <BulkOperationsDropdown
+          operations={['export', 'delete']}
+          selectedRows={{}}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('select-item');
+        const exportItem = items.find(item => item.getAttribute('data-value') === 'export');
+        expect(exportItem).toBeInTheDocument();
+        expect(exportItem).toHaveAttribute('data-disabled', 'true');
+      });
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('calls onOperation when export is clicked', async () => {
+      const user = userEvent.setup();
+      const handleOperation = vi.fn();
+
+      render(
+        <BulkOperationsDropdown
+          operations={['export']}
+          selectedRows={mockSelectedRows}
+          onOperation={handleOperation}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('select-item');
+        const exportItem = items.find(item => item.getAttribute('data-value') === 'export');
+        expect(exportItem).toBeInTheDocument();
+      });
+
+      const items = screen.getAllByTestId('select-item');
+      const exportItem = items.find(item => item.getAttribute('data-value') === 'export');
+      await user.click(exportItem!);
+
+      expect(handleOperation).toHaveBeenCalledTimes(1);
+      expect(handleOperation).toHaveBeenCalledWith('export', ['row-1', 'row-2']);
+    });
+
+    it('calls onOperation when delete is clicked', async () => {
+      const user = userEvent.setup();
+      const handleOperation = vi.fn();
+
+      render(
+        <BulkOperationsDropdown
+          operations={['delete']}
+          selectedRows={mockSelectedRows}
+          onOperation={handleOperation}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('select-item');
+        const deleteItem = items.find(item => item.getAttribute('data-value') === 'delete');
+        expect(deleteItem).toBeInTheDocument();
+      });
+
+      const items = screen.getAllByTestId('select-item');
+      const deleteItem = items.find(item => item.getAttribute('data-value') === 'delete');
+      await user.click(deleteItem!);
+
+      expect(handleOperation).toHaveBeenCalledTimes(1);
+      expect(handleOperation).toHaveBeenCalledWith('delete', ['row-1', 'row-2']);
+    });
+
+    it('does not call onOperation when no rows are selected', async () => {
+      const user = userEvent.setup();
+      const handleOperation = vi.fn();
+
+      render(
+        <BulkOperationsDropdown
+          operations={['export']}
+          selectedRows={{}}
+          onOperation={handleOperation}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('select-item');
+        const exportItem = items.find(item => item.getAttribute('data-value') === 'export');
+        expect(exportItem).toBeInTheDocument();
+      });
+
+      const items = screen.getAllByTestId('select-item');
+      const exportItem = items.find(item => item.getAttribute('data-value') === 'export');
+      if (exportItem) {
+        await user.click(exportItem);
+      }
+
+      expect(handleOperation).not.toHaveBeenCalled();
+    });
+
+    it('passes correct selected row IDs to onOperation', async () => {
+      const user = userEvent.setup();
+      const handleOperation = vi.fn();
+      const selectedRows = {
+        'row-1': true,
+        'row-2': false,
+        'row-3': true,
+        'row-4': false,
+      };
+
+      render(
+        <BulkOperationsDropdown
+          operations={['export']}
+          selectedRows={selectedRows}
+          onOperation={handleOperation}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('select-item');
+        const exportItem = items.find(item => item.getAttribute('data-value') === 'export');
+        expect(exportItem).toBeInTheDocument();
+      });
+
+      const items = screen.getAllByTestId('select-item');
+      const exportItem = items.find(item => item.getAttribute('data-value') === 'export');
+      await user.click(exportItem!);
+
+      expect(handleOperation).toHaveBeenCalledWith('export', ['row-1', 'row-3']);
+    });
+  });
+
+  describe('Selected Count Display', () => {
+    it('displays correct count for multiple selections', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export']}
+          selectedRows={mockSelectedRows}
+        />
+      );
+
+      expect(screen.getByText(/Bulk Actions \(2\)/i)).toBeInTheDocument();
+    });
+
+    it('displays count of 0 when no selections', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export']}
+          selectedRows={{}}
+        />
+      );
+
+      expect(screen.getByText(/Bulk Actions \(0\)/i)).toBeInTheDocument();
+    });
+
+    it('displays count of 1 for single selection', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export']}
+          selectedRows={{ 'row-1': true }}
+        />
+      );
+
+      expect(screen.getByText(/Bulk Actions \(1\)/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Operation Variants', () => {
+    it('applies destructive variant to delete operation', async () => {
+      const user = userEvent.setup();
+      render(
+        <BulkOperationsDropdown
+          operations={['delete']}
+          selectedRows={mockSelectedRows}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('select-item');
+        const deleteItem = items.find(item => item.getAttribute('data-value') === 'delete');
+        expect(deleteItem).toBeInTheDocument();
+        expect(deleteItem?.className).toContain('text-destructive');
+      });
+    });
+
+    it('applies outline variant to export operation', async () => {
+      const user = userEvent.setup();
+      render(
+        <BulkOperationsDropdown
+          operations={['export']}
+          selectedRows={mockSelectedRows}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('select-item');
+        const exportItem = items.find(item => item.getAttribute('data-value') === 'export');
+        expect(exportItem).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles undefined selectedRows gracefully', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export']}
+          selectedRows={undefined as any}
+        />
+      );
+
+      expect(screen.getByText(/Bulk Actions \(0\)/i)).toBeInTheDocument();
+    });
+
+    it('handles null selectedRows gracefully', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export']}
+          selectedRows={null as any}
+        />
+      );
+
+      expect(screen.getByText(/Bulk Actions \(0\)/i)).toBeInTheDocument();
+    });
+
+    it('handles empty operations array', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={[]}
+          selectedRows={mockSelectedRows}
+        />
+      );
+
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+    });
+
+    it('handles single operation', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export']}
+          selectedRows={mockSelectedRows}
+        />
+      );
+
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+    });
+
+    it('handles multiple operations', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export', 'delete']}
+          selectedRows={mockSelectedRows}
+        />
+      );
+
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('provides accessible button structure', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export']}
+          selectedRows={mockSelectedRows}
+        />
+      );
+
+      const button = screen.getByRole('combobox');
+      expect(button).toBeInTheDocument();
+    });
+
+    it('displays selected count for screen readers', () => {
+      render(
+        <BulkOperationsDropdown
+          operations={['export']}
+          selectedRows={mockSelectedRows}
+        />
+      );
+
+      expect(screen.getByText(/Bulk Actions \(2\)/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Custom Styling', () => {
+    it('applies custom className', () => {
+      const { container } = render(
+        <BulkOperationsDropdown
+          operations={['export']}
+          selectedRows={mockSelectedRows}
+          className="custom-class"
+        />
+      );
+
+      const button = screen.getByRole('combobox');
+      expect(button.className).toContain('custom-class');
+    });
+  });
+});
+