@object-ui/plugin-kanban 3.3.0 → 3.3.2

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

@@ -1,403 +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.
- */
-
-/**
- * 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();
-    });
-  });
-});

package/src/index.test.ts

@@ -1,112 +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, beforeAll } from 'vitest';
-import { ComponentRegistry } from '@object-ui/core';
-
-describe('Plugin Kanban', () => {
-  // Import all renderers to register them
-  beforeAll(async () => {
-    await import('./index');
-  }, 15000); // Increase timeout to 15 seconds for async import
-
-  describe('kanban component', () => {
-    it('should be registered in ComponentRegistry', () => {
-      const kanbanRenderer = ComponentRegistry.get('kanban-ui');
-      expect(kanbanRenderer).toBeDefined();
-    });
-
-    it('should have proper metadata', () => {
-      const config = ComponentRegistry.getConfig('kanban-ui');
-      expect(config).toBeDefined();
-      expect(config?.label).toBe('Kanban Board');
-      expect(config?.icon).toBe('LayoutDashboard');
-      expect(config?.category).toBe('plugin');
-      expect(config?.inputs).toBeDefined();
-      expect(config?.defaultProps).toBeDefined();
-    });
-
-    it('should have expected inputs', () => {
-      const config = ComponentRegistry.getConfig('kanban-ui');
-      const inputNames = config?.inputs?.map((input: any) => input.name) || [];
-      
-      expect(inputNames).toContain('columns');
-      expect(inputNames).toContain('onCardMove');
-      expect(inputNames).toContain('className');
-    });
-
-    it('should have columns as required input', () => {
-      const config = ComponentRegistry.getConfig('kanban-ui');
-      const columnsInput = config?.inputs?.find((input: any) => input.name === 'columns');
-      
-      expect(columnsInput).toBeDefined();
-      expect(columnsInput?.required).toBe(true);
-      expect(columnsInput?.type).toBe('array');
-      expect(columnsInput?.description).toBeDefined();
-    });
-
-    it('should have onCardMove as code input', () => {
-      const config = ComponentRegistry.getConfig('kanban-ui');
-      const onCardMoveInput = config?.inputs?.find((input: any) => input.name === 'onCardMove');
-      
-      expect(onCardMoveInput).toBeDefined();
-      expect(onCardMoveInput?.type).toBe('code');
-      expect(onCardMoveInput?.advanced).toBe(true);
-      expect(onCardMoveInput?.description).toBeDefined();
-    });
-
-    it('should have sensible default props', () => {
-      const config = ComponentRegistry.getConfig('kanban-ui');
-      const defaults = config?.defaultProps;
-      
-      expect(defaults).toBeDefined();
-      expect(defaults?.columns).toBeDefined();
-      expect(Array.isArray(defaults?.columns)).toBe(true);
-      expect(defaults?.columns.length).toBeGreaterThan(0);
-      expect(defaults?.className).toBe('w-full');
-    });
-
-    it('should have default columns with proper structure', () => {
-      const config = ComponentRegistry.getConfig('kanban-ui');
-      const defaults = config?.defaultProps;
-      const columns = defaults?.columns || [];
-      
-      // Verify at least 3 columns exist (todo, in-progress, done)
-      expect(columns.length).toBeGreaterThanOrEqual(3);
-      
-      // Verify each column has required properties
-      columns.forEach((column: any) => {
-        expect(column.id).toBeDefined();
-        expect(column.title).toBeDefined();
-        expect(column.cards).toBeDefined();
-        expect(Array.isArray(column.cards)).toBe(true);
-      });
-      
-      // Verify at least one column has cards
-      const hasCards = columns.some((column: any) => column.cards.length > 0);
-      expect(hasCards).toBe(true);
-    });
-
-    it('should have cards with proper structure', () => {
-      const config = ComponentRegistry.getConfig('kanban-ui');
-      const defaults = config?.defaultProps;
-      const columns = defaults?.columns || [];
-      
-      // Find a column with cards
-      const columnWithCards = columns.find((column: any) => column.cards.length > 0);
-      expect(columnWithCards).toBeDefined();
-      
-      const card = columnWithCards.cards[0];
-      expect(card.id).toBeDefined();
-      expect(card.title).toBeDefined();
-      expect(card.description).toBeDefined();
-      expect(card.badges).toBeDefined();
-      expect(Array.isArray(card.badges)).toBe(true);
-    });
-  });
-});