@object-ui/plugin-kanban 0.5.0 → 3.0.0

package/src/__tests__/performance-benchmark.test.tsx

@@ -0,0 +1,306 @@
+/**
+ * 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.
+ *
+ * Performance benchmark tests for KanbanBoard (KanbanImpl).
+ * Part of P2.4 Performance at Scale roadmap.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import type { KanbanColumn, KanbanCard, KanbanBoardProps } from '../KanbanImpl';
+
+// Mock @dnd-kit/core
+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(),
+}));
+
+// Mock @dnd-kit/sortable
+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(),
+}));
+
+// Mock @dnd-kit/utilities
+vi.mock('@dnd-kit/utilities', () => ({
+  CSS: {
+    Transform: {
+      toString: () => '',
+    },
+  },
+}));
+
+// Mock @object-ui/components
+vi.mock('@object-ui/components', () => ({
+  Badge: ({ children, ...props }: any) => <span data-testid="badge" {...props}>{children}</span>,
+  Card: ({ children, ...props }: any) => <div data-testid="card" {...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>,
+}));
+
+// Mock @object-ui/react
+vi.mock('@object-ui/react', () => ({
+  useHasDndProvider: () => false,
+  useDnd: () => ({
+    startDrag: vi.fn(),
+    endDrag: vi.fn(),
+  }),
+}));
+
+// --- Data generators ---
+
+function generateCards(count: number): KanbanCard[] {
+  const cards: KanbanCard[] = [];
+  for (let i = 0; i < count; i++) {
+    cards.push({
+      id: `card-${i}`,
+      title: `Task ${i}`,
+      description: `Description for task ${i}`,
+      badges: i % 3 === 0
+        ? [{ label: 'High', variant: 'destructive' as const }]
+        : undefined,
+    });
+  }
+  return cards;
+}
+
+function generateColumns(
+  columnCount: number,
+  totalCards: number,
+): KanbanColumn[] {
+  const cardsPerColumn = Math.ceil(totalCards / columnCount);
+  const columns: KanbanColumn[] = [];
+  let cardIndex = 0;
+  for (let c = 0; c < columnCount; c++) {
+    const columnCards: KanbanCard[] = [];
+    const count = Math.min(cardsPerColumn, totalCards - cardIndex);
+    for (let i = 0; i < count; i++) {
+      columnCards.push({
+        id: `col${c}-card-${cardIndex}`,
+        title: `Task ${cardIndex}`,
+        description: `Description for task ${cardIndex}`,
+        badges: cardIndex % 3 === 0
+          ? [{ label: 'High', variant: 'destructive' as const }]
+          : undefined,
+      });
+      cardIndex++;
+    }
+    columns.push({
+      id: `col-${c}`,
+      title: `Column ${c}`,
+      cards: columnCards,
+    });
+  }
+  return columns;
+}
+
+let KanbanBoard: React.ComponentType<KanbanBoardProps>;
+
+async function setupMocksAndImport() {
+  vi.resetModules();
+
+  vi.doMock('@dnd-kit/core', () => ({
+    DndContext: ({ children }: any) => React.createElement('div', { 'data-testid': 'dnd-context' }, children),
+    DragOverlay: ({ children }: any) => React.createElement('div', { 'data-testid': 'drag-overlay' }, children),
+    PointerSensor: vi.fn(),
+    TouchSensor: vi.fn(),
+    useSensor: vi.fn(),
+    useSensors: () => [],
+    closestCorners: vi.fn(),
+  }));
+
+  vi.doMock('@dnd-kit/sortable', () => ({
+    SortableContext: ({ children }: any) => React.createElement('div', { 'data-testid': 'sortable-context' }, children),
+    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.doMock('@dnd-kit/utilities', () => ({
+    CSS: { Transform: { toString: () => '' } },
+  }));
+
+  vi.doMock('@object-ui/components', () => ({
+    Badge: ({ children, ...props }: any) => React.createElement('span', { 'data-testid': 'badge', ...props }, children),
+    Card: ({ children, ...props }: any) => React.createElement('div', { 'data-testid': 'card', ...props }, children),
+    CardHeader: ({ children, ...props }: any) => React.createElement('div', props, children),
+    CardTitle: ({ children, ...props }: any) => React.createElement('div', props, children),
+    CardDescription: ({ children, ...props }: any) => React.createElement('div', props, children),
+    CardContent: ({ children, ...props }: any) => React.createElement('div', props, children),
+    ScrollArea: ({ children, ...props }: any) => React.createElement('div', props, children),
+  }));
+
+  vi.doMock('@object-ui/react', () => ({
+    useHasDndProvider: () => false,
+    useDnd: () => ({ startDrag: vi.fn(), endDrag: vi.fn() }),
+  }));
+
+  const mod = await import('../KanbanImpl');
+  KanbanBoard = mod.default;
+}
+
+// =========================================================================
+// Performance Benchmarks
+// =========================================================================
+
+describe('KanbanBoard (KanbanImpl): performance benchmarks', () => {
+  beforeEach(async () => {
+    await setupMocksAndImport();
+  });
+
+  it('renders 100 cards spread across 5 columns under 500ms', () => {
+    const columns = generateColumns(5, 100);
+
+    const start = performance.now();
+    const { container } = render(<KanbanBoard columns={columns} />);
+    const elapsed = performance.now() - start;
+
+    expect(container).toBeTruthy();
+    expect(elapsed).toBeLessThan(500);
+  });
+
+  it('renders 500 cards spread across 5 columns under 1,000ms', () => {
+    const columns = generateColumns(5, 500);
+
+    const start = performance.now();
+    const { container } = render(<KanbanBoard columns={columns} />);
+    const elapsed = performance.now() - start;
+
+    expect(container).toBeTruthy();
+    expect(elapsed).toBeLessThan(1_000);
+  });
+
+  it('renders 1,000 cards spread across 5 columns under 2,000ms', () => {
+    const columns = generateColumns(5, 1_000);
+
+    const start = performance.now();
+    const { container } = render(<KanbanBoard columns={columns} />);
+    const elapsed = performance.now() - start;
+
+    expect(container).toBeTruthy();
+    expect(elapsed).toBeLessThan(2_000);
+  });
+
+  it('renders with 20+ columns without degradation', () => {
+    const columns = generateColumns(25, 250);
+
+    const start = performance.now();
+    const { container } = render(<KanbanBoard columns={columns} />);
+    const elapsed = performance.now() - start;
+
+    expect(container).toBeTruthy();
+    expect(elapsed).toBeLessThan(2_000);
+  });
+
+  it('renders empty board with 20+ columns quickly', () => {
+    const columns = generateColumns(25, 0);
+
+    const start = performance.now();
+    const { container } = render(<KanbanBoard columns={columns} />);
+    const elapsed = performance.now() - start;
+
+    expect(container).toBeTruthy();
+    expect(elapsed).toBeLessThan(500);
+  });
+
+  it('data generation for 1,000 cards is fast (< 100ms)', () => {
+    const start = performance.now();
+    const cards = generateCards(1_000);
+    const elapsed = performance.now() - start;
+
+    expect(cards).toHaveLength(1_000);
+    expect(elapsed).toBeLessThan(100);
+  });
+});
+
+// =========================================================================
+// Scaling characteristics
+// =========================================================================
+
+describe('KanbanBoard (KanbanImpl): scaling characteristics', () => {
+  beforeEach(async () => {
+    await setupMocksAndImport();
+  });
+
+  it('renders all column titles for 20+ column board', () => {
+    const columns = generateColumns(25, 50);
+    render(<KanbanBoard columns={columns} />);
+
+    for (let i = 0; i < 25; i++) {
+      expect(document.body.textContent).toContain(`Column ${i}`);
+    }
+  });
+
+  it('renders cards with badges without significant overhead', () => {
+    const columns: KanbanColumn[] = [
+      {
+        id: 'badges-col',
+        title: 'With Badges',
+        cards: Array.from({ length: 500 }, (_, i) => ({
+          id: `badge-card-${i}`,
+          title: `Task ${i}`,
+          badges: [
+            { label: 'Priority', variant: 'destructive' as const },
+            { label: 'Sprint 1', variant: 'secondary' as const },
+          ],
+        })),
+      },
+    ];
+
+    const start = performance.now();
+    const { container } = render(<KanbanBoard columns={columns} />);
+    const elapsed = performance.now() - start;
+
+    expect(container).toBeTruthy();
+    expect(elapsed).toBeLessThan(2_000);
+  });
+
+  it('renders 1,000 cards across 10 columns under 2,000ms', () => {
+    const columns = generateColumns(10, 1_000);
+
+    const start = performance.now();
+    const { container } = render(<KanbanBoard columns={columns} />);
+    const elapsed = performance.now() - start;
+
+    expect(container).toBeTruthy();
+    expect(elapsed).toBeLessThan(2_000);
+  });
+});

package/src/__tests__/view-states.test.tsx

@@ -0,0 +1,403 @@
+/**
+ * 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.
+ */
+
+/**
+ * P3.3 Plugin View Robustness - Kanban View States
+ *
+ * Tests empty, populated, and edge-case states for KanbanEnhanced component.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import { KanbanEnhanced, type KanbanColumn } from '../KanbanEnhanced';
+import KanbanBoard from '../KanbanImpl';
+
+// Mock @tanstack/react-virtual
+vi.mock('@tanstack/react-virtual', () => ({
+  useVirtualizer: () => ({
+    getTotalSize: () => 1000,
+    getVirtualItems: () => [],
+    measureElement: vi.fn(),
+  }),
+}));
+
+// Mock @dnd-kit/core
+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/react', () => ({
+  useHasDndProvider: () => false,
+  useDnd: vi.fn(),
+}));
+
+describe('P3.3 Kanban View States', () => {
+  // ---------------------------------------------------------------
+  // Empty state
+  // ---------------------------------------------------------------
+  describe('empty state', () => {
+    it('renders with empty columns array', () => {
+      const { container } = render(
+        <KanbanEnhanced columns={[]} />
+      );
+      expect(container.firstElementChild).toBeInTheDocument();
+    });
+
+    it('renders columns with no cards', () => {
+      const emptyColumns: KanbanColumn[] = [
+        { id: 'todo', title: 'To Do', cards: [] },
+        { id: 'done', title: 'Done', cards: [] },
+      ];
+      render(<KanbanEnhanced columns={emptyColumns} />);
+      expect(screen.getByText('To Do')).toBeInTheDocument();
+      expect(screen.getByText('Done')).toBeInTheDocument();
+    });
+
+    it('shows 0 count for empty columns', () => {
+      const emptyColumns: KanbanColumn[] = [
+        { id: 'todo', title: 'To Do', cards: [] },
+      ];
+      render(<KanbanEnhanced columns={emptyColumns} />);
+      expect(screen.getByText('0')).toBeInTheDocument();
+    });
+  });
+
+  // ---------------------------------------------------------------
+  // Populated state
+  // ---------------------------------------------------------------
+  describe('populated state', () => {
+    const populatedColumns: KanbanColumn[] = [
+      {
+        id: 'todo',
+        title: 'To Do',
+        cards: [
+          { id: 'c1', title: 'Task 1', description: 'First task' },
+          { id: 'c2', title: 'Task 2' },
+        ],
+      },
+      {
+        id: 'done',
+        title: 'Done',
+        cards: [
+          { id: 'c3', title: 'Task 3', description: 'Completed' },
+        ],
+      },
+    ];
+
+    it('renders column titles', () => {
+      render(<KanbanEnhanced columns={populatedColumns} />);
+      expect(screen.getByText('To Do')).toBeInTheDocument();
+      expect(screen.getByText('Done')).toBeInTheDocument();
+    });
+
+    it('renders card titles', () => {
+      render(<KanbanEnhanced columns={populatedColumns} />);
+      expect(screen.getByText('Task 1')).toBeInTheDocument();
+      expect(screen.getByText('Task 2')).toBeInTheDocument();
+      expect(screen.getByText('Task 3')).toBeInTheDocument();
+    });
+
+    it('renders card descriptions', () => {
+      render(<KanbanEnhanced columns={populatedColumns} />);
+      expect(screen.getByText('First task')).toBeInTheDocument();
+      expect(screen.getByText('Completed')).toBeInTheDocument();
+    });
+
+    it('renders card counts', () => {
+      render(<KanbanEnhanced columns={populatedColumns} />);
+      expect(screen.getByText('2')).toBeInTheDocument(); // To Do has 2
+      expect(screen.getByText('1')).toBeInTheDocument(); // Done has 1
+    });
+  });
+
+  // ---------------------------------------------------------------
+  // Columns with limits
+  // ---------------------------------------------------------------
+  describe('columns with limits', () => {
+    it('shows limit indicator', () => {
+      const columns: KanbanColumn[] = [
+        {
+          id: 'wip',
+          title: 'In Progress',
+          limit: 3,
+          cards: [
+            { id: 'c1', title: 'Task 1' },
+          ],
+        },
+      ];
+      render(<KanbanEnhanced columns={columns} />);
+      expect(screen.getByText('In Progress')).toBeInTheDocument();
+      expect(screen.getByText(/1\s*\/\s*3/)).toBeInTheDocument();
+    });
+
+    it('shows warning at 80% capacity', () => {
+      const columns: KanbanColumn[] = [
+        {
+          id: 'wip',
+          title: 'WIP',
+          limit: 5,
+          cards: Array.from({ length: 4 }, (_, i) => ({
+            id: `c${i}`,
+            title: `Task ${i}`,
+          })),
+        },
+      ];
+      const { container } = render(<KanbanEnhanced columns={columns} />);
+      // At 80% (4/5), should show warning styling
+      expect(container.querySelector('[class*="text-yellow"]')).toBeInTheDocument();
+    });
+
+    it('shows error when over limit', () => {
+      const columns: KanbanColumn[] = [
+        {
+          id: 'wip',
+          title: 'WIP',
+          limit: 2,
+          cards: Array.from({ length: 3 }, (_, i) => ({
+            id: `c${i}`,
+            title: `Task ${i}`,
+          })),
+        },
+      ];
+      const { container } = render(<KanbanEnhanced columns={columns} />);
+      // Over limit uses text-destructive class
+      expect(container.querySelector('[class*="text-destructive"]')).toBeInTheDocument();
+    });
+  });
+
+  // ---------------------------------------------------------------
+  // Edge cases
+  // ---------------------------------------------------------------
+  describe('edge cases', () => {
+    it('handles single column', () => {
+      const columns: KanbanColumn[] = [
+        { id: 'only', title: 'Only Column', cards: [{ id: 'c1', title: 'Alone' }] },
+      ];
+      render(<KanbanEnhanced columns={columns} />);
+      expect(screen.getByText('Only Column')).toBeInTheDocument();
+      expect(screen.getByText('Alone')).toBeInTheDocument();
+    });
+
+    it('handles many columns', () => {
+      const columns: KanbanColumn[] = Array.from({ length: 10 }, (_, i) => ({
+        id: `col-${i}`,
+        title: `Column ${i}`,
+        cards: [],
+      }));
+      render(<KanbanEnhanced columns={columns} />);
+      expect(screen.getByText('Column 0')).toBeInTheDocument();
+      expect(screen.getByText('Column 9')).toBeInTheDocument();
+    });
+
+    it('handles cards with badges', () => {
+      const columns: KanbanColumn[] = [
+        {
+          id: 'todo',
+          title: 'To Do',
+          cards: [
+            {
+              id: 'c1',
+              title: 'Badged Task',
+              badges: [
+                { label: 'Urgent', variant: 'destructive' },
+                { label: 'Feature', variant: 'default' },
+              ],
+            },
+          ],
+        },
+      ];
+      render(<KanbanEnhanced columns={columns} />);
+      expect(screen.getByText('Urgent')).toBeInTheDocument();
+      expect(screen.getByText('Feature')).toBeInTheDocument();
+    });
+
+    it('handles card with empty title', () => {
+      const columns: KanbanColumn[] = [
+        { id: 'col', title: 'Col', cards: [{ id: 'c1', title: '' }] },
+      ];
+      const { container } = render(<KanbanEnhanced columns={columns} />);
+      expect(container).toBeInTheDocument();
+    });
+
+    it('accepts className prop', () => {
+      const { container } = render(
+        <KanbanEnhanced columns={[]} className="my-kanban" />
+      );
+      expect(container.innerHTML).toContain('my-kanban');
+    });
+  });
+});
+
+// ---------------------------------------------------------------
+// KanbanBoard (from KanbanImpl) View States
+// ---------------------------------------------------------------
+describe('P3.3 KanbanBoard (KanbanImpl) View States', () => {
+  describe('empty state', () => {
+    it('renders with empty columns array', () => {
+      const { container } = render(<KanbanBoard columns={[]} />);
+      expect(container.querySelector('[role="region"]')).toBeInTheDocument();
+    });
+
+    it('renders columns with no cards', () => {
+      const columns: KanbanColumn[] = [
+        { id: 'backlog', title: 'Backlog', cards: [] },
+        { id: 'active', title: 'Active', cards: [] },
+      ];
+      render(<KanbanBoard columns={columns} />);
+      expect(screen.getByText('Backlog')).toBeInTheDocument();
+      expect(screen.getByText('Active')).toBeInTheDocument();
+    });
+
+    it('shows card count of 0 for empty columns', () => {
+      const columns: KanbanColumn[] = [
+        { id: 'empty', title: 'Empty Col', cards: [] },
+      ];
+      render(<KanbanBoard columns={columns} />);
+      expect(screen.getByText('0')).toBeInTheDocument();
+    });
+  });
+
+  describe('single column with many cards', () => {
+    it('renders column with 50 cards without crashing', () => {
+      const manyCards = Array.from({ length: 50 }, (_, i) => ({
+        id: `card-${i}`,
+        title: `Card ${i}`,
+      }));
+      const columns: KanbanColumn[] = [
+        { id: 'big', title: 'Big Column', cards: manyCards },
+      ];
+      render(<KanbanBoard columns={columns} />);
+      expect(screen.getByText('Big Column')).toBeInTheDocument();
+      expect(screen.getByText('Card 0')).toBeInTheDocument();
+      expect(screen.getByText('Card 49')).toBeInTheDocument();
+    });
+
+    it('shows correct count for many cards', () => {
+      const manyCards = Array.from({ length: 25 }, (_, i) => ({
+        id: `card-${i}`,
+        title: `Task ${i}`,
+      }));
+      const columns: KanbanColumn[] = [
+        { id: 'col', title: 'Tasks', cards: manyCards },
+      ];
+      render(<KanbanBoard columns={columns} />);
+      expect(screen.getByText('25')).toBeInTheDocument();
+    });
+  });
+
+  describe('WIP limit exceeded', () => {
+    it('shows Full badge when cards reach limit', () => {
+      const columns: KanbanColumn[] = [
+        {
+          id: 'wip',
+          title: 'In Progress',
+          limit: 3,
+          cards: Array.from({ length: 3 }, (_, i) => ({
+            id: `c${i}`,
+            title: `WIP Task ${i}`,
+          })),
+        },
+      ];
+      render(<KanbanBoard columns={columns} />);
+      expect(screen.getByText('Full')).toBeInTheDocument();
+    });
+
+    it('shows Full badge when cards exceed limit', () => {
+      const columns: KanbanColumn[] = [
+        {
+          id: 'wip',
+          title: 'In Progress',
+          limit: 2,
+          cards: Array.from({ length: 5 }, (_, i) => ({
+            id: `c${i}`,
+            title: `Over Task ${i}`,
+          })),
+        },
+      ];
+      render(<KanbanBoard columns={columns} />);
+      expect(screen.getByText('Full')).toBeInTheDocument();
+    });
+
+    it('does not show Full badge when under limit', () => {
+      const columns: KanbanColumn[] = [
+        {
+          id: 'wip',
+          title: 'In Progress',
+          limit: 10,
+          cards: [{ id: 'c1', title: 'Solo Task' }],
+        },
+      ];
+      render(<KanbanBoard columns={columns} />);
+      expect(screen.queryByText('Full')).not.toBeInTheDocument();
+    });
+
+    it('shows count with limit format', () => {
+      const columns: KanbanColumn[] = [
+        {
+          id: 'wip',
+          title: 'WIP',
+          limit: 5,
+          cards: Array.from({ length: 3 }, (_, i) => ({
+            id: `c${i}`,
+            title: `Task ${i}`,
+          })),
+        },
+      ];
+      render(<KanbanBoard columns={columns} />);
+      expect(screen.getByText(/3\s*\/\s*5/)).toBeInTheDocument();
+    });
+  });
+
+  describe('className and structure', () => {
+    it('applies className prop', () => {
+      const { container } = render(
+        <KanbanBoard columns={[]} className="custom-board" />
+      );
+      expect(container.innerHTML).toContain('custom-board');
+    });
+
+    it('renders kanban board with region role', () => {
+      render(<KanbanBoard columns={[]} />);
+      expect(screen.getByRole('region', { name: 'Kanban board' })).toBeInTheDocument();
+    });
+  });
+});