@startsimpli/ui 0.1.0

package/src/components/unified-table/__tests__/integration/table-with-selection.test.tsx

@@ -0,0 +1,624 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { UnifiedTable } from '../../index'
+import { ColumnConfig, BulkAction } from '../../types'
+import { Mail, Trash } from 'lucide-react'
+import { useState } from 'react'
+
+interface TestData {
+  id: string
+  name: string
+  email: string
+  status: string
+}
+
+describe('UnifiedTable - Integration Tests with Selection', () => {
+  const mockData: TestData[] = Array.from({ length: 50 }, (_, i) => ({
+    id: `${i + 1}`,
+    name: `User ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    status: i % 2 === 0 ? 'active' : 'inactive',
+  }))
+
+  const columns: ColumnConfig<TestData>[] = [
+    {
+      id: 'name',
+      header: 'Name',
+      accessorKey: 'name',
+      sortable: true,
+    },
+    {
+      id: 'email',
+      header: 'Email',
+      accessorKey: 'email',
+      sortable: true,
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      accessorKey: 'status',
+      sortable: true,
+    },
+  ]
+
+  const getRowId = (row: TestData) => row.id
+
+  describe('Basic Selection Functionality', () => {
+    it('should render table with selection enabled', () => {
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 10)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+        />
+      )
+
+      // Should have checkboxes
+      const checkboxes = screen.getAllByRole('checkbox')
+      expect(checkboxes.length).toBeGreaterThan(0)
+    })
+
+    it('should select individual rows', () => {
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 10)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      // First checkbox is "select all", second is first row
+      fireEvent.click(checkboxes[1])
+
+      expect(screen.getByText(/1 item selected/)).toBeInTheDocument()
+    })
+
+    it('should select multiple rows individually', () => {
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 10)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      fireEvent.click(checkboxes[1])
+      fireEvent.click(checkboxes[2])
+      fireEvent.click(checkboxes[3])
+
+      expect(screen.getByText(/3 items selected/)).toBeInTheDocument()
+    })
+
+    it('should deselect rows', () => {
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 10)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      fireEvent.click(checkboxes[1])
+      expect(screen.getByText(/1 item selected/)).toBeInTheDocument()
+
+      fireEvent.click(checkboxes[1])
+      expect(screen.queryByText(/item selected/)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Select All on Current Page', () => {
+    it('should select all rows on current page', () => {
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 10)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      // First checkbox is "select all"
+      fireEvent.click(checkboxes[0])
+
+      expect(screen.getByText(/10 items selected on this page/)).toBeInTheDocument()
+    })
+
+    it('should deselect all rows when clicking select all again', () => {
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 10)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      fireEvent.click(checkboxes[0])
+      expect(screen.getByText(/10 items selected/)).toBeInTheDocument()
+
+      fireEvent.click(checkboxes[0])
+      expect(screen.queryByText(/items selected/)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Select All Pages', () => {
+    it('should show select all pages option when pagination enabled', () => {
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 25)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+          pagination={{
+            enabled: true,
+            pageSize: 10,
+            totalCount: 50,
+            currentPage: 1,
+            serverSide: false,
+            onPageChange: jest.fn(),
+          }}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      fireEvent.click(checkboxes[0])
+
+      // Check that the select all button is present (there's a span and button, target the button)
+      expect(screen.getByRole('button', { name: /Select all 50 items/ })).toBeInTheDocument()
+    })
+
+    it('should select all pages when button clicked', async () => {
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 25)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+          pagination={{
+            enabled: true,
+            pageSize: 10,
+            totalCount: 50,
+            currentPage: 1,
+            serverSide: false,
+            onPageChange: jest.fn(),
+          }}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      fireEvent.click(checkboxes[0])
+
+      const selectAllButton = screen.getByRole('button', { name: /Select all 50 items/ })
+      fireEvent.click(selectAllButton)
+
+      await waitFor(() => {
+        // After selecting all pages, the bulk action bar should show the total count
+        expect(screen.getByText((content, element) => {
+          const tagName = element?.tagName.toLowerCase() || ''
+          const className = element?.className || ''
+          const textContent = element?.textContent || ''
+          return tagName === 'span' &&
+                 typeof className === 'string' && className.includes('text-blue-600') &&
+                 textContent.includes('All') &&
+                 textContent.includes('50') &&
+                 textContent.includes('items selected')
+        })).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Bulk Actions with Selection', () => {
+    it('should show bulk action bar when items selected', () => {
+      const bulkActions: BulkAction[] = [
+        {
+          id: 'email',
+          label: 'Send Email',
+          icon: Mail,
+          variant: 'gradient-purple',
+          onClick: jest.fn(),
+        },
+      ]
+
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 10)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+          bulkActions={bulkActions}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      fireEvent.click(checkboxes[1])
+
+      expect(screen.getByText('Send Email')).toBeInTheDocument()
+    })
+
+    it('should execute bulk action on selected items', async () => {
+      const onBulkAction = jest.fn()
+      const bulkActions: BulkAction[] = [
+        {
+          id: 'email',
+          label: 'Send Email',
+          icon: Mail,
+          variant: 'gradient-purple',
+          onClick: onBulkAction,
+        },
+      ]
+
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 10)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+          bulkActions={bulkActions}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      fireEvent.click(checkboxes[1])
+      fireEvent.click(checkboxes[2])
+
+      const emailButton = screen.getByText('Send Email')
+      fireEvent.click(emailButton)
+
+      await waitFor(() => {
+        expect(onBulkAction).toHaveBeenCalledWith(expect.any(Set))
+        const selectedIds = onBulkAction.mock.calls[0][0]
+        expect(selectedIds.size).toBe(2)
+      })
+    })
+
+    it('should clear selection after bulk action', async () => {
+      const onBulkAction = jest.fn().mockResolvedValue(undefined)
+      const bulkActions: BulkAction[] = [
+        {
+          id: 'email',
+          label: 'Send Email',
+          icon: Mail,
+          variant: 'gradient-purple',
+          onClick: onBulkAction,
+        },
+      ]
+
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 10)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+          bulkActions={bulkActions}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      fireEvent.click(checkboxes[1])
+
+      const emailButton = screen.getByText('Send Email')
+      fireEvent.click(emailButton)
+
+      await waitFor(() => {
+        expect(screen.queryByText(/items selected/)).not.toBeInTheDocument()
+      })
+    })
+
+    it('should show confirmation dialog for actions with confirmMessage', () => {
+      const confirmSpy = jest.spyOn(window, 'confirm').mockReturnValue(true)
+      const onBulkAction = jest.fn()
+      const bulkActions: BulkAction[] = [
+        {
+          id: 'delete',
+          label: 'Delete',
+          icon: Trash,
+          variant: 'gradient-orange',
+          onClick: onBulkAction,
+          confirmMessage: 'Are you sure you want to delete {count} items?',
+        },
+      ]
+
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 10)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+          bulkActions={bulkActions}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      fireEvent.click(checkboxes[1])
+      fireEvent.click(checkboxes[2])
+
+      const deleteButton = screen.getByText('Delete')
+      fireEvent.click(deleteButton)
+
+      expect(confirmSpy).toHaveBeenCalledWith('Are you sure you want to delete 2 items?')
+      confirmSpy.mockRestore()
+    })
+
+    it('should not execute action when confirmation cancelled', () => {
+      const confirmSpy = jest.spyOn(window, 'confirm').mockReturnValue(false)
+      const onBulkAction = jest.fn()
+      const bulkActions: BulkAction[] = [
+        {
+          id: 'delete',
+          label: 'Delete',
+          icon: Trash,
+          variant: 'gradient-orange',
+          onClick: onBulkAction,
+          confirmMessage: 'Are you sure?',
+        },
+      ]
+
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 10)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+          bulkActions={bulkActions}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      fireEvent.click(checkboxes[1])
+
+      const deleteButton = screen.getByText('Delete')
+      fireEvent.click(deleteButton)
+
+      expect(onBulkAction).not.toHaveBeenCalled()
+      confirmSpy.mockRestore()
+    })
+
+    it('should enforce maxSelection limit', () => {
+      const onBulkAction = jest.fn()
+      const bulkActions: BulkAction[] = [
+        {
+          id: 'limited',
+          label: 'Limited Action',
+          icon: Mail,
+          variant: 'default',
+          onClick: onBulkAction,
+          maxSelection: 2,
+        },
+      ]
+
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 10)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+          bulkActions={bulkActions}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      fireEvent.click(checkboxes[1])
+      fireEvent.click(checkboxes[2])
+      fireEvent.click(checkboxes[3])
+
+      const actionButton = screen.getByText('Limited Action').closest('button')
+      expect(actionButton).toBeDisabled()
+      expect(actionButton).toHaveAttribute('title', 'Maximum 2 items can be selected for this action')
+      expect(onBulkAction).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Clear Selection', () => {
+    it('should clear selection when clear button clicked', () => {
+      const bulkActions: BulkAction[] = [
+        {
+          id: 'email',
+          label: 'Send Email',
+          icon: Mail,
+          variant: 'default',
+          onClick: jest.fn(),
+        },
+      ]
+
+      const { container } = render(
+        <UnifiedTable
+          data={mockData.slice(0, 10)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+          bulkActions={bulkActions}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      fireEvent.click(checkboxes[1])
+      fireEvent.click(checkboxes[2])
+
+      expect(screen.getByText(/2 items selected/)).toBeInTheDocument()
+
+      const clearButton = screen.getByText('Clear')
+      fireEvent.click(clearButton)
+
+      // After clearing, the bulk action bar is hidden with CSS (not removed from DOM)
+      // Check that it's hidden via aria-hidden attribute
+      const bulkActionBar = container.querySelector('[aria-hidden="true"]')
+      expect(bulkActionBar).toBeInTheDocument()
+    })
+  })
+
+  describe('Selection with Pagination', () => {
+    it('should maintain selection when changing pages', async () => {
+      const TestComponent = () => {
+        const [currentPage, setCurrentPage] = useState(1)
+        const pageSize = 10
+        const startIndex = (currentPage - 1) * pageSize
+        const currentData = mockData.slice(startIndex, startIndex + pageSize)
+
+        return (
+          <UnifiedTable
+            data={currentData}
+            columns={columns}
+            tableId="test-table"
+            getRowId={getRowId}
+            selection={{ enabled: true }}
+            pagination={{
+              enabled: true,
+              pageSize: pageSize,
+              totalCount: mockData.length,
+              currentPage: currentPage,
+              serverSide: false,
+              onPageChange: setCurrentPage,
+            }}
+          />
+        )
+      }
+
+      render(<TestComponent />)
+
+      // Select items on first page
+      const checkboxes = screen.getAllByRole('checkbox')
+      fireEvent.click(checkboxes[1])
+      expect(screen.getByText(/1 item selected/)).toBeInTheDocument()
+
+      // Go to next page
+      const nextButton = screen.getByTitle('Next page')
+      fireEvent.click(nextButton)
+
+      await waitFor(() => {
+        expect(screen.getByText(/Page 2/)).toBeInTheDocument()
+      })
+
+      // Selection should still show
+      expect(screen.getByText(/1 item selected/)).toBeInTheDocument()
+    })
+  })
+
+  describe('External Selection Control', () => {
+    it('should call onSelectionChange callback', () => {
+      const onSelectionChange = jest.fn()
+
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 10)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{
+            enabled: true,
+            onSelectionChange,
+          }}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      fireEvent.click(checkboxes[1])
+
+      expect(onSelectionChange).toHaveBeenCalled()
+      const selectedIds = onSelectionChange.mock.calls[0][0]
+      expect(selectedIds.size).toBe(1)
+    })
+
+    it('should call onSelectAllPages callback', async () => {
+      const onSelectAllPages = jest.fn()
+
+      render(
+        <UnifiedTable
+          data={mockData.slice(0, 25)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{
+            enabled: true,
+            onSelectAllPages,
+          }}
+          pagination={{
+            enabled: true,
+            pageSize: 10,
+            totalCount: 50,
+            currentPage: 1,
+            serverSide: false,
+            onPageChange: jest.fn(),
+          }}
+        />
+      )
+
+      const checkboxes = screen.getAllByRole('checkbox')
+      fireEvent.click(checkboxes[0])
+
+      const selectAllButton = screen.getByRole('button', { name: /Select all 50 items/ })
+      fireEvent.click(selectAllButton)
+
+      await waitFor(() => {
+        expect(onSelectAllPages).toHaveBeenCalledWith(true)
+      })
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty data with selection enabled', () => {
+      render(
+        <UnifiedTable
+          data={[]}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+        />
+      )
+
+      expect(screen.getByText('No results found.')).toBeInTheDocument()
+    })
+
+    it('should not show bulk actions bar when no items selected', () => {
+      const bulkActions: BulkAction[] = [
+        {
+          id: 'email',
+          label: 'Send Email',
+          icon: Mail,
+          variant: 'default',
+          onClick: jest.fn(),
+        },
+      ]
+
+      const { container } = render(
+        <UnifiedTable
+          data={mockData.slice(0, 10)}
+          columns={columns}
+          tableId="test-table"
+          getRowId={getRowId}
+          selection={{ enabled: true }}
+          bulkActions={bulkActions}
+        />
+      )
+
+      // Bulk action bar is hidden via CSS, not removed from DOM
+      // Check that it has aria-hidden="true" and pointer-events-none
+      const bulkActionBar = container.querySelector('[aria-hidden="true"]')
+      expect(bulkActionBar).toBeInTheDocument()
+      expect(bulkActionBar).toHaveClass('pointer-events-none')
+    })
+  })
+})