@object-ui/plugin-kanban 3.3.0 → 3.3.2

package/src/__tests__/ObjectKanbanTitle.test.tsx

@@ -1,93 +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 { renderHook } from '@testing-library/react';
-import { useMemo } from 'react';
-
-/**
- * Tests for the title resolution fallback chain in ObjectKanban.
- *
- * The effectiveData logic tries fields in this order:
- *   1. Explicit cardTitle / titleField from schema
- *   2. objectDef.titleFormat (e.g. "{subject}")
- *   3. objectDef.NAME_FIELD_KEY
- *   4. Fallback chain: name → title → subject → label → display_name
- *   5. 'Untitled'
- */
-
-// Extract the title resolution logic from ObjectKanban to test it in isolation
-const TITLE_FALLBACK_FIELDS = ['name', 'title', 'subject', 'label', 'display_name'];
-
-function resolveTitle(item: Record<string, any>, titleField?: string): string {
-  let resolvedTitle = titleField ? item[titleField] : undefined;
-
-  if (!resolvedTitle) {
-    for (const field of TITLE_FALLBACK_FIELDS) {
-      if (item[field]) {
-        resolvedTitle = item[field];
-        break;
-      }
-    }
-  }
-
-  return resolvedTitle || 'Untitled';
-}
-
-describe('ObjectKanban title resolution', () => {
-  it('uses explicit titleField when value exists', () => {
-    const item = { id: '1', custom_title: 'My Custom Title', name: 'Fallback Name' };
-    expect(resolveTitle(item, 'custom_title')).toBe('My Custom Title');
-  });
-
-  it('falls back to common fields when titleField value is empty', () => {
-    const item = { id: '1', custom_title: '', name: 'Name Field' };
-    expect(resolveTitle(item, 'custom_title')).toBe('Name Field');
-  });
-
-  it('resolves name field first in fallback chain', () => {
-    const item = { id: '1', name: 'Name Value', title: 'Title Value', subject: 'Subject Value' };
-    expect(resolveTitle(item)).toBe('Name Value');
-  });
-
-  it('resolves title field second in fallback chain', () => {
-    const item = { id: '1', title: 'Title Value', subject: 'Subject Value' };
-    expect(resolveTitle(item)).toBe('Title Value');
-  });
-
-  it('resolves subject field third in fallback chain', () => {
-    const item = { id: '1', subject: 'Subject Value', label: 'Label Value' };
-    expect(resolveTitle(item)).toBe('Subject Value');
-  });
-
-  it('resolves label field fourth in fallback chain', () => {
-    const item = { id: '1', label: 'Label Value', display_name: 'Display Name' };
-    expect(resolveTitle(item)).toBe('Label Value');
-  });
-
-  it('resolves display_name field fifth in fallback chain', () => {
-    const item = { id: '1', display_name: 'Display Name' };
-    expect(resolveTitle(item)).toBe('Display Name');
-  });
-
-  it('falls back to Untitled when no common fields exist', () => {
-    const item = { id: '1', status: 'open', priority: 'high' };
-    expect(resolveTitle(item)).toBe('Untitled');
-  });
-
-  it('skips falsy field values in fallback chain', () => {
-    const item = { id: '1', name: '', title: null, subject: 'Bug Report' };
-    expect(resolveTitle(item)).toBe('Bug Report');
-  });
-
-  it('handles todo_task objects with subject field', () => {
-    // This is the exact scenario from the bug report
-    const todoTask = { id: '1', status: 'in_progress', subject: 'Fix login bug', priority: 'high' };
-    expect(resolveTitle(todoTask)).toBe('Fix login bug');
-  });
-});

package/src/__tests__/SwimlanePersistence.test.tsx

