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

package/tests/unit/ParallelNode.test.tsx

@@ -0,0 +1,264 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ReactFlowProvider } from '@xyflow/react';
+import { ParallelNode, type ParallelNodeData } from '../../src/client/components/Canvas/ParallelNode';
+
+const createMockNode = (data: Partial<ParallelNodeData> = {}) => ({
+  id: 'parallel-1',
+  type: 'parallel' as const,
+  position: { x: 0, y: 0 },
+  data: {
+    id: 'parallel-1',
+    name: 'Fetch Data',
+    branches: [
+      { id: 'branch-1', name: 'Jira' },
+      { id: 'branch-2', name: 'GitHub' },
+      { id: 'branch-3', name: 'Slack' },
+    ],
+    maxConcurrent: 3,
+    onError: 'stop' as const,
+    status: 'pending' as const,
+    ...data,
+  },
+});
+
+const renderNode = (data: Partial<ParallelNodeData> = {}) => {
+  const node = createMockNode(data);
+  return render(
+    <ReactFlowProvider>
+      <ParallelNode
+        id={node.id}
+        type={node.type}
+        data={node.data}
+        selected={false}
+        isConnectable={true}
+        zIndex={0}
+        positionAbsoluteX={0}
+        positionAbsoluteY={0}
+        dragging={false}
+      />
+    </ReactFlowProvider>
+  );
+};
+
+describe('ParallelNode', () => {
+  it('should render node with name and branches', () => {
+    renderNode();
+
+    expect(screen.getByText('Fetch Data')).toBeInTheDocument();
+    expect(screen.getByText('Concurrent Execution')).toBeInTheDocument();
+    expect(screen.getByText('Jira')).toBeInTheDocument();
+    expect(screen.getByText('GitHub')).toBeInTheDocument();
+    expect(screen.getByText('Slack')).toBeInTheDocument();
+  });
+
+  it('should render default name when name is not provided', () => {
+    renderNode({ name: undefined });
+
+    expect(screen.getByText('Parallel')).toBeInTheDocument();
+  });
+
+  it('should display branch count', () => {
+    renderNode();
+
+    expect(screen.getByText('Branches:')).toBeInTheDocument();
+    const branchCounts = screen.getAllByText('3');
+    expect(branchCounts.length).toBeGreaterThan(0);
+  });
+
+  it('should display max concurrent limit when provided', () => {
+    renderNode({ maxConcurrent: 5 });
+
+    expect(screen.getByText(/Max Concurrent:/)).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  it('should not display max concurrent when not provided', () => {
+    renderNode({ maxConcurrent: undefined });
+
+    expect(screen.queryByText(/Max Concurrent:/)).not.toBeInTheDocument();
+  });
+
+  describe('status states', () => {
+    it('should render pending status', () => {
+      renderNode({ status: 'pending' });
+
+      const node = screen.getByText('Fetch Data').closest('.control-flow-node');
+      expect(node).toBeInTheDocument();
+    });
+
+    it('should render running status with animation', () => {
+      renderNode({ status: 'running' });
+
+      const node = screen.getByText('Fetch Data').closest('.control-flow-node');
+      expect(node).toHaveClass('running');
+    });
+
+    it('should render completed status', () => {
+      renderNode({ status: 'completed' });
+
+      const node = screen.getByText('Fetch Data').closest('.control-flow-node');
+      expect(node).toBeInTheDocument();
+    });
+  });
+
+  describe('branch status indicators', () => {
+    it('should highlight active branches', () => {
+      renderNode({
+        activeBranches: ['branch-1', 'branch-2'],
+      });
+
+      const jiraBranch = screen.getByText('Jira');
+      const githubBranch = screen.getByText('GitHub');
+
+      expect(jiraBranch).toHaveClass('bg-blue-500/30', 'text-blue-200', 'animate-pulse');
+      expect(githubBranch).toHaveClass('bg-blue-500/30', 'text-blue-200', 'animate-pulse');
+    });
+
+    it('should highlight completed branches', () => {
+      renderNode({
+        completedBranches: ['branch-1'],
+      });
+
+      const jiraBranch = screen.getByText('Jira');
+      expect(jiraBranch).toHaveClass('bg-green-500/30', 'text-green-200');
+    });
+
+    it('should show inactive branches without highlighting', () => {
+      renderNode({
+        activeBranches: [],
+        completedBranches: [],
+      });
+
+      const jiraBranch = screen.getByText('Jira');
+      expect(jiraBranch).toHaveClass('bg-white/10', 'text-white/60');
+    });
+
+    it('should prioritize completed over active status', () => {
+      renderNode({
+        activeBranches: ['branch-1'],
+        completedBranches: ['branch-1'],
+      });
+
+      const jiraBranch = screen.getByText('Jira');
+      expect(jiraBranch).toHaveClass('bg-green-500/30', 'text-green-200');
+      expect(jiraBranch).not.toHaveClass('animate-pulse');
+    });
+  });
+
+  describe('branch display', () => {
+    it('should display up to 6 branches', () => {
+      renderNode({
+        branches: [
+          { id: 'b1', name: 'Branch 1' },
+          { id: 'b2', name: 'Branch 2' },
+          { id: 'b3', name: 'Branch 3' },
+          { id: 'b4', name: 'Branch 4' },
+          { id: 'b5', name: 'Branch 5' },
+          { id: 'b6', name: 'Branch 6' },
+        ],
+      });
+
+      expect(screen.getByText('Branch 1')).toBeInTheDocument();
+      expect(screen.getByText('Branch 6')).toBeInTheDocument();
+      expect(screen.queryByText('+1')).not.toBeInTheDocument();
+    });
+
+    it('should show "+N more" for branches beyond 6', () => {
+      renderNode({
+        branches: [
+          { id: 'b1', name: 'Branch 1' },
+          { id: 'b2', name: 'Branch 2' },
+          { id: 'b3', name: 'Branch 3' },
+          { id: 'b4', name: 'Branch 4' },
+          { id: 'b5', name: 'Branch 5' },
+          { id: 'b6', name: 'Branch 6' },
+          { id: 'b7', name: 'Branch 7' },
+          { id: 'b8', name: 'Branch 8' },
+        ],
+      });
+
+      expect(screen.getByText('+2')).toBeInTheDocument();
+      expect(screen.queryByText('Branch 7')).not.toBeInTheDocument();
+    });
+
+    it('should use branch id when name is not provided', () => {
+      renderNode({
+        branches: [{ id: 'branch-xyz', name: undefined }],
+      });
+
+      // Should display last 2 characters of id as "Byz"
+      expect(screen.getByText('Byz')).toBeInTheDocument();
+    });
+  });
+
+  describe('error handling display', () => {
+    it('should display error handling policy', () => {
+      renderNode({ onError: 'stop' });
+
+      expect(screen.getByText('On Error:')).toBeInTheDocument();
+      expect(screen.getByText('stop')).toBeInTheDocument();
+    });
+
+    it('should display continue policy', () => {
+      renderNode({ onError: 'continue' });
+
+      expect(screen.getByText('continue')).toBeInTheDocument();
+    });
+
+    it('should display default stop policy when not provided', () => {
+      renderNode({ onError: undefined });
+
+      expect(screen.getByText('stop')).toBeInTheDocument();
+    });
+  });
+
+  describe('visual styling', () => {
+    it('should have blue/cyan gradient background', () => {
+      renderNode();
+
+      const node = screen.getByText('Fetch Data').closest('.control-flow-node');
+      expect(node).toHaveStyle({
+        background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+      });
+    });
+  });
+
+  describe('selection state', () => {
+    it('should apply selected class when selected', () => {
+      const node = createMockNode();
+      const { container } = render(
+        <ReactFlowProvider>
+          <ParallelNode
+            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('empty branches', () => {
+    it('should display 0 branches when array is empty', () => {
+      renderNode({ branches: [] });
+
+      expect(screen.getByText('0')).toBeInTheDocument();
+    });
+
+    it('should handle undefined branches', () => {
+      renderNode({ branches: undefined });
+
+      expect(screen.getByText('0')).toBeInTheDocument();
+    });
+  });
+});

package/tests/unit/SwitchNode.test.tsx

@@ -0,0 +1,252 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ReactFlowProvider } from '@xyflow/react';
+import { SwitchNode, type SwitchNodeData } from '../../src/client/components/Canvas/SwitchNode';
+
+const createMockNode = (data: Partial<SwitchNodeData> = {}) => ({
+  id: 'switch-1',
+  type: 'switch' as const,
+  position: { x: 0, y: 0 },
+  data: {
+    id: 'switch-1',
+    name: 'Route By Severity',
+    expression: '{{ incident.severity }}',
+    cases: {
+      critical: {},
+      high: {},
+      medium: {},
+    },
+    hasDefault: true,
+    status: 'pending' as const,
+    ...data,
+  },
+});
+
+const renderNode = (data: Partial<SwitchNodeData> = {}) => {
+  const node = createMockNode(data);
+  return render(
+    <ReactFlowProvider>
+      <SwitchNode
+        id={node.id}
+        type={node.type}
+        data={node.data}
+        selected={false}
+        isConnectable={true}
+        zIndex={0}
+        positionAbsoluteX={0}
+        positionAbsoluteY={0}
+        dragging={false}
+      />
+    </ReactFlowProvider>
+  );
+};
+
+describe('SwitchNode', () => {
+  it('should render node with name, expression, and cases', () => {
+    renderNode();
+
+    expect(screen.getByText('Route By Severity')).toBeInTheDocument();
+    expect(screen.getByText('Multi-Branch Router')).toBeInTheDocument();
+    expect(screen.getByText('{{ incident.severity }}')).toBeInTheDocument();
+    expect(screen.getByText('critical')).toBeInTheDocument();
+    expect(screen.getByText('high')).toBeInTheDocument();
+    expect(screen.getByText('medium')).toBeInTheDocument();
+  });
+
+  it('should render default name when name is not provided', () => {
+    renderNode({ name: undefined });
+
+    expect(screen.getByText('Switch')).toBeInTheDocument();
+  });
+
+  it('should display expression label', () => {
+    renderNode();
+
+    expect(screen.getByText('Expression:')).toBeInTheDocument();
+  });
+
+  it('should display "Not set" when expression is empty', () => {
+    renderNode({ expression: '' });
+
+    expect(screen.getByText('Not set')).toBeInTheDocument();
+  });
+
+  describe('status states', () => {
+    it('should render pending status', () => {
+      renderNode({ status: 'pending' });
+
+      const node = screen.getByText('Route By Severity').closest('.control-flow-node');
+      expect(node).toBeInTheDocument();
+    });
+
+    it('should render running status with animation', () => {
+      renderNode({ status: 'running' });
+
+      const node = screen.getByText('Route By Severity').closest('.control-flow-node');
+      expect(node).toHaveClass('running');
+    });
+
+    it('should render completed status', () => {
+      renderNode({ status: 'completed' });
+
+      const node = screen.getByText('Route By Severity').closest('.control-flow-node');
+      expect(node).toBeInTheDocument();
+    });
+  });
+
+  describe('active case highlighting', () => {
+    it('should highlight active case', () => {
+      renderNode({ activeCase: 'critical' });
+
+      const criticalCase = screen.getByText('critical');
+      expect(criticalCase).toHaveClass('bg-purple-500/30', 'text-purple-200');
+    });
+
+    it('should not highlight inactive cases', () => {
+      renderNode({ activeCase: 'critical' });
+
+      const highCase = screen.getByText('high');
+      expect(highCase).toHaveClass('bg-white/5', 'text-white/70');
+    });
+
+    it('should highlight default case when active', () => {
+      renderNode({ activeCase: 'default' });
+
+      const defaultCase = screen.getByText('default');
+      expect(defaultCase).toHaveClass('bg-gray-500/30', 'text-gray-200');
+    });
+  });
+
+  describe('case display', () => {
+    it('should display up to 4 cases', () => {
+      renderNode({
+        cases: {
+          case1: {},
+          case2: {},
+          case3: {},
+          case4: {},
+        },
+      });
+
+      expect(screen.getByText('case1')).toBeInTheDocument();
+      expect(screen.getByText('case2')).toBeInTheDocument();
+      expect(screen.getByText('case3')).toBeInTheDocument();
+      expect(screen.getByText('case4')).toBeInTheDocument();
+      expect(screen.queryByText('+1 more cases')).not.toBeInTheDocument();
+    });
+
+    it('should show "+N more cases" when more than 4 cases', () => {
+      renderNode({
+        cases: {
+          case1: {},
+          case2: {},
+          case3: {},
+          case4: {},
+          case5: {},
+          case6: {},
+        },
+      });
+
+      expect(screen.getByText('+2 more cases')).toBeInTheDocument();
+      expect(screen.queryByText('case5')).not.toBeInTheDocument();
+    });
+
+    it('should display case count', () => {
+      renderNode({
+        cases: {
+          critical: {},
+          high: {},
+          medium: {},
+        },
+      });
+
+      expect(screen.getByText('3 cases + default')).toBeInTheDocument();
+    });
+
+    it('should display singular case label when only one case', () => {
+      renderNode({
+        cases: {
+          single: {},
+        },
+      });
+
+      expect(screen.getByText('1 case + default')).toBeInTheDocument();
+    });
+
+    it('should not show "+ default" when hasDefault is false', () => {
+      renderNode({
+        cases: {
+          critical: {},
+        },
+        hasDefault: false,
+      });
+
+      expect(screen.getByText('1 case')).toBeInTheDocument();
+      expect(screen.queryByText('+ default')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('default case', () => {
+    it('should display default case when hasDefault is true', () => {
+      renderNode({ hasDefault: true });
+
+      expect(screen.getByText('default')).toBeInTheDocument();
+    });
+
+    it('should not display default case when hasDefault is false', () => {
+      renderNode({ hasDefault: false });
+
+      expect(screen.queryByText('default')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('visual styling', () => {
+    it('should have purple/magenta gradient background', () => {
+      renderNode();
+
+      const node = screen.getByText('Route By Severity').closest('.control-flow-node');
+      expect(node).toHaveStyle({
+        background: 'linear-gradient(135deg, #a855f7 0%, #ec4899 100%)',
+      });
+    });
+
+    it('should display expression with monospace font', () => {
+      renderNode();
+
+      const expressionElement = screen.getByText('{{ incident.severity }}');
+      expect(expressionElement).toHaveClass('font-mono');
+    });
+  });
+
+  describe('selection state', () => {
+    it('should apply selected class when selected', () => {
+      const node = createMockNode();
+      const { container } = render(
+        <ReactFlowProvider>
+          <SwitchNode
+            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('empty cases', () => {
+    it('should display 0 cases when cases object is empty', () => {
+      renderNode({ cases: {} });
+
+      expect(screen.getByText('0 cases + default')).toBeInTheDocument();
+    });
+  });
+});