@jmruthers/pace-core 0.6.6 → 0.6.8

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

@@ -1,476 +0,0 @@
-/**
- * @file View Row Modal Component Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/__tests__
- * @since 0.4.0
- * 
- * Comprehensive test suite for ViewRowModal component following testing guidelines.
- * Tests cover all major functionality, edge cases, and user interactions.
- */
-
-import React from 'react';
-import { render, screen, within, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { ViewRowModal } from '../ViewRowModal';
-
-// Helper function to wait for dialog to be accessible
-// Native dialog elements are only accessible after showModal() completes
-// In test environments, we use querySelector as fallback since getByRole may not work
-// Note: In test environments (jsdom), dialog.open may not be set even when dialog is rendered
-const waitForDialog = async (): Promise<HTMLElement> => {
-  return await waitFor(
-    () => {
-      // Try getByRole first (works in browsers with full dialog support)
-      try {
-        const dialog = screen.getByRole('dialog');
-        expect(dialog).toBeInTheDocument();
-        return dialog;
-      } catch (e) {
-        // Fallback: use querySelector for test environments that don't fully support dialog accessibility
-        const dialog = document.querySelector('dialog[role="dialog"]') as HTMLDialogElement;
-        if (!dialog) {
-          throw new Error('Dialog not found in DOM');
-        }
-        // In test environments, dialog.open may not be set even when dialog is rendered
-        // Just check that dialog exists in DOM - that's sufficient for testing
-        return dialog;
-      }
-    },
-    { timeout: 3000 }
-  );
-};
-
-// Mock Button component
-vi.mock('../../Button/Button', () => ({
-  Button: ({ children, onClick, variant, size, className, 'aria-label': ariaLabel }: any) => (
-    <button
-      onClick={onClick}
-      data-variant={variant}
-      data-size={size}
-      className={className}
-      aria-label={ariaLabel}
-    >
-      {children}
-    </button>
-  ),
-}));
-
-// Mock lucide-react icons
-vi.mock('lucide-react', () => ({
-  X: ({ className }: { className?: string }) => (
-    <span data-testid="x-icon" className={className}>X</span>
-  ),
-}));
-
-interface TestData extends Record<string, any> {
-  id: string;
-  name: string;
-  email: string;
-  age: number;
-  active: boolean;
-  createdAt: Date;
-}
-
-describe('[component] ViewRowModal', () => {
-  const mockData: TestData = {
-    id: '1',
-    name: 'John Doe',
-    email: 'john@example.com',
-    age: 30,
-    active: true,
-    createdAt: new Date('2024-01-01'),
-  };
-
-  const baseProps = {
-    isOpen: true,
-    onClose: vi.fn(),
-    data: mockData,
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
-    it('returns null when data is null', () => {
-      const { container } = render(
-        <ViewRowModal {...baseProps} data={null} />
-      );
-      expect(container.firstChild).toBeNull();
-    });
-
-    it('returns null when modal is closed', () => {
-      const { container } = render(
-        <ViewRowModal {...baseProps} isOpen={false} />
-      );
-      expect(container.firstChild).toBeNull();
-    });
-
-    it('renders modal when open with data', async () => {
-      render(<ViewRowModal {...baseProps} />);
-      
-      // Wait for dialog to be accessible (showModal() is async)
-      await waitForDialog();
-      // DialogContent and DialogHeader are rendered but may not have testids in actual implementation
-      // Check for content instead
-      expect(screen.getByText('Row Details')).toBeInTheDocument();
-    });
-
-    it('renders default title when title prop is not provided', async () => {
-      render(<ViewRowModal {...baseProps} />);
-      
-      // Wait for dialog to be accessible
-      await waitForDialog();
-      // Title is rendered as h2 in DialogHeader, check for text content
-      expect(screen.getByText('Row Details')).toBeInTheDocument();
-    });
-
-    it('renders custom title when title prop is provided', async () => {
-      render(<ViewRowModal {...baseProps} title="Custom Title" />);
-      
-      // Wait for dialog to be accessible
-      await waitForDialog();
-      // Title is rendered as h2 in DialogHeader, check for text content
-      expect(screen.getByText('Custom Title')).toBeInTheDocument();
-    });
-
-    it('renders all data fields', async () => {
-      render(<ViewRowModal {...baseProps} />);
-      
-      // Wait for dialog to be accessible
-      await waitForDialog();
-      
-      expect(screen.getByText(/id/i)).toBeInTheDocument();
-      expect(screen.getByText(/name/i)).toBeInTheDocument();
-      expect(screen.getByText(/email/i)).toBeInTheDocument();
-      expect(screen.getByText(/age/i)).toBeInTheDocument();
-      expect(screen.getByText(/active/i)).toBeInTheDocument();
-    });
-
-    it('renders field values correctly', async () => {
-      render(<ViewRowModal {...baseProps} />);
-      
-      // Wait for dialog to be accessible
-      await waitForDialog();
-      
-      expect(screen.getByText('1')).toBeInTheDocument();
-      expect(screen.getByText('John Doe')).toBeInTheDocument();
-      expect(screen.getByText('john@example.com')).toBeInTheDocument();
-      expect(screen.getByText('30')).toBeInTheDocument();
-      expect(screen.getByText('true')).toBeInTheDocument();
-    });
-
-    it('formats Date values as locale date strings', async () => {
-      render(<ViewRowModal {...baseProps} />);
-      
-      // Wait for dialog to be accessible
-      await waitForDialog();
-      
-      const dateValue = screen.getByText(new Date('2024-01-01').toLocaleDateString());
-      expect(dateValue).toBeInTheDocument();
-    });
-
-    it('formats object values as JSON strings', () => {
-      const dataWithObject = {
-        ...mockData,
-        metadata: { key: 'value', nested: { data: 'test' } },
-      };
-      
-      render(<ViewRowModal {...baseProps} data={dataWithObject} />);
-      
-      // JSON stringified objects contain the key parts
-      expect(screen.getByText(/key/i)).toBeInTheDocument();
-      expect(screen.getByText(/value/i)).toBeInTheDocument();
-      expect(screen.getByText(/nested/i)).toBeInTheDocument();
-    });
-
-    it('handles null values by displaying empty string', () => {
-      const dataWithNull = {
-        ...mockData,
-        nullableField: null,
-      };
-      
-      render(<ViewRowModal {...baseProps} data={dataWithNull} />);
-      
-      // Check that the field label is rendered
-      expect(screen.getByText(/nullable field/i)).toBeInTheDocument();
-    });
-
-    it('capitalizes field names by replacing camelCase with spaces', () => {
-      const dataWithCamelCase = {
-        ...mockData,
-        firstName: 'John',
-        lastName: 'Doe',
-      };
-      
-      render(<ViewRowModal {...baseProps} data={dataWithCamelCase} />);
-      
-      expect(screen.getByText(/first name/i)).toBeInTheDocument();
-      expect(screen.getByText(/last name/i)).toBeInTheDocument();
-    });
-  });
-
-  describe('User Interactions', () => {
-    it('calls onClose when close button is clicked', async () => {
-      const user = userEvent.setup();
-      const handleClose = vi.fn();
-      
-      render(<ViewRowModal {...baseProps} onClose={handleClose} />);
-      
-      // Wait for dialog title to ensure dialog is rendered
-      await waitFor(() => {
-        expect(screen.getByText('Row Details')).toBeInTheDocument();
-      }, { timeout: 5000 });
-      
-      // Find the main "Close" button (not the X icon button) - there are multiple Close buttons
-      const closeButtons = screen.getAllByText('Close');
-      // The main Close button is the one that's not inside a span with sr-only class
-      const mainCloseButton = closeButtons.find(btn => {
-        const button = btn.closest('button');
-        return button && !button.querySelector('.sr-only');
-      })?.closest('button');
-      expect(mainCloseButton).toBeInTheDocument();
-      if (mainCloseButton) {
-        await user.click(mainCloseButton);
-        expect(handleClose).toHaveBeenCalledTimes(1);
-      }
-    });
-
-    it('calls onClose when X icon button is clicked', async () => {
-      const user = userEvent.setup();
-      const handleClose = vi.fn();
-      
-      render(<ViewRowModal {...baseProps} onClose={handleClose} />);
-      
-      // Wait for dialog content to be rendered
-      await waitFor(() => {
-        const xButtons = screen.getAllByTestId('x-icon');
-        expect(xButtons.length).toBeGreaterThan(0);
-      }, { timeout: 5000 });
-      
-      // Get the X icon button specifically (first button with X icon)
-      const xButtons = screen.getAllByTestId('x-icon');
-      const xButton = xButtons[0].closest('button');
-      expect(xButton).toBeInTheDocument();
-      if (xButton) {
-        await user.click(xButton);
-        expect(handleClose).toHaveBeenCalledTimes(1);
-      }
-    });
-
-    it('calls onOpenChange when dialog state changes', async () => {
-      const user = userEvent.setup();
-      const handleOpenChange = vi.fn();
-      
-      render(
-        <ViewRowModal
-          {...baseProps}
-          onClose={handleOpenChange}
-        />
-      );
-      
-      // Wait for dialog title to ensure dialog is rendered
-      await waitFor(() => {
-        expect(screen.getByText('Row Details')).toBeInTheDocument();
-      }, { timeout: 5000 });
-      
-      // Find the main "Close" button (not the X icon button) - there are multiple Close buttons
-      const closeButtons = screen.getAllByText('Close');
-      // The main Close button is the one that's not inside a span with sr-only class
-      const mainCloseButton = closeButtons.find(btn => {
-        const button = btn.closest('button');
-        return button && !button.querySelector('.sr-only');
-      })?.closest('button');
-      expect(mainCloseButton).toBeInTheDocument();
-      if (mainCloseButton) {
-        await user.click(mainCloseButton);
-        expect(handleOpenChange).toHaveBeenCalled();
-      }
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles empty data object', async () => {
-      render(<ViewRowModal {...baseProps} data={{}} />);
-      
-      // Wait for dialog title to ensure dialog is rendered
-      await waitFor(() => {
-        expect(screen.getByText('Row Details')).toBeInTheDocument();
-      }, { timeout: 5000 });
-      
-      // Verify Close button exists (there are multiple, so use getAllByText)
-      const closeButtons = screen.getAllByText('Close');
-      expect(closeButtons.length).toBeGreaterThan(0);
-    });
-
-    it('handles data with undefined values', async () => {
-      const dataWithUndefined = {
-        ...mockData,
-        optionalField: undefined,
-      };
-      
-      render(<ViewRowModal {...baseProps} data={dataWithUndefined} />);
-      
-      await waitForDialog();
-    });
-
-    it('handles data with array values', () => {
-      const dataWithArray = {
-        ...mockData,
-        tags: ['tag1', 'tag2', 'tag3'],
-      };
-      
-      render(<ViewRowModal {...baseProps} data={dataWithArray} />);
-      
-      // Check that array values are displayed (they'll be JSON stringified)
-      expect(screen.getByText(/tag1/i)).toBeInTheDocument();
-      expect(screen.getByText(/tag2/i)).toBeInTheDocument();
-      expect(screen.getByText(/tag3/i)).toBeInTheDocument();
-    });
-
-    it('handles data with nested objects', () => {
-      const dataWithNested = {
-        ...mockData,
-        address: {
-          street: '123 Main St',
-          city: 'New York',
-          zip: '10001',
-        },
-      };
-      
-      render(<ViewRowModal {...baseProps} data={dataWithNested} />);
-      
-      // JSON stringified objects contain the key parts
-      expect(screen.getByText(/street/i)).toBeInTheDocument();
-      expect(screen.getByText(/123 Main St/i)).toBeInTheDocument();
-      expect(screen.getByText(/New York/i)).toBeInTheDocument();
-    });
-
-    it('handles very long string values', () => {
-      const longString = 'a'.repeat(1000);
-      const dataWithLongString = {
-        ...mockData,
-        description: longString,
-      };
-      
-      render(<ViewRowModal {...baseProps} data={dataWithLongString} />);
-      
-      expect(screen.getByText(longString)).toBeInTheDocument();
-    });
-
-    it('handles special characters in field names', () => {
-      const dataWithSpecial = {
-        ...mockData,
-        'field-with-special-chars!@#': 'value',
-      };
-      
-      render(<ViewRowModal {...baseProps} data={dataWithSpecial} />);
-      
-      // The component only handles camelCase, not special characters
-      // Special characters remain in the field name, so check for parts of the name
-      expect(screen.getByText(/field/i)).toBeInTheDocument();
-      expect(screen.getByText('value')).toBeInTheDocument();
-    });
-
-    it('handles numeric zero values', () => {
-      const dataWithZero = {
-        ...mockData,
-        count: 0,
-      };
-      
-      render(<ViewRowModal {...baseProps} data={dataWithZero} />);
-      
-      // Zero should render as "0" - check for it in the value cell
-      const countLabel = screen.getByText(/count:/i);
-      const countValueCell = countLabel.closest('div')?.nextElementSibling;
-      expect(countValueCell).toHaveTextContent('0');
-    });
-
-    it('handles boolean false values', () => {
-      const dataWithFalse = {
-        ...mockData,
-        active: false,
-      };
-      
-      render(<ViewRowModal {...baseProps} data={dataWithFalse} />);
-      
-      // Boolean false should render as "false" - check for it in the value cell
-      const activeLabel = screen.getByText(/active:/i);
-      const activeValueCell = activeLabel.closest('div')?.nextElementSibling;
-      expect(activeValueCell).toHaveTextContent('false');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('provides close button with aria-label', async () => {
-      render(<ViewRowModal {...baseProps} />);
-      
-      // Wait for dialog title to ensure dialog is rendered
-      await waitFor(() => {
-        expect(screen.getByText('Row Details')).toBeInTheDocument();
-      }, { timeout: 5000 });
-      
-      // Verify buttons exist (use querySelector as fallback since role queries may not work in test environments)
-      const dialog = document.querySelector('dialog[role="dialog"]');
-      expect(dialog).toBeInTheDocument();
-      const buttons = dialog?.querySelectorAll('button');
-      expect(buttons?.length).toBeGreaterThan(0);
-    });
-
-    it('provides main close button with accessible text', async () => {
-      render(<ViewRowModal {...baseProps} />);
-      
-      // Wait for dialog title to ensure dialog is rendered
-      await waitFor(() => {
-        expect(screen.getByText('Row Details')).toBeInTheDocument();
-      }, { timeout: 5000 });
-      
-      // Verify Close button exists (there are multiple, so use getAllByText)
-      const closeButtons = screen.getAllByText('Close');
-      expect(closeButtons.length).toBeGreaterThan(0);
-    });
-
-    it('renders dialog with proper structure', async () => {
-      render(<ViewRowModal {...baseProps} />);
-      
-      // Wait for dialog content to be rendered
-      await waitFor(() => {
-        expect(screen.getByText('Row Details')).toBeInTheDocument();
-        expect(screen.getByText('John Doe')).toBeInTheDocument();
-      }, { timeout: 5000 });
-    });
-  });
-
-  describe('Layout and Styling', () => {
-    it('applies max-width and max-height classes to dialog content', async () => {
-      render(<ViewRowModal {...baseProps} />);
-      
-      // Wait for dialog content to be rendered
-      await waitFor(() => {
-        const dialog = document.querySelector('dialog[role="dialog"]') || screen.getByRole('dialog');
-        expect(dialog).toBeInTheDocument();
-      }, { timeout: 5000 });
-    });
-
-    it('renders field labels with proper styling classes', () => {
-      render(<ViewRowModal {...baseProps} />);
-      
-      // Check that field labels are rendered (they should have specific classes)
-      const nameLabel = screen.getByText(/name/i);
-      expect(nameLabel).toBeInTheDocument();
-    });
-
-    it('renders close button in header with proper styling', () => {
-      render(<ViewRowModal {...baseProps} />);
-      
-      const xIcons = screen.getAllByTestId('x-icon');
-      expect(xIcons.length).toBeGreaterThan(0);
-    });
-  });
-});
-

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

@@ -1,128 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { useReactTable, getCoreRowModel, type ColumnDef } from '@tanstack/react-table';
-import { VirtualizedDataTable, EnhancedVirtualizedDataTable } from '../VirtualizedDataTable';
-import type { DataRecord } from '../../types';
-
-const virtualItems = [{ index: 0, key: '0', start: 0, size: 40 }];
-
-vi.mock('@tanstack/react-virtual', () => ({
-  useVirtualizer: vi.fn(() => ({
-    getVirtualItems: () => virtualItems,
-    getTotalSize: () => 40,
-  })),
-}));
-
-describe('[component] VirtualizedDataTable', () => {
-  type Row = DataRecord & { id: string; name: string };
-
-  const columns: ColumnDef<Row>[] = [
-    {
-      accessorKey: 'name',
-      header: 'Name',
-      cell: (info) => <span>{info.getValue() as string}</span>,
-    },
-  ];
-
-  const createTable = (data: Row[]) =>
-    renderHook(() =>
-      useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-      })
-    ).result.current;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders headers and cells when data is available', () => {
-    const table = createTable([{ id: '1', name: 'Alice' }]);
-
-    render(<VirtualizedDataTable table={table} height={200} />);
-
-    expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('Alice')).toBeInTheDocument();
-    expect(screen.getByText(/Showing 1 to 1 of 1 rows/)).toBeInTheDocument();
-  });
-
-  it('renders an empty state when no rows are present', () => {
-    const table = createTable([]);
-
-    render(<VirtualizedDataTable table={table} />);
-
-    expect(screen.getByText('No data available')).toBeInTheDocument();
-    expect(screen.getByText('Name')).toBeInTheDocument();
-  });
-
-  it('reports visible range changes', async () => {
-    const table = createTable([{ id: '1', name: 'Alice' }, { id: '2', name: 'Bob' }]);
-    const onVisibilityChange = vi.fn();
-
-    render(
-      <VirtualizedDataTable
-        table={table}
-        onVisibilityChange={onVisibilityChange}
-      />
-    );
-
-    await waitFor(() => {
-      expect(onVisibilityChange).toHaveBeenCalledWith({ start: 0, end: 0 });
-    });
-  });
-});
-
-describe('[component] EnhancedVirtualizedDataTable', () => {
-  type Row = DataRecord & { id: string; name: string };
-
-  const columns: ColumnDef<Row>[] = [
-    {
-      accessorKey: 'name',
-      header: 'Name',
-      cell: (info) => <span>{info.getValue() as string}</span>,
-    },
-  ];
-
-  const createTable = (data: Row[]) =>
-    renderHook(() =>
-      useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-      })
-    ).result.current;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('shows loading placeholder rows when loading', () => {
-    const table = createTable([{ id: '1', name: 'Alice' }]);
-
-    render(
-      <EnhancedVirtualizedDataTable
-        table={table}
-        isLoading
-        loadingRows={2}
-      />
-    );
-
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
-  });
-
-  it('renders custom empty message when no data is available and not loading', () => {
-    const table = createTable([]);
-
-    render(
-      <EnhancedVirtualizedDataTable
-        table={table}
-        emptyMessage="Nothing here"
-      />
-    );
-
-    expect(screen.getByText('Nothing here')).toBeInTheDocument();
-  });
-});