@@ -1,159 +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';
-
-// Mock localStorage
-const localStorageMock = (() => {
-  let store: Record<string, string> = {};
-  return {
-    getItem: vi.fn((key: string) => store[key] ?? null),
-    setItem: vi.fn((key: string, value: string) => { store[key] = value; }),
-    clear: () => { store = {}; },
-    removeItem: vi.fn((key: string) => { delete store[key]; }),
-  };
-})();
-
-Object.defineProperty(window, 'localStorage', { value: localStorageMock });
-
-const mockColumns = [
-  {
-    id: 'todo',
-    title: 'To Do',
-    cards: [
-      { id: 'c1', title: 'Task 1', category: 'Frontend' },
-      { id: 'c2', title: 'Task 2', category: 'Backend' },
-    ],
-  },
-  {
-    id: 'done',
-    title: 'Done',
-    cards: [
-      { id: 'c3', title: 'Task 3', category: 'Frontend' },
-    ],
-  },
-];
-
-describe('KanbanBoard swimlane persistence', () => {
-  beforeEach(() => {
-    localStorageMock.clear();
-    localStorageMock.getItem.mockClear();
-    localStorageMock.setItem.mockClear();
-  });
-
-  it('reads collapsed lanes from localStorage on mount when swimlaneField is set', () => {
-    localStorageMock.setItem(
-      'objectui:kanban-collapsed:category',
-      JSON.stringify(['Frontend']),
-    );
-    localStorageMock.getItem.mockClear();
-
-    render(<KanbanBoard columns={mockColumns} swimlaneField="category" />);
-
-    expect(localStorageMock.getItem).toHaveBeenCalledWith(
-      'objectui:kanban-collapsed:category',
-    );
-  });
-
-  it('writes collapsed state to localStorage when a lane is toggled', () => {
-    render(<KanbanBoard columns={mockColumns} swimlaneField="category" />);
-
-    // Find a swimlane collapse button and click it
-    const collapseButtons = screen.getAllByRole('button').filter(
-      btn => btn.getAttribute('aria-label')?.includes('collapse') ||
-             btn.getAttribute('aria-label')?.includes('Toggle') ||
-             btn.textContent?.includes('▸') ||
-             btn.textContent?.includes('▾'),
-    );
-
-    if (collapseButtons.length > 0) {
-      fireEvent.click(collapseButtons[0]);
-      expect(localStorageMock.setItem).toHaveBeenCalled();
-      const lastCall = localStorageMock.setItem.mock.calls.at(-1);
-      expect(lastCall?.[0]).toBe('objectui:kanban-collapsed:category');
-    }
-  });
-
-  it('does not access localStorage when swimlaneField is not set', () => {
-    localStorageMock.getItem.mockClear();
-    localStorageMock.setItem.mockClear();
-
-    render(<KanbanBoard columns={mockColumns} />);
-
-    // No localStorage reads for collapsed state key
-    const collapsedCalls = localStorageMock.getItem.mock.calls.filter(
-      ([key]: [string]) => key.startsWith('objectui:kanban-collapsed:'),
-    );
-    expect(collapsedCalls).toHaveLength(0);
-  });
-});

package/src/__tests__/accessibility.test.tsx

