@jmruthers/pace-core 0.6.9 → 0.6.10

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

@@ -5,7 +5,7 @@
  * @since 0.4.0
  * 
  * Comprehensive test suite for LoadingState component following testing guidelines.
- * Tests cover all major functionality and accessibility.
+ * Tests focus on user-visible behavior and accessibility, not implementation details.
  */
 
 import React from 'react';
@@ -15,125 +15,67 @@ import { LoadingState } from '../LoadingState';
 
 describe('[component] LoadingState', () => {
   describe('Rendering', () => {
-    it('renders loading spinner and text', () => {
+    it('displays loading spinner', () => {
       render(<LoadingState />);
-
-      // There are two "Loading..." texts: one in sr-only span, one in strong
-      const loadingTexts = screen.getAllByText('Loading...');
-      expect(loadingTexts.length).toBeGreaterThan(0);
-    });
-
-    it('renders with centered layout', () => {
-      render(<LoadingState />);
-
-      // Component uses <p> with grid place-items-center, not flex
-      const container = screen.getByRole('status').parentElement; // <p> element
-      expect(container).toHaveClass('text-center', 'p-8', 'grid', 'place-items-center');
+      
+      // LoadingSpinner renders as a canvas with role="status"
+      const spinner = screen.getByRole('status');
+      expect(spinner).toBeInTheDocument();
+      expect(spinner.tagName).toBe('CANVAS');
     });
 
-    it('renders with padding', () => {
+    it('displays visible loading text', () => {
       render(<LoadingState />);
-
-      // Component uses <p> with p-8 class
-      const container = screen.getByRole('status').parentElement;
-      expect(container).toHaveClass('p-8');
+      
+      // There are two "Loading..." texts - one visible in <strong>, one sr-only
+      const visibleText = screen.getByText('Loading...', { selector: 'strong' });
+      expect(visibleText).toBeInTheDocument();
     });
 
-    it('renders spinner with animation class', () => {
+    it('renders both spinner and text together', () => {
       render(<LoadingState />);
-
-      // Spinner is the canvas element with role="status"
+      
       const spinner = screen.getByRole('status');
-      expect(spinner).toHaveClass('animate-spin');
-    });
-
-    it('renders grid container with items centered', () => {
-      render(<LoadingState />);
-
-      // Component uses <p> with grid place-items-center, not flex
-      const container = screen.getByRole('status').parentElement;
-      expect(container).toHaveClass('grid', 'place-items-center');
+      const visibleText = screen.getByText('Loading...', { selector: 'strong' });
+      
+      expect(spinner).toBeInTheDocument();
+      expect(visibleText).toBeInTheDocument();
     });
   });
 
   describe('Accessibility', () => {
-    it('provides aria-live region for loading state', () => {
+    it('provides accessible loading state announcement', () => {
       render(<LoadingState />);
-
-      // aria-live is on the canvas element (spinner), not the text
+      
+      // LoadingSpinner has role="status" which announces to screen readers
       const spinner = screen.getByRole('status');
-      // Note: aria-live is not directly on the spinner, it's on the parent container
-      // The spinner has role="status" which provides the live region
-      expect(spinner).toBeInTheDocument();
+      expect(spinner).toHaveAttribute('role', 'status');
     });
 
     it('announces loading state to screen readers', () => {
       render(<LoadingState />);
-
-      // There are two "Loading..." texts: one in sr-only span, one in strong
-      const loadingTexts = screen.getAllByText('Loading...');
-      expect(loadingTexts.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('Visual Structure', () => {
-    it('renders spinner before loading text', () => {
-      render(<LoadingState />);
-
-      // Container is <p> element
-      const container = screen.getByRole('status').parentElement;
-      const spinner = container?.firstElementChild; // canvas element
-      const text = container?.lastElementChild; // strong element
-
-      expect(spinner).toBeInTheDocument();
-      expect(text).toHaveTextContent('Loading...');
-    });
-
-    it('applies grid layout for centering', () => {
-      render(<LoadingState />);
-
-      // Component doesn't use space-x-2, it uses grid layout
-      // The spacing is handled by the grid layout itself
-      const container = screen.getByRole('status').parentElement;
-      expect(container).toBeInTheDocument();
+      
+      // Screen reader text should be present in the spinner
+      const srText = screen.getByText('Loading...', { selector: '.sr-only' });
+      expect(srText).toBeInTheDocument();
     });
   });
 
-  describe('Styling', () => {
-    it('renders visible loading text', () => {
-      render(<LoadingState />);
-
-      // The visible text is in a <strong> element, not with muted color
-      // The sr-only text doesn't have muted color either
-      const textElements = screen.getAllByText('Loading...');
-      // Find the visible one (strong element, not sr-only)
-      const visibleText = textElements.find(el => el.tagName === 'STRONG');
-      expect(visibleText).toBeInTheDocument();
+  describe('Visual Presentation', () => {
+    it('centers content visually', () => {
+      const { container } = render(<LoadingState />);
+      
+      // Component uses grid place-items-center for centering (changed from p to div for semantic HTML)
+      const containerElement = container.querySelector('div');
+      expect(containerElement).toHaveClass('grid', 'place-items-center');
     });
 
-    it('spinner has rounded-full class', () => {
-      render(<LoadingState />);
-
-      // Spinner is the canvas element with role="status"
-      const spinner = screen.getByRole('status');
-      expect(spinner).toHaveClass('rounded-full');
-    });
-
-    it('spinner has border styling', () => {
-      render(<LoadingState />);
-
-      // Spinner uses border-2 border-solid border-current border-r-transparent
-      const spinner = screen.getByRole('status');
-      expect(spinner).toHaveClass('border-2', 'border-solid', 'border-current', 'border-r-transparent');
-    });
-
-    it('spinner has appropriate size', () => {
-      render(<LoadingState />);
-
-      // Spinner is the canvas element with role="status"
-      const spinner = screen.getByRole('status');
-      // LoadingState spinner uses Tailwind v4 size-* utility instead of h-* w-*
-      expect(spinner).toHaveClass('size-6');
+    it('applies appropriate spacing', () => {
+      const { container } = render(<LoadingState />);
+      
+      // Component uses div for layout (changed from p for semantic HTML)
+      const containerElement = container.querySelector('div');
+      expect(containerElement).toHaveClass('p-8');
     });
   });
 });

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

@@ -3,20 +3,20 @@
  * @package @jmruthers/pace-core
  * @module Components/DataTable/Components/__tests__
  * @since 0.4.0
- * 
- * Comprehensive test suite for PaginationControls component following testing guidelines.
- * Tests cover all major functionality, edge cases, and user interactions.
+ *
+ * Tests focus on behavior: pagination navigation, page size selection, loading states, and user interactions.
+ * Removed redundant rendering tests and implementation detail checks.
  */
 
 import React from 'react';
-import { render, screen, within, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { PaginationControls } from '../PaginationControls';
 import type { Table } from '@tanstack/react-table';
 import type { DataRecord, ServerSideResponse } from '../../types';
 
-// Mock lucide-react icons - use importOriginal to include ChevronDown for Select
+// Mock lucide-react icons
 vi.mock('lucide-react', async () => {
   const actual = await vi.importActual('lucide-react');
   return {
@@ -41,7 +41,7 @@ vi.mock('../../Button/Button', () => ({
   ),
 }));
 
-// Mock Select components - use importOriginal to avoid missing ChevronDown
+// Mock Select components
 vi.mock('../../Select/Select', async () => {
   const actual = await vi.importActual('../../Select/Select');
   return {
@@ -135,48 +135,8 @@ describe('[component] PaginationControls', () => {
     vi.clearAllMocks();
   });
 
-  describe('Rendering', () => {
-    it('renders pagination controls with footer element', () => {
-      render(<PaginationControls table={mockTable} />);
-
-      const footer = document.querySelector('footer[aria-label="pagination"]');
-      expect(footer).toBeInTheDocument();
-    });
-
-    it('displays current page information', () => {
-      render(<PaginationControls table={mockTable} />);
-
-      expect(screen.getByText(/Page 1 of 5/i)).toBeInTheDocument();
-    });
-
-    it('renders page size selector', () => {
-      render(<PaginationControls table={mockTable} />);
-
-      expect(screen.getByLabelText('Rows per page')).toBeInTheDocument();
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-    });
-
-    it('renders navigation buttons', () => {
-      render(<PaginationControls table={mockTable} />);
-
-      expect(screen.getByRole('button', { name: 'Go to first page' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Go to previous page' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Go to next page' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Go to last page' })).toBeInTheDocument();
-    });
-
-    it('renders navigation icons', () => {
-      render(<PaginationControls table={mockTable} />);
-
-      expect(screen.getByTestId('chevrons-left')).toBeInTheDocument();
-      expect(screen.getByTestId('chevron-left')).toBeInTheDocument();
-      expect(screen.getByTestId('chevron-right')).toBeInTheDocument();
-      expect(screen.getByTestId('chevrons-right')).toBeInTheDocument();
-    });
-  });
-
   describe('Page Navigation', () => {
-    it('calls goToFirstPage when first page button is clicked', async () => {
+    it('navigates to first page when first button is clicked', async () => {
       const user = userEvent.setup();
       mockPaginationState.canPreviousPage = true;
 
@@ -188,7 +148,7 @@ describe('[component] PaginationControls', () => {
       expect(mockPaginationActions.goToFirstPage).toHaveBeenCalledTimes(1);
     });
 
-    it('calls goToPreviousPage when previous button is clicked', async () => {
+    it('navigates to previous page when previous button is clicked', async () => {
       const user = userEvent.setup();
       mockPaginationState.canPreviousPage = true;
       mockPaginationState.currentPageIndex = 2;
@@ -201,7 +161,7 @@ describe('[component] PaginationControls', () => {
       expect(mockPaginationActions.goToPreviousPage).toHaveBeenCalledTimes(1);
     });
 
-    it('calls goToNextPage when next button is clicked', async () => {
+    it('navigates to next page when next button is clicked', async () => {
       const user = userEvent.setup();
 
       render(<PaginationControls table={mockTable} />);
@@ -212,7 +172,7 @@ describe('[component] PaginationControls', () => {
       expect(mockPaginationActions.goToNextPage).toHaveBeenCalledTimes(1);
     });
 
-    it('calls goToLastPage when last page button is clicked', async () => {
+    it('navigates to last page when last button is clicked', async () => {
       const user = userEvent.setup();
       mockPaginationState.canNextPage = true;
 
@@ -224,7 +184,7 @@ describe('[component] PaginationControls', () => {
       expect(mockPaginationActions.goToLastPage).toHaveBeenCalledTimes(1);
     });
 
-    it('disables first and previous buttons on first page', () => {
+    it('disables navigation buttons on first page', () => {
       mockPaginationState.canPreviousPage = false;
       mockPaginationState.currentPageIndex = 0;
 
@@ -237,7 +197,7 @@ describe('[component] PaginationControls', () => {
       expect(prevButton).toBeDisabled();
     });
 
-    it('disables next and last buttons on last page', () => {
+    it('disables navigation buttons on last page', () => {
       mockPaginationState.canNextPage = false;
       mockPaginationState.currentPageIndex = 4;
       mockPaginationState.pageCount = 5;
@@ -251,7 +211,7 @@ describe('[component] PaginationControls', () => {
       expect(lastButton).toBeDisabled();
     });
 
-    it('updates page display when page changes', () => {
+    it('displays current page information', () => {
       mockPaginationState.currentPageIndex = 2;
 
       render(<PaginationControls table={mockTable} />);
@@ -273,11 +233,9 @@ describe('[component] PaginationControls', () => {
         />
       );
 
-      // Open the select dropdown
       const trigger = screen.getByTestId('select-trigger');
       await user.click(trigger);
 
-      // Wait for options to be visible and select a different page size
       await waitFor(() => {
         expect(screen.getByText('20')).toBeInTheDocument();
       });
@@ -291,22 +249,9 @@ describe('[component] PaginationControls', () => {
     it('disables page size selector when loading', () => {
       render(<PaginationControls table={mockTable} isLoading={true} />);
 
-      // When loading, the Select component should be disabled
-      // Check the trigger button which has the disabled state
       const selectTrigger = screen.getByTestId('select-trigger');
       expect(selectTrigger).toBeDisabled();
     });
-
-    it('uses custom page size options', () => {
-      render(
-        <PaginationControls 
-          table={mockTable} 
-          pageSizeOptions={[5, 15, 25]}
-        />
-      );
-
-      expect(screen.getByTestId('select-root')).toBeInTheDocument();
-    });
   });
 
   describe('Performance Mode Indicators', () => {
@@ -377,19 +322,10 @@ describe('[component] PaginationControls', () => {
       expect(nextButton).toBeDisabled();
       expect(lastButton).toBeDisabled();
     });
-
-    it('applies disabled styling to page size selector when loading', () => {
-      render(<PaginationControls table={mockTable} isLoading={true} />);
-
-      const selectTrigger = screen.getByTestId('select-trigger');
-      expect(selectTrigger.className).toContain('opacity-50');
-      expect(selectTrigger.className).toContain('cursor-not-allowed');
-    });
   });
 
   describe('Server-side Pagination', () => {
     it('works with server-side data', () => {
-      // Update mock to return server-side state
       const serverData: ServerSideResponse<TestData> = {
         data: [],
         totalCount: 100,
@@ -400,7 +336,6 @@ describe('[component] PaginationControls', () => {
         hasPreviousPage: false,
       };
 
-      // Mock pagination state for server mode
       mockPaginationState.pageCount = 10;
       mockPaginationState.totalRows = 100;
 
@@ -464,18 +399,6 @@ describe('[component] PaginationControls', () => {
 
       expect(screen.getByText(/Page 1 of 1/i)).toBeInTheDocument();
     });
-
-    it('handles undefined pageSizeOptions gracefully', () => {
-      render(<PaginationControls table={mockTable} pageSizeOptions={undefined} />);
-
-      expect(screen.getByTestId('select-root')).toBeInTheDocument();
-    });
-
-    it('handles missing table gracefully', () => {
-      expect(() => {
-        render(<PaginationControls table={null as any} />);
-      }).not.toThrow();
-    });
   });
 
   describe('Accessibility', () => {
@@ -502,18 +425,5 @@ describe('[component] PaginationControls', () => {
       const selector = screen.getByLabelText('Rows per page');
       expect(selector).toBeInTheDocument();
     });
-
-    it('maintains keyboard navigation with tabIndex', () => {
-      render(<PaginationControls table={mockTable} />);
-
-      const buttons = screen.getAllByRole('button');
-      const navButtons = buttons.filter(btn => 
-        btn.getAttribute('aria-label')?.includes('page')
-      );
-      
-      navButtons.forEach(button => {
-        expect(button).toHaveAttribute('tabIndex', '0');
-      });
-    });
   });
 });