@jmruthers/pace-core 0.2.4

package/src/components/PrintGrid/__tests__/PrintGrid.unit.test.tsx

@@ -0,0 +1,340 @@
+/**
+ * @file PrintGrid Unit Tests
+ * @package @jmruthers/pace-core
+ * @module PrintGrid
+ * @since 0.4.38
+ * 
+ * Unit tests for PrintGrid component.
+ */
+import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
+import { userEvent } from '@testing-library/user-event';
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { renderWithProviders  } from "../../../__tests__/shared";
+import { PrintGrid } from '../PrintGrid';
+
+describe('PrintGrid', () => {
+  it('renders grid with children', () => {
+    renderWithProviders(
+      <PrintGrid data-testid="grid">
+        <div>Grid item 1</div>
+        <div>Grid item 2</div>
+      </PrintGrid>
+    );
+    
+    expect(screen.getByTestId('grid')).toBeInTheDocument();
+    expect(screen.getByText('Grid item 1')).toBeInTheDocument();
+    expect(screen.getByText('Grid item 2')).toBeInTheDocument();
+  });
+
+  it('applies 12 columns by default', () => {
+    renderWithProviders(<PrintGrid data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('grid', 'grid-cols-12');
+  });
+
+  it('applies 1 column', () => {
+    renderWithProviders(<PrintGrid columns={1} data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('grid-cols-1');
+  });
+
+  it('applies 2 columns', () => {
+    renderWithProviders(<PrintGrid columns={2} data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('grid-cols-2');
+  });
+
+  it('applies 3 columns', () => {
+    renderWithProviders(<PrintGrid columns={3} data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('grid-cols-3');
+  });
+
+  it('applies 4 columns', () => {
+    renderWithProviders(<PrintGrid columns={4} data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('grid-cols-4');
+  });
+
+  it('applies 5 columns', () => {
+    renderWithProviders(<PrintGrid columns={5} data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('grid-cols-5');
+  });
+
+  it('applies 6 columns', () => {
+    renderWithProviders(<PrintGrid columns={6} data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('grid-cols-6');
+  });
+
+  it('applies default gap', () => {
+    renderWithProviders(<PrintGrid data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('gap-4');
+  });
+
+  it('applies no gap', () => {
+    renderWithProviders(<PrintGrid gap="none" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('gap-0');
+  });
+
+  it('applies small gap', () => {
+    renderWithProviders(<PrintGrid gap="sm" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('gap-2');
+  });
+
+  it('applies large gap', () => {
+    renderWithProviders(<PrintGrid gap="lg" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('gap-6');
+  });
+
+  it('applies extra large gap', () => {
+    renderWithProviders(<PrintGrid gap="xl" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('gap-8');
+  });
+
+  it('applies row gap', () => {
+    renderWithProviders(<PrintGrid rowGap="sm" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('gap-y-2');
+  });
+
+  it('applies column gap', () => {
+    renderWithProviders(<PrintGrid columnGap="lg" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('gap-x-6');
+  });
+
+  it('applies stretch alignment by default', () => {
+    renderWithProviders(<PrintGrid data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('items-stretch');
+  });
+
+  it('applies start alignment', () => {
+    renderWithProviders(<PrintGrid align="start" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('items-start');
+  });
+
+  it('applies center alignment', () => {
+    renderWithProviders(<PrintGrid align="center" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('items-center');
+  });
+
+  it('applies end alignment', () => {
+    renderWithProviders(<PrintGrid align="end" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('items-end');
+  });
+
+  it('applies start justify by default', () => {
+    renderWithProviders(<PrintGrid data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('justify-start');
+  });
+
+  it('applies center justify', () => {
+    renderWithProviders(<PrintGrid justify="center" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('justify-center');
+  });
+
+  it('applies end justify', () => {
+    renderWithProviders(<PrintGrid justify="end" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('justify-end');
+  });
+
+  it('applies between justify', () => {
+    renderWithProviders(<PrintGrid justify="between" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('justify-between');
+  });
+
+  it('applies around justify', () => {
+    renderWithProviders(<PrintGrid justify="around" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('justify-around');
+  });
+
+  it('applies evenly justify', () => {
+    renderWithProviders(<PrintGrid justify="evenly" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('justify-evenly');
+  });
+
+  it('applies print columns', () => {
+    renderWithProviders(<PrintGrid printColumns={6} data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('print:grid', 'print:grid-cols-6');
+  });
+
+  it('applies print gap', () => {
+    renderWithProviders(<PrintGrid printGap="sm" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('print:gap-2');
+  });
+
+  it('applies print row gap', () => {
+    renderWithProviders(<PrintGrid printRowGap="lg" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('print:gap-y-6');
+  });
+
+  it('applies print column gap', () => {
+    renderWithProviders(<PrintGrid printColumnGap="xl" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('print:gap-x-8');
+  });
+
+  it('applies print optimization classes when enabled', () => {
+    renderWithProviders(<PrintGrid printOptimized={true} data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('print:break-inside-avoid', 'print:mb-4');
+  });
+
+  it('does not apply print optimization classes when disabled', () => {
+    renderWithProviders(<PrintGrid printOptimized={false} data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).not.toHaveClass('print:break-inside-avoid');
+  });
+
+  it('applies custom className', () => {
+    renderWithProviders(<PrintGrid className="custom-class" data-testid="grid">Content</PrintGrid>);
+    const grid = screen.getByTestId('grid');
+    
+    expect(grid).toHaveClass('custom-class');
+  });
+describe('PrintGrid Error Handling', () => {
+  const user = userEvent.setup();
+  let restoreConsole: (() => void) | null = null;
+
+  beforeEach(() => {
+    restoreConsole = errorTestingUtils.suppressConsoleErrors();
+  });
+
+  afterEach(() => {
+    if (restoreConsole) {
+      restoreConsole();
+    }
+  });
+
+  it('should handle component errors gracefully', () => {
+    const ErrorComponent = () => {
+      throw new Error('PrintGrid component error');
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    expect(screen.getByText('Error: PrintGrid component error')).toBeInTheDocument();
+  });
+
+  it('should handle async errors', async () => {
+    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
+      const [error, setError] = React.useState<Error | null>(null);
+
+      React.useEffect(() => {
+        if (shouldFail) {
+          setError(new Error('Async error'));
+        }
+      }, [shouldFail]);
+
+      if (error) {
+        throw error;
+      }
+
+      return <div>Async component</div>;
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <AsyncErrorComponent shouldFail={true} />
+      </TestErrorBoundary>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle user interaction errors', async () => {
+    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
+      'PrintGrid interaction error',
+      'click'
+    );
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    await user.click(screen.getByTestId('error-button'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-display')).toBeInTheDocument();
+    });
+  });
+
+  it('should recover from errors when props change', async () => {
+    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
+      if (shouldError) {
+        throw new Error('PrintGrid prop error');
+      }
+      return <div>Normal content</div>;
+    };
+
+    await errorTestingUtils.testErrorRecovery(
+      TestComponent,
+      { shouldError: true },
+      { shouldError: false }
+    );
+
+    expect(screen.getByText('Normal content')).toBeInTheDocument();
+  });
+});
+});

package/src/components/PrintGrid/__tests__/PrintGridBreakpoint.unit.test.tsx

@@ -0,0 +1,261 @@
+/**
+ * @file PrintGridBreakpoint Unit Tests
+ * @package @jmruthers/pace-core
+ * @module PrintGridBreakpoint
+ * @since 0.4.38
+ * 
+ * Unit tests for PrintGridBreakpoint component.
+ */
+import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
+import { userEvent } from '@testing-library/user-event';
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { renderWithProviders  } from "../../../__tests__/shared";
+import { PrintGridBreakpoint } from '../PrintGridBreakpoint';
+
+describe('PrintGridBreakpoint', () => {
+  it('renders breakpoint with children', () => {
+    renderWithProviders(
+      <PrintGridBreakpoint data-testid="breakpoint">
+        <div>Breakpoint content</div>
+      </PrintGridBreakpoint>
+    );
+    
+    expect(screen.getByTestId('breakpoint')).toBeInTheDocument();
+    expect(screen.getByText('Breakpoint content')).toBeInTheDocument();
+  });
+
+  it('applies medium size by default', () => {
+    renderWithProviders(<PrintGridBreakpoint data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('md:grid', 'md:grid-cols-12', 'md:gap-4');
+  });
+
+  it('applies small size', () => {
+    renderWithProviders(<PrintGridBreakpoint size="sm" data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('sm:grid', 'sm:grid-cols-12', 'sm:gap-4');
+  });
+
+  it('applies large size', () => {
+    renderWithProviders(<PrintGridBreakpoint size="lg" data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('lg:grid', 'lg:grid-cols-12', 'lg:gap-4');
+  });
+
+  it('applies extra large size', () => {
+    renderWithProviders(<PrintGridBreakpoint size="xl" data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('xl:grid', 'xl:grid-cols-12', 'xl:gap-4');
+  });
+
+  it('applies 2xl size', () => {
+    renderWithProviders(<PrintGridBreakpoint size="2xl" data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('2xl:grid', '2xl:grid-cols-12', '2xl:gap-4');
+  });
+
+  it('applies 12 columns by default', () => {
+    renderWithProviders(<PrintGridBreakpoint data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('md:grid-cols-12');
+  });
+
+  it('applies 1 column', () => {
+    renderWithProviders(<PrintGridBreakpoint columns={1} data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('md:grid-cols-1');
+  });
+
+  it('applies 2 columns', () => {
+    renderWithProviders(<PrintGridBreakpoint columns={2} data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('md:grid-cols-2');
+  });
+
+  it('applies 3 columns', () => {
+    renderWithProviders(<PrintGridBreakpoint columns={3} data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('md:grid-cols-3');
+  });
+
+  it('applies 4 columns', () => {
+    renderWithProviders(<PrintGridBreakpoint columns={4} data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('md:grid-cols-4');
+  });
+
+  it('applies 5 columns', () => {
+    renderWithProviders(<PrintGridBreakpoint columns={5} data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('md:grid-cols-5');
+  });
+
+  it('applies 6 columns', () => {
+    renderWithProviders(<PrintGridBreakpoint columns={6} data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('md:grid-cols-6');
+  });
+
+  it('applies default gap', () => {
+    renderWithProviders(<PrintGridBreakpoint data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('md:gap-4');
+  });
+
+  it('applies no gap', () => {
+    renderWithProviders(<PrintGridBreakpoint gap="none" data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('md:gap-0');
+  });
+
+  it('applies small gap', () => {
+    renderWithProviders(<PrintGridBreakpoint gap="sm" data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('md:gap-2');
+  });
+
+  it('applies large gap', () => {
+    renderWithProviders(<PrintGridBreakpoint gap="lg" data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('md:gap-6');
+  });
+
+  it('applies extra large gap', () => {
+    renderWithProviders(<PrintGridBreakpoint gap="xl" data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('md:gap-8');
+  });
+
+  it('applies print optimization classes when enabled', () => {
+    renderWithProviders(<PrintGridBreakpoint printOptimized={true} data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('print:break-inside-avoid', 'print:mb-4');
+  });
+
+  it('does not apply print optimization classes when disabled', () => {
+    renderWithProviders(<PrintGridBreakpoint printOptimized={false} data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).not.toHaveClass('print:break-inside-avoid');
+  });
+
+  it('applies custom className', () => {
+    renderWithProviders(<PrintGridBreakpoint className="custom-class" data-testid="breakpoint">Content</PrintGridBreakpoint>);
+    const breakpoint = screen.getByTestId('breakpoint');
+    
+    expect(breakpoint).toHaveClass('custom-class');
+  });
+describe('PrintGrid Error Handling', () => {
+  const user = userEvent.setup();
+  let restoreConsole: (() => void) | null = null;
+
+  beforeEach(() => {
+    restoreConsole = errorTestingUtils.suppressConsoleErrors();
+  });
+
+  afterEach(() => {
+    if (restoreConsole) {
+      restoreConsole();
+    }
+  });
+
+  it('should handle component errors gracefully', () => {
+    const ErrorComponent = () => {
+      throw new Error('PrintGrid component error');
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    expect(screen.getByText('Error: PrintGrid component error')).toBeInTheDocument();
+  });
+
+  it('should handle async errors', async () => {
+    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
+      const [error, setError] = React.useState<Error | null>(null);
+
+      React.useEffect(() => {
+        if (shouldFail) {
+          setError(new Error('Async error'));
+        }
+      }, [shouldFail]);
+
+      if (error) {
+        throw error;
+      }
+
+      return <div>Async component</div>;
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <AsyncErrorComponent shouldFail={true} />
+      </TestErrorBoundary>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle user interaction errors', async () => {
+    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
+      'PrintGrid interaction error',
+      'click'
+    );
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    await user.click(screen.getByTestId('error-button'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-display')).toBeInTheDocument();
+    });
+  });
+
+  it('should recover from errors when props change', async () => {
+    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
+      if (shouldError) {
+        throw new Error('PrintGrid prop error');
+      }
+      return <div>Normal content</div>;
+    };
+
+    await errorTestingUtils.testErrorRecovery(
+      TestComponent,
+      { shouldError: true },
+      { shouldError: false }
+    );
+
+    expect(screen.getByText('Normal content')).toBeInTheDocument();
+  });
+});
+});