@jmruthers/pace-core 0.5.68 → 0.5.70

package/src/components/DataTable/__tests__/styles.test.ts

@@ -0,0 +1,382 @@
+/**
+ * @file DataTable Styles Tests
+ * @description Comprehensive test suite for DataTable styling utilities
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/styles
+ * @since 0.4.0
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import {
+  tableStyles,
+  getTableCellClasses,
+  getTableHeadClasses,
+  getTableRowClasses,
+  getTableContainerClasses,
+  getTableClasses,
+  getMainContainerClasses,
+} from '../styles';
+
+// Mock the cn utility
+vi.mock('../../../utils/cn', () => ({
+  cn: (...classes: (string | undefined | null | false)[]) => 
+    classes.filter(Boolean).join(' '),
+}));
+
+describe('DataTable Styles', () => {
+  describe('tableStyles constants', () => {
+    it('has all required table style constants', () => {
+      expect(tableStyles).toHaveProperty('table');
+      expect(tableStyles).toHaveProperty('tableFixed');
+      expect(tableStyles).toHaveProperty('header');
+      expect(tableStyles).toHaveProperty('body');
+      expect(tableStyles).toHaveProperty('footer');
+      expect(tableStyles).toHaveProperty('row');
+      expect(tableStyles).toHaveProperty('rowHover');
+      expect(tableStyles).toHaveProperty('rowSelected');
+      expect(tableStyles).toHaveProperty('head');
+      expect(tableStyles).toHaveProperty('headSortable');
+      expect(tableStyles).toHaveProperty('cell');
+      expect(tableStyles).toHaveProperty('cellCompact');
+      expect(tableStyles).toHaveProperty('cellVirtualized');
+      expect(tableStyles).toHaveProperty('cellSortable');
+      expect(tableStyles).toHaveProperty('mainContainer');
+      expect(tableStyles).toHaveProperty('container');
+      expect(tableStyles).toHaveProperty('containerVirtualized');
+      expect(tableStyles).toHaveProperty('stickyHeader');
+      expect(tableStyles).toHaveProperty('emptyState');
+      expect(tableStyles).toHaveProperty('emptyStateContent');
+      expect(tableStyles).toHaveProperty('emptyStateIcon');
+      expect(tableStyles).toHaveProperty('emptyStateText');
+    });
+
+    it('has correct table base styles', () => {
+      expect(tableStyles.table).toBe('w-full caption-bottom text-sm');
+      expect(tableStyles.tableFixed).toBe('w-full table-fixed');
+    });
+
+    it('has correct table section styles', () => {
+      expect(tableStyles.header).toBe('[&_tr]:border-b');
+      expect(tableStyles.body).toBe('[&_tr:last-child]:border-0');
+      expect(tableStyles.footer).toBe('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0');
+    });
+
+    it('has correct row styles', () => {
+      expect(tableStyles.row).toBe('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted');
+      expect(tableStyles.rowHover).toBe('hover:bg-sec-50 transition-colors');
+      expect(tableStyles.rowSelected).toBe('bg-main-50');
+    });
+
+    it('has correct cell styles', () => {
+      expect(tableStyles.head).toBe('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0');
+      expect(tableStyles.headSortable).toBe('cursor-pointer select-none hover:bg-muted/50');
+      expect(tableStyles.cell).toBe('p-4 align-middle [&:has([role=checkbox])]:pr-0');
+      expect(tableStyles.cellCompact).toBe('px-3 py-2 align-middle [&:has([role=checkbox])]:pr-0');
+      expect(tableStyles.cellVirtualized).toBe('px-4 py-2 text-sm border-b border-sec-200 whitespace-normal');
+      expect(tableStyles.cellSortable).toBe('cursor-pointer select-none');
+    });
+
+    it('has correct container styles', () => {
+      expect(tableStyles.mainContainer).toBe('w-full max-w-full');
+      expect(tableStyles.container).toBe('overflow-x-auto w-full');
+      expect(tableStyles.containerVirtualized).toBe('overflow-hidden');
+    });
+
+    it('has correct empty state styles', () => {
+      expect(tableStyles.emptyState).toBe('flex items-center justify-center py-12');
+      expect(tableStyles.emptyStateContent).toBe('text-center');
+      expect(tableStyles.emptyStateIcon).toBe('text-sec-400 text-lg mb-2');
+      expect(tableStyles.emptyStateText).toBe('text-sec-500');
+    });
+  });
+
+  describe('getTableCellClasses', () => {
+    it('returns default cell classes', () => {
+      const result = getTableCellClasses();
+      expect(result).toBe('p-4 align-middle [&:has([role=checkbox])]:pr-0');
+    });
+
+    it('returns compact cell classes when isCompact is true', () => {
+      const result = getTableCellClasses({ isCompact: true });
+      expect(result).toBe('px-3 py-2 align-middle [&:has([role=checkbox])]:pr-0');
+    });
+
+    it('returns virtualized cell classes when isVirtualized is true', () => {
+      const result = getTableCellClasses({ isVirtualized: true });
+      expect(result).toBe('px-4 py-2 text-sm border-b border-sec-200 whitespace-normal');
+    });
+
+    it('returns sortable cell classes when isSortable is true', () => {
+      const result = getTableCellClasses({ isSortable: true });
+      expect(result).toBe('p-4 align-middle [&:has([role=checkbox])]:pr-0 cursor-pointer select-none');
+    });
+
+    it('combines virtualized and sortable classes', () => {
+      const result = getTableCellClasses({ isVirtualized: true, isSortable: true });
+      expect(result).toBe('px-4 py-2 text-sm border-b border-sec-200 whitespace-normal cursor-pointer select-none');
+    });
+
+    it('adds custom className', () => {
+      const result = getTableCellClasses({ className: 'custom-class' });
+      expect(result).toBe('p-4 align-middle [&:has([role=checkbox])]:pr-0 custom-class');
+    });
+
+    it('combines all options correctly', () => {
+      const result = getTableCellClasses({
+        isVirtualized: true,
+        isSortable: true,
+        className: 'custom-class',
+      });
+      expect(result).toBe('px-4 py-2 text-sm border-b border-sec-200 whitespace-normal cursor-pointer select-none custom-class');
+    });
+
+    it('prioritizes virtualized over compact', () => {
+      const result = getTableCellClasses({ isVirtualized: true, isCompact: true });
+      expect(result).toBe('px-4 py-2 text-sm border-b border-sec-200 whitespace-normal');
+    });
+  });
+
+  describe('getTableHeadClasses', () => {
+    it('returns default head classes', () => {
+      const result = getTableHeadClasses();
+      expect(result).toBe('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0');
+    });
+
+    it('returns sortable head classes when isSortable is true', () => {
+      const result = getTableHeadClasses({ isSortable: true });
+      expect(result).toBe('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 cursor-pointer select-none hover:bg-muted/50');
+    });
+
+    it('adds custom className', () => {
+      const result = getTableHeadClasses({ className: 'custom-head-class' });
+      expect(result).toBe('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 custom-head-class');
+    });
+
+    it('combines sortable and custom className', () => {
+      const result = getTableHeadClasses({ isSortable: true, className: 'custom-head-class' });
+      expect(result).toBe('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 cursor-pointer select-none hover:bg-muted/50 custom-head-class');
+    });
+  });
+
+  describe('getTableRowClasses', () => {
+    it('returns default row classes', () => {
+      const result = getTableRowClasses();
+      expect(result).toBe('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted');
+    });
+
+    it('returns selected row classes when isSelected is true', () => {
+      const result = getTableRowClasses({ isSelected: true });
+      expect(result).toBe('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted bg-main-50');
+    });
+
+    it('returns virtualized row classes when isVirtualized is true', () => {
+      const result = getTableRowClasses({ isVirtualized: true });
+      expect(result).toBe('hover:bg-sec-50 transition-colors');
+    });
+
+    it('combines virtualized and selected classes', () => {
+      const result = getTableRowClasses({ isVirtualized: true, isSelected: true });
+      expect(result).toBe('hover:bg-sec-50 transition-colors bg-main-50');
+    });
+
+    it('adds custom className', () => {
+      const result = getTableRowClasses({ className: 'custom-row-class' });
+      expect(result).toBe('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted custom-row-class');
+    });
+
+    it('combines all options correctly', () => {
+      const result = getTableRowClasses({
+        isVirtualized: true,
+        isSelected: true,
+        className: 'custom-row-class',
+      });
+      expect(result).toBe('hover:bg-sec-50 transition-colors bg-main-50 custom-row-class');
+    });
+  });
+
+  describe('getTableContainerClasses', () => {
+    it('returns default container classes', () => {
+      const result = getTableContainerClasses();
+      expect(result).toBe('overflow-x-auto w-full');
+    });
+
+    it('returns virtualized container classes when isVirtualized is true', () => {
+      const result = getTableContainerClasses({ isVirtualized: true });
+      expect(result).toBe('overflow-hidden');
+    });
+
+    it('adds custom className', () => {
+      const result = getTableContainerClasses({ className: 'custom-container-class' });
+      expect(result).toBe('overflow-x-auto w-full custom-container-class');
+    });
+
+    it('combines virtualized and custom className', () => {
+      const result = getTableContainerClasses({ isVirtualized: true, className: 'custom-container-class' });
+      expect(result).toBe('overflow-hidden custom-container-class');
+    });
+  });
+
+  describe('getTableClasses', () => {
+    it('returns default table classes', () => {
+      const result = getTableClasses();
+      expect(result).toBe('w-full caption-bottom text-sm');
+    });
+
+    it('returns fixed table classes when isFixed is true', () => {
+      const result = getTableClasses({ isFixed: true });
+      expect(result).toBe('w-full table-fixed');
+    });
+
+    it('returns compact variant classes', () => {
+      const result = getTableClasses({ variant: 'compact' });
+      expect(result).toBe('w-full caption-bottom text-sm text-sm');
+    });
+
+    it('returns spacious variant classes', () => {
+      const result = getTableClasses({ variant: 'spacious' });
+      expect(result).toBe('w-full caption-bottom text-sm text-base');
+    });
+
+    it('adds custom className', () => {
+      const result = getTableClasses({ className: 'custom-table-class' });
+      expect(result).toBe('w-full caption-bottom text-sm custom-table-class');
+    });
+
+    it('combines all options correctly', () => {
+      const result = getTableClasses({
+        isFixed: true,
+        variant: 'compact',
+        className: 'custom-table-class',
+      });
+      expect(result).toBe('w-full table-fixed text-sm custom-table-class');
+    });
+
+    it('prioritizes isFixed over variant', () => {
+      const result = getTableClasses({ isFixed: true, variant: 'spacious' });
+      expect(result).toBe('w-full table-fixed text-base');
+    });
+  });
+
+  describe('getMainContainerClasses', () => {
+    it('returns default main container classes', () => {
+      const result = getMainContainerClasses();
+      expect(result).toBe('w-full max-w-full');
+    });
+
+    it('adds custom className', () => {
+      const result = getMainContainerClasses({ className: 'custom-main-class' });
+      expect(result).toBe('w-full max-w-full custom-main-class');
+    });
+  });
+
+  describe('Style Consistency', () => {
+    it('maintains consistent spacing patterns', () => {
+      // Check that padding/margin values are consistent
+      expect(tableStyles.cell).toContain('p-4');
+      expect(tableStyles.cellCompact).toContain('px-3 py-2');
+      expect(tableStyles.cellVirtualized).toContain('px-4 py-2');
+      expect(tableStyles.head).toContain('px-4');
+    });
+
+    it('maintains consistent color patterns', () => {
+      // Check that color classes follow the design system
+      expect(tableStyles.rowHover).toContain('bg-sec-50');
+      expect(tableStyles.rowSelected).toContain('bg-main-50');
+      expect(tableStyles.emptyStateIcon).toContain('text-sec-400');
+      expect(tableStyles.emptyStateText).toContain('text-sec-500');
+    });
+
+    it('maintains consistent border patterns', () => {
+      // Check that border classes are consistent
+      expect(tableStyles.cellVirtualized).toContain('border-b border-sec-200');
+      expect(tableStyles.footer).toContain('border-t');
+    });
+
+    it('maintains consistent transition patterns', () => {
+      // Check that transition classes are consistent
+      expect(tableStyles.row).toContain('transition-colors');
+      expect(tableStyles.rowHover).toContain('transition-colors');
+    });
+  });
+
+  describe('Accessibility Considerations', () => {
+    it('includes proper cursor styles for interactive elements', () => {
+      expect(tableStyles.headSortable).toContain('cursor-pointer');
+      expect(tableStyles.cellSortable).toContain('cursor-pointer');
+    });
+
+    it('includes proper select styles for sortable elements', () => {
+      expect(tableStyles.headSortable).toContain('select-none');
+      expect(tableStyles.cellSortable).toContain('select-none');
+    });
+
+    it('includes proper hover states for interactive elements', () => {
+      expect(tableStyles.headSortable).toContain('hover:bg-muted/50');
+      expect(tableStyles.row).toContain('hover:bg-muted/50');
+      expect(tableStyles.rowHover).toContain('hover:bg-sec-50');
+    });
+  });
+
+  describe('Responsive Design', () => {
+    it('includes responsive overflow handling', () => {
+      expect(tableStyles.container).toContain('overflow-x-auto');
+      expect(tableStyles.containerVirtualized).toContain('overflow-hidden');
+    });
+
+    it('includes proper width constraints', () => {
+      expect(tableStyles.mainContainer).toContain('w-full max-w-full');
+      expect(tableStyles.table).toContain('w-full');
+      expect(tableStyles.tableFixed).toContain('w-full');
+    });
+  });
+
+  describe('Virtualization Support', () => {
+    it('provides distinct styles for virtualized tables', () => {
+      expect(tableStyles.cellVirtualized).not.toBe(tableStyles.cell);
+      expect(tableStyles.containerVirtualized).not.toBe(tableStyles.container);
+    });
+
+    it('maintains performance-optimized styles for virtualized elements', () => {
+      // Virtualized cells should have simpler styles for better performance
+      expect(tableStyles.cellVirtualized).toContain('whitespace-normal');
+      expect(tableStyles.cellVirtualized).not.toContain('hover:bg-muted/50');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles undefined options gracefully', () => {
+      const result = getTableCellClasses({ isVirtualized: undefined, isSortable: undefined });
+      expect(result).toBe('p-4 align-middle [&:has([role=checkbox])]:pr-0');
+    });
+
+    it('handles null className gracefully', () => {
+      const result = getTableCellClasses({ className: null });
+      expect(result).toBe('p-4 align-middle [&:has([role=checkbox])]:pr-0');
+    });
+
+    it('handles empty string className gracefully', () => {
+      const result = getTableCellClasses({ className: '' });
+      expect(result).toBe('p-4 align-middle [&:has([role=checkbox])]:pr-0');
+    });
+
+    it('handles multiple className values', () => {
+      const result = getTableCellClasses({ className: 'class1 class2 class3' });
+      expect(result).toBe('p-4 align-middle [&:has([role=checkbox])]:pr-0 class1 class2 class3');
+    });
+  });
+
+  describe('Type Safety', () => {
+    it('accepts valid variant options', () => {
+      expect(() => getTableClasses({ variant: 'default' })).not.toThrow();
+      expect(() => getTableClasses({ variant: 'compact' })).not.toThrow();
+      expect(() => getTableClasses({ variant: 'spacious' })).not.toThrow();
+    });
+
+    it('handles boolean options correctly', () => {
+      expect(() => getTableCellClasses({ isVirtualized: true })).not.toThrow();
+      expect(() => getTableCellClasses({ isVirtualized: false })).not.toThrow();
+      expect(() => getTableRowClasses({ isSelected: true })).not.toThrow();
+      expect(() => getTableRowClasses({ isSelected: false })).not.toThrow();
+    });
+  });
+});