@object-ui/plugin-kanban 3.3.0 → 3.3.2

package/src/__tests__/KanbanEnhanced.test.tsx

@@ -1,260 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { KanbanEnhanced, type KanbanColumn } from '../KanbanEnhanced';
-
-// Mock @tanstack/react-virtual
-vi.mock('@tanstack/react-virtual', () => ({
-  useVirtualizer: () => ({
-    getTotalSize: () => 1000,
-    getVirtualItems: () => [],
-    measureElement: vi.fn(),
-  }),
-}));
-
-// Mock @dnd-kit/core and utilities
-vi.mock('@dnd-kit/core', () => ({
-  DndContext: ({ children }: any) => <div data-testid="dnd-context">{children}</div>,
-  DragOverlay: ({ children }: any) => <div data-testid="drag-overlay">{children}</div>,
-  PointerSensor: vi.fn(),
-  TouchSensor: vi.fn(),
-  useSensor: vi.fn(),
-  useSensors: () => [],
-  closestCorners: vi.fn(),
-}));
-
-vi.mock('@dnd-kit/sortable', () => ({
-  SortableContext: ({ children }: any) => <div data-testid="sortable-context">{children}</div>,
-  useSortable: () => ({
-    attributes: {},
-    listeners: {},
-    setNodeRef: vi.fn(),
-    transform: null,
-    transition: null,
-    isDragging: false,
-  }),
-  arrayMove: (array: any[], from: number, to: number) => {
-    const newArray = [...array];
-    newArray.splice(to, 0, newArray.splice(from, 1)[0]);
-    return newArray;
-  },
-  verticalListSortingStrategy: vi.fn(),
-}));
-
-vi.mock('@dnd-kit/utilities', () => ({
-  CSS: {
-    Transform: {
-      toString: () => '',
-    },
-  },
-}));
-
-describe('KanbanEnhanced', () => {
-  const mockColumns: KanbanColumn[] = [
-    {
-      id: 'todo',
-      title: 'To Do',
-      cards: [
-        {
-          id: 'card-1',
-          title: 'Task 1',
-          description: 'Description 1',
-          badges: [{ label: 'High', variant: 'destructive' }],
-        },
-        {
-          id: 'card-2',
-          title: 'Task 2',
-          description: 'Description 2',
-        },
-      ],
-    },
-    {
-      id: 'in-progress',
-      title: 'In Progress',
-      limit: 3,
-      cards: [
-        {
-          id: 'card-3',
-          title: 'Task 3',
-        },
-      ],
-    },
-    {
-      id: 'done',
-      title: 'Done',
-      cards: [],
-    },
-  ];
-
-  it('should render without crashing', () => {
-    const { container } = render(<KanbanEnhanced columns={mockColumns} />);
-    expect(container).toBeTruthy();
-  });
-
-  it('should render all columns', () => {
-    render(<KanbanEnhanced columns={mockColumns} />);
-    
-    expect(screen.getByText('To Do')).toBeInTheDocument();
-    expect(screen.getByText('In Progress')).toBeInTheDocument();
-    expect(screen.getByText('Done')).toBeInTheDocument();
-  });
-
-  it('should render all cards', () => {
-    render(<KanbanEnhanced columns={mockColumns} />);
-    
-    expect(screen.getByText('Task 1')).toBeInTheDocument();
-    expect(screen.getByText('Task 2')).toBeInTheDocument();
-    expect(screen.getByText('Task 3')).toBeInTheDocument();
-  });
-
-  it('should display card count for each column', () => {
-    render(<KanbanEnhanced columns={mockColumns} />);
-    
-    // Columns should show card counts in the format "count" or "count / limit"
-    expect(screen.getByText('To Do')).toBeInTheDocument();
-    expect(screen.getByText('In Progress')).toBeInTheDocument();
-    expect(screen.getByText('1 / 3')).toBeInTheDocument(); // In Progress has 1 card with limit 3
-  });
-
-  it('should display column limit warning when at 80% capacity', () => {
-    const columnsNearLimit: KanbanColumn[] = [
-      {
-        id: 'limited',
-        title: 'Limited Column',
-        limit: 5,
-        cards: Array(4).fill(null).map((_, i) => ({
-          id: `card-${i}`,
-          title: `Task ${i}`,
-        })),
-      },
-    ];
-    
-    const { container } = render(<KanbanEnhanced columns={columnsNearLimit} />);
-    
-    // Should show warning indicator (80% of 5 = 4) - AlertTriangle icon with yellow color
-    expect(container.querySelector('.text-yellow-500')).toBeTruthy();
-  });
-
-  it('should collapse/expand columns when toggle button is clicked', () => {
-    render(<KanbanEnhanced columns={mockColumns} enableCollapse={true} />);
-    
-    // Find collapse toggle button (chevron icons)
-    const toggleButtons = screen.getAllByRole('button');
-    const collapseButton = toggleButtons.find(btn => 
-      btn.querySelector('svg') !== null
-    );
-    
-    if (collapseButton) {
-      fireEvent.click(collapseButton);
-      // After clicking, the column state would change
-      // In a real test with proper DOM, we would verify:
-      // - Column content is hidden
-      // - Icon changes from ChevronDown to ChevronRight
-      expect(collapseButton).toBeTruthy();
-    }
-  });
-
-  it('should call onCardMove when a card is moved', () => {
-    const onCardMove = vi.fn();
-    render(<KanbanEnhanced columns={mockColumns} onCardMove={onCardMove} />);
-    
-    // In our mocked environment with mocked dnd-kit,
-    // we can't easily simulate the full drag and drop interaction.
-    // In a real integration test, this would verify:
-    // - Dragging a card from one column to another
-    // - onCardMove is called with correct parameters (cardId, fromColumn, toColumn)
-    expect(onCardMove).toBeDefined();
-    
-    // Example of what the callback would receive:
-    // expect(onCardMove).toHaveBeenCalledWith('card-1', 'todo', 'in-progress');
-  });
-
-  it('should call onColumnToggle when a column is collapsed', () => {
-    const onColumnToggle = vi.fn();
-    render(
-      <KanbanEnhanced
-        columns={mockColumns}
-        enableCollapse={true}
-        onColumnToggle={onColumnToggle}
-      />
-    );
-    
-    expect(onColumnToggle).toBeDefined();
-  });
-
-  it('should render card badges', () => {
-    render(<KanbanEnhanced columns={mockColumns} />);
-    
-    expect(screen.getByText('High')).toBeInTheDocument();
-  });
-
-  it('should render card descriptions', () => {
-    render(<KanbanEnhanced columns={mockColumns} />);
-    
-    expect(screen.getByText('Description 1')).toBeInTheDocument();
-    expect(screen.getByText('Description 2')).toBeInTheDocument();
-  });
-
-  it('should apply custom className', () => {
-    const { container } = render(
-      <KanbanEnhanced columns={mockColumns} className="custom-class" />
-    );
-    
-    const kanbanContainer = container.querySelector('.custom-class');
-    expect(kanbanContainer).toBeTruthy();
-  });
-
-  it('should render empty columns', () => {
-    render(<KanbanEnhanced columns={mockColumns} />);
-    
-    // "Done" column has 0 cards
-    expect(screen.getByText('Done')).toBeInTheDocument();
-  });
-
-  it('should enable virtual scrolling when specified', () => {
-    render(<KanbanEnhanced columns={mockColumns} enableVirtualScrolling={true} />);
-    
-    // Virtual scrolling should be active
-    const { container } = render(<KanbanEnhanced columns={mockColumns} enableVirtualScrolling={true} />);
-    expect(container).toBeTruthy();
-  });
-
-  it('should render drag overlay when dragging', () => {
-    const { container } = render(<KanbanEnhanced columns={mockColumns} />);
-    
-    const dragOverlay = container.querySelector('[data-testid="drag-overlay"]');
-    expect(dragOverlay).toBeTruthy();
-  });
-
-  it('should show error state when column is over limit', () => {
-    const columnsOverLimit: KanbanColumn[] = [
-      {
-        id: 'limited',
-        title: 'Over Limit',
-        limit: 3,
-        cards: Array(4).fill(null).map((_, i) => ({
-          id: `card-${i}`,
-          title: `Task ${i}`,
-        })),
-      },
-    ];
-    
-    render(<KanbanEnhanced columns={columnsOverLimit} />);
-    
-    // Should show error indicator (over 100% of limit)
-    const { container } = render(<KanbanEnhanced columns={columnsOverLimit} />);
-    expect(container.querySelector('[class*="destructive"]')).toBeTruthy();
-  });
-
-  it('should handle empty columns array', () => {
-    const { container } = render(<KanbanEnhanced columns={[]} />);
-    expect(container).toBeTruthy();
-  });
-});

