@jmruthers/pace-core 0.6.8 → 0.6.10

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

@@ -1,13 +1,27 @@
+/**
+ * @file DataTableToolbar Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components/__tests__
+ * @since 0.4.0
+ * 
+ * Comprehensive test suite for DataTableToolbar component following testing guidelines.
+ * Tests cover all major functionality, edge cases, RBAC permissions, 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 } from 'vitest';
 import { DataTableToolbar } from '../DataTableToolbar';
-import type { DataTableFeatureConfig } from '../../types';
+import type { DataTableFeatureConfig, DataTableRBACConfig } from '../../types';
 
 vi.mock('../GroupingDropdown', () => ({
-  GroupingDropdown: ({ onGroupByChange }: any) => (
-    <button onClick={() => onGroupByChange('grouped')} data-testid="grouping-dropdown">
+  GroupingDropdown: ({ onGroupByChange, currentGroupBy }: any) => (
+    <button 
+      onClick={() => onGroupByChange('grouped')} 
+      data-testid="grouping-dropdown"
+      data-current-group={currentGroupBy}
+    >
       Grouping Dropdown
     </button>
   ),
@@ -25,17 +39,34 @@ vi.mock('../ColumnVisibilityDropdown', () => ({
 }));
 
 vi.mock('../../Button/Button', () => ({
-  Button: ({ children, onClick, variant, ...rest }: any) => (
-    <button onClick={onClick} data-variant={variant} {...rest}>
+  Button: ({ children, onClick, variant, disabled, ...rest }: any) => (
+    <button onClick={onClick} data-variant={variant} disabled={disabled} {...rest}>
       {children}
     </button>
   ),
 }));
 
 vi.mock('../../Input/Input', () => ({
-  Input: ({ value, onChange, placeholder, ...rest }: any) => (
-    <input value={value} onChange={onChange} placeholder={placeholder} {...rest} />
-  ),
+  Input: React.forwardRef(({ value, onChange, placeholder, ...rest }: any, ref: any) => (
+    <input 
+      ref={ref}
+      value={value} 
+      onChange={onChange} 
+      placeholder={placeholder} 
+      data-testid="search-input"
+      {...rest} 
+    />
+  )),
+}));
+
+vi.mock('lucide-react', () => ({
+  Search: () => <span data-testid="search-icon">Search</span>,
+  Plus: () => <span data-testid="plus-icon">Plus</span>,
+  Upload: () => <span data-testid="upload-icon">Upload</span>,
+  Download: () => <span data-testid="download-icon">Download</span>,
+  Settings2: () => <span data-testid="settings-icon">Settings</span>,
+  Filter: () => <span data-testid="filter-icon">Filter</span>,
+  Trash2: () => <span data-testid="trash-icon">Trash</span>,
 }));
 
 describe('[component] DataTableToolbar', () => {
@@ -52,17 +83,22 @@ describe('[component] DataTableToolbar', () => {
     deleteSelected: true,
   };
 
-  const permissions = {
+  const baseRBAC: DataTableRBACConfig = {
+    pageId: 'test-page',
+    pageName: 'Test Page',
+  };
+
+  const basePermissions = {
     canCreate: { can: true, isLoading: false },
     canImport: { can: true, isLoading: false },
     canExport: { can: true, isLoading: false },
     canDelete: { can: true, isLoading: false },
   };
 
-  const commonProps = {
+  const createCommonProps = (overrides: any = {}) => ({
     features: baseFeatures,
-    rbac: { pageId: 'test-page' },
-    permissions,
+    rbac: baseRBAC,
+    permissions: basePermissions,
     globalFilter: '',
     onGlobalFilterChange: vi.fn(),
     columns: [
@@ -87,71 +123,507 @@ describe('[component] DataTableToolbar', () => {
     onDeleteSelected: vi.fn(),
     onToggleFilterRow: vi.fn(),
     showFilterRow: false,
-  };
+    ...overrides,
+  });
 
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  it('renders search input and passes global filter changes', async () => {
-    const onGlobalFilterChange = vi.fn();
+  describe('Rendering', () => {
+    it('renders search input when search feature is enabled', () => {
+      const props = createCommonProps();
+      render(<DataTableToolbar {...props} />);
+
+      const searchInput = screen.getByPlaceholderText('Search...');
+      expect(searchInput).toBeInTheDocument();
+      expect(searchInput).toHaveAttribute('id', 'table-search');
+    });
+
+    it('does not render search input when search feature is disabled', () => {
+      const props = createCommonProps({
+        features: { ...baseFeatures, search: false },
+      });
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.queryByTestId('search-input')).not.toBeInTheDocument();
+    });
+
+    it('renders grouping dropdown when grouping feature is enabled', () => {
+      const props = createCommonProps();
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.getByTestId('grouping-dropdown')).toBeInTheDocument();
+    });
+
+    it('does not render grouping dropdown when grouping feature is disabled', () => {
+      const props = createCommonProps({
+        features: { ...baseFeatures, grouping: false },
+      });
+      render(<DataTableToolbar {...props} />);
 
-    render(<DataTableToolbar {...commonProps} onGlobalFilterChange={onGlobalFilterChange} />);
+      expect(screen.queryByTestId('grouping-dropdown')).not.toBeInTheDocument();
+    });
 
-    const searchInput = screen.getByPlaceholderText('Search...');
-    await userEvent.type(searchInput, 'alpha');
+    it('renders column visibility dropdown when columnVisibility feature is enabled', () => {
+      const props = createCommonProps();
+      render(<DataTableToolbar {...props} />);
 
-    const calls = onGlobalFilterChange.mock.calls.map((call) => call[0]);
-    expect(calls).toEqual(['a', 'l', 'p', 'h', 'a']);
+      expect(screen.getByTestId('column-visibility-dropdown')).toBeInTheDocument();
+    });
+
+    it('renders filter toggle button when filtering feature is enabled', () => {
+      const props = createCommonProps();
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.getByText('Show Filters')).toBeInTheDocument();
+    });
+
+    it('shows "Hide Filters" when filter row is visible', () => {
+      const props = createCommonProps({ showFilterRow: true });
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.getByText('Hide Filters')).toBeInTheDocument();
+    });
+
+    it('renders all action buttons when features and permissions are enabled', () => {
+      const props = createCommonProps();
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.getByText('Add Row')).toBeInTheDocument();
+      expect(screen.getByText('Import')).toBeInTheDocument();
+      expect(screen.getByText('Export')).toBeInTheDocument();
+    });
   });
 
-  it('shows feature controls and triggers handlers with permissions', async () => {
-    const onDeleteSelected = vi.fn();
-    const props = {
-      ...commonProps,
-      rowSelection: { row1: true },
-      onDeleteSelected,
-      showFilterRow: true,
-    };
+  describe('User Interactions', () => {
+    it('calls onGlobalFilterChange when search input changes', async () => {
+      const user = userEvent.setup();
+      const onGlobalFilterChange = vi.fn();
+      const props = createCommonProps({ onGlobalFilterChange });
+
+      render(<DataTableToolbar {...props} />);
+
+      const searchInput = screen.getByPlaceholderText('Search...');
+      await user.type(searchInput, 'test');
+
+      expect(onGlobalFilterChange).toHaveBeenCalled();
+      const calls = onGlobalFilterChange.mock.calls.map((call) => call[0]);
+      expect(calls).toContain('t');
+      expect(calls).toContain('e');
+      expect(calls).toContain('s');
+      expect(calls).toContain('t');
+    });
+
+    it('calls onGroupByChange when grouping dropdown is clicked', async () => {
+      const user = userEvent.setup();
+      const onGroupByChange = vi.fn();
+      const props = createCommonProps({ onGroupByChange });
+
+      render(<DataTableToolbar {...props} />);
+
+      await user.click(screen.getByTestId('grouping-dropdown'));
+
+      expect(onGroupByChange).toHaveBeenCalledWith('grouped');
+    });
+
+    it('calls onColumnVisibilityChange when column visibility dropdown is clicked', async () => {
+      const user = userEvent.setup();
+      const onColumnVisibilityChange = vi.fn();
+      const props = createCommonProps({ onColumnVisibilityChange });
+
+      render(<DataTableToolbar {...props} />);
 
-    render(<DataTableToolbar {...props} />);
+      await user.click(screen.getByTestId('column-visibility-dropdown'));
 
-    await userEvent.click(screen.getByText('Grouping Dropdown'));
-    expect(props.onGroupByChange).toHaveBeenCalledWith('grouped');
+      expect(onColumnVisibilityChange).toHaveBeenCalledWith('column-id', true);
+    });
 
-    await userEvent.click(screen.getByText('Column Visibility Dropdown'));
-    expect(props.onColumnVisibilityChange).toHaveBeenCalledWith('column-id', true);
+    it('calls onToggleFilterRow when filter toggle button is clicked', async () => {
+      const user = userEvent.setup();
+      const onToggleFilterRow = vi.fn();
+      const props = createCommonProps({ onToggleFilterRow });
 
-    await userEvent.click(screen.getByText('Hide Filters'));
-    expect(props.onToggleFilterRow).toHaveBeenCalled();
+      render(<DataTableToolbar {...props} />);
 
-    await userEvent.click(screen.getByText('Add Row'));
-    expect(props.onCreateRow).toHaveBeenCalled();
+      await user.click(screen.getByText('Show Filters'));
 
-    await userEvent.click(screen.getByText('Import'));
-    expect(props.onImportClick).toHaveBeenCalled();
+      expect(onToggleFilterRow).toHaveBeenCalledTimes(1);
+    });
 
-    await userEvent.click(screen.getByText('Export'));
-    expect(props.onExport).toHaveBeenCalled();
+    it('calls onCreateRow when Add Row button is clicked', async () => {
+      const user = userEvent.setup();
+      const onCreateRow = vi.fn();
+      const props = createCommonProps({ onCreateRow });
 
-    await userEvent.click(screen.getByText('Delete'));
-    expect(onDeleteSelected).toHaveBeenCalledWith({ row1: true });
+      render(<DataTableToolbar {...props} />);
+
+      await user.click(screen.getByText('Add Row'));
+
+      expect(onCreateRow).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onImportClick when Import button is clicked', async () => {
+      const user = userEvent.setup();
+      const onImportClick = vi.fn();
+      const props = createCommonProps({ onImportClick });
+
+      render(<DataTableToolbar {...props} />);
+
+      await user.click(screen.getByText('Import'));
+
+      expect(onImportClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onExport when Export button is clicked', async () => {
+      const user = userEvent.setup();
+      const onExport = vi.fn();
+      const props = createCommonProps({ onExport });
+
+      render(<DataTableToolbar {...props} />);
+
+      await user.click(screen.getByText('Export'));
+
+      expect(onExport).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onDeleteSelected with rowSelection when Delete button is clicked', async () => {
+      const user = userEvent.setup();
+      const onDeleteSelected = vi.fn();
+      const rowSelection = { 'row-1': true, 'row-2': true };
+      const props = createCommonProps({ onDeleteSelected, rowSelection });
+
+      render(<DataTableToolbar {...props} />);
+
+      await user.click(screen.getByText('Delete'));
+
+      expect(onDeleteSelected).toHaveBeenCalledWith(rowSelection);
+    });
   });
 
-  it('respects permission gates for creation and deletion', () => {
-    const props = {
-      ...commonProps,
-      permissions: {
-        ...permissions,
-        canCreate: { can: false, isLoading: false },
-        canDelete: { can: false, isLoading: false },
-      },
-      rowSelection: { row1: true },
-    };
+  describe('RBAC Permissions', () => {
+    it('hides Add Row button when user lacks create permission', () => {
+      const props = createCommonProps({
+        permissions: {
+          ...basePermissions,
+          canCreate: { can: false, isLoading: false },
+        },
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.queryByText('Add Row')).not.toBeInTheDocument();
+    });
+
+    it('shows Add Row button when create permission is loading but can is true', () => {
+      const props = createCommonProps({
+        permissions: {
+          ...basePermissions,
+          canCreate: { can: true, isLoading: true },
+        },
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      // Button renders when can is true, even if loading
+      expect(screen.getByText('Add Row')).toBeInTheDocument();
+    });
+
+    it('hides Import button when user lacks import permission', () => {
+      const props = createCommonProps({
+        permissions: {
+          ...basePermissions,
+          canImport: { can: false, isLoading: false },
+        },
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.queryByText('Import')).not.toBeInTheDocument();
+    });
+
+    it('hides Export button when user lacks export permission', () => {
+      const props = createCommonProps({
+        permissions: {
+          ...basePermissions,
+          canExport: { can: false, isLoading: false },
+        },
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.queryByText('Export')).not.toBeInTheDocument();
+    });
+
+    it('hides Delete button when user lacks delete permission', () => {
+      const props = createCommonProps({
+        permissions: {
+          ...basePermissions,
+          canDelete: { can: false, isLoading: false },
+        },
+        rowSelection: { 'row-1': true },
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+    });
+
+    it('shows buttons when user has all permissions', () => {
+      const props = createCommonProps();
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.getByText('Add Row')).toBeInTheDocument();
+      expect(screen.getByText('Import')).toBeInTheDocument();
+      expect(screen.getByText('Export')).toBeInTheDocument();
+    });
+  });
+
+  describe('Feature Flags', () => {
+    it('hides creation button when creation feature is disabled', () => {
+      const props = createCommonProps({
+        features: { ...baseFeatures, creation: false },
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.queryByText('Add Row')).not.toBeInTheDocument();
+    });
+
+    it('hides import button when import feature is disabled', () => {
+      const props = createCommonProps({
+        features: { ...baseFeatures, import: false },
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.queryByText('Import')).not.toBeInTheDocument();
+    });
+
+    it('hides export button when export feature is disabled', () => {
+      const props = createCommonProps({
+        features: { ...baseFeatures, export: false },
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.queryByText('Export')).not.toBeInTheDocument();
+    });
+
+    it('hides delete button when deleteSelected feature is disabled', () => {
+      const props = createCommonProps({
+        features: { ...baseFeatures, deleteSelected: false },
+        rowSelection: { 'row-1': true },
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+    });
+
+    it('hides delete button when deletion feature is disabled', () => {
+      const props = createCommonProps({
+        features: { ...baseFeatures, deletion: false },
+        rowSelection: { 'row-1': true },
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+    });
+
+    it('hides delete button when selection feature is disabled', () => {
+      const props = createCommonProps({
+        features: { ...baseFeatures, selection: false },
+        rowSelection: { 'row-1': true },
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Delete Button State', () => {
+    it('disables delete button when no rows are selected', () => {
+      const props = createCommonProps({
+        rowSelection: {},
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      const deleteButton = screen.getByRole('button', { name: /Delete/i });
+      expect(deleteButton).toBeDisabled();
+    });
+
+    it('enables delete button when rows are selected', () => {
+      const props = createCommonProps({
+        rowSelection: { 'row-1': true },
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      const deleteButton = screen.getByText('Delete');
+      expect(deleteButton).not.toBeDisabled();
+    });
+
+    it('does not render Add Row button when onCreateRow is not provided even with permission', () => {
+      const props = createCommonProps({
+        onCreateRow: undefined,
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      // Button should not render if onCreateRow is missing
+      expect(screen.queryByText('Add Row')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty columns array', () => {
+      const props = createCommonProps({
+        columns: [],
+        tableColumns: [],
+      });
+
+      expect(() => {
+        render(<DataTableToolbar {...props} />);
+      }).not.toThrow();
+    });
+
+    it('handles missing onCreateRow callback gracefully', () => {
+      const props = createCommonProps({
+        onCreateRow: undefined,
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      // Button should not render if onCreateRow is missing
+      expect(screen.queryByText('Add Row')).not.toBeInTheDocument();
+    });
+
+    it('renders delete button even when onDeleteSelected callback is missing', () => {
+      const props = createCommonProps({
+        onDeleteSelected: undefined,
+        rowSelection: { 'row-1': true },
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      // Delete button still renders, but clicking may not work
+      expect(screen.getByText('Delete')).toBeInTheDocument();
+    });
+
+    it('handles missing onToggleFilterRow when filtering is enabled', () => {
+      const props = createCommonProps({
+        onToggleFilterRow: undefined,
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      // Filter button should not render if callback is missing
+      expect(screen.queryByText('Show Filters')).not.toBeInTheDocument();
+    });
+
+    it('handles rapid filter toggle clicks', async () => {
+      const user = userEvent.setup();
+      const onToggleFilterRow = vi.fn();
+      const props = createCommonProps({ onToggleFilterRow });
+
+      render(<DataTableToolbar {...props} />);
+
+      const filterButton = screen.getByText('Show Filters');
+      await user.click(filterButton);
+      await user.click(filterButton);
+      await user.click(filterButton);
+
+      expect(onToggleFilterRow).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('provides aria-label for search input', () => {
+      const props = createCommonProps();
+      render(<DataTableToolbar {...props} />);
+
+      const searchInput = screen.getByPlaceholderText('Search...');
+      expect(searchInput).toHaveAttribute('aria-label', 'Search table');
+    });
+
+    it('provides proper button labels', () => {
+      const props = createCommonProps();
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.getByText('Add Row')).toBeInTheDocument();
+      expect(screen.getByText('Import')).toBeInTheDocument();
+      expect(screen.getByText('Export')).toBeInTheDocument();
+    });
+  });
+
+  describe('Combined Scenarios', () => {
+    it('renders correctly with minimal features enabled', () => {
+      const props = createCommonProps({
+        features: {
+          search: true,
+          grouping: false,
+          columnVisibility: false,
+          filtering: false,
+          creation: false,
+          import: false,
+          export: false,
+          selection: false,
+          deletion: false,
+          deleteSelected: false,
+        },
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+      expect(screen.queryByTestId('grouping-dropdown')).not.toBeInTheDocument();
+      expect(screen.queryByText('Add Row')).not.toBeInTheDocument();
+    });
+
+    it('renders correctly with all features disabled', () => {
+      const props = createCommonProps({
+        features: {
+          search: false,
+          grouping: false,
+          columnVisibility: false,
+          filtering: false,
+          creation: false,
+          import: false,
+          export: false,
+          selection: false,
+          deletion: false,
+          deleteSelected: false,
+        },
+      });
+
+      render(<DataTableToolbar {...props} />);
+
+      expect(screen.queryByTestId('search-input')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('grouping-dropdown')).not.toBeInTheDocument();
+    });
+
+    it('handles combination of disabled features and missing permissions', () => {
+      const props = createCommonProps({
+        features: {
+          ...baseFeatures,
+          creation: false,
+          import: false,
+        },
+        permissions: {
+          ...basePermissions,
+          canExport: { can: false, isLoading: false },
+        },
+      });
 
-    render(<DataTableToolbar {...props} />);
+      render(<DataTableToolbar {...props} />);
 
-    expect(screen.queryByText('Add Row')).not.toBeInTheDocument();
-    expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+      expect(screen.queryByText('Add Row')).not.toBeInTheDocument();
+      expect(screen.queryByText('Import')).not.toBeInTheDocument();
+      expect(screen.queryByText('Export')).not.toBeInTheDocument();
+    });
   });
 });