@startsimpli/ui 0.1.0

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

@@ -0,0 +1,477 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { BulkActionBar } from '../../components/BulkActionBar'
+import { BulkAction } from '../../types'
+import { Mail, Trash, Archive } from 'lucide-react'
+
+describe('BulkActionBar', () => {
+  const mockBulkActions: BulkAction[] = [
+    {
+      id: 'email',
+      label: 'Send Email',
+      icon: Mail,
+      variant: 'gradient-purple',
+      onClick: jest.fn(),
+    },
+    {
+      id: 'archive',
+      label: 'Archive',
+      icon: Archive,
+      variant: 'gradient-blue',
+      onClick: jest.fn(),
+    },
+    {
+      id: 'delete',
+      label: 'Delete',
+      icon: Trash,
+      variant: 'gradient-orange',
+      onClick: jest.fn(),
+    },
+  ]
+
+  const defaultProps = {
+    selectedCount: 5,
+    selectAllPages: false,
+    totalCount: 100,
+    bulkActions: mockBulkActions,
+    onClearSelection: jest.fn(),
+    onExecuteAction: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should be hidden with CSS when selectedCount is 0', () => {
+      const { container } = render(
+        <BulkActionBar {...defaultProps} selectedCount={0} />
+      )
+
+      // Component stays mounted but is hidden with CSS
+      expect(container.firstChild).toBeInTheDocument()
+      expect(container.firstChild).toHaveClass('opacity-0')
+      expect(container.firstChild).toHaveClass('pointer-events-none')
+      expect(container.firstChild).toHaveAttribute('aria-hidden', 'true')
+    })
+
+    it('should be visible when selectedCount is greater than 0', () => {
+      const { container } = render(<BulkActionBar {...defaultProps} />)
+
+      expect(screen.getByText(/5 items selected/)).toBeInTheDocument()
+      expect(container.firstChild).toHaveClass('opacity-100')
+      expect(container.firstChild).not.toHaveClass('pointer-events-none')
+      expect(container.firstChild).toHaveAttribute('aria-hidden', 'false')
+    })
+
+    it('should transition visibility when selection changes', () => {
+      const { container, rerender } = render(
+        <BulkActionBar {...defaultProps} selectedCount={0} />
+      )
+
+      // Initially hidden
+      expect(container.firstChild).toHaveClass('opacity-0')
+
+      // After selection
+      rerender(<BulkActionBar {...defaultProps} selectedCount={5} />)
+      expect(container.firstChild).toHaveClass('opacity-100')
+
+      // Back to no selection
+      rerender(<BulkActionBar {...defaultProps} selectedCount={0} />)
+      expect(container.firstChild).toHaveClass('opacity-0')
+    })
+
+    it('should render all bulk action buttons', () => {
+      render(<BulkActionBar {...defaultProps} />)
+
+      expect(screen.getByText('Send Email')).toBeInTheDocument()
+      expect(screen.getByText('Archive')).toBeInTheDocument()
+      expect(screen.getByText('Delete')).toBeInTheDocument()
+    })
+
+    it('should render clear selection button', () => {
+      render(<BulkActionBar {...defaultProps} />)
+
+      expect(screen.getByText('Clear')).toBeInTheDocument()
+    })
+  })
+
+  describe('Selection Summary', () => {
+    it('should show correct count for single item', () => {
+      render(<BulkActionBar {...defaultProps} selectedCount={1} />)
+
+      expect(screen.getByText(/1 item selected/)).toBeInTheDocument()
+    })
+
+    it('should show correct count for multiple items', () => {
+      render(<BulkActionBar {...defaultProps} selectedCount={10} />)
+
+      expect(screen.getByText(/10 items selected/)).toBeInTheDocument()
+    })
+
+    it('should show total count when selectAllPages is true', () => {
+      render(<BulkActionBar {...defaultProps} selectAllPages={true} />)
+
+      // Check that the selection summary contains all expected parts
+      expect(screen.getByText((content, element) => {
+        return element?.tagName.toLowerCase() === 'span' &&
+               element?.className.includes('text-blue-600') &&
+               element?.textContent?.includes('All') &&
+               element?.textContent?.includes('100') &&
+               element?.textContent?.includes('items selected')
+      })).toBeInTheDocument()
+    })
+
+    it('should highlight total count when selectAllPages is true', () => {
+      render(<BulkActionBar {...defaultProps} selectAllPages={true} />)
+
+      // The 100 count inside the selection summary should have font-semibold
+      const summarySpan = screen.getByText((content, element) => {
+        return element?.tagName.toLowerCase() === 'span' &&
+               element?.className.includes('text-blue-600') &&
+               element?.textContent?.includes('items selected')
+      })
+      const totalCountElement = summarySpan.querySelector('.font-semibold')
+      expect(totalCountElement).toBeInTheDocument()
+      expect(totalCountElement?.textContent).toBe('100')
+    })
+  })
+
+  describe('Action Buttons', () => {
+    it('should call onExecuteAction when action button clicked', () => {
+      render(<BulkActionBar {...defaultProps} />)
+
+      fireEvent.click(screen.getByText('Send Email'))
+      expect(defaultProps.onExecuteAction).toHaveBeenCalledWith(mockBulkActions[0])
+    })
+
+    it('should call onExecuteAction for each different action', () => {
+      render(<BulkActionBar {...defaultProps} />)
+
+      fireEvent.click(screen.getByText('Send Email'))
+      fireEvent.click(screen.getByText('Archive'))
+      fireEvent.click(screen.getByText('Delete'))
+
+      expect(defaultProps.onExecuteAction).toHaveBeenCalledTimes(3)
+      expect(defaultProps.onExecuteAction).toHaveBeenNthCalledWith(1, mockBulkActions[0])
+      expect(defaultProps.onExecuteAction).toHaveBeenNthCalledWith(2, mockBulkActions[1])
+      expect(defaultProps.onExecuteAction).toHaveBeenNthCalledWith(3, mockBulkActions[2])
+    })
+
+    it('should show total count in button label when selectAllPages is true', () => {
+      render(<BulkActionBar {...defaultProps} selectAllPages={true} />)
+
+      expect(screen.getByText(/Send Email \(100\)/)).toBeInTheDocument()
+    })
+
+    it('should not show count in button label when selectAllPages is false', () => {
+      render(<BulkActionBar {...defaultProps} selectAllPages={false} />)
+
+      expect(screen.queryByText(/Send Email \(100\)/)).not.toBeInTheDocument()
+      expect(screen.getByText('Send Email')).toBeInTheDocument()
+    })
+  })
+
+  describe('Clear Selection', () => {
+    it('should call onClearSelection when clear button clicked', () => {
+      render(<BulkActionBar {...defaultProps} />)
+
+      fireEvent.click(screen.getByText('Clear'))
+      expect(defaultProps.onClearSelection).toHaveBeenCalled()
+    })
+  })
+
+  describe('Action Disabled State', () => {
+    it('should disable action when disabled function returns true', () => {
+      const actionsWithDisabled: BulkAction[] = [
+        {
+          id: 'test',
+          label: 'Test Action',
+          icon: Mail,
+          variant: 'default',
+          onClick: jest.fn(),
+          disabled: () => true,
+        },
+      ]
+
+      render(
+        <BulkActionBar
+          {...defaultProps}
+          bulkActions={actionsWithDisabled}
+        />
+      )
+
+      const button = screen.getByText('Test Action').closest('button')
+      expect(button).toBeDisabled()
+    })
+
+    it('should enable action when disabled function returns false', () => {
+      const actionsWithDisabled: BulkAction[] = [
+        {
+          id: 'test',
+          label: 'Test Action',
+          icon: Mail,
+          variant: 'default',
+          onClick: jest.fn(),
+          disabled: () => false,
+        },
+      ]
+
+      render(
+        <BulkActionBar
+          {...defaultProps}
+          bulkActions={actionsWithDisabled}
+        />
+      )
+
+      const button = screen.getByText('Test Action').closest('button')
+      expect(button).not.toBeDisabled()
+    })
+
+    it('should disable action when maxSelection is exceeded', () => {
+      const actionsWithMaxSelection: BulkAction[] = [
+        {
+          id: 'limited',
+          label: 'Limited Action',
+          icon: Mail,
+          variant: 'default',
+          onClick: jest.fn(),
+          maxSelection: 3,
+        },
+      ]
+
+      render(
+        <BulkActionBar
+          {...defaultProps}
+          selectedCount={5}
+          bulkActions={actionsWithMaxSelection}
+        />
+      )
+
+      const button = screen.getByText('Limited Action').closest('button')
+      expect(button).toBeDisabled()
+    })
+
+    it('should enable action when within maxSelection', () => {
+      const actionsWithMaxSelection: BulkAction[] = [
+        {
+          id: 'limited',
+          label: 'Limited Action',
+          icon: Mail,
+          variant: 'default',
+          onClick: jest.fn(),
+          maxSelection: 10,
+        },
+      ]
+
+      render(
+        <BulkActionBar
+          {...defaultProps}
+          selectedCount={5}
+          bulkActions={actionsWithMaxSelection}
+        />
+      )
+
+      const button = screen.getByText('Limited Action').closest('button')
+      expect(button).not.toBeDisabled()
+    })
+
+    it('should show tooltip with max selection message when exceeded', () => {
+      const actionsWithMaxSelection: BulkAction[] = [
+        {
+          id: 'limited',
+          label: 'Limited Action',
+          icon: Mail,
+          variant: 'default',
+          onClick: jest.fn(),
+          maxSelection: 3,
+        },
+      ]
+
+      render(
+        <BulkActionBar
+          {...defaultProps}
+          selectedCount={5}
+          bulkActions={actionsWithMaxSelection}
+        />
+      )
+
+      const button = screen.getByText('Limited Action').closest('button')
+      expect(button).toHaveAttribute('title', 'Maximum 3 items can be selected for this action')
+    })
+  })
+
+  describe('Gradient Variants', () => {
+    it('should apply correct gradient class for gradient-purple', () => {
+      const actions: BulkAction[] = [
+        {
+          id: 'purple',
+          label: 'Purple Action',
+          icon: Mail,
+          variant: 'gradient-purple',
+          onClick: jest.fn(),
+        },
+      ]
+
+      const { container } = render(
+        <BulkActionBar {...defaultProps} bulkActions={actions} />
+      )
+
+      const button = screen.getByText('Purple Action').closest('button')
+      expect(button?.className).toContain('from-purple-600')
+      expect(button?.className).toContain('to-blue-600')
+    })
+
+    it('should apply correct gradient class for gradient-green', () => {
+      const actions: BulkAction[] = [
+        {
+          id: 'green',
+          label: 'Green Action',
+          icon: Mail,
+          variant: 'gradient-green',
+          onClick: jest.fn(),
+        },
+      ]
+
+      render(<BulkActionBar {...defaultProps} bulkActions={actions} />)
+
+      const button = screen.getByText('Green Action').closest('button')
+      expect(button?.className).toContain('from-green-600')
+      expect(button?.className).toContain('to-teal-600')
+    })
+
+    it('should apply correct gradient class for gradient-orange', () => {
+      const actions: BulkAction[] = [
+        {
+          id: 'orange',
+          label: 'Orange Action',
+          icon: Mail,
+          variant: 'gradient-orange',
+          onClick: jest.fn(),
+        },
+      ]
+
+      render(<BulkActionBar {...defaultProps} bulkActions={actions} />)
+
+      const button = screen.getByText('Orange Action').closest('button')
+      expect(button?.className).toContain('from-orange-600')
+      expect(button?.className).toContain('to-red-600')
+    })
+
+    it('should apply correct gradient class for gradient-blue', () => {
+      const actions: BulkAction[] = [
+        {
+          id: 'blue',
+          label: 'Blue Action',
+          icon: Mail,
+          variant: 'gradient-blue',
+          onClick: jest.fn(),
+        },
+      ]
+
+      render(<BulkActionBar {...defaultProps} bulkActions={actions} />)
+
+      const button = screen.getByText('Blue Action').closest('button')
+      expect(button?.className).toContain('from-blue-600')
+      expect(button?.className).toContain('to-indigo-600')
+    })
+
+    it('should apply correct gradient class for gradient-indigo', () => {
+      const actions: BulkAction[] = [
+        {
+          id: 'indigo',
+          label: 'Indigo Action',
+          icon: Mail,
+          variant: 'gradient-indigo',
+          onClick: jest.fn(),
+        },
+      ]
+
+      render(<BulkActionBar {...defaultProps} bulkActions={actions} />)
+
+      const button = screen.getByText('Indigo Action').closest('button')
+      expect(button?.className).toContain('from-indigo-600')
+      expect(button?.className).toContain('to-purple-600')
+    })
+  })
+
+  describe('Custom className', () => {
+    it('should apply custom className', () => {
+      const { container } = render(
+        <BulkActionBar {...defaultProps} className="custom-class" />
+      )
+
+      expect(container.firstChild).toHaveClass('custom-class')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty bulkActions array', () => {
+      render(<BulkActionBar {...defaultProps} bulkActions={[]} />)
+
+      expect(screen.getByText(/5 items selected/)).toBeInTheDocument()
+      expect(screen.getByText('Clear')).toBeInTheDocument()
+    })
+
+    it('should handle very large selection counts', () => {
+      render(<BulkActionBar {...defaultProps} selectedCount={999999} />)
+
+      expect(screen.getByText(/999999 items selected/)).toBeInTheDocument()
+    })
+
+    it('should handle selectAllPages with zero totalCount', () => {
+      render(
+        <BulkActionBar
+          {...defaultProps}
+          selectAllPages={true}
+          totalCount={0}
+        />
+      )
+
+      expect(screen.getByText(/All/)).toBeInTheDocument()
+      expect(screen.getByText(/0/)).toBeInTheDocument()
+    })
+  })
+
+  describe('Icons', () => {
+    it('should render action icons', () => {
+      render(<BulkActionBar {...defaultProps} />)
+
+      // Each button should have an icon (svg element)
+      const buttons = screen.getAllByRole('button')
+      const actionButtons = buttons.filter(
+        (btn) => btn.textContent !== 'Clear'
+      )
+
+      actionButtons.forEach((button) => {
+        const svg = button.querySelector('svg')
+        expect(svg).toBeInTheDocument()
+      })
+    })
+
+    it('should render clear icon', () => {
+      render(<BulkActionBar {...defaultProps} />)
+
+      const clearButton = screen.getByText('Clear').closest('button')
+      const svg = clearButton?.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have proper button roles', () => {
+      render(<BulkActionBar {...defaultProps} />)
+
+      const buttons = screen.getAllByRole('button')
+      expect(buttons.length).toBeGreaterThan(0)
+    })
+
+    it('should have meaningful button text', () => {
+      render(<BulkActionBar {...defaultProps} />)
+
+      expect(screen.getByRole('button', { name: /Send Email/ })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /Archive/ })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /Delete/ })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /Clear/ })).toBeInTheDocument()
+    })
+  })
+})