package/src/__tests__/KanbanGrouping.test.tsx

@@ -1,164 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, act } from '@testing-library/react';
-import React, { Suspense } from 'react';
-
-// Mock dnd-kit
-vi.mock('@dnd-kit/core', () => ({
-  DndContext: ({ children }: any) => <div data-testid="dnd-context">{children}</div>,
-  DragOverlay: ({ children }: any) => <div data-testid="drag-overlay">{children}</div>,
-  PointerSensor: vi.fn(),
-  TouchSensor: vi.fn(),
-  useSensor: vi.fn(),
-  useSensors: () => [],
-  closestCorners: vi.fn(),
-}));
-
-vi.mock('@dnd-kit/sortable', () => ({
-  SortableContext: ({ children }: any) => <div data-testid="sortable-context">{children}</div>,
-  useSortable: () => ({
-    attributes: {},
-    listeners: {},
-    setNodeRef: vi.fn(),
-    transform: null,
-    transition: null,
-    isDragging: false,
-  }),
-  arrayMove: (array: any[], from: number, to: number) => {
-    const newArray = [...array];
-    newArray.splice(to, 0, newArray.splice(from, 1)[0]);
-    return newArray;
-  },
-  verticalListSortingStrategy: vi.fn(),
-}));
-
-vi.mock('@dnd-kit/utilities', () => ({
-  CSS: {
-    Transform: {
-      toString: () => '',
-    },
-  },
-}));
-
-vi.mock('@object-ui/components', () => ({
-  Badge: ({ children, ...props }: any) => <span {...props}>{children}</span>,
-  Card: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  CardHeader: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  CardTitle: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  CardDescription: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  CardContent: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  ScrollArea: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  Button: ({ children, ...props }: any) => <button {...props}>{children}</button>,
-  Input: (props: any) => <input {...props} />,
-  Skeleton: ({ className }: any) => <div data-testid="skeleton" className={className} />,
-  NavigationOverlay: ({ children, selectedRecord }: any) => (
-    selectedRecord ? <div data-testid="navigation-overlay">{children(selectedRecord)}</div> : null
-  ),
-}));
-
-vi.mock('@object-ui/react', () => ({
-  useHasDndProvider: () => false,
-  useDnd: () => ({
-    startDrag: vi.fn(),
-    endDrag: vi.fn(),
-  }),
-  useDataScope: () => undefined,
-  useNavigationOverlay: () => ({
-    isOverlay: false,
-    handleClick: vi.fn(),
-    selectedRecord: null,
-    isOpen: false,
-    close: vi.fn(),
-    setIsOpen: vi.fn(),
-    mode: 'page' as const,
-  }),
-}));
-
-vi.mock('lucide-react', () => ({
-  Plus: () => <span>+</span>,
-}));
-
-// Import KanbanBoard (the impl) directly to avoid lazy-loading issues in tests
-import KanbanBoard from '../KanbanImpl';
-
-const mockColumns = [
-  {
-    id: 'todo',
-    title: 'To Do',
-    cards: [
-      { id: 'c1', title: 'Task 1', priority: 'High', team: 'Frontend' },
-      { id: 'c2', title: 'Task 2', priority: 'Low', team: 'Backend' },
-    ],
-  },
-  {
-    id: 'done',
-    title: 'Done',
-    cards: [
-      { id: 'c3', title: 'Task 3', priority: 'High', team: 'Frontend' },
-      { id: 'c4', title: 'Task 4', priority: 'Medium', team: 'Backend' },
-    ],
-  },
-];
-
-describe('ObjectKanban grouping config → swimlaneField mapping', () => {
-  it('uses grouping field as swimlane when passed to KanbanImpl', () => {
-    // This simulates what ObjectKanban does: map grouping.fields[0].field to swimlaneField
-    render(<KanbanBoard columns={mockColumns} swimlaneField="team" />);
-
-    // Swimlane layout should render
-    expect(screen.getByRole('region', { name: 'Kanban board with swimlanes' })).toBeInTheDocument();
-
-    // Swimlane headers for each team
-    expect(screen.getByText('Backend')).toBeInTheDocument();
-    expect(screen.getByText('Frontend')).toBeInTheDocument();
-  });
-
-  it('renders flat kanban when no swimlane/grouping is provided', () => {
-    render(<KanbanBoard columns={mockColumns} />);
-
-    // Flat layout renders "Kanban board"
-    expect(screen.getByRole('region', { name: 'Kanban board' })).toBeInTheDocument();
-    expect(screen.queryByRole('region', { name: 'Kanban board with swimlanes' })).not.toBeInTheDocument();
-  });
-
-  describe('ObjectKanban swimlaneField resolution logic', () => {
-    // Test the resolution logic independently (same as ObjectKanban.tsx effectiveSwimlaneField)
-    function resolveEffectiveSwimlaneField(
-      swimlaneField?: string,
-      grouping?: { fields: Array<{ field: string; order: string; collapsed: boolean }> },
-    ): string | undefined {
-      return swimlaneField || grouping?.fields?.[0]?.field;
-    }
-
-    it('prefers explicit swimlaneField over grouping', () => {
-      const result = resolveEffectiveSwimlaneField('priority', {
-        fields: [{ field: 'team', order: 'asc', collapsed: false }],
-      });
-      expect(result).toBe('priority');
-    });
-
-    it('falls back to grouping.fields[0].field when no swimlaneField', () => {
-      const result = resolveEffectiveSwimlaneField(undefined, {
-        fields: [{ field: 'team', order: 'asc', collapsed: false }],
-      });
-      expect(result).toBe('team');
-    });
-
-    it('returns undefined when neither swimlaneField nor grouping is set', () => {
-      const result = resolveEffectiveSwimlaneField(undefined, undefined);
-      expect(result).toBeUndefined();
-    });
-
-    it('returns undefined when grouping has empty fields array', () => {
-      const result = resolveEffectiveSwimlaneField(undefined, { fields: [] });
-      expect(result).toBeUndefined();
-    });
-  });
-});

