@startsimpli/ui 0.1.0

package/src/components/unified-table/__tests__/components/SavedViewsDropdown.test.tsx

@@ -0,0 +1,128 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { SavedViewsDropdown } from '../../components/Toolbar/SavedViewsDropdown'
+import { SavedView } from '../../types'
+
+describe('SavedViewsDropdown', () => {
+  const mockViews: SavedView[] = [
+    {
+      id: 'view-1',
+      name: 'Default View',
+      isDefault: true,
+      createdAt: '2024-01-01',
+      columnVisibility: { col1: true, col2: false },
+      sortBy: 'name',
+      sortDirection: 'asc',
+    },
+    {
+      id: 'view-2',
+      name: 'Compact View',
+      createdAt: '2024-01-02',
+      pageSize: 10,
+    },
+  ]
+
+  const defaultProps = {
+    views: mockViews,
+    currentViewId: null,
+    onSaveView: jest.fn().mockResolvedValue({ id: 'new-view', name: 'New View', createdAt: '2024-01-03' }),
+    onUpdateView: jest.fn().mockResolvedValue(undefined),
+    onDeleteView: jest.fn().mockResolvedValue(undefined),
+    onLoadView: jest.fn(),
+    getCurrentViewState: jest.fn().mockReturnValue({
+      columnVisibility: { col1: true },
+      sortBy: 'name',
+      sortDirection: 'asc',
+    }),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('rendering', () => {
+    it('should render the views button', () => {
+      render(<SavedViewsDropdown {...defaultProps} />)
+
+      expect(screen.getByRole('button', { name: /views/i })).toBeInTheDocument()
+    })
+
+    it('should show current view name when a view is selected', () => {
+      render(<SavedViewsDropdown {...defaultProps} currentViewId="view-1" />)
+
+      expect(screen.getByRole('button', { name: /default view/i })).toBeInTheDocument()
+    })
+
+    it('should render saved views in dropdown', async () => {
+      const user = userEvent.setup()
+      render(<SavedViewsDropdown {...defaultProps} />)
+
+      await user.click(screen.getByRole('button', { name: /views/i }))
+
+      expect(screen.getByText('Default View')).toBeInTheDocument()
+      expect(screen.getByText('Compact View')).toBeInTheDocument()
+    })
+
+    it('should show "No saved views" when views array is empty', async () => {
+      const user = userEvent.setup()
+      render(<SavedViewsDropdown {...defaultProps} views={[]} />)
+
+      await user.click(screen.getByRole('button', { name: /views/i }))
+
+      expect(screen.getByText('No saved views')).toBeInTheDocument()
+    })
+
+    it('should show star icon for default view', async () => {
+      const user = userEvent.setup()
+      render(<SavedViewsDropdown {...defaultProps} />)
+
+      await user.click(screen.getByRole('button', { name: /views/i }))
+
+      // Default view should have a star icon (filled)
+      // The star is inside the menu item for Default View
+      const menuItems = screen.getAllByRole('menuitem')
+      expect(menuItems.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('loading views', () => {
+    it('should call onLoadView when clicking a view', async () => {
+      const user = userEvent.setup()
+      render(<SavedViewsDropdown {...defaultProps} />)
+
+      await user.click(screen.getByRole('button', { name: /views/i }))
+      await user.click(screen.getByText('Compact View'))
+
+      expect(defaultProps.onLoadView).toHaveBeenCalledWith('view-2')
+    })
+
+    it('should show check icon for current view', async () => {
+      const user = userEvent.setup()
+      render(<SavedViewsDropdown {...defaultProps} currentViewId="view-1" />)
+
+      await user.click(screen.getByRole('button', { name: /default view/i }))
+
+      // The current view should have a check icon
+      const menuItems = screen.getAllByRole('menuitem')
+      expect(menuItems.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('saving views', () => {
+    it('should show "Save Current View" option in dropdown', async () => {
+      const user = userEvent.setup()
+      render(<SavedViewsDropdown {...defaultProps} />)
+
+      await user.click(screen.getByRole('button', { name: /views/i }))
+
+      expect(screen.getByRole('menuitem', { name: /save current view/i })).toBeInTheDocument()
+    })
+
+    it('should include getCurrentViewState in props', () => {
+      render(<SavedViewsDropdown {...defaultProps} />)
+
+      // The component should have been rendered with getCurrentViewState
+      expect(defaultProps.getCurrentViewState).toBeDefined()
+    })
+  })
+})

package/src/components/unified-table/__tests__/components/TablePagination.test.tsx

@@ -0,0 +1,374 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { TablePagination } from '../../components/TablePagination'
+import { UsePaginationReturn } from '../../types'
+
+describe('TablePagination', () => {
+  const createMockPagination = (overrides?: Partial<UsePaginationReturn>): UsePaginationReturn => ({
+    currentPage: 1,
+    pageSize: 25,
+    totalPages: 4,
+    totalCount: 100,
+    canGoNext: true,
+    canGoPrevious: false,
+    goToPage: jest.fn(),
+    goToFirstPage: jest.fn(),
+    goToLastPage: jest.fn(),
+    goToNextPage: jest.fn(),
+    goToPreviousPage: jest.fn(),
+    getPageNumbers: jest.fn(() => [1, 2, 3, 4]),
+    getDisplayRange: jest.fn(() => ({ start: 1, end: 25 })),
+    ...overrides,
+  })
+
+  describe('Display', () => {
+    it('should render item count display', () => {
+      const pagination = createMockPagination()
+      const { container } = render(<TablePagination pagination={pagination} />)
+
+      // Find the item count display div by its specific class and verify content
+      const itemCountDiv = container.querySelector('.text-muted-foreground')
+      expect(itemCountDiv).toBeInTheDocument()
+      expect(itemCountDiv?.textContent).toContain('Showing')
+      expect(itemCountDiv?.textContent).toContain('1-25')
+      expect(itemCountDiv?.textContent).toContain('of')
+      expect(itemCountDiv?.textContent).toContain('100')
+    })
+
+    it('should display current page and total pages', () => {
+      const pagination = createMockPagination({ currentPage: 2, totalPages: 4 })
+      render(<TablePagination pagination={pagination} />)
+
+      expect(screen.getByText(/Page 2 of 4/)).toBeInTheDocument()
+    })
+
+    it('should show filtered items indicator when totalFilteredCount differs from totalCount', () => {
+      const pagination = createMockPagination()
+      render(<TablePagination pagination={pagination} totalFilteredCount={50} />)
+
+      expect(screen.getByText(/filtered items/)).toBeInTheDocument()
+    })
+
+    it('should not show filtered indicator when counts match', () => {
+      const pagination = createMockPagination()
+      render(<TablePagination pagination={pagination} totalFilteredCount={100} />)
+
+      expect(screen.queryByText(/filtered items/)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Navigation Buttons', () => {
+    it('should render all navigation buttons', () => {
+      const pagination = createMockPagination()
+      render(<TablePagination pagination={pagination} />)
+
+      expect(screen.getByTitle('First page')).toBeInTheDocument()
+      expect(screen.getByTitle('Previous page')).toBeInTheDocument()
+      expect(screen.getByTitle('Next page')).toBeInTheDocument()
+      expect(screen.getByTitle('Last page')).toBeInTheDocument()
+    })
+
+    it('should disable first and previous buttons on first page', () => {
+      const pagination = createMockPagination({ currentPage: 1, canGoPrevious: false })
+      render(<TablePagination pagination={pagination} />)
+
+      expect(screen.getByTitle('First page')).toBeDisabled()
+      expect(screen.getByTitle('Previous page')).toBeDisabled()
+    })
+
+    it('should disable next and last buttons on last page', () => {
+      const pagination = createMockPagination({
+        currentPage: 4,
+        totalPages: 4,
+        canGoNext: false,
+        canGoPrevious: true,
+      })
+      render(<TablePagination pagination={pagination} />)
+
+      expect(screen.getByTitle('Next page')).toBeDisabled()
+      expect(screen.getByTitle('Last page')).toBeDisabled()
+    })
+
+    it('should enable all buttons on middle page', () => {
+      const pagination = createMockPagination({
+        currentPage: 2,
+        canGoNext: true,
+        canGoPrevious: true,
+      })
+      render(<TablePagination pagination={pagination} />)
+
+      expect(screen.getByTitle('First page')).not.toBeDisabled()
+      expect(screen.getByTitle('Previous page')).not.toBeDisabled()
+      expect(screen.getByTitle('Next page')).not.toBeDisabled()
+      expect(screen.getByTitle('Last page')).not.toBeDisabled()
+    })
+  })
+
+  describe('Page Number Buttons', () => {
+    it('should render page number buttons', () => {
+      const pagination = createMockPagination()
+      render(<TablePagination pagination={pagination} />)
+
+      expect(screen.getByRole('button', { name: '1' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: '2' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: '3' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: '4' })).toBeInTheDocument()
+    })
+
+    it('should highlight current page button', () => {
+      const pagination = createMockPagination({ currentPage: 2 })
+      const { container } = render(<TablePagination pagination={pagination} />)
+
+      const page2Button = screen.getByRole('button', { name: '2' })
+
+      // Check if it has the default variant class (which indicates it's active)
+      expect(page2Button.className).toContain('bg-')
+    })
+
+    it('should render ellipsis for many pages', () => {
+      const pagination = createMockPagination({
+        currentPage: 10,
+        totalPages: 20,
+        getPageNumbers: jest.fn(() => [1, '...', 9, 10, 11, '...', 20]),
+      })
+      render(<TablePagination pagination={pagination} />)
+
+      expect(screen.getAllByText('•••')).toHaveLength(2)
+    })
+
+    it('should not render pagination controls for single page', () => {
+      const pagination = createMockPagination({
+        totalPages: 1,
+        canGoNext: false,
+        canGoPrevious: false,
+      })
+      render(<TablePagination pagination={pagination} />)
+
+      expect(screen.queryByTitle('First page')).not.toBeInTheDocument()
+      expect(screen.queryByTitle('Next page')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Navigation Actions', () => {
+    it('should call goToFirstPage when first button clicked', () => {
+      const pagination = createMockPagination({
+        currentPage: 3,
+        canGoPrevious: true,
+      })
+      render(<TablePagination pagination={pagination} />)
+
+      fireEvent.click(screen.getByTitle('First page'))
+      expect(pagination.goToFirstPage).toHaveBeenCalled()
+    })
+
+    it('should call goToPreviousPage when previous button clicked', () => {
+      const pagination = createMockPagination({
+        currentPage: 2,
+        canGoPrevious: true,
+      })
+      render(<TablePagination pagination={pagination} />)
+
+      fireEvent.click(screen.getByTitle('Previous page'))
+      expect(pagination.goToPreviousPage).toHaveBeenCalled()
+    })
+
+    it('should call goToNextPage when next button clicked', () => {
+      const pagination = createMockPagination()
+      render(<TablePagination pagination={pagination} />)
+
+      fireEvent.click(screen.getByTitle('Next page'))
+      expect(pagination.goToNextPage).toHaveBeenCalled()
+    })
+
+    it('should call goToLastPage when last button clicked', () => {
+      const pagination = createMockPagination()
+      render(<TablePagination pagination={pagination} />)
+
+      fireEvent.click(screen.getByTitle('Last page'))
+      expect(pagination.goToLastPage).toHaveBeenCalled()
+    })
+
+    it('should call goToPage with correct page number when page button clicked', () => {
+      const pagination = createMockPagination()
+      render(<TablePagination pagination={pagination} />)
+
+      fireEvent.click(screen.getByRole('button', { name: '3' }))
+      expect(pagination.goToPage).toHaveBeenCalledWith(3)
+    })
+  })
+
+  describe('Select All Pages Prompt', () => {
+    it('should show prompt when showSelectAllPrompt is true', () => {
+      const pagination = createMockPagination({
+        getDisplayRange: jest.fn(() => ({ start: 1, end: 25 })),
+      })
+      render(
+        <TablePagination
+          pagination={pagination}
+          showSelectAllPrompt={true}
+          onSelectAllPages={jest.fn()}
+          totalFilteredCount={100}
+        />
+      )
+
+      // Check that the select all prompt section is rendered
+      expect(screen.getByText(/Select all 100 items/)).toBeInTheDocument()
+    })
+
+    it('should not show prompt when showSelectAllPrompt is false', () => {
+      const pagination = createMockPagination()
+      render(
+        <TablePagination
+          pagination={pagination}
+          showSelectAllPrompt={false}
+          totalFilteredCount={100}
+        />
+      )
+
+      expect(screen.queryByText(/Select all/)).not.toBeInTheDocument()
+    })
+
+    it('should not show prompt when totalFilteredCount is not greater than displayed items', () => {
+      const pagination = createMockPagination({
+        getDisplayRange: jest.fn(() => ({ start: 1, end: 100 })),
+      })
+      render(
+        <TablePagination
+          pagination={pagination}
+          showSelectAllPrompt={true}
+          onSelectAllPages={jest.fn()}
+          totalFilteredCount={100}
+        />
+      )
+
+      expect(screen.queryByText(/Select all/)).not.toBeInTheDocument()
+    })
+
+    it('should call onSelectAllPages when select all button clicked', () => {
+      const onSelectAllPages = jest.fn()
+      const pagination = createMockPagination({
+        getDisplayRange: jest.fn(() => ({ start: 1, end: 25 })),
+      })
+      render(
+        <TablePagination
+          pagination={pagination}
+          showSelectAllPrompt={true}
+          onSelectAllPages={onSelectAllPages}
+          totalFilteredCount={100}
+        />
+      )
+
+      const selectAllButton = screen.getByText(/Select all 100 items/)
+      fireEvent.click(selectAllButton)
+      expect(onSelectAllPages).toHaveBeenCalled()
+    })
+  })
+
+  describe('Display Range', () => {
+    it('should show correct range for first page', () => {
+      const pagination = createMockPagination({
+        currentPage: 1,
+        getDisplayRange: jest.fn(() => ({ start: 1, end: 25 })),
+      })
+      render(<TablePagination pagination={pagination} />)
+
+      expect(screen.getByText(/1-25/)).toBeInTheDocument()
+    })
+
+    it('should show correct range for middle page', () => {
+      const pagination = createMockPagination({
+        currentPage: 2,
+        getDisplayRange: jest.fn(() => ({ start: 26, end: 50 })),
+      })
+      render(<TablePagination pagination={pagination} />)
+
+      expect(screen.getByText(/26-50/)).toBeInTheDocument()
+    })
+
+    it('should show correct range for last page with partial data', () => {
+      const pagination = createMockPagination({
+        currentPage: 4,
+        totalCount: 90,
+        getDisplayRange: jest.fn(() => ({ start: 76, end: 90 })),
+      })
+      render(<TablePagination pagination={pagination} />)
+
+      expect(screen.getByText(/76-90/)).toBeInTheDocument()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have proper aria labels for navigation buttons', () => {
+      const pagination = createMockPagination()
+      render(<TablePagination pagination={pagination} />)
+
+      expect(screen.getByTitle('First page')).toHaveAttribute('title')
+      expect(screen.getByTitle('Previous page')).toHaveAttribute('title')
+      expect(screen.getByTitle('Next page')).toHaveAttribute('title')
+      expect(screen.getByTitle('Last page')).toHaveAttribute('title')
+    })
+
+    it('should render page number buttons as buttons', () => {
+      const pagination = createMockPagination()
+      render(<TablePagination pagination={pagination} />)
+
+      const pageButtons = screen.getAllByRole('button')
+      expect(pageButtons.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle zero total count', () => {
+      const pagination = createMockPagination({
+        totalCount: 0,
+        totalPages: 1,
+        getDisplayRange: jest.fn(() => ({ start: 0, end: 0 })),
+      })
+      render(<TablePagination pagination={pagination} />)
+
+      expect(screen.getByText(/0-0/)).toBeInTheDocument()
+    })
+
+    it('should handle single item', () => {
+      const pagination = createMockPagination({
+        totalCount: 1,
+        totalPages: 1,
+        getDisplayRange: jest.fn(() => ({ start: 1, end: 1 })),
+      })
+      render(<TablePagination pagination={pagination} />)
+
+      expect(screen.getByText(/1-1/)).toBeInTheDocument()
+    })
+
+    it('should handle very large page numbers', () => {
+      const pagination = createMockPagination({
+        currentPage: 999,
+        totalPages: 1000,
+        getPageNumbers: jest.fn(() => [1, '...', 998, 999, 1000]),
+      })
+      render(<TablePagination pagination={pagination} />)
+
+      expect(screen.getByText(/Page 999 of 1000/)).toBeInTheDocument()
+    })
+  })
+
+  describe('Custom className', () => {
+    it('should apply custom className', () => {
+      const pagination = createMockPagination()
+      const { container } = render(
+        <TablePagination pagination={pagination} className="custom-class" />
+      )
+
+      expect(container.firstChild).toHaveClass('custom-class')
+    })
+  })
+
+  describe('Responsive Behavior', () => {
+    it('should show page info on small screens', () => {
+      const pagination = createMockPagination({ currentPage: 2 })
+      render(<TablePagination pagination={pagination} />)
+
+      // Page info should be present (even if hidden on small screens via CSS)
+      expect(screen.getByText(/Page 2 of 4/)).toBeInTheDocument()
+    })
+  })
+})

package/src/components/unified-table/__tests__/hooks/useColumnReorder.test.ts

@@ -0,0 +1,191 @@
+import { renderHook, act } from '@testing-library/react'
+import { useColumnReorder } from '../../hooks/useColumnReorder'
+import { ColumnConfig } from '../../types'
+
+type TestData = { id: string; name: string; value: number }
+
+const createColumns = (): ColumnConfig<TestData>[] => [
+  { id: 'id', header: 'ID', accessorKey: 'id' },
+  { id: 'name', header: 'Name', accessorKey: 'name' },
+  { id: 'value', header: 'Value', accessorKey: 'value' },
+]
+
+describe('useColumnReorder', () => {
+  describe('initialization', () => {
+    it('should return columns in default order when no initial order provided', () => {
+      const columns = createColumns()
+      const { result } = renderHook(() =>
+        useColumnReorder({
+          columns,
+          enabled: true,
+        })
+      )
+
+      expect(result.current.orderedColumns.map(c => c.id)).toEqual(['id', 'name', 'value'])
+      expect(result.current.columnOrder).toEqual(['id', 'name', 'value'])
+    })
+
+    it('should apply initial order when provided', () => {
+      const columns = createColumns()
+      const { result } = renderHook(() =>
+        useColumnReorder({
+          columns,
+          initialOrder: ['value', 'id', 'name'],
+          enabled: true,
+        })
+      )
+
+      expect(result.current.orderedColumns.map(c => c.id)).toEqual(['value', 'id', 'name'])
+      expect(result.current.columnOrder).toEqual(['value', 'id', 'name'])
+    })
+
+    it('should filter out invalid column IDs from initial order', () => {
+      const columns = createColumns()
+      const { result } = renderHook(() =>
+        useColumnReorder({
+          columns,
+          initialOrder: ['value', 'invalid', 'id', 'name'],
+          enabled: true,
+        })
+      )
+
+      expect(result.current.orderedColumns.map(c => c.id)).toEqual(['value', 'id', 'name'])
+    })
+
+    it('should append new columns not in initial order', () => {
+      const columns = createColumns()
+      const { result } = renderHook(() =>
+        useColumnReorder({
+          columns,
+          initialOrder: ['value', 'id'], // 'name' is missing
+          enabled: true,
+        })
+      )
+
+      expect(result.current.orderedColumns.map(c => c.id)).toEqual(['value', 'id', 'name'])
+    })
+
+    it('should return original columns when disabled', () => {
+      const columns = createColumns()
+      const { result } = renderHook(() =>
+        useColumnReorder({
+          columns,
+          initialOrder: ['value', 'id', 'name'],
+          enabled: false,
+        })
+      )
+
+      // When disabled, returns columns in their original order
+      expect(result.current.orderedColumns.map(c => c.id)).toEqual(['id', 'name', 'value'])
+    })
+  })
+
+  describe('handleDragEnd', () => {
+    it('should reorder columns when dragging', () => {
+      const columns = createColumns()
+      const onOrderChange = jest.fn()
+      const { result } = renderHook(() =>
+        useColumnReorder({
+          columns,
+          enabled: true,
+          onOrderChange,
+        })
+      )
+
+      act(() => {
+        result.current.handleDragEnd({
+          source: { index: 0, droppableId: 'columns' },
+          destination: { index: 2, droppableId: 'columns' },
+          draggableId: 'id',
+          type: 'DEFAULT',
+          mode: 'FLUID',
+          reason: 'DROP',
+          combine: null,
+        })
+      })
+
+      // 'id' moved from index 0 to index 2
+      expect(result.current.orderedColumns.map(c => c.id)).toEqual(['name', 'value', 'id'])
+      expect(onOrderChange).toHaveBeenCalledWith(['name', 'value', 'id'])
+    })
+
+    it('should not reorder when dropped in same position', () => {
+      const columns = createColumns()
+      const onOrderChange = jest.fn()
+      const { result } = renderHook(() =>
+        useColumnReorder({
+          columns,
+          enabled: true,
+          onOrderChange,
+        })
+      )
+
+      act(() => {
+        result.current.handleDragEnd({
+          source: { index: 1, droppableId: 'columns' },
+          destination: { index: 1, droppableId: 'columns' },
+          draggableId: 'name',
+          type: 'DEFAULT',
+          mode: 'FLUID',
+          reason: 'DROP',
+          combine: null,
+        })
+      })
+
+      expect(result.current.orderedColumns.map(c => c.id)).toEqual(['id', 'name', 'value'])
+      expect(onOrderChange).not.toHaveBeenCalled()
+    })
+
+    it('should not reorder when destination is null (cancelled drag)', () => {
+      const columns = createColumns()
+      const onOrderChange = jest.fn()
+      const { result } = renderHook(() =>
+        useColumnReorder({
+          columns,
+          enabled: true,
+          onOrderChange,
+        })
+      )
+
+      act(() => {
+        result.current.handleDragEnd({
+          source: { index: 0, droppableId: 'columns' },
+          destination: null,
+          draggableId: 'id',
+          type: 'DEFAULT',
+          mode: 'FLUID',
+          reason: 'CANCEL',
+          combine: null,
+        })
+      })
+
+      expect(result.current.orderedColumns.map(c => c.id)).toEqual(['id', 'name', 'value'])
+      expect(onOrderChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('resetOrder', () => {
+    it('should reset to default column order', () => {
+      const columns = createColumns()
+      const onOrderChange = jest.fn()
+      const { result } = renderHook(() =>
+        useColumnReorder({
+          columns,
+          initialOrder: ['value', 'id', 'name'],
+          enabled: true,
+          onOrderChange,
+        })
+      )
+
+      // Verify initial custom order
+      expect(result.current.orderedColumns.map(c => c.id)).toEqual(['value', 'id', 'name'])
+
+      act(() => {
+        result.current.resetOrder()
+      })
+
+      expect(result.current.orderedColumns.map(c => c.id)).toEqual(['id', 'name', 'value'])
+      expect(onOrderChange).toHaveBeenCalledWith(['id', 'name', 'value'])
+    })
+  })
+})