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

package/tests/unit/TransformNode.test.tsx

@@ -0,0 +1,386 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ReactFlowProvider } from '@xyflow/react';
+import { TransformNode, type TransformNodeData } from '../../src/client/components/Canvas/TransformNode';
+
+const createMockNode = (data: Partial<TransformNodeData> = {}) => ({
+  id: 'transform-1',
+  type: 'map' as const,
+  position: { x: 0, y: 0 },
+  data: {
+    id: 'transform-1',
+    name: 'Transform Data',
+    transformType: 'map' as const,
+    items: '{{ orders }}',
+    itemVariable: 'order',
+    expression: '{{ order.total }}',
+    status: 'pending' as const,
+    ...data,
+  },
+});
+
+const renderNode = (data: Partial<TransformNodeData> = {}) => {
+  const node = createMockNode(data);
+  return render(
+    <ReactFlowProvider>
+      <TransformNode
+        id={node.id}
+        type={node.type}
+        data={node.data}
+        selected={false}
+        isConnectable={true}
+        zIndex={0}
+        positionAbsoluteX={0}
+        positionAbsoluteY={0}
+        dragging={false}
+      />
+    </ReactFlowProvider>
+  );
+};
+
+describe('TransformNode', () => {
+  it('should render node with name and transform type', () => {
+    renderNode();
+
+    expect(screen.getByText('Transform Data')).toBeInTheDocument();
+    expect(screen.getByText('Transform')).toBeInTheDocument();
+  });
+
+  describe('transform types', () => {
+    it('should render map type with default name', () => {
+      renderNode({ transformType: 'map', name: undefined });
+
+      expect(screen.getByText('Map')).toBeInTheDocument();
+    });
+
+    it('should render filter type with default name', () => {
+      renderNode({ transformType: 'filter', name: undefined });
+
+      expect(screen.getByText('Filter')).toBeInTheDocument();
+    });
+
+    it('should render reduce type with default name', () => {
+      renderNode({ transformType: 'reduce', name: undefined });
+
+      expect(screen.getByText('Reduce')).toBeInTheDocument();
+    });
+
+    it('should display map description', () => {
+      renderNode({ transformType: 'map' });
+
+      expect(screen.getByText('Transforms each item')).toBeInTheDocument();
+    });
+
+    it('should display filter description', () => {
+      renderNode({ transformType: 'filter' });
+
+      expect(screen.getByText('Selects matching items')).toBeInTheDocument();
+    });
+
+    it('should display reduce description', () => {
+      renderNode({ transformType: 'reduce' });
+
+      expect(screen.getByText('Aggregates to single value')).toBeInTheDocument();
+    });
+  });
+
+  describe('status states', () => {
+    it('should render pending status', () => {
+      renderNode({ status: 'pending' });
+
+      const node = screen.getByText('Transform Data').closest('.control-flow-node');
+      expect(node).toBeInTheDocument();
+    });
+
+    it('should render running status with animation', () => {
+      renderNode({ status: 'running' });
+
+      const node = screen.getByText('Transform Data').closest('.control-flow-node');
+      expect(node).toHaveClass('running');
+    });
+
+    it('should render completed status', () => {
+      renderNode({ status: 'completed' });
+
+      const node = screen.getByText('Transform Data').closest('.control-flow-node');
+      expect(node).toBeInTheDocument();
+    });
+  });
+
+  describe('items and variable display', () => {
+    it('should display items source', () => {
+      renderNode({ items: '{{ orders }}' });
+
+      expect(screen.getByText('Items:')).toBeInTheDocument();
+      expect(screen.getByText('{{ orders }}')).toBeInTheDocument();
+    });
+
+    it('should display "Not set" when items is empty', () => {
+      renderNode({ items: '' });
+
+      expect(screen.getByText('Not set')).toBeInTheDocument();
+    });
+
+    it('should display item variable', () => {
+      renderNode({ itemVariable: 'order' });
+
+      expect(screen.getByText('Variable:')).toBeInTheDocument();
+      expect(screen.getByText('order')).toBeInTheDocument();
+    });
+
+    it('should display default variable when not provided', () => {
+      renderNode({ itemVariable: undefined });
+
+      expect(screen.getByText('item')).toBeInTheDocument();
+    });
+  });
+
+  describe('expression/condition display', () => {
+    it('should display expression for map type', () => {
+      renderNode({
+        transformType: 'map',
+        expression: '{{ order.total }}',
+      });
+
+      expect(screen.getByText('Expression')).toBeInTheDocument();
+      expect(screen.getByText('{{ order.total }}')).toBeInTheDocument();
+    });
+
+    it('should display condition for filter type', () => {
+      renderNode({
+        transformType: 'filter',
+        condition: '{{ item.price > 100 }}',
+      });
+
+      expect(screen.getByText('Condition')).toBeInTheDocument();
+      expect(screen.getByText('{{ item.price > 100 }}')).toBeInTheDocument();
+    });
+
+    it('should display reducer for reduce type', () => {
+      renderNode({
+        transformType: 'reduce',
+        expression: '{{ acc + item }}',
+        accumulatorVariable: 'acc',
+      });
+
+      expect(screen.getByText('Reducer')).toBeInTheDocument();
+      expect(screen.getByText('acc: {{ acc + item }}')).toBeInTheDocument();
+    });
+
+    it('should display "Not set" when expression is missing', () => {
+      renderNode({
+        transformType: 'map',
+        expression: undefined,
+      });
+
+      expect(screen.getByText('Not set')).toBeInTheDocument();
+    });
+  });
+
+  describe('reduce-specific fields', () => {
+    it('should display accumulator variable for reduce', () => {
+      renderNode({
+        transformType: 'reduce',
+        accumulatorVariable: 'sum',
+        expression: '{{ sum + item.value }}',
+      });
+
+      expect(screen.getByText('sum: {{ sum + item.value }}')).toBeInTheDocument();
+    });
+
+    it('should display initial value when provided', () => {
+      renderNode({
+        transformType: 'reduce',
+        initialValue: 0,
+      });
+
+      expect(screen.getByText('Initial:')).toBeInTheDocument();
+      expect(screen.getByText('0')).toBeInTheDocument();
+    });
+
+    it('should display complex initial values', () => {
+      renderNode({
+        transformType: 'reduce',
+        initialValue: { count: 0, total: 0 },
+      });
+
+      expect(screen.getByText('{"count":0,"total":0}')).toBeInTheDocument();
+    });
+
+    it('should not display initial value for non-reduce types', () => {
+      renderNode({
+        transformType: 'map',
+        initialValue: 0,
+      });
+
+      expect(screen.queryByText('Initial:')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('input/output count', () => {
+    it('should display input and output counts when provided', () => {
+      renderNode({
+        inputCount: 10,
+        outputCount: 5,
+      });
+
+      expect(screen.getByText('In:')).toBeInTheDocument();
+      expect(screen.getByText('10')).toBeInTheDocument();
+      expect(screen.getByText('Out:')).toBeInTheDocument();
+      expect(screen.getByText('5')).toBeInTheDocument();
+    });
+
+    it('should display "?" for missing counts when at least one is defined', () => {
+      renderNode({
+        inputCount: 10,
+        outputCount: undefined,
+      });
+
+      expect(screen.getByText('10')).toBeInTheDocument();
+      // The '?' will be rendered for undefined outputCount
+      expect(screen.getByText((content, element) => {
+        return element?.tagName === 'SPAN' && content === '?';
+      })).toBeInTheDocument();
+    });
+
+    it('should not display count section when both counts are undefined', () => {
+      renderNode({
+        inputCount: undefined,
+        outputCount: undefined,
+      });
+
+      // Count section should not be rendered at all
+      expect(screen.queryByText('In:')).not.toBeInTheDocument();
+      expect(screen.queryByText('Out:')).not.toBeInTheDocument();
+    });
+
+    it('should display mixed defined/undefined counts', () => {
+      renderNode({
+        inputCount: 10,
+        outputCount: undefined,
+      });
+
+      expect(screen.getByText('10')).toBeInTheDocument();
+      expect(screen.getByText((content, element) => {
+        return element?.tagName === 'SPAN' && content === '?';
+      })).toBeInTheDocument();
+    });
+  });
+
+  describe('visual styling', () => {
+    it('should have teal/cyan gradient background', () => {
+      renderNode();
+
+      const node = screen.getByText('Transform Data').closest('.control-flow-node');
+      expect(node).toHaveStyle({
+        background: 'linear-gradient(135deg, #14b8a6 0%, #06b6d4 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');
+    });
+
+    it('should display expression with monospace font', () => {
+      renderNode();
+
+      const expressionElement = screen.getByText('{{ order.total }}');
+      expect(expressionElement).toHaveClass('font-mono');
+    });
+  });
+
+  describe('selection state', () => {
+    it('should apply selected class when selected', () => {
+      const node = createMockNode();
+      const { container } = render(
+        <ReactFlowProvider>
+          <TransformNode
+            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('complete transform examples', () => {
+    it('should render complete map transformation', () => {
+      renderNode({
+        name: undefined,
+        transformType: 'map',
+        items: '{{ users }}',
+        itemVariable: 'user',
+        expression: '{{ user.email }}',
+        inputCount: 100,
+        outputCount: 100,
+      });
+
+      expect(screen.getByText('Map')).toBeInTheDocument();
+      expect(screen.getByText('{{ users }}')).toBeInTheDocument();
+      expect(screen.getByText('user')).toBeInTheDocument();
+      expect(screen.getByText('{{ user.email }}')).toBeInTheDocument();
+      const counts = screen.getAllByText('100');
+      expect(counts).toHaveLength(2); // Both input and output are 100
+    });
+
+    it('should render complete filter transformation', () => {
+      renderNode({
+        name: undefined,
+        transformType: 'filter',
+        items: '{{ products }}',
+        itemVariable: 'product',
+        condition: '{{ product.inStock }}',
+        inputCount: 50,
+        outputCount: 30,
+      });
+
+      expect(screen.getByText('Filter')).toBeInTheDocument();
+      expect(screen.getByText('{{ products }}')).toBeInTheDocument();
+      expect(screen.getByText('product')).toBeInTheDocument();
+      expect(screen.getByText('{{ product.inStock }}')).toBeInTheDocument();
+      expect(screen.getByText('50')).toBeInTheDocument();
+      expect(screen.getByText('30')).toBeInTheDocument();
+    });
+
+    it('should render complete reduce transformation', () => {
+      renderNode({
+        name: undefined,
+        transformType: 'reduce',
+        items: '{{ numbers }}',
+        itemVariable: 'num',
+        accumulatorVariable: 'sum',
+        initialValue: 0,
+        expression: '{{ sum + num }}',
+        inputCount: 10,
+        outputCount: 1,
+      });
+
+      expect(screen.getByText('Reduce')).toBeInTheDocument();
+      expect(screen.getByText('{{ numbers }}')).toBeInTheDocument();
+      expect(screen.getByText('num')).toBeInTheDocument();
+      expect(screen.getByText('sum: {{ sum + num }}')).toBeInTheDocument();
+      expect(screen.getByText('Initial:')).toBeInTheDocument();
+      expect(screen.getByText('0')).toBeInTheDocument();
+    });
+  });
+});

package/tests/unit/TryCatchNode.test.tsx

@@ -0,0 +1,243 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ReactFlowProvider } from '@xyflow/react';
+import { TryCatchNode, type TryCatchNodeData } from '../../src/client/components/Canvas/TryCatchNode';
+
+const createMockNode = (data: Partial<TryCatchNodeData> = {}) => ({
+  id: 'try-1',
+  type: 'try' as const,
+  position: { x: 0, y: 0 },
+  data: {
+    id: 'try-1',
+    name: 'Resilient API',
+    hasCatch: true,
+    hasFinally: true,
+    status: 'pending' as const,
+    ...data,
+  },
+});
+
+const renderNode = (data: Partial<TryCatchNodeData> = {}) => {
+  const node = createMockNode(data);
+  return render(
+    <ReactFlowProvider>
+      <TryCatchNode
+        id={node.id}
+        type={node.type}
+        data={node.data}
+        selected={false}
+        isConnectable={true}
+        zIndex={0}
+        positionAbsoluteX={0}
+        positionAbsoluteY={0}
+        dragging={false}
+      />
+    </ReactFlowProvider>
+  );
+};
+
+describe('TryCatchNode', () => {
+  it('should render node with name', () => {
+    renderNode();
+
+    expect(screen.getByText('Resilient API')).toBeInTheDocument();
+    expect(screen.getByText('Error Handling')).toBeInTheDocument();
+  });
+
+  it('should render default name when name is not provided', () => {
+    renderNode({ name: undefined });
+
+    expect(screen.getByText('Try/Catch')).toBeInTheDocument();
+  });
+
+  describe('status states', () => {
+    it('should render pending status', () => {
+      renderNode({ status: 'pending' });
+
+      const node = screen.getByText('Resilient API').closest('.control-flow-node');
+      expect(node).toBeInTheDocument();
+    });
+
+    it('should render running status with animation', () => {
+      renderNode({ status: 'running' });
+
+      const node = screen.getByText('Resilient API').closest('.control-flow-node');
+      expect(node).toHaveClass('running');
+    });
+
+    it('should render completed status', () => {
+      renderNode({ status: 'completed' });
+
+      const node = screen.getByText('Resilient API').closest('.control-flow-node');
+      expect(node).toBeInTheDocument();
+    });
+
+    it('should render failed status', () => {
+      renderNode({ status: 'failed' });
+
+      const node = screen.getByText('Resilient API').closest('.control-flow-node');
+      expect(node).toBeInTheDocument();
+    });
+  });
+
+  describe('branch indicators', () => {
+    it('should always display try branch', () => {
+      renderNode();
+
+      expect(screen.getByText('✓ Try')).toBeInTheDocument();
+    });
+
+    it('should display catch branch when hasCatch is true', () => {
+      renderNode({ hasCatch: true });
+
+      expect(screen.getByText('⚠ Catch')).toBeInTheDocument();
+    });
+
+    it('should not display catch branch when hasCatch is false', () => {
+      renderNode({ hasCatch: false });
+
+      expect(screen.queryByText('⚠ Catch')).not.toBeInTheDocument();
+    });
+
+    it('should display finally branch when hasFinally is true', () => {
+      renderNode({ hasFinally: true });
+
+      expect(screen.getByText('⟳ Finally')).toBeInTheDocument();
+    });
+
+    it('should not display finally branch when hasFinally is false', () => {
+      renderNode({ hasFinally: false });
+
+      expect(screen.queryByText('⟳ Finally')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('active branch highlighting', () => {
+    it('should highlight try branch when active', () => {
+      renderNode({ activeBranch: 'try' });
+
+      const tryBranch = screen.getByText('✓ Try');
+      expect(tryBranch).toHaveClass('bg-blue-500/30', 'text-blue-200');
+    });
+
+    it('should highlight catch branch when active', () => {
+      renderNode({ activeBranch: 'catch', hasCatch: true });
+
+      const catchBranch = screen.getByText('⚠ Catch');
+      expect(catchBranch).toHaveClass('bg-red-500/30', 'text-red-200');
+    });
+
+    it('should highlight finally branch when active', () => {
+      renderNode({ activeBranch: 'finally', hasFinally: true });
+
+      const finallyBranch = screen.getByText('⟳ Finally');
+      expect(finallyBranch).toHaveClass('bg-purple-500/30', 'text-purple-200');
+    });
+
+    it('should not highlight inactive branches', () => {
+      renderNode({ activeBranch: 'try' });
+
+      const catchBranch = screen.getByText('⚠ Catch');
+      expect(catchBranch).toHaveClass('bg-white/5', 'text-white/60');
+    });
+  });
+
+  describe('error indicator', () => {
+    it('should display error indicator when errorOccurred is true', () => {
+      renderNode({ errorOccurred: true });
+
+      expect(screen.getByText('Error occurred')).toBeInTheDocument();
+    });
+
+    it('should not display error indicator when errorOccurred is false', () => {
+      renderNode({ errorOccurred: false });
+
+      expect(screen.queryByText('Error occurred')).not.toBeInTheDocument();
+    });
+
+    it('should not display error indicator by default', () => {
+      renderNode({ errorOccurred: undefined });
+
+      expect(screen.queryByText('Error occurred')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('info message', () => {
+    it('should display finally execution info', () => {
+      renderNode();
+
+      expect(screen.getByText('ℹ️')).toBeInTheDocument();
+      expect(screen.getByText('Finally always executes')).toBeInTheDocument();
+    });
+  });
+
+  describe('visual styling', () => {
+    it('should have yellow/orange gradient background', () => {
+      renderNode();
+
+      const node = screen.getByText('Resilient API').closest('.control-flow-node');
+      expect(node).toHaveStyle({
+        background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)',
+      });
+    });
+  });
+
+  describe('selection state', () => {
+    it('should apply selected class when selected', () => {
+      const node = createMockNode();
+      const { container } = render(
+        <ReactFlowProvider>
+          <TryCatchNode
+            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('error indicator styling', () => {
+    it('should display error indicator with red styling', () => {
+      renderNode({ errorOccurred: true });
+
+      const errorIndicator = screen.getByText('Error occurred').closest('.p-2');
+      expect(errorIndicator).toHaveClass('bg-red-500/20', 'border-red-500/30');
+    });
+  });
+
+  describe('minimal configuration', () => {
+    it('should render with only try branch', () => {
+      renderNode({ hasCatch: false, hasFinally: false });
+
+      expect(screen.getByText('✓ Try')).toBeInTheDocument();
+      expect(screen.queryByText('⚠ Catch')).not.toBeInTheDocument();
+      expect(screen.queryByText('⟳ Finally')).not.toBeInTheDocument();
+    });
+
+    it('should render with try and catch only', () => {
+      renderNode({ hasCatch: true, hasFinally: false });
+
+      expect(screen.getByText('✓ Try')).toBeInTheDocument();
+      expect(screen.getByText('⚠ Catch')).toBeInTheDocument();
+      expect(screen.queryByText('⟳ Finally')).not.toBeInTheDocument();
+    });
+
+    it('should render with try and finally only', () => {
+      renderNode({ hasCatch: false, hasFinally: true });
+
+      expect(screen.getByText('✓ Try')).toBeInTheDocument();
+      expect(screen.queryByText('⚠ Catch')).not.toBeInTheDocument();
+      expect(screen.getByText('⟳ Finally')).toBeInTheDocument();
+    });
+  });
+});