@jmruthers/pace-core 0.5.180 → 0.5.182

package/src/components/DataTable/examples/__tests__/HierarchicalActionsExample.test.tsx

@@ -1,316 +0,0 @@
-/**
- * @file HierarchicalActionsExample Component Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Examples/__tests__
- * @since 0.4.0
- * 
- * Comprehensive test suite for HierarchicalActionsExample component following testing guidelines.
- * Tests cover rendering, hierarchical actions configuration, and data structure.
- */
-
-import React from 'react';
-import { render, screen, within } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { HierarchicalActionsExample } from '../HierarchicalActionsExample';
-
-// Mock lucide-react icons - include all icons used by HierarchicalActionsExample
-vi.mock('lucide-react', async () => {
-  const actual = await vi.importActual('lucide-react');
-  return {
-    ...actual,
-    // Use actual icon names as imported in the component
-    EyeIcon: ({ className }: { className?: string }) => <div data-testid="eye-icon" className={className} />,
-    InfoIcon: ({ className }: { className?: string }) => <div data-testid="info-icon" className={className} />,
-    PencilIcon: ({ className }: { className?: string }) => <div data-testid="pencil-icon" className={className} />,
-    SettingsIcon: ({ className }: { className?: string }) => <div data-testid="settings-icon" className={className} />,
-    CopyIcon: ({ className }: { className?: string }) => <div data-testid="copy-icon" className={className} />,
-    PlusIcon: ({ className }: { className?: string }) => <div data-testid="plus-icon" className={className} />,
-    DownloadIcon: ({ className }: { className?: string }) => <div data-testid="download-icon" className={className} />,
-    UploadIcon: ({ className }: { className?: string }) => <div data-testid="upload-icon" className={className} />,
-    StarIcon: ({ className }: { className?: string }) => <div data-testid="star-icon" className={className} />,
-    TrashIcon: ({ className }: { className?: string }) => <div data-testid="trash-icon" className={className} />,
-  };
-});
-
-// Mock UnifiedAuthProvider
-vi.mock('../../../providers/UnifiedAuthProvider', () => ({
-  useUnifiedAuth: vi.fn(() => ({
-    user: { id: 'test-user', email: 'test@example.com' },
-    isAuthenticated: true,
-    isLoading: false,
-    error: null,
-  })),
-}));
-
-// Mock DataTable to avoid complex dependencies
-// Import path in HierarchicalActionsExample is: import { DataTable } from '../DataTable';
-vi.mock('../DataTable', async () => {
-  const React = await import('react');
-  return {
-    DataTable: ({ 
-      data, 
-      columns, 
-      title, 
-      rbac,
-      features,
-      hierarchical,
-      actions,
-      onEditRow,
-      onDeleteRow,
-      onExpandedChange,
-    }: any) => React.createElement('div', { 'data-testid': 'hierarchical-data-table' },
-      React.createElement('h2', null, title),
-      React.createElement('div', { 'data-testid': 'data-count' }, data?.length || 0),
-      React.createElement('div', { 'data-testid': 'columns-count' }, columns?.length || 0),
-      React.createElement('div', { 'data-testid': 'actions-count' }, actions?.length || 0),
-      React.createElement('div', { 'data-testid': 'hierarchical-enabled' }, hierarchical?.enabled ? 'true' : 'false'),
-      React.createElement('div', { 'data-testid': 'default-expanded' }, hierarchical?.defaultExpanded === false ? 'false' : 'true'),
-      React.createElement('div', { 'data-testid': 'rbac-config' }, rbac ? 'true' : 'false'),
-      React.createElement('div', { 'data-testid': 'features-config' }, features ? 'true' : 'false'),
-      React.createElement('div', { 'data-testid': 'on-edit-row' }, onEditRow ? 'true' : 'false'),
-      React.createElement('div', { 'data-testid': 'on-delete-row' }, onDeleteRow ? 'true' : 'false'),
-      React.createElement('div', { 'data-testid': 'on-expanded-change' }, onExpandedChange ? 'true' : 'false')
-    ),
-  };
-});
-
-// Mock RBAC hooks - must come AFTER DataTable mock to handle real DataTable rendering
-vi.mock('../../../../rbac/hooks', () => ({
-  useCan: vi.fn(() => ({
-    can: true,
-    isLoading: false,
-    error: null,
-  })),
-  useResolvedScope: vi.fn(() => ({
-    resolvedScope: {
-      organisationId: 'test-org-id',
-      eventId: 'test-event-id',
-      appId: 'test-app-id',
-    },
-    isLoading: false,
-    error: null,
-  })),
-}));
-
-// Mock logger
-vi.mock('../../../utils/core/logger', () => ({
-  createLogger: () => ({
-    debug: vi.fn(),
-    info: vi.fn(),
-    warn: vi.fn(),
-    error: vi.fn(),
-  }),
-}));
-
-describe('[example] HierarchicalActionsExample', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
-    it('renders example component', () => {
-      render(<HierarchicalActionsExample />);
-
-      expect(screen.getByText('Hierarchical Actions Example')).toBeInTheDocument();
-    });
-
-    it('renders main heading', () => {
-      render(<HierarchicalActionsExample />);
-
-      const headings = screen.getAllByRole('heading', { level: 2 });
-      expect(headings.length).toBeGreaterThan(0);
-      expect(headings[0]).toHaveTextContent('Hierarchical Actions Example');
-    });
-
-    it('renders description paragraph', () => {
-      render(<HierarchicalActionsExample />);
-
-      expect(screen.getByText(/This example demonstrates different action icons and labels/i)).toBeInTheDocument();
-    });
-
-    it('renders action features list', () => {
-      render(<HierarchicalActionsExample />);
-
-      expect(screen.getByText(/Action Features:/i)).toBeInTheDocument();
-      expect(screen.getByText(/Expand\/Collapse All:/i)).toBeInTheDocument();
-      expect(screen.getByText(/View Details:/i)).toBeInTheDocument();
-      expect(screen.getByText(/Edit:/i)).toBeInTheDocument();
-    });
-
-    it('renders DataTable with hierarchical configuration', () => {
-      // The component should render without errors
-      const { container } = render(<HierarchicalActionsExample />);
-      
-      // Verify the component structure exists
-      expect(container).toBeInTheDocument();
-      
-      // The DataTable component should be rendered (either real or mocked)
-      // Since mocking is complex, we verify the example component itself renders
-      expect(screen.getByText('Hierarchical Actions Example')).toBeInTheDocument();
-    });
-  });
-
-  describe('Data Configuration', () => {
-    it('provides hierarchical data to table', () => {
-      // Component should render successfully with hierarchical data
-      render(<HierarchicalActionsExample />);
-      
-      // Verify component renders without errors
-      expect(screen.getByText('Hierarchical Actions Example')).toBeInTheDocument();
-    });
-
-    it('provides hierarchical columns configuration', () => {
-      // Component should render successfully with hierarchical columns
-      render(<HierarchicalActionsExample />);
-      
-      // Verify component renders without errors
-      expect(screen.getByText('Hierarchical Actions Example')).toBeInTheDocument();
-    });
-  });
-
-  describe('Hierarchical Configuration', () => {
-    it('enables hierarchical mode', () => {
-      // Component should configure hierarchical mode
-      render(<HierarchicalActionsExample />);
-      
-      // Verify component renders successfully
-      expect(screen.getByText('Hierarchical Actions Example')).toBeInTheDocument();
-    });
-
-    it('sets default expanded state to false', () => {
-      // Component should set default expanded state
-      render(<HierarchicalActionsExample />);
-      
-      // Verify component renders successfully
-      expect(screen.getByText('Hierarchical Actions Example')).toBeInTheDocument();
-    });
-
-    it('provides hierarchical configuration with styling', () => {
-      // Component should provide hierarchical configuration
-      render(<HierarchicalActionsExample />);
-      
-      // Verify component renders successfully
-      expect(screen.getByText('Hierarchical Actions Example')).toBeInTheDocument();
-    });
-  });
-
-  describe('Actions Configuration', () => {
-    it('provides hierarchical actions to table', () => {
-      // Component should provide hierarchical actions
-      render(<HierarchicalActionsExample />);
-      
-      // Verify component renders successfully
-      expect(screen.getByText('Hierarchical Actions Example')).toBeInTheDocument();
-    });
-
-    it('includes actions with parent/child variations', () => {
-      // Component should include parent/child action variations
-      render(<HierarchicalActionsExample />);
-      
-      // Verify component renders successfully
-      expect(screen.getByText('Hierarchical Actions Example')).toBeInTheDocument();
-    });
-  });
-
-  describe('Feature Configuration', () => {
-    it('configures appropriate features for hierarchical table', () => {
-      // Component should configure features
-      render(<HierarchicalActionsExample />);
-      
-      // Verify component renders successfully
-      expect(screen.getByText('Hierarchical Actions Example')).toBeInTheDocument();
-    });
-
-    it('enables hierarchical feature', () => {
-      // Component should enable hierarchical feature
-      render(<HierarchicalActionsExample />);
-      
-      // Verify component renders successfully
-      expect(screen.getByText('Hierarchical Actions Example')).toBeInTheDocument();
-    });
-  });
-
-  describe('RBAC Configuration', () => {
-    it('provides RBAC configuration', () => {
-      // Component should provide RBAC configuration
-      render(<HierarchicalActionsExample />);
-      
-      // Verify component renders successfully
-      expect(screen.getByText('Hierarchical Actions Example')).toBeInTheDocument();
-    });
-  });
-
-  describe('Event Handlers', () => {
-    it('provides onEditRow handler', () => {
-      // Component should provide onEditRow handler
-      render(<HierarchicalActionsExample />);
-      
-      // Verify component renders successfully
-      expect(screen.getByText('Hierarchical Actions Example')).toBeInTheDocument();
-    });
-
-    it('provides onDeleteRow handler', () => {
-      // Component should provide onDeleteRow handler
-      render(<HierarchicalActionsExample />);
-      
-      // Verify component renders successfully
-      expect(screen.getByText('Hierarchical Actions Example')).toBeInTheDocument();
-    });
-
-    it('provides onExpandedChange handler', () => {
-      // Component should provide onExpandedChange handler
-      render(<HierarchicalActionsExample />);
-      
-      // Verify component renders successfully
-      expect(screen.getByText('Hierarchical Actions Example')).toBeInTheDocument();
-    });
-  });
-
-  describe('Documentation', () => {
-    it('includes comprehensive feature list', () => {
-      render(<HierarchicalActionsExample />);
-
-      expect(screen.getByText(/Expand\/Collapse All:/i)).toBeInTheDocument();
-      expect(screen.getByText(/View Details:/i)).toBeInTheDocument();
-      expect(screen.getByText(/Edit:/i)).toBeInTheDocument();
-      expect(screen.getByText(/Copy Recipe:/i)).toBeInTheDocument();
-      expect(screen.getByText(/Add Ingredient:/i)).toBeInTheDocument();
-      expect(screen.getByText(/Export:/i)).toBeInTheDocument();
-      expect(screen.getByText(/Star:/i)).toBeInTheDocument();
-      expect(screen.getByText(/Delete:/i)).toBeInTheDocument();
-    });
-
-    it('describes parent vs child row behavior', () => {
-      render(<HierarchicalActionsExample />);
-
-      // The description text might be split across elements or appear multiple times
-      const differentIconsElements = screen.getAllByText(/Different icons/i);
-      expect(differentIconsElements.length).toBeGreaterThan(0);
-      
-      // Check that either dishes or ingredients text appears (may appear multiple times)
-      const dishesTexts = screen.queryAllByText(/for dishes/i);
-      const ingredientsTexts = screen.queryAllByText(/for ingredients/i);
-      expect(dishesTexts.length > 0 || ingredientsTexts.length > 0).toBe(true);
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('has proper layout structure', () => {
-      render(<HierarchicalActionsExample />);
-
-      const heading = screen.getByText('Hierarchical Actions Example');
-      expect(heading).toBeInTheDocument();
-      
-      // Check that the component renders (layout structure exists)
-      const container = heading.parentElement || heading.closest('div');
-      expect(container).toBeInTheDocument();
-    });
-
-    it('includes feature description section', () => {
-      render(<HierarchicalActionsExample />);
-
-      const featureSection = screen.getByText('Action Features:').parentElement;
-      expect(featureSection).toBeInTheDocument();
-    });
-  });
-});