@@ -1,296 +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.
- */
-
-/**
- * Screen reader experience tests for KanbanEnhanced.
- *
- * Tests ARIA attributes, roles, landmarks, keyboard navigation,
- * and screen reader announcements for the kanban board plugin.
- * Part of P2.3 Accessibility & Inclusive Design roadmap.
- */
-
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import React from '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: () => '',
-    },
-  },
-}));
-
-const mockColumns: KanbanColumn[] = [
-  {
-    id: 'todo',
-    title: 'To Do',
-    cards: [
-      {
-        id: 'card-1',
-        title: 'Design Landing Page',
-        description: 'Create wireframes and mockups',
-        badges: [{ label: 'High', variant: 'destructive' as const }],
-      },
-      {
-        id: 'card-2',
-        title: 'Write Documentation',
-        description: 'API reference and guides',
-      },
-    ],
-  },
-  {
-    id: 'in-progress',
-    title: 'In Progress',
-    limit: 3,
-    cards: [
-      {
-        id: 'card-3',
-        title: 'Build Components',
-        description: 'Implement the design system',
-      },
-    ],
-  },
-  {
-    id: 'done',
-    title: 'Done',
-    cards: [],
-  },
-];
-
-describe('KanbanEnhanced: Screen Reader & Accessibility', () => {
-  describe('board structure and landmarks', () => {
-    it('renders all column titles visible for screen readers', () => {
-      render(<KanbanEnhanced columns={mockColumns} />);
-
-      expect(screen.getByText('To Do')).toBeInTheDocument();
-      expect(screen.getByText('In Progress')).toBeInTheDocument();
-      expect(screen.getByText('Done')).toBeInTheDocument();
-    });
-
-    it('column titles use heading elements for hierarchy', () => {
-      render(<KanbanEnhanced columns={mockColumns} />);
-
-      const todoTitle = screen.getByText('To Do');
-      expect(todoTitle.tagName).toBe('H3');
-    });
-
-    it('renders within a dnd-context container', () => {
-      const { container } = render(<KanbanEnhanced columns={mockColumns} />);
-
-      const dndContext = container.querySelector('[data-testid="dnd-context"]');
-      expect(dndContext).toBeInTheDocument();
-    });
-  });
-
-  describe('card content accessibility', () => {
-    it('card titles are visible to screen readers', () => {
-      render(<KanbanEnhanced columns={mockColumns} />);
-
-      expect(screen.getByText('Design Landing Page')).toBeInTheDocument();
-      expect(screen.getByText('Write Documentation')).toBeInTheDocument();
-      expect(screen.getByText('Build Components')).toBeInTheDocument();
-    });
-
-    it('card descriptions are accessible', () => {
-      render(<KanbanEnhanced columns={mockColumns} />);
-
-      expect(screen.getByText('Create wireframes and mockups')).toBeInTheDocument();
-      expect(screen.getByText('API reference and guides')).toBeInTheDocument();
-    });
-
-    it('card badges convey semantic information', () => {
-      render(<KanbanEnhanced columns={mockColumns} />);
-
-      const badge = screen.getByText('High');
-      expect(badge).toBeInTheDocument();
-    });
-  });
-
-  describe('column count and limit indicators', () => {
-    it('displays card count per column for progress tracking', () => {
-      render(<KanbanEnhanced columns={mockColumns} />);
-
-      // "In Progress" has limit = 3, cards = 1 → shows "1 / 3"
-      expect(screen.getByText('1 / 3')).toBeInTheDocument();
-    });
-
-    it('shows warning for columns near capacity', () => {
-      const nearLimitColumns: 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={nearLimitColumns} />);
-
-      // Near-limit indicator uses yellow color
-      expect(container.querySelector('.text-yellow-500')).toBeTruthy();
-    });
-
-    it('shows error indicator for columns over limit', () => {
-      const overLimitColumns: KanbanColumn[] = [
-        {
-          id: 'full',
-          title: 'Full Column',
-          limit: 2,
-          cards: [
-            { id: 'card-1', title: 'Task 1' },
-            { id: 'card-2', title: 'Task 2' },
-          ],
-        },
-      ];
-
-      const { container } = render(<KanbanEnhanced columns={overLimitColumns} />);
-
-      // Over-limit shows destructive badge "Full"
-      const fullBadge = container.querySelector('[class*="destructive"]');
-      expect(fullBadge).toBeTruthy();
-    });
-  });
-
-  describe('collapse/expand behavior', () => {
-    it('columns have toggle buttons for collapse/expand', () => {
-      render(<KanbanEnhanced columns={mockColumns} />);
-
-      const buttons = screen.getAllByRole('button');
-      // Each column has at least one toggle button
-      expect(buttons.length).toBeGreaterThanOrEqual(3);
-    });
-
-    it('collapsed column shows title in vertical orientation', () => {
-      const collapsedColumns: KanbanColumn[] = [
-        {
-          id: 'collapsed',
-          title: 'Collapsed Column',
-          collapsed: true,
-          cards: [{ id: 'card-1', title: 'Task 1' }],
-        },
-      ];
-
-      render(<KanbanEnhanced columns={collapsedColumns} />);
-
-      // Collapsed column still shows title (vertically)
-      expect(screen.getByText('Collapsed Column')).toBeInTheDocument();
-    });
-
-    it('toggle button click changes column state', () => {
-      render(<KanbanEnhanced columns={mockColumns} />);
-
-      // Find the toggle buttons (ghost variant, small)
-      const buttons = screen.getAllByRole('button');
-      const toggleButton = buttons[0];
-
-      // Click to collapse
-      fireEvent.click(toggleButton);
-
-      // The component should still render (no crash)
-      expect(toggleButton).toBeInTheDocument();
-    });
-  });
-
-  describe('drag and drop accessibility', () => {
-    it('drag overlay container exists for visual feedback', () => {
-      const { container } = render(<KanbanEnhanced columns={mockColumns} />);
-
-      const overlay = container.querySelector('[data-testid="drag-overlay"]');
-      expect(overlay).toBeTruthy();
-    });
-
-    it('sortable context wraps card list for DnD', () => {
-      const { container } = render(<KanbanEnhanced columns={mockColumns} />);
-
-      const sortableContexts = container.querySelectorAll('[data-testid="sortable-context"]');
-      // Each non-collapsed column has a sortable context
-      expect(sortableContexts.length).toBe(3);
-    });
-  });
-
-  describe('empty state handling', () => {
-    it('handles empty columns array without errors', () => {
-      const { container } = render(<KanbanEnhanced columns={[]} />);
-      expect(container).toBeTruthy();
-    });
-
-    it('renders columns with no cards correctly', () => {
-      const emptyColumns: KanbanColumn[] = [
-        { id: 'empty', title: 'Empty Column', cards: [] },
-      ];
-
-      render(<KanbanEnhanced columns={emptyColumns} />);
-
-      expect(screen.getByText('Empty Column')).toBeInTheDocument();
-    });
-  });
-
-  describe('visual hierarchy and semantics', () => {
-    it('card uses Card component with proper structure', () => {
-      render(<KanbanEnhanced columns={mockColumns} />);
-
-      // Card titles use CardTitle which renders with proper styling
-      const cardTitle = screen.getByText('Design Landing Page');
-      expect(cardTitle).toBeInTheDocument();
-    });
-
-    it('custom className is applied to root container', () => {
-      const { container } = render(
-        <KanbanEnhanced columns={mockColumns} className="custom-board" />
-      );
-
-      expect(container.querySelector('.custom-board')).toBeTruthy();
-    });
-  });
-});