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

package/tests/integration/testApp.ts

@@ -24,7 +24,7 @@ export function createTestApp(): Express {
 
   // Health check
   app.get('/api/health', (_req, res) => {
-    res.json({ status: 'ok', version: '2.0.0-alpha.1' });
+    res.json({ status: 'ok', version: '2.0.0-alpha.2' });
   });
 
   return app;

package/tests/setup.ts

@@ -35,3 +35,38 @@ global.IntersectionObserver = vi.fn().mockImplementation(() => ({
 
 // 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

@@ -0,0 +1,218 @@
+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-orange-400');
+      expect(progressBar).toHaveStyle({ width: '50%' });
+    });
+
+    it('should display 0% progress when currentIteration is 0', () => {
+      const { container } = renderNode({
+        currentIteration: 0,
+        totalIterations: 10,
+      });
+
+      const progressBar = container.querySelector('.bg-orange-400');
+      expect(progressBar).toHaveStyle({ width: '0%' });
+    });
+
+    it('should display 100% progress when completed', () => {
+      const { container } = renderNode({
+        currentIteration: 10,
+        totalIterations: 10,
+      });
+
+      const progressBar = container.querySelector('.bg-orange-400');
+      expect(progressBar).toHaveStyle({ width: '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();
+    });
+  });
+});

package/tests/unit/IfElseNode.test.tsx

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