package/src/components/DataTable/examples/__tests__/HierarchicalExample.test.tsx

@@ -1,45 +0,0 @@
-/**
- * @file HierarchicalExample Unit Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Examples/Tests
- * @since 0.4.35
- */
-
-import React from 'react';
-import { screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import '@testing-library/jest-dom';
-import { renderWithProviders } from '../../../../__tests__/helpers/test-utils';
-
-// Mock the example component
-const HierarchicalDataTableExample = () => (
-  <div>
-    <h2>Hierarchical DataTable Example</h2>
-    <p>Parent-child row relationships with expand/collapse functionality</p>
-  </div>
-);
-
-describe('HierarchicalDataTableExample Component', () => {
-  describe('Rendering', () => {
-    it('renders without crashing', () => {
-      renderWithProviders(<HierarchicalDataTableExample />);
-      expect(screen.getByText('Hierarchical DataTable Example')).toBeInTheDocument();
-    });
-
-    it('renders the title and description', () => {
-      renderWithProviders(<HierarchicalDataTableExample />);
-      
-      expect(screen.getByText('Hierarchical DataTable Example')).toBeInTheDocument();
-      expect(screen.getByText(/Parent-child row relationships with expand\/collapse/)).toBeInTheDocument();
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('has proper heading structure', () => {
-      renderWithProviders(<HierarchicalDataTableExample />);
-      
-      expect(screen.getByRole('heading', { level: 2, name: 'Hierarchical DataTable Example' })).toBeInTheDocument();
-    });
-  });
-});
-

package/src/components/DataTable/examples/__tests__/InitialPageSizeExample.test.tsx

@@ -1,211 +0,0 @@
-/**
- * @file InitialPageSizeExample Component Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Examples/__tests__
- * @since 0.4.0
- * 
- * Comprehensive test suite for InitialPageSizeExample component following testing guidelines.
- * Tests cover rendering, initial page size configuration, and edge cases.
- */
-
-import React from 'react';
-import { render, screen, within } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { InitialPageSizeExample } from '../InitialPageSizeExample';
-
-// Mock UnifiedAuthProvider
-vi.mock('../../../providers/UnifiedAuthProvider', () => ({
-  useUnifiedAuth: vi.fn(() => ({
-    user: { id: 'test-user', email: 'test@example.com' },
-    isAuthenticated: true,
-    isLoading: false,
-    error: null,
-  })),
-}));
-
-// Mock RBAC hooks
-vi.mock('../../../rbac/hooks', () => ({
-  useCan: vi.fn(() => ({
-    can: true,
-    isLoading: false,
-    error: null,
-  })),
-}));
-
-// Mock DataTable to avoid complex dependencies - need to mock at the import path used
-vi.mock('@jmruthers/pace-core', async () => {
-  const actual = await vi.importActual('@jmruthers/pace-core');
-  return {
-    ...actual,
-    DataTable: ({ 
-      data, 
-      columns, 
-      title, 
-      description, 
-      initialPageSize,
-      rbac,
-      features 
-    }: any) => (
-      <div data-testid="data-table">
-        <h2>{title}</h2>
-        <p>{description}</p>
-        <div data-testid="initial-page-size">{initialPageSize || 'default'}</div>
-        <div data-testid="data-count">{data?.length || 0}</div>
-        <div data-testid="columns-count">{columns?.length || 0}</div>
-      </div>
-    ),
-  };
-});
-
-describe('[example] InitialPageSizeExample', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
-    it('renders example component', () => {
-      render(<InitialPageSizeExample />);
-
-      expect(screen.getByText('DataTable with Custom Initial Page Size')).toBeInTheDocument();
-    });
-
-    it('renders all three example sections', () => {
-      render(<InitialPageSizeExample />);
-
-      expect(screen.getByText('DataTable with Custom Initial Page Size')).toBeInTheDocument();
-      expect(screen.getByText('Default Page Size (10 items)')).toBeInTheDocument();
-      expect(screen.getByText('Invalid Page Size (with validation)')).toBeInTheDocument();
-    });
-
-    it('renders table with custom initial page size', () => {
-      render(<InitialPageSizeExample />);
-
-      const tables = screen.getAllByTestId('data-table');
-      expect(tables.length).toBeGreaterThan(0);
-      
-      // First table should have initialPageSize of 25
-      const firstTable = tables[0];
-      const pageSizeDisplay = within(firstTable).getByTestId('initial-page-size');
-      expect(pageSizeDisplay).toHaveTextContent('25');
-    });
-
-    it('renders table with default page size', () => {
-      render(<InitialPageSizeExample />);
-
-      const tables = screen.getAllByTestId('data-table');
-      
-      // Second table should use default page size
-      const secondTable = tables[1];
-      const pageSizeDisplay = within(secondTable).getByTestId('initial-page-size');
-      expect(pageSizeDisplay).toHaveTextContent('default');
-    });
-
-    it('renders table with invalid page size', () => {
-      render(<InitialPageSizeExample />);
-
-      const tables = screen.getAllByTestId('data-table');
-      
-      // Third table has invalid page size (15)
-      const thirdTable = tables[2];
-      const pageSizeDisplay = within(thirdTable).getByTestId('initial-page-size');
-      expect(pageSizeDisplay).toHaveTextContent('15');
-    });
-  });
-
-  describe('Data Configuration', () => {
-    it('provides sample data to all tables', () => {
-      render(<InitialPageSizeExample />);
-
-      const tables = screen.getAllByTestId('data-table');
-      
-      tables.forEach(table => {
-        const dataCount = within(table).getByTestId('data-count');
-        expect(dataCount).toHaveTextContent('50');
-      });
-    });
-
-    it('provides columns configuration to all tables', () => {
-      render(<InitialPageSizeExample />);
-
-      const tables = screen.getAllByTestId('data-table');
-      
-      tables.forEach(table => {
-        const columnsCount = within(table).getByTestId('columns-count');
-        expect(columnsCount).toHaveTextContent('4');
-      });
-    });
-  });
-
-  describe('Feature Configuration', () => {
-    it('configures features for all tables consistently', () => {
-      render(<InitialPageSizeExample />);
-
-      const tables = screen.getAllByTestId('data-table');
-      
-      // All tables should render
-      expect(tables.length).toBe(3);
-    });
-
-    it('disables import and export for all examples', () => {
-      render(<InitialPageSizeExample />);
-
-      const tables = screen.getAllByTestId('data-table');
-      
-      // Tables should render (features are passed but mocked)
-      expect(tables.length).toBe(3);
-    });
-  });
-
-  describe('RBAC Configuration', () => {
-    it('provides RBAC configuration to all tables', () => {
-      render(<InitialPageSizeExample />);
-
-      const tables = screen.getAllByTestId('data-table');
-      
-      // All tables should render with RBAC
-      expect(tables.length).toBe(3);
-    });
-  });
-
-  describe('Descriptions', () => {
-    it('provides descriptive text for custom page size example', () => {
-      render(<InitialPageSizeExample />);
-
-      expect(screen.getByText(/This example shows how to set a custom initial page size/i)).toBeInTheDocument();
-      expect(screen.getByText(/The table will start with 25 items per page instead of the default 10/i)).toBeInTheDocument();
-    });
-
-    it('provides descriptive text for default page size example', () => {
-      render(<InitialPageSizeExample />);
-
-      expect(screen.getByText(/This table uses the default page size of 10 items per page/i)).toBeInTheDocument();
-    });
-
-    it('provides descriptive text for invalid page size example', () => {
-      render(<InitialPageSizeExample />);
-
-      expect(screen.getByText(/This table tries to use an invalid page size/i)).toBeInTheDocument();
-      expect(screen.getByText(/The component will automatically use the closest valid option/i)).toBeInTheDocument();
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('has proper heading hierarchy', () => {
-      render(<InitialPageSizeExample />);
-
-      const h2s = screen.getAllByRole('heading', { level: 2 });
-      expect(h2s.length).toBeGreaterThan(0);
-      expect(h2s[0]).toHaveTextContent('DataTable with Custom Initial Page Size');
-
-      const h3s = screen.getAllByRole('heading', { level: 3 });
-      expect(h3s.length).toBe(2);
-    });
-
-    it('organizes examples in space-y-8 layout', () => {
-      render(<InitialPageSizeExample />);
-
-      const container = screen.getByText('DataTable with Custom Initial Page Size').closest('.space-y-8');
-      expect(container).toBeInTheDocument();
-    });
-  });
-});