package/src/__tests__/KanbanSwimlanes.test.tsx

@@ -1,194 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import React from 'react';
-
-// Mock @dnd-kit/core and utilities
-vi.mock('@dnd-kit/core', () => ({
-  DndContext: ({ children }: any) => <div data-testid="dnd-context">{children}</div>,
-  DragOverlay: ({ children }: any) => <div data-testid="drag-overlay">{children}</div>,
-  PointerSensor: vi.fn(),
-  TouchSensor: vi.fn(),
-  useSensor: vi.fn(),
-  useSensors: () => [],
-  closestCorners: vi.fn(),
-}));
-
-vi.mock('@dnd-kit/sortable', () => ({
-  SortableContext: ({ children }: any) => <div data-testid="sortable-context">{children}</div>,
-  useSortable: () => ({
-    attributes: {},
-    listeners: {},
-    setNodeRef: vi.fn(),
-    transform: null,
-    transition: null,
-    isDragging: false,
-  }),
-  arrayMove: (array: any[], from: number, to: number) => {
-    const newArray = [...array];
-    newArray.splice(to, 0, newArray.splice(from, 1)[0]);
-    return newArray;
-  },
-  verticalListSortingStrategy: vi.fn(),
-}));
-
-vi.mock('@dnd-kit/utilities', () => ({
-  CSS: {
-    Transform: {
-      toString: () => '',
-    },
-  },
-}));
-
-vi.mock('@object-ui/components', () => ({
-  Badge: ({ children, ...props }: any) => <span {...props}>{children}</span>,
-  Card: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  CardHeader: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  CardTitle: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  CardDescription: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  CardContent: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  ScrollArea: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  Button: ({ children, ...props }: any) => <button {...props}>{children}</button>,
-  Input: (props: any) => <input {...props} />,
-}));
-
-vi.mock('@object-ui/react', () => ({
-  useHasDndProvider: () => false,
-  useDnd: () => ({
-    startDrag: vi.fn(),
-    endDrag: vi.fn(),
-  }),
-}));
-
-vi.mock('lucide-react', () => ({
-  Plus: () => <span>+</span>,
-}));
-
-import KanbanBoard from '../KanbanImpl';
-
-const mockColumns = [
-  {
-    id: 'todo',
-    title: 'To Do',
-    cards: [
-      { id: 'c1', title: 'Task 1', priority: 'High', category: 'Frontend' },
-      { id: 'c2', title: 'Task 2', priority: 'Low', category: 'Backend' },
-    ],
-  },
-  {
-    id: 'done',
-    title: 'Done',
-    cards: [
-      { id: 'c3', title: 'Task 3', priority: 'High', category: 'Frontend' },
-      { id: 'c4', title: 'Task 4', priority: 'Medium', category: 'Backend' },
-    ],
-  },
-];
-
-describe('KanbanSwimlanes', () => {
-  describe('without swimlaneField', () => {
-    it('renders the standard flat layout with no swimlane headers', () => {
-      render(<KanbanBoard columns={mockColumns} />);
-
-      // Flat layout renders a region labelled "Kanban board"
-      expect(screen.getByRole('region', { name: 'Kanban board' })).toBeInTheDocument();
-
-      // Column titles are visible
-      expect(screen.getByText('To Do')).toBeInTheDocument();
-      expect(screen.getByText('Done')).toBeInTheDocument();
-
-      // All cards are visible
-      expect(screen.getByText('Task 1')).toBeInTheDocument();
-      expect(screen.getByText('Task 2')).toBeInTheDocument();
-      expect(screen.getByText('Task 3')).toBeInTheDocument();
-      expect(screen.getByText('Task 4')).toBeInTheDocument();
-
-      // No swimlane region
-      expect(screen.queryByRole('region', { name: 'Kanban board with swimlanes' })).not.toBeInTheDocument();
-    });
-  });
-
-  describe('with swimlaneField', () => {
-    it('renders swimlane row headers', () => {
-      render(<KanbanBoard columns={mockColumns} swimlaneField="category" />);
-
-      // Swimlane layout renders a region labelled "Kanban board with swimlanes"
-      expect(screen.getByRole('region', { name: 'Kanban board with swimlanes' })).toBeInTheDocument();
-
-      // Swimlane headers for each unique category value (sorted)
-      expect(screen.getByText('Backend')).toBeInTheDocument();
-      expect(screen.getByText('Frontend')).toBeInTheDocument();
-    });
-
-    it('renders collapsible swimlane rows with aria-expanded', () => {
-      render(<KanbanBoard columns={mockColumns} swimlaneField="category" />);
-
-      // Each swimlane header is a button with aria-expanded
-      const swimlaneButtons = screen.getAllByRole('button', { expanded: true });
-      expect(swimlaneButtons.length).toBe(2);
-    });
-
-    it('collapses a swimlane and hides its cards', () => {
-      render(<KanbanBoard columns={mockColumns} swimlaneField="category" />);
-
-      // Frontend cards are visible initially
-      expect(screen.getByText('Task 1')).toBeInTheDocument();
-      expect(screen.getByText('Task 3')).toBeInTheDocument();
-
-      // Click the "Frontend" swimlane toggle to collapse it
-      const frontendBtn = screen.getByRole('button', { name: /Frontend/i });
-      fireEvent.click(frontendBtn);
-
-      // After collapse, Frontend cards should not be visible
-      // (Task 1 and Task 3 belong to Frontend)
-      expect(screen.queryByText('Task 1')).not.toBeInTheDocument();
-      expect(screen.queryByText('Task 3')).not.toBeInTheDocument();
-
-      // Backend cards should still be visible
-      expect(screen.getByText('Task 2')).toBeInTheDocument();
-      expect(screen.getByText('Task 4')).toBeInTheDocument();
-    });
-
-    it('expands a collapsed swimlane and shows its cards again', () => {
-      render(<KanbanBoard columns={mockColumns} swimlaneField="category" />);
-
-      const backendBtn = screen.getByRole('button', { name: /Backend/i });
-
-      // Collapse Backend
-      fireEvent.click(backendBtn);
-      expect(screen.queryByText('Task 2')).not.toBeInTheDocument();
-      expect(screen.queryByText('Task 4')).not.toBeInTheDocument();
-
-      // Expand Backend
-      fireEvent.click(backendBtn);
-      expect(screen.getByText('Task 2')).toBeInTheDocument();
-      expect(screen.getByText('Task 4')).toBeInTheDocument();
-    });
-
-    it('shows correct card counts in swimlane headers', () => {
-      render(<KanbanBoard columns={mockColumns} swimlaneField="category" />);
-
-      // Each swimlane header button contains the lane name and card count
-      const backendBtn = screen.getByRole('button', { name: /Backend/i });
-      expect(backendBtn.textContent).toContain('(2)');
-
-      const frontendBtn = screen.getByRole('button', { name: /Frontend/i });
-      expect(frontendBtn.textContent).toContain('(2)');
-    });
-
-    it('shows column headers above swimlane rows', () => {
-      render(<KanbanBoard columns={mockColumns} swimlaneField="category" />);
-
-      // Column titles still appear in the column headers
-      expect(screen.getByText('To Do')).toBeInTheDocument();
-      expect(screen.getByText('Done')).toBeInTheDocument();
-    });
-  });
-});