@marktoflow/gui 2.0.0-alpha.5 → 2.0.1

package/tests/setup.ts

@@ -1,72 +0,0 @@
-import '@testing-library/jest-dom';
-import { vi } from 'vitest';
-
-// Mock window.matchMedia
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: vi.fn().mockImplementation((query: string) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
-});
-
-// Mock ResizeObserver
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}));
-
-// Mock IntersectionObserver
-global.IntersectionObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-  root: null,
-  rootMargin: '',
-  thresholds: [],
-}));
-
-// Suppress console errors during tests (optional)
-vi.spyOn(console, 'error').mockImplementation(() => {});
-
-// Mock localStorage
-const localStorageMock = (() => {
-  let store: Record<string, string> = {};
-
-  return {
-    getItem: (key: string) => store[key] || null,
-    setItem: (key: string, value: string) => {
-      store[key] = value.toString();
-    },
-    removeItem: (key: string) => {
-      delete store[key];
-    },
-    clear: () => {
-      store = {};
-    },
-    get length() {
-      return Object.keys(store).length;
-    },
-    key: (index: number) => {
-      const keys = Object.keys(store);
-      return keys[index] || null;
-    },
-  };
-})();
-
-Object.defineProperty(window, 'localStorage', {
-  value: localStorageMock,
-  writable: true,
-});
-
-Object.defineProperty(window, 'sessionStorage', {
-  value: localStorageMock,
-  writable: true,
-});

package/tests/unit/ForEachNode.test.tsx

