@marktoflow/gui 2.0.0-alpha.1 → 2.0.0-alpha.13

package/tests/unit/canvasStore.test.ts

@@ -1,502 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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');
-  });
-});