@marktoflow/gui 2.0.0-alpha.1

package/tests/unit/canvasStore.test.ts

@@ -0,0 +1,502 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useCanvasStore } from '../../src/client/stores/canvasStore';
+import type { Node, Edge } from '@xyflow/react';
+
+describe('canvasStore', () => {
+  beforeEach(() => {
+    // Reset store state before each test
+    useCanvasStore.setState({
+      nodes: [],
+      edges: [],
+      past: [],
+      future: [],
+      clipboard: null,
+    });
+  });
+
+  describe('setNodes', () => {
+    it('should set nodes', () => {
+      const { setNodes } = useCanvasStore.getState();
+
+      const nodes: Node[] = [
+        { id: 'node-1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
+        { id: 'node-2', position: { x: 100, y: 100 }, data: { label: 'Node 2' } },
+      ];
+
+      setNodes(nodes);
+
+      const state = useCanvasStore.getState();
+      expect(state.nodes).toHaveLength(2);
+      expect(state.nodes[0].id).toBe('node-1');
+      expect(state.nodes[1].id).toBe('node-2');
+    });
+
+    it('should replace existing nodes', () => {
+      const { setNodes } = useCanvasStore.getState();
+
+      setNodes([{ id: 'old-node', position: { x: 0, y: 0 }, data: {} }]);
+      setNodes([{ id: 'new-node', position: { x: 0, y: 0 }, data: {} }]);
+
+      const state = useCanvasStore.getState();
+      expect(state.nodes).toHaveLength(1);
+      expect(state.nodes[0].id).toBe('new-node');
+    });
+  });
+
+  describe('setEdges', () => {
+    it('should set edges', () => {
+      const { setEdges } = useCanvasStore.getState();
+
+      const edges: Edge[] = [
+        { id: 'e-1-2', source: 'node-1', target: 'node-2' },
+        { id: 'e-2-3', source: 'node-2', target: 'node-3' },
+      ];
+
+      setEdges(edges);
+
+      const state = useCanvasStore.getState();
+      expect(state.edges).toHaveLength(2);
+      expect(state.edges[0].source).toBe('node-1');
+      expect(state.edges[1].target).toBe('node-3');
+    });
+  });
+
+  describe('updateNodeData', () => {
+    it('should update data for a specific node', () => {
+      const { setNodes, updateNodeData } = useCanvasStore.getState();
+
+      setNodes([
+        { id: 'node-1', position: { x: 0, y: 0 }, data: { status: 'pending', name: 'Test' } },
+        { id: 'node-2', position: { x: 100, y: 100 }, data: { status: 'pending' } },
+      ]);
+
+      updateNodeData('node-1', { status: 'completed' });
+
+      const state = useCanvasStore.getState();
+      expect(state.nodes[0].data.status).toBe('completed');
+      expect(state.nodes[0].data.name).toBe('Test'); // Should preserve other data
+      expect(state.nodes[1].data.status).toBe('pending'); // Other nodes unchanged
+    });
+
+    it('should not affect non-existent nodes', () => {
+      const { setNodes, updateNodeData } = useCanvasStore.getState();
+
+      setNodes([{ id: 'node-1', position: { x: 0, y: 0 }, data: { value: 1 } }]);
+
+      updateNodeData('non-existent', { value: 2 });
+
+      const state = useCanvasStore.getState();
+      expect(state.nodes).toHaveLength(1);
+      expect(state.nodes[0].data.value).toBe(1);
+    });
+  });
+
+  describe('clearCanvas', () => {
+    it('should clear all nodes and edges', () => {
+      const { setNodes, setEdges, clearCanvas } = useCanvasStore.getState();
+
+      setNodes([
+        { id: 'node-1', position: { x: 0, y: 0 }, data: {} },
+        { id: 'node-2', position: { x: 100, y: 100 }, data: {} },
+      ]);
+      setEdges([{ id: 'e-1-2', source: 'node-1', target: 'node-2' }]);
+
+      clearCanvas();
+
+      const state = useCanvasStore.getState();
+      expect(state.nodes).toHaveLength(0);
+      expect(state.edges).toHaveLength(0);
+    });
+  });
+
+  describe('onNodesChange', () => {
+    it('should apply position changes to nodes', () => {
+      const { setNodes, onNodesChange } = useCanvasStore.getState();
+
+      setNodes([{ id: 'node-1', position: { x: 0, y: 0 }, data: {} }]);
+
+      onNodesChange([
+        {
+          type: 'position',
+          id: 'node-1',
+          position: { x: 50, y: 75 },
+          dragging: false,
+        },
+      ]);
+
+      const state = useCanvasStore.getState();
+      expect(state.nodes[0].position).toEqual({ x: 50, y: 75 });
+    });
+
+    it('should handle node selection changes', () => {
+      const { setNodes, onNodesChange } = useCanvasStore.getState();
+
+      setNodes([
+        { id: 'node-1', position: { x: 0, y: 0 }, data: {}, selected: false },
+      ]);
+
+      onNodesChange([
+        {
+          type: 'select',
+          id: 'node-1',
+          selected: true,
+        },
+      ]);
+
+      const state = useCanvasStore.getState();
+      expect(state.nodes[0].selected).toBe(true);
+    });
+
+    it('should handle node removal', () => {
+      const { setNodes, onNodesChange } = useCanvasStore.getState();
+
+      setNodes([
+        { id: 'node-1', position: { x: 0, y: 0 }, data: {} },
+        { id: 'node-2', position: { x: 100, y: 100 }, data: {} },
+      ]);
+
+      onNodesChange([
+        {
+          type: 'remove',
+          id: 'node-1',
+        },
+      ]);
+
+      const state = useCanvasStore.getState();
+      expect(state.nodes).toHaveLength(1);
+      expect(state.nodes[0].id).toBe('node-2');
+    });
+  });
+
+  describe('onEdgesChange', () => {
+    it('should handle edge removal', () => {
+      const { setEdges, onEdgesChange } = useCanvasStore.getState();
+
+      setEdges([
+        { id: 'e-1', source: 'a', target: 'b' },
+        { id: 'e-2', source: 'b', target: 'c' },
+      ]);
+
+      onEdgesChange([
+        {
+          type: 'remove',
+          id: 'e-1',
+        },
+      ]);
+
+      const state = useCanvasStore.getState();
+      expect(state.edges).toHaveLength(1);
+      expect(state.edges[0].id).toBe('e-2');
+    });
+  });
+
+  describe('onConnect', () => {
+    it('should add a new edge when connecting nodes', () => {
+      const { setNodes, onConnect } = useCanvasStore.getState();
+
+      setNodes([
+        { id: 'node-1', position: { x: 0, y: 0 }, data: {} },
+        { id: 'node-2', position: { x: 100, y: 100 }, data: {} },
+      ]);
+
+      onConnect({
+        source: 'node-1',
+        target: 'node-2',
+        sourceHandle: null,
+        targetHandle: null,
+      });
+
+      const state = useCanvasStore.getState();
+      expect(state.edges).toHaveLength(1);
+      expect(state.edges[0].source).toBe('node-1');
+      expect(state.edges[0].target).toBe('node-2');
+      expect(state.edges[0].animated).toBe(true);
+    });
+  });
+
+  describe('undo/redo', () => {
+    it('should undo node changes', () => {
+      const { setNodes, undo, canUndo } = useCanvasStore.getState();
+
+      // Set initial nodes
+      setNodes([{ id: 'node-1', position: { x: 0, y: 0 }, data: {} }]);
+
+      // Make a change
+      useCanvasStore.getState().setNodes([
+        { id: 'node-1', position: { x: 0, y: 0 }, data: {} },
+        { id: 'node-2', position: { x: 100, y: 100 }, data: {} },
+      ]);
+
+      expect(useCanvasStore.getState().nodes).toHaveLength(2);
+      expect(useCanvasStore.getState().canUndo()).toBe(true);
+
+      // Undo
+      useCanvasStore.getState().undo();
+
+      const state = useCanvasStore.getState();
+      expect(state.nodes).toHaveLength(1);
+      expect(state.nodes[0].id).toBe('node-1');
+    });
+
+    it('should redo undone changes', () => {
+      const { setNodes } = useCanvasStore.getState();
+
+      // Set initial nodes
+      setNodes([{ id: 'node-1', position: { x: 0, y: 0 }, data: {} }]);
+
+      // Make a change
+      useCanvasStore.getState().setNodes([
+        { id: 'node-1', position: { x: 0, y: 0 }, data: {} },
+        { id: 'node-2', position: { x: 100, y: 100 }, data: {} },
+      ]);
+
+      // Undo
+      useCanvasStore.getState().undo();
+      expect(useCanvasStore.getState().nodes).toHaveLength(1);
+      expect(useCanvasStore.getState().canRedo()).toBe(true);
+
+      // Redo
+      useCanvasStore.getState().redo();
+
+      const state = useCanvasStore.getState();
+      expect(state.nodes).toHaveLength(2);
+      expect(state.nodes[1].id).toBe('node-2');
+    });
+
+    it('should clear future on new changes', () => {
+      const { setNodes } = useCanvasStore.getState();
+
+      // Set initial nodes
+      setNodes([{ id: 'node-1', position: { x: 0, y: 0 }, data: {} }]);
+
+      // Make a change
+      useCanvasStore.getState().setNodes([
+        { id: 'node-1', position: { x: 0, y: 0 }, data: {} },
+        { id: 'node-2', position: { x: 100, y: 100 }, data: {} },
+      ]);
+
+      // Undo
+      useCanvasStore.getState().undo();
+      expect(useCanvasStore.getState().canRedo()).toBe(true);
+
+      // Make a new change - should clear future
+      useCanvasStore.getState().setNodes([
+        { id: 'node-1', position: { x: 0, y: 0 }, data: {} },
+        { id: 'node-3', position: { x: 200, y: 200 }, data: {} },
+      ]);
+
+      expect(useCanvasStore.getState().canRedo()).toBe(false);
+    });
+
+    it('should handle multiple undo/redo steps', () => {
+      const { setNodes } = useCanvasStore.getState();
+
+      // Set initial nodes
+      setNodes([{ id: 'node-1', position: { x: 0, y: 0 }, data: {} }]);
+
+      // Make change 2
+      useCanvasStore.getState().setNodes([
+        { id: 'node-1', position: { x: 0, y: 0 }, data: {} },
+        { id: 'node-2', position: { x: 100, y: 100 }, data: {} },
+      ]);
+
+      // Make change 3
+      useCanvasStore.getState().setNodes([
+        { id: 'node-1', position: { x: 0, y: 0 }, data: {} },
+        { id: 'node-2', position: { x: 100, y: 100 }, data: {} },
+        { id: 'node-3', position: { x: 200, y: 200 }, data: {} },
+      ]);
+
+      expect(useCanvasStore.getState().nodes).toHaveLength(3);
+
+      // Undo twice
+      useCanvasStore.getState().undo();
+      expect(useCanvasStore.getState().nodes).toHaveLength(2);
+
+      useCanvasStore.getState().undo();
+      expect(useCanvasStore.getState().nodes).toHaveLength(1);
+
+      // Redo twice
+      useCanvasStore.getState().redo();
+      expect(useCanvasStore.getState().nodes).toHaveLength(2);
+
+      useCanvasStore.getState().redo();
+      expect(useCanvasStore.getState().nodes).toHaveLength(3);
+    });
+
+    it('should not undo when history is empty', () => {
+      const { setNodes } = useCanvasStore.getState();
+
+      setNodes([{ id: 'node-1', position: { x: 0, y: 0 }, data: {} }]);
+
+      // Clear past to simulate empty history
+      useCanvasStore.setState({ past: [] });
+
+      expect(useCanvasStore.getState().canUndo()).toBe(false);
+
+      // Undo should do nothing
+      useCanvasStore.getState().undo();
+      expect(useCanvasStore.getState().nodes).toHaveLength(1);
+    });
+
+    it('should not redo when future is empty', () => {
+      const { setNodes } = useCanvasStore.getState();
+
+      setNodes([{ id: 'node-1', position: { x: 0, y: 0 }, data: {} }]);
+
+      expect(useCanvasStore.getState().canRedo()).toBe(false);
+
+      // Redo should do nothing
+      useCanvasStore.getState().redo();
+      expect(useCanvasStore.getState().nodes).toHaveLength(1);
+    });
+  });
+
+  describe('copy/paste', () => {
+    it('should copy selected nodes to clipboard', () => {
+      useCanvasStore.setState({
+        nodes: [
+          { id: 'node-1', position: { x: 0, y: 0 }, data: {}, selected: true },
+          { id: 'node-2', position: { x: 100, y: 100 }, data: {}, selected: false },
+        ],
+        edges: [],
+        past: [],
+        future: [],
+        clipboard: null,
+      });
+
+      useCanvasStore.getState().copySelected();
+
+      const { clipboard } = useCanvasStore.getState();
+      expect(clipboard).not.toBeNull();
+      expect(clipboard?.nodes).toHaveLength(1);
+      expect(clipboard?.nodes[0].id).toBe('node-1');
+    });
+
+    it('should copy edges between selected nodes', () => {
+      useCanvasStore.setState({
+        nodes: [
+          { id: 'node-1', position: { x: 0, y: 0 }, data: {}, selected: true },
+          { id: 'node-2', position: { x: 100, y: 100 }, data: {}, selected: true },
+          { id: 'node-3', position: { x: 200, y: 200 }, data: {}, selected: false },
+        ],
+        edges: [
+          { id: 'e-1-2', source: 'node-1', target: 'node-2' },
+          { id: 'e-2-3', source: 'node-2', target: 'node-3' },
+        ],
+        past: [],
+        future: [],
+        clipboard: null,
+      });
+
+      useCanvasStore.getState().copySelected();
+
+      const { clipboard } = useCanvasStore.getState();
+      expect(clipboard?.edges).toHaveLength(1);
+      expect(clipboard?.edges[0].id).toBe('e-1-2');
+    });
+
+    it('should paste nodes with offset', () => {
+      useCanvasStore.setState({
+        nodes: [{ id: 'node-1', position: { x: 0, y: 0 }, data: { name: 'Test' }, selected: true }],
+        edges: [],
+        past: [],
+        future: [],
+        clipboard: null,
+      });
+
+      // Copy
+      useCanvasStore.getState().copySelected();
+
+      // Paste
+      useCanvasStore.getState().paste({ x: 50, y: 50 });
+
+      const { nodes } = useCanvasStore.getState();
+      expect(nodes).toHaveLength(2);
+
+      // Original node should be deselected
+      expect(nodes[0].selected).toBe(false);
+
+      // Pasted node should be selected and offset
+      expect(nodes[1].selected).toBe(true);
+      expect(nodes[1].position.x).toBe(50);
+      expect(nodes[1].position.y).toBe(50);
+      expect(nodes[1].id).not.toBe('node-1'); // New unique ID
+    });
+
+    it('should paste edges with updated references', () => {
+      useCanvasStore.setState({
+        nodes: [
+          { id: 'node-1', position: { x: 0, y: 0 }, data: {}, selected: true },
+          { id: 'node-2', position: { x: 100, y: 100 }, data: {}, selected: true },
+        ],
+        edges: [{ id: 'e-1-2', source: 'node-1', target: 'node-2' }],
+        past: [],
+        future: [],
+        clipboard: null,
+      });
+
+      // Copy
+      useCanvasStore.getState().copySelected();
+
+      // Paste
+      useCanvasStore.getState().paste();
+
+      const { nodes, edges } = useCanvasStore.getState();
+      expect(nodes).toHaveLength(4);
+      expect(edges).toHaveLength(2);
+
+      // Find the pasted edge
+      const pastedEdge = edges.find((e) => e.id.includes('-copy-'));
+      expect(pastedEdge).toBeDefined();
+
+      // Pasted edge should reference pasted nodes
+      expect(pastedEdge?.source).not.toBe('node-1');
+      expect(pastedEdge?.target).not.toBe('node-2');
+    });
+
+    it('should return true for canPaste when clipboard has nodes', () => {
+      useCanvasStore.setState({
+        nodes: [{ id: 'node-1', position: { x: 0, y: 0 }, data: {}, selected: true }],
+        edges: [],
+        past: [],
+        future: [],
+        clipboard: null,
+      });
+
+      expect(useCanvasStore.getState().canPaste()).toBe(false);
+
+      useCanvasStore.getState().copySelected();
+
+      expect(useCanvasStore.getState().canPaste()).toBe(true);
+    });
+
+    it('should do nothing when copying with no selection', () => {
+      useCanvasStore.setState({
+        nodes: [{ id: 'node-1', position: { x: 0, y: 0 }, data: {}, selected: false }],
+        edges: [],
+        past: [],
+        future: [],
+        clipboard: null,
+      });
+
+      useCanvasStore.getState().copySelected();
+
+      expect(useCanvasStore.getState().clipboard).toBeNull();
+    });
+
+    it('should do nothing when pasting with empty clipboard', () => {
+      useCanvasStore.setState({
+        nodes: [{ id: 'node-1', position: { x: 0, y: 0 }, data: {} }],
+        edges: [],
+        past: [],
+        future: [],
+        clipboard: null,
+      });
+
+      useCanvasStore.getState().paste();
+
+      expect(useCanvasStore.getState().nodes).toHaveLength(1);
+    });
+  });
+});

package/tests/unit/components.test.tsx

@@ -0,0 +1,151 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Breadcrumb, type BreadcrumbItem } from '../../src/client/components/common/Breadcrumb';
+import { Button } from '../../src/client/components/common/Button';
+
+describe('Breadcrumb', () => {
+  const mockOnNavigate = vi.fn();
+
+  beforeEach(() => {
+    mockOnNavigate.mockClear();
+  });
+
+  it('should not render when there is only one item', () => {
+    const items: BreadcrumbItem[] = [{ id: '1', name: 'Root' }];
+
+    const { container } = render(
+      <Breadcrumb items={items} onNavigate={mockOnNavigate} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render when there are multiple items', () => {
+    const items: BreadcrumbItem[] = [
+      { id: '1', name: 'Root', path: '/root' },
+      { id: '2', name: 'Child', path: '/child' },
+    ];
+
+    render(<Breadcrumb items={items} onNavigate={mockOnNavigate} />);
+
+    expect(screen.getByText('Root')).toBeInTheDocument();
+    expect(screen.getByText('Child')).toBeInTheDocument();
+  });
+
+  it('should call onNavigate when clicking a breadcrumb', () => {
+    const items: BreadcrumbItem[] = [
+      { id: '1', name: 'Root', path: '/root' },
+      { id: '2', name: 'Child', path: '/child' },
+      { id: '3', name: 'Grandchild', path: '/grandchild' },
+    ];
+
+    render(<Breadcrumb items={items} onNavigate={mockOnNavigate} />);
+
+    // Click on the first item
+    fireEvent.click(screen.getByText('Root'));
+
+    expect(mockOnNavigate).toHaveBeenCalledWith(items[0], 0);
+  });
+
+  it('should not call onNavigate when clicking the last item', () => {
+    const items: BreadcrumbItem[] = [
+      { id: '1', name: 'Root', path: '/root' },
+      { id: '2', name: 'Child', path: '/child' },
+    ];
+
+    render(<Breadcrumb items={items} onNavigate={mockOnNavigate} />);
+
+    // The last item should be disabled
+    const lastButton = screen.getByText('Child').closest('button');
+    expect(lastButton).toBeDisabled();
+  });
+
+  it('should show home icon on first item', () => {
+    const items: BreadcrumbItem[] = [
+      { id: '1', name: 'Root' },
+      { id: '2', name: 'Child' },
+    ];
+
+    render(<Breadcrumb items={items} onNavigate={mockOnNavigate} />);
+
+    // Home icon should be in the first button
+    const firstButton = screen.getByText('Root').closest('button');
+    expect(firstButton?.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('should show chevron separators between items', () => {
+    const items: BreadcrumbItem[] = [
+      { id: '1', name: 'Root' },
+      { id: '2', name: 'Child' },
+      { id: '3', name: 'Grandchild' },
+    ];
+
+    const { container } = render(
+      <Breadcrumb items={items} onNavigate={mockOnNavigate} />
+    );
+
+    // Should have chevrons between items (2 separators for 3 items)
+    const separators = container.querySelectorAll('svg.w-4.h-4.text-gray-600');
+    expect(separators).toHaveLength(2);
+  });
+});
+
+describe('Button', () => {
+  it('should render children', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByText('Click me')).toBeInTheDocument();
+  });
+
+  it('should handle click events', () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+
+    fireEvent.click(screen.getByText('Click me'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should be disabled when disabled prop is true', () => {
+    render(<Button disabled>Disabled</Button>);
+
+    const button = screen.getByText('Disabled');
+    expect(button).toBeDisabled();
+  });
+
+  it('should apply primary variant by default', () => {
+    render(<Button>Primary</Button>);
+
+    const button = screen.getByText('Primary');
+    expect(button.className).toContain('bg-primary');
+  });
+
+  it('should apply secondary variant', () => {
+    render(<Button variant="secondary">Secondary</Button>);
+
+    const button = screen.getByText('Secondary');
+    expect(button.className).toContain('bg-node-bg');
+  });
+
+  it('should apply ghost variant', () => {
+    render(<Button variant="ghost">Ghost</Button>);
+
+    const button = screen.getByText('Ghost');
+    expect(button.className).toContain('bg-transparent');
+  });
+
+  it('should apply destructive variant', () => {
+    render(<Button variant="destructive">Destructive</Button>);
+
+    const button = screen.getByText('Destructive');
+    expect(button.className).toContain('text-error');
+  });
+
+  it('should apply different sizes', () => {
+    const { rerender } = render(<Button size="sm">Small</Button>);
+    let button = screen.getByText('Small');
+    expect(button.className).toContain('text-xs');
+
+    rerender(<Button size="lg">Large</Button>);
+    button = screen.getByText('Large');
+    expect(button.className).toContain('px-6');
+  });
+});