@@ -1,308 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { ReactFlowProvider } from '@xyflow/react';
-import { ForEachNode, type ForEachNodeData } from '../../src/client/components/Canvas/ForEachNode';
-
-const createMockNode = (data: Partial<ForEachNodeData> = {}) => ({
-  id: 'foreach-1',
-  type: 'for_each' as const,
-  position: { x: 0, y: 0 },
-  data: {
-    id: 'foreach-1',
-    name: 'Process Orders',
-    items: '{{ orders }}',
-    itemVariable: 'order',
-    status: 'pending' as const,
-    ...data,
-  },
-});
-
-const renderNode = (data: Partial<ForEachNodeData> = {}) => {
-  const node = createMockNode(data);
-  return render(
-    <ReactFlowProvider>
-      <ForEachNode
-        id={node.id}
-        type={node.type}
-        data={node.data}
-        selected={false}
-        isConnectable={true}
-        zIndex={0}
-        positionAbsoluteX={0}
-        positionAbsoluteY={0}
-        dragging={false}
-      />
-    </ReactFlowProvider>
-  );
-};
-
-describe('ForEachNode', () => {
-  it('should render node with name, items, and variable', () => {
-    renderNode();
-
-    expect(screen.getByText('Process Orders')).toBeInTheDocument();
-    expect(screen.getByText('{{ orders }}')).toBeInTheDocument();
-    expect(screen.getByText('order')).toBeInTheDocument();
-    expect(screen.getByText('Loop')).toBeInTheDocument();
-  });
-
-  it('should render default name when name is not provided', () => {
-    renderNode({ name: undefined });
-
-    expect(screen.getByText('For Each')).toBeInTheDocument();
-  });
-
-  it('should render default item variable when not provided', () => {
-    renderNode({ itemVariable: undefined });
-
-    expect(screen.getByText('item')).toBeInTheDocument();
-  });
-
-  it('should display items and variable labels', () => {
-    renderNode();
-
-    expect(screen.getByText('Items:')).toBeInTheDocument();
-    expect(screen.getByText('Variable:')).toBeInTheDocument();
-  });
-
-  describe('status states', () => {
-    it('should render pending status', () => {
-      renderNode({ status: 'pending' });
-
-      const node = screen.getByText('Process Orders').closest('.control-flow-node');
-      expect(node).toBeInTheDocument();
-    });
-
-    it('should render running status with animation', () => {
-      renderNode({ status: 'running' });
-
-      const node = screen.getByText('Process Orders').closest('.control-flow-node');
-      expect(node).toHaveClass('running');
-    });
-
-    it('should render completed status', () => {
-      renderNode({ status: 'completed' });
-
-      const node = screen.getByText('Process Orders').closest('.control-flow-node');
-      expect(node).toBeInTheDocument();
-    });
-
-    it('should render failed status', () => {
-      renderNode({ status: 'failed' });
-
-      const node = screen.getByText('Process Orders').closest('.control-flow-node');
-      expect(node).toBeInTheDocument();
-    });
-  });
-
-  describe('iteration progress', () => {
-    it('should display progress when totalIterations is provided', () => {
-      renderNode({
-        currentIteration: 5,
-        totalIterations: 10,
-      });
-
-      expect(screen.getByText('Progress')).toBeInTheDocument();
-      expect(screen.getByText('5 / 10')).toBeInTheDocument();
-    });
-
-    it('should display progress bar with correct width', () => {
-      const { container } = renderNode({
-        currentIteration: 5,
-        totalIterations: 10,
-      });
-
-      const progressBar = container.querySelector('.bg-pink-400, .bg-orange-400');
-      expect(progressBar).toBeInTheDocument();
-      expect(progressBar).toHaveAttribute('style', expect.stringContaining('50%'));
-    });
-
-    it('should display 0% progress when currentIteration is 0', () => {
-      const { container } = renderNode({
-        currentIteration: 0,
-        totalIterations: 10,
-      });
-
-      const progressBar = container.querySelector('.bg-pink-400, .bg-orange-400');
-      expect(progressBar).toBeInTheDocument();
-      expect(progressBar).toHaveAttribute('style', expect.stringContaining('0%'));
-    });
-
-    it('should display 100% progress when completed', () => {
-      const { container } = renderNode({
-        currentIteration: 10,
-        totalIterations: 10,
-      });
-
-      const progressBar = container.querySelector('.bg-pink-400, .bg-orange-400');
-      expect(progressBar).toBeInTheDocument();
-      expect(progressBar).toHaveAttribute('style', expect.stringContaining('100%'));
-    });
-
-    it('should not display progress when totalIterations is undefined', () => {
-      renderNode({ currentIteration: 5, totalIterations: undefined });
-
-      expect(screen.queryByText('Progress')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('loop metadata', () => {
-    it('should display loop metadata information', () => {
-      renderNode();
-
-      expect(screen.getByText('ℹ️')).toBeInTheDocument();
-      expect(screen.getByText('Access: loop.index, loop.first, loop.last')).toBeInTheDocument();
-    });
-  });
-
-  describe('visual styling', () => {
-    it('should have pink/red gradient background', () => {
-      renderNode();
-
-      const node = screen.getByText('Process Orders').closest('.control-flow-node');
-      expect(node).toHaveStyle({
-        background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
-      });
-    });
-
-    it('should display items with monospace font', () => {
-      renderNode();
-
-      const itemsElement = screen.getByText('{{ orders }}');
-      expect(itemsElement).toHaveClass('font-mono');
-    });
-
-    it('should display variable with monospace font', () => {
-      renderNode();
-
-      const variableElement = screen.getByText('order');
-      expect(variableElement).toHaveClass('font-mono');
-    });
-  });
-
-  describe('selection state', () => {
-    it('should apply selected class when selected', () => {
-      const node = createMockNode();
-      const { container } = render(
-        <ReactFlowProvider>
-          <ForEachNode
-            id={node.id}
-            type={node.type}
-            data={node.data}
-            selected={true}
-            isConnectable={true}
-            zIndex={0}
-            positionAbsoluteX={0}
-            positionAbsoluteY={0}
-            dragging={false}
-          />
-        </ReactFlowProvider>
-      );
-
-      const nodeElement = container.querySelector('.control-flow-node');
-      expect(nodeElement).toHaveClass('selected');
-    });
-  });
-
-  describe('items display', () => {
-    it('should display "Not set" when items is empty', () => {
-      renderNode({ items: '' });
-
-      expect(screen.getByText('Not set')).toBeInTheDocument();
-    });
-
-    it('should display complex template expressions', () => {
-      const complexItems = '{{ data.orders.filter(o => o.active) }}';
-      renderNode({ items: complexItems });
-
-      expect(screen.getByText(complexItems)).toBeInTheDocument();
-    });
-  });
-
-  describe('early exit indicators', () => {
-    it('should show early exit warning when loop exited with break', () => {
-      renderNode({
-        earlyExit: true,
-        exitReason: 'break',
-        currentIteration: 3,
-        totalIterations: 10
-      });
-
-      expect(screen.getByText('Loop exited early (break)')).toBeInTheDocument();
-    });
-
-    it('should show error message when loop stopped on error', () => {
-      renderNode({
-        earlyExit: true,
-        exitReason: 'error',
-        currentIteration: 5,
-        totalIterations: 10
-      });
-
-      expect(screen.getByText('Loop stopped on error')).toBeInTheDocument();
-    });
-
-    it('should show (stopped) indicator in progress text', () => {
-      renderNode({
-        earlyExit: true,
-        exitReason: 'break',
-        currentIteration: 5,
-        totalIterations: 10
-      });
-
-      expect(screen.getByText('(stopped)')).toBeInTheDocument();
-      expect(screen.getByText('5 / 10')).toBeInTheDocument();
-    });
-
-    it('should change progress bar color to orange when early exit', () => {
-      const { container } = renderNode({
-        earlyExit: true,
-        exitReason: 'break',
-        currentIteration: 5,
-        totalIterations: 10
-      });
-
-      const progressBar = container.querySelector('.bg-orange-400');
-      expect(progressBar).toBeInTheDocument();
-      expect(progressBar).toHaveStyle({ width: '50%' });
-    });
-
-    it('should use pink color for progress bar when no early exit', () => {
-      const { container } = renderNode({
-        earlyExit: false,
-        currentIteration: 5,
-        totalIterations: 10
-      });
-
-      const progressBar = container.querySelector('.bg-pink-400');
-      expect(progressBar).toBeInTheDocument();
-    });
-
-    it('should not show early exit warning when earlyExit is false', () => {
-      renderNode({
-        earlyExit: false,
-        currentIteration: 10,
-        totalIterations: 10
-      });
-
-      expect(screen.queryByText('Loop exited early (break)')).not.toBeInTheDocument();
-      expect(screen.queryByText('Loop stopped on error')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('completed and failed states', () => {
-    it('should show completed class on node', () => {
-      renderNode({ status: 'completed' });
-
-      const node = screen.getByText('Process Orders').closest('.control-flow-node');
-      expect(node).toHaveClass('completed');
-    });
-
-    it('should show failed class on node', () => {
-      renderNode({ status: 'failed' });
-
-      const node = screen.getByText('Process Orders').closest('.control-flow-node');
-      expect(node).toHaveClass('failed');
-    });
-  });
-});

package/tests/unit/IfElseNode.test.tsx

@@ -1,235 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { ReactFlowProvider } from '@xyflow/react';
-import { IfElseNode, type IfElseNodeData } from '../../src/client/components/Canvas/IfElseNode';
-
-const createMockNode = (data: Partial<IfElseNodeData> = {}) => ({
-  id: 'if-1',
-  type: 'if' as const,
-  position: { x: 0, y: 0 },
-  data: {
-    id: 'if-1',
-    name: 'Check Count',
-    condition: '{{ count > 0 }}',
-    status: 'pending' as const,
-    ...data,
-  },
-});
-
-const renderNode = (data: Partial<IfElseNodeData> = {}) => {
-  const node = createMockNode(data);
-  return render(
-    <ReactFlowProvider>
-      <IfElseNode
-        id={node.id}
-        type={node.type}
-        data={node.data}
-        selected={false}
-        isConnectable={true}
-        zIndex={0}
-        positionAbsoluteX={0}
-        positionAbsoluteY={0}
-        dragging={false}
-      />
-    </ReactFlowProvider>
-  );
-};
-
-describe('IfElseNode', () => {
-  it('should render node with name and condition', () => {
-    renderNode();
-
-    expect(screen.getByText('Check Count')).toBeInTheDocument();
-    expect(screen.getByText('{{ count > 0 }}')).toBeInTheDocument();
-    expect(screen.getByText('Conditional')).toBeInTheDocument();
-  });
-
-  it('should render default name when name is not provided', () => {
-    renderNode({ name: undefined });
-
-    expect(screen.getByText('If/Else')).toBeInTheDocument();
-  });
-
-  it('should display condition with monospace font', () => {
-    renderNode();
-
-    const conditionElement = screen.getByText('{{ count > 0 }}');
-    expect(conditionElement).toHaveClass('font-mono');
-  });
-
-  describe('status states', () => {
-    it('should render pending status', () => {
-      renderNode({ status: 'pending' });
-
-      // Should have Clock icon for pending status
-      const node = screen.getByText('Check Count').closest('.control-flow-node');
-      expect(node).toBeInTheDocument();
-    });
-
-    it('should render running status with animation', () => {
-      renderNode({ status: 'running' });
-
-      const node = screen.getByText('Check Count').closest('.control-flow-node');
-      expect(node).toHaveClass('running');
-    });
-
-    it('should render completed status', () => {
-      renderNode({ status: 'completed' });
-
-      // Status should be completed
-      const node = screen.getByText('Check Count').closest('.control-flow-node');
-      expect(node).toBeInTheDocument();
-    });
-
-    it('should render failed status', () => {
-      renderNode({ status: 'failed' });
-
-      const node = screen.getByText('Check Count').closest('.control-flow-node');
-      expect(node).toBeInTheDocument();
-    });
-
-    it('should render skipped status', () => {
-      renderNode({ status: 'skipped' });
-
-      const node = screen.getByText('Check Count').closest('.control-flow-node');
-      expect(node).toBeInTheDocument();
-    });
-  });
-
-  describe('active branch highlighting', () => {
-    it('should highlight then branch when active', () => {
-      renderNode({ activeBranch: 'then' });
-
-      const thenBranch = screen.getByText('✓ Then');
-      expect(thenBranch).toHaveClass('bg-green-500/30', 'text-green-200');
-    });
-
-    it('should highlight else branch when active', () => {
-      renderNode({ activeBranch: 'else' });
-
-      const elseBranch = screen.getByText('✗ Else');
-      expect(elseBranch).toHaveClass('bg-red-500/30', 'text-red-200');
-    });
-
-    it('should not highlight branches when no active branch', () => {
-      renderNode({ activeBranch: null });
-
-      const thenBranch = screen.getByText('✓ Then');
-      const elseBranch = screen.getByText('✗ Else');
-
-      expect(thenBranch).toHaveClass('bg-white/5', 'text-white/60');
-      expect(elseBranch).toHaveClass('bg-white/5', 'text-white/60');
-    });
-  });
-
-  describe('branch outputs', () => {
-    it('should display both then and else branches', () => {
-      renderNode();
-
-      expect(screen.getByText('✓ Then')).toBeInTheDocument();
-      expect(screen.getByText('✗ Else')).toBeInTheDocument();
-    });
-
-    it('should have gradient background', () => {
-      renderNode();
-
-      const node = screen.getByText('Check Count').closest('.control-flow-node');
-      expect(node).toHaveStyle({
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      });
-    });
-  });
-
-  describe('selection state', () => {
-    it('should apply selected class when selected', () => {
-      const node = createMockNode();
-      const { container } = render(
-        <ReactFlowProvider>
-          <IfElseNode
-            id={node.id}
-            type={node.type}
-            data={node.data}
-            selected={true}
-            isConnectable={true}
-            zIndex={0}
-            positionAbsoluteX={0}
-            positionAbsoluteY={0}
-            dragging={false}
-          />
-        </ReactFlowProvider>
-      );
-
-      const nodeElement = container.querySelector('.control-flow-node');
-      expect(nodeElement).toHaveClass('selected');
-    });
-
-    it('should not apply selected class when not selected', () => {
-      const { container } = renderNode();
-
-      const nodeElement = container.querySelector('.control-flow-node');
-      expect(nodeElement).not.toHaveClass('selected');
-    });
-  });
-
-  describe('condition display', () => {
-    it('should display "No condition set" when condition is empty', () => {
-      renderNode({ condition: '' });
-
-      expect(screen.getByText('No condition set')).toBeInTheDocument();
-    });
-
-    it('should display complex conditions correctly', () => {
-      const complexCondition = '{{ priority === "critical" && assignee !== null }}';
-      renderNode({ condition: complexCondition });
-
-      expect(screen.getByText(complexCondition)).toBeInTheDocument();
-    });
-  });
-
-  describe('skipped branch indicators', () => {
-    it('should show SKIP badge on skipped then branch', () => {
-      renderNode({ skippedBranch: 'then' });
-
-      expect(screen.getByText('SKIP')).toBeInTheDocument();
-      const thenBranch = screen.getByText('✓ Then');
-      expect(thenBranch).toHaveClass('bg-gray-500/20', 'text-gray-400');
-    });
-
-    it('should show SKIP badge on skipped else branch', () => {
-      renderNode({ skippedBranch: 'else' });
-
-      expect(screen.getByText('SKIP')).toBeInTheDocument();
-      const elseBranch = screen.getByText('✗ Else');
-      expect(elseBranch).toHaveClass('bg-gray-500/20', 'text-gray-400');
-    });
-
-    it('should highlight active branch with ring when one is active', () => {
-      renderNode({ activeBranch: 'then' });
-
-      const thenBranch = screen.getByText('✓ Then');
-      expect(thenBranch).toHaveClass('ring-1', 'ring-green-400/50');
-    });
-
-    it('should not show SKIP when no branch is skipped', () => {
-      renderNode({ skippedBranch: null });
-
-      expect(screen.queryByText('SKIP')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('completed and failed states', () => {
-    it('should show completed class on node', () => {
-      renderNode({ status: 'completed' });
-
-      const node = screen.getByText('Check Count').closest('.control-flow-node');
-      expect(node).toHaveClass('completed');
-    });
-
-    it('should show failed class on node', () => {
-      renderNode({ status: 'failed' });
-
-      const node = screen.getByText('Check Count').closest('.control-flow-node');
-      expect(node).toHaveClass('failed');
-    });
-  });
-});