@jmruthers/pace-core 0.2.6 → 0.4.1

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

@@ -1,583 +0,0 @@
-/**
- * @file DataTable Workflow Validation Test Suite
- * @package @jmruthers/pace-core
- * @module Components/DataTable/__tests__
- * @since 0.3.0
- * 
- * This test suite validates critical DataTable workflows to prevent regressions.
- * Focus on end-to-end functionality rather than complex state management.
- */
-
-import React from 'react';
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import '@testing-library/jest-dom';
-
-import { DataTable } from '../DataTable';
-import { createTestData, createTestColumns } from './test-utils/dataFactories';
-import { createDefaultFeatures, createFeaturesWithEnabled } from './test-utils';
-import { renderWithProviders, testData } from '../../../__tests__/shared';
-
-// Simple test data
-const testData = createTestData(3);
-const testColumns = createTestColumns();
-
-describe('DataTable Workflow Validation', () => {
-  let mockHandlers: { 
-    onEditRow: ReturnType<typeof vi.fn>; 
-    onDeleteRow: ReturnType<typeof vi.fn>;
-  };
-
-  beforeEach(() => {
-    mockHandlers = {
-      onEditRow: vi.fn(),
-      onDeleteRow: vi.fn(),
-    };
-    vi.clearAllMocks();
-  });
-
-  // ============================================================================
-  // BASIC RENDERING WORKFLOWS
-  // ============================================================================
-  
-  describe('Basic Rendering Workflows', () => {
-    it('renders data table with all data rows', () => {
-      renderWithProviders(<DataTable data={testData} columns={testColumns} features={createDefaultFeatures()} />);
-      
-      // Should show all test data
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-      expect(screen.getByText('User 2')).toBeInTheDocument();
-      expect(screen.getByText('User 3')).toBeInTheDocument();
-      
-      // Should show correct emails
-      expect(screen.getByText('user1@example.com')).toBeInTheDocument();
-      expect(screen.getByText('user2@example.com')).toBeInTheDocument();
-      expect(screen.getByText('user3@example.com')).toBeInTheDocument();
-    });
-
-    it('renders table headers correctly', () => {
-      renderWithProviders(<DataTable data={testData} columns={testColumns} features={createDefaultFeatures()} />);
-      
-      // Check all column headers
-      expect(screen.getByText('Name')).toBeInTheDocument();
-      expect(screen.getByText('Age')).toBeInTheDocument();
-      expect(screen.getByText('Email')).toBeInTheDocument();
-      expect(screen.getByText('Active')).toBeInTheDocument();
-      expect(screen.getByText('Department')).toBeInTheDocument();
-      expect(screen.getByText('Salary')).toBeInTheDocument();
-    });
-
-    it('renders without actions when editing/deletion disabled', () => {
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={testColumns}
-          features={createDefaultFeatures()}
-        />
-      );
-      
-      // Should not have Actions column
-      expect(screen.queryByText('Actions')).not.toBeInTheDocument();
-    });
-  });
-
-  // ============================================================================
-  // EDITING WORKFLOW VALIDATION
-  // ============================================================================
-  
-  describe('Editing Workflow Validation', () => {
-    it('shows Actions column when editing is enabled', () => {
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={testColumns}
-          features={createFeaturesWithEnabled({ editing: true })}
-          onEditRow={mockHandlers.onEditRow}
-        />
-      );
-      
-      // Actions column should be present
-      expect(screen.getByText('Actions')).toBeInTheDocument();
-    });
-
-    it('renders Edit buttons for each row when editing enabled', () => {
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={testColumns}
-          features={createFeaturesWithEnabled({ editing: true })}
-          onEditRow={mockHandlers.onEditRow}
-        />
-      );
-      
-      // Should have one Edit button per data row
-      const editButtons = screen.getAllByLabelText('Edit');
-      expect(editButtons).toHaveLength(testData.length);
-      
-      // Each button should have correct attributes
-      editButtons.forEach(button => {
-        expect(button).toHaveAttribute('data-testid', 'edit');
-        expect(button).not.toBeDisabled();
-      });
-    });
-
-    it('Edit buttons have correct icons', () => {
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={testColumns}
-          features={createFeaturesWithEnabled({ editing: true })}
-          onEditRow={mockHandlers.onEditRow}
-        />
-      );
-      
-      const editButtons = screen.getAllByLabelText('Edit');
-      
-      // Each Edit button should exist and be properly configured
-      editButtons.forEach(button => {
-        // Check that button has correct attributes
-        expect(button).toHaveAttribute('aria-label', 'Edit');
-        expect(button).toHaveAttribute('data-testid', 'edit');
-        expect(button).not.toBeDisabled();
-        
-        // Check that button has some content (icon or text)
-        expect(button.innerHTML).not.toBe('');
-      });
-    });
-
-    it('does not render Edit buttons without onEditRow handler', () => {
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={testColumns}
-          features={createFeaturesWithEnabled({ editing: true })}
-          // No onEditRow handler
-        />
-      );
-      
-      // Should not have Edit buttons
-      expect(screen.queryAllByLabelText('Edit')).toHaveLength(0);
-      
-      consoleSpy.mockRestore();
-    });
-
-    it('Edit button click does not immediately call onEditRow', async () => {
-      const user = userEvent.setup();
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={testColumns}
-          features={createFeaturesWithEnabled({ editing: true })}
-          onEditRow={mockHandlers.onEditRow}
-        />
-      );
-      
-      const editButtons = screen.getAllByLabelText('Edit');
-      await user.click(editButtons[0]);
-      
-      // onEditRow should NOT be called immediately
-      expect(mockHandlers.onEditRow).not.toHaveBeenCalled();
-    });
-  });
-
-  // ============================================================================
-  // DELETION WORKFLOW VALIDATION
-  // ============================================================================
-  
-  describe('Deletion Workflow Validation', () => {
-    it('renders Delete buttons when deletion enabled', () => {
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={testColumns}
-          features={createFeaturesWithEnabled({ deletion: true })}
-          onDeleteRow={mockHandlers.onDeleteRow}
-        />
-      );
-      
-      const deleteButtons = screen.getAllByLabelText('Delete');
-      expect(deleteButtons).toHaveLength(testData.length);
-      
-      deleteButtons.forEach(button => {
-        expect(button).toHaveAttribute('data-testid', 'delete');
-        expect(button).not.toBeDisabled();
-      });
-    });
-
-    it('Delete buttons have correct icons', () => {
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={testColumns}
-          features={createFeaturesWithEnabled({ deletion: true })}
-          onDeleteRow={mockHandlers.onDeleteRow}
-        />
-      );
-      
-      const deleteButtons = screen.getAllByLabelText('Delete');
-      
-      deleteButtons.forEach(button => {
-        // Check that button has correct attributes
-        expect(button).toHaveAttribute('aria-label', 'Delete');
-        expect(button).toHaveAttribute('data-testid', 'delete');
-        expect(button).not.toBeDisabled();
-        
-        // Check that button has some content (icon or text)
-        expect(button.innerHTML).not.toBe('');
-      });
-    });
-
-    it('Delete button click immediately calls onDeleteRow', async () => {
-      const user = userEvent.setup();
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={testColumns}
-          features={createFeaturesWithEnabled({ deletion: true })}
-          onDeleteRow={mockHandlers.onDeleteRow}
-        />
-      );
-      
-      const deleteButtons = screen.getAllByLabelText('Delete');
-      await user.click(deleteButtons[0]);
-      
-      // onDeleteRow should be called immediately with correct data
-      expect(mockHandlers.onDeleteRow).toHaveBeenCalledTimes(1);
-      expect(mockHandlers.onDeleteRow).toHaveBeenCalledWith(
-        expect.objectContaining({ id: 'user-1' })
-      );
-    });
-
-    it('does not render Delete buttons without onDeleteRow handler', () => {
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={testColumns}
-          features={createFeaturesWithEnabled({ deletion: true })}
-          // No onDeleteRow handler
-        />
-      );
-      
-      // Should not have Delete buttons
-      expect(screen.queryAllByLabelText('Delete')).toHaveLength(0);
-      
-      consoleSpy.mockRestore();
-    });
-  });
-
-  // ============================================================================
-  // COMBINED FEATURES WORKFLOW VALIDATION
-  // ============================================================================
-  
-  describe('Combined Features Workflow Validation', () => {
-    it('renders both Edit and Delete buttons when both features enabled', () => {
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={testColumns}
-          features={createFeaturesWithEnabled({ editing: true, deletion: true })}
-          onEditRow={mockHandlers.onEditRow}
-          onDeleteRow={mockHandlers.onDeleteRow}
-        />
-      );
-      
-      // Should have both button types
-      const editButtons = screen.getAllByLabelText('Edit');
-      const deleteButtons = screen.getAllByLabelText('Delete');
-      
-      expect(editButtons).toHaveLength(testData.length);
-      expect(deleteButtons).toHaveLength(testData.length);
-      
-      // Actions column should be present
-      expect(screen.getByText('Actions')).toBeInTheDocument();
-    });
-
-    it('handles mixed action button interactions', async () => {
-      const user = userEvent.setup();
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={testColumns}
-          features={createFeaturesWithEnabled({ editing: true, deletion: true })}
-          onEditRow={mockHandlers.onEditRow}
-          onDeleteRow={mockHandlers.onDeleteRow}
-        />
-      );
-      
-      // Click Edit on first row
-      const editButtons = screen.getAllByLabelText('Edit');
-      await user.click(editButtons[0]);
-      
-      // Click Delete on second row
-      const deleteButtons = screen.getAllByLabelText('Delete');
-      await user.click(deleteButtons[1]);
-      
-      // Only onDeleteRow should be called
-      expect(mockHandlers.onEditRow).not.toHaveBeenCalled();
-      expect(mockHandlers.onDeleteRow).toHaveBeenCalledTimes(1);
-      expect(mockHandlers.onDeleteRow).toHaveBeenCalledWith(
-        expect.objectContaining({ id: 'user-2' })
-      );
-    });
-  });
-
-  // ============================================================================
-  // SEARCH WORKFLOW VALIDATION
-  // ============================================================================
-  
-  describe('Search Workflow Validation', () => {
-    it('enables search when searchable=true', () => {
-      renderWithProviders(<DataTable data={testData} columns={testColumns} features={createFeaturesWithEnabled({ search: true })} />);
-      
-      const searchInput = screen.getByPlaceholderText(/search/i);
-      expect(searchInput).toBeInTheDocument();
-      expect(searchInput).not.toBeDisabled();
-    });
-
-    it('search functionality filters data correctly', async () => {
-      const user = userEvent.setup();
-      renderWithProviders(<DataTable data={testData} columns={testColumns} features={createFeaturesWithEnabled({ search: true })} />);
-      
-      const searchInput = screen.getByPlaceholderText(/search/i);
-      await user.type(searchInput, 'User 2');
-      
-      // Should show User 2 but not others
-      expect(screen.getByText('User 2')).toBeInTheDocument();
-      expect(screen.queryByText('User 1')).not.toBeInTheDocument();
-      expect(screen.queryByText('User 3')).not.toBeInTheDocument();
-    });
-
-    it('search with editing enabled maintains action buttons', async () => {
-      const user = userEvent.setup();
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={testColumns}
-          features={createFeaturesWithEnabled({ search: true, editing: true })}
-          onEditRow={mockHandlers.onEditRow}
-        />
-      );
-      
-      // Search for User 2
-      const searchInput = screen.getByPlaceholderText(/search/i);
-      await user.type(searchInput, 'User 2');
-      
-      // Should still have Edit button for the visible row
-      const editButtons = screen.getAllByLabelText('Edit');
-      expect(editButtons).toHaveLength(1);
-    });
-  });
-
-  // ============================================================================
-  // DATA INTEGRITY WORKFLOW VALIDATION
-  // ============================================================================
-  
-  describe('Data Integrity Workflow Validation', () => {
-    it('displays exact data from props without modification', () => {
-      const customData = [
-        { id: 'custom-1', name: 'Custom User', email: 'custom@example.com', active: true, createdAt: '2023-01-01', department: 'Custom Dept', age: 99, salary: 999999 },
-      ];
-
-      renderWithProviders(<DataTable data={customData} columns={testColumns} features={createDefaultFeatures()} />);
-      
-      // Should display exact values
-      expect(screen.getByText('Custom User')).toBeInTheDocument();
-      expect(screen.getByText('custom@example.com')).toBeInTheDocument();
-      expect(screen.getByText('Custom Dept')).toBeInTheDocument();
-      expect(screen.getByText('99')).toBeInTheDocument();
-      expect(screen.getByText('999999')).toBeInTheDocument();
-    });
-
-    it('handles empty data without errors', () => {
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      
-      renderWithProviders(<DataTable data={[]} columns={testColumns} features={createDefaultFeatures()} />);
-      
-      // Should render headers
-      expect(screen.getByText('Name')).toBeInTheDocument();
-      expect(screen.getByText('Email')).toBeInTheDocument();
-      
-      // Should not have any data rows (just header + empty state row)
-      const rows = screen.getAllByRole('row');
-      expect(rows.length).toBeGreaterThanOrEqual(1); // At least header row
-      
-      // Should not throw errors
-      expect(consoleSpy).not.toHaveBeenCalled();
-      
-      consoleSpy.mockRestore();
-    });
-
-    it('handles null/undefined values gracefully', () => {
-      const dataWithNulls = [
-        { id: '1', name: 'John', age: null, email: undefined, active: true, createdAt: '2023-01-01', department: 'Engineering', salary: 50000 },
-        { id: '2', name: null, age: 25, email: 'jane@example.com', active: false, createdAt: '2023-01-02', department: null, salary: undefined },
-      ];
-
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      
-      renderWithProviders(<DataTable data={dataWithNulls} columns={testColumns} features={createDefaultFeatures()} />);
-      
-      // Should render without errors
-      expect(screen.getByText('John')).toBeInTheDocument();
-      expect(screen.getByText('jane@example.com')).toBeInTheDocument();
-      
-      expect(consoleSpy).not.toHaveBeenCalled();
-      consoleSpy.mockRestore();
-    });
-  });
-
-  // ============================================================================
-  // ACCESSIBILITY WORKFLOW VALIDATION
-  // ============================================================================
-  
-  describe('Accessibility Workflow Validation', () => {
-    it('maintains proper table semantic structure', () => {
-      renderWithProviders(<DataTable data={testData} columns={testColumns} features={createDefaultFeatures()} />);
-      
-      // Should have proper table structure
-      const table = screen.getByRole('table');
-      expect(table).toBeInTheDocument();
-      
-      const columnHeaders = screen.getAllByRole('columnheader');
-      expect(columnHeaders.length).toBeGreaterThan(0);
-      
-      const rows = screen.getAllByRole('row');
-      expect(rows.length).toBe(testData.length + 1); // Data rows + header
-    });
-
-    it('action buttons have proper accessibility attributes', () => {
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={testColumns}
-          features={createFeaturesWithEnabled({ editing: true, deletion: true })}
-          onEditRow={mockHandlers.onEditRow}
-          onDeleteRow={mockHandlers.onDeleteRow}
-        />
-      );
-      
-      // Edit buttons
-      const editButtons = screen.getAllByLabelText('Edit');
-      editButtons.forEach(button => {
-        expect(button).toHaveAttribute('aria-label', 'Edit');
-        expect(button).toHaveAttribute('type', 'button');
-        expect(button).not.toHaveAttribute('aria-disabled', 'true');
-      });
-      
-      // Delete buttons
-      const deleteButtons = screen.getAllByLabelText('Delete');
-      deleteButtons.forEach(button => {
-        expect(button).toHaveAttribute('aria-label', 'Delete');
-        expect(button).toHaveAttribute('type', 'button');
-        expect(button).not.toHaveAttribute('aria-disabled', 'true');
-      });
-    });
-
-    it('search input has proper accessibility attributes', () => {
-      renderWithProviders(<DataTable data={testData} columns={testColumns} features={createFeaturesWithEnabled({ search: true })} />);
-      
-      const searchInput = screen.getByPlaceholderText(/search/i);
-      expect(searchInput).toHaveAttribute('aria-label', 'Search table');
-      // Search input may not have explicit type="text" as it defaults to text
-    });
-  });
-
-  // ============================================================================
-  // SORTING WORKFLOW VALIDATION
-  // ============================================================================
-  
-  describe('Sorting Workflow Validation', () => {
-    it('displays sortable column indicators correctly', () => {
-      const sortableColumns = [
-        { accessorKey: 'name', header: 'Name', sortable: true },
-        { accessorKey: 'email', header: 'Email', sortable: true },
-        { accessorKey: 'role', header: 'Role', sortable: false }
-      ];
-      
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={sortableColumns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-      
-      // Sortable columns should have sort indicators (ChevronsUpDown for unsorted)
-      const nameHeader = screen.getByRole('button', { name: /sort by name/i });
-      const emailHeader = screen.getByRole('button', { name: /sort by email/i });
-      
-      expect(nameHeader).toBeInTheDocument();
-      expect(emailHeader).toBeInTheDocument();
-      
-      // Non-sortable column should still have sort button (current implementation behavior)
-      expect(screen.getByRole('button', { name: /sort by role/i })).toBeInTheDocument();
-    });
-
-    it('handles sorting click behavior', async () => {
-      const user = userEvent.setup();
-      const sortableColumns = [
-        { accessorKey: 'name', header: 'Name', sortable: true }
-      ];
-      
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={sortableColumns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-      
-      const sortButton = screen.getByRole('button', { name: /sort by name/i });
-      expect(sortButton).toBeInTheDocument();
-      
-      // Click should not throw errors
-      await user.click(sortButton);
-      expect(sortButton).toBeInTheDocument();
-    });
-
-    it('maintains accessibility for sortable columns', () => {
-      const sortableColumns = [
-        { accessorKey: 'name', header: 'Name', sortable: true }
-      ];
-      
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={sortableColumns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-      
-      const sortButton = screen.getByRole('button', { name: /sort by name/i });
-      expect(sortButton).toHaveAttribute('aria-label', 'Sort by Name');
-      expect(sortButton).toHaveAttribute('tabIndex', '0');
-    });
-
-    it('displays correct visual state for different sort states', () => {
-      const sortableColumns = [
-        { accessorKey: 'name', header: 'Name', sortable: true }
-      ];
-      
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={sortableColumns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-      
-      // Initially should show unsorted state (ChevronsUpDown icon)
-      const sortButton = screen.getByRole('button', { name: /sort by name/i });
-      expect(sortButton).toBeInTheDocument();
-      
-      // The button should contain the sort icon
-      const iconContainer = sortButton.querySelector('div');
-      expect(iconContainer).toBeInTheDocument();
-    });
-  });
-});