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

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();
+    });
+  });
+});

package/tests/unit/WhileNode.test.tsx

@@ -0,0 +1,230 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ReactFlowProvider } from '@xyflow/react';
+import { WhileNode, type WhileNodeData } from '../../src/client/components/Canvas/WhileNode';
+
+const createMockNode = (data: Partial<WhileNodeData> = {}) => ({
+  id: 'while-1',
+  type: 'while' as const,
+  position: { x: 0, y: 0 },
+  data: {
+    id: 'while-1',
+    name: 'Retry API',
+    condition: '{{ retries < 3 }}',
+    maxIterations: 10,
+    status: 'pending' as const,
+    ...data,
+  },
+});
+
+const renderNode = (data: Partial<WhileNodeData> = {}) => {
+  const node = createMockNode(data);
+  return render(
+    <ReactFlowProvider>
+      <WhileNode
+        id={node.id}
+        type={node.type}
+        data={node.data}
+        selected={false}
+        isConnectable={true}
+        zIndex={0}
+        positionAbsoluteX={0}
+        positionAbsoluteY={0}
+        dragging={false}
+      />
+    </ReactFlowProvider>
+  );
+};
+
+describe('WhileNode', () => {
+  it('should render node with name, condition, and max iterations', () => {
+    renderNode();
+
+    expect(screen.getByText('Retry API')).toBeInTheDocument();
+    expect(screen.getByText('Loop')).toBeInTheDocument();
+    expect(screen.getByText('{{ retries < 3 }}')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+  });
+
+  it('should render default name when name is not provided', () => {
+    renderNode({ name: undefined });
+
+    expect(screen.getByText('While')).toBeInTheDocument();
+  });
+
+  it('should display condition label', () => {
+    renderNode();
+
+    expect(screen.getByText('Condition:')).toBeInTheDocument();
+  });
+
+  it('should display "Not set" when condition is empty', () => {
+    renderNode({ condition: '' });
+
+    expect(screen.getByText('Not set')).toBeInTheDocument();
+  });
+
+  it('should display max iterations label', () => {
+    renderNode();
+
+    expect(screen.getByText('Max Iterations:')).toBeInTheDocument();
+  });
+
+  it('should display default max iterations when not provided', () => {
+    renderNode({ maxIterations: undefined });
+
+    expect(screen.getByText('100')).toBeInTheDocument();
+  });
+
+  describe('status states', () => {
+    it('should render pending status', () => {
+      renderNode({ status: 'pending' });
+
+      const node = screen.getByText('Retry API').closest('.control-flow-node');
+      expect(node).toBeInTheDocument();
+    });
+
+    it('should render running status with animation', () => {
+      renderNode({ status: 'running' });
+
+      const node = screen.getByText('Retry API').closest('.control-flow-node');
+      expect(node).toHaveClass('running');
+    });
+
+    it('should render completed status', () => {
+      renderNode({ status: 'completed' });
+
+      const node = screen.getByText('Retry API').closest('.control-flow-node');
+      expect(node).toBeInTheDocument();
+    });
+
+    it('should render failed status', () => {
+      renderNode({ status: 'failed' });
+
+      const node = screen.getByText('Retry API').closest('.control-flow-node');
+      expect(node).toBeInTheDocument();
+    });
+  });
+
+  describe('iteration progress', () => {
+    it('should display current iteration when provided', () => {
+      renderNode({
+        currentIteration: 3,
+        maxIterations: 10,
+      });
+
+      expect(screen.getByText('Iterations')).toBeInTheDocument();
+      expect(screen.getByText('3 / 10')).toBeInTheDocument();
+    });
+
+    it('should display progress bar with correct width', () => {
+      const { container } = renderNode({
+        currentIteration: 5,
+        maxIterations: 10,
+      });
+
+      const progressBar = container.querySelector('.bg-orange-400, .bg-orange-500');
+      expect(progressBar).toBeInTheDocument();
+      expect(progressBar).toHaveAttribute('style', expect.stringContaining('50%'));
+    });
+
+    it('should display 0% progress when currentIteration is 0', () => {
+      const { container } = renderNode({
+        currentIteration: 0,
+        maxIterations: 10,
+      });
+
+      const progressBar = container.querySelector('.bg-orange-400, .bg-orange-500');
+      expect(progressBar).toBeInTheDocument();
+      expect(progressBar).toHaveAttribute('style', expect.stringContaining('0%'));
+    });
+
+    it('should display 100% progress when at max iterations', () => {
+      const { container } = renderNode({
+        currentIteration: 10,
+        maxIterations: 10,
+      });
+
+      const progressBar = container.querySelector('.bg-orange-400, .bg-orange-500');
+      expect(progressBar).toBeInTheDocument();
+      expect(progressBar).toHaveAttribute('style', expect.stringContaining('100%'));
+    });
+
+    it('should not display progress when currentIteration is undefined', () => {
+      renderNode({ currentIteration: undefined });
+
+      expect(screen.queryByText('Iterations')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('warning message', () => {
+    it('should display exit condition warning', () => {
+      renderNode();
+
+      expect(screen.getByText('⚠️')).toBeInTheDocument();
+      expect(screen.getByText('Exits when condition becomes false')).toBeInTheDocument();
+    });
+  });
+
+  describe('visual styling', () => {
+    it('should have orange gradient background', () => {
+      renderNode();
+
+      const node = screen.getByText('Retry API').closest('.control-flow-node');
+      expect(node).toHaveStyle({
+        background: 'linear-gradient(135deg, #fb923c 0%, #f97316 100%)',
+      });
+    });
+
+    it('should display condition with monospace font', () => {
+      renderNode();
+
+      const conditionElement = screen.getByText('{{ retries < 3 }}');
+      expect(conditionElement).toHaveClass('font-mono');
+    });
+  });
+
+  describe('selection state', () => {
+    it('should apply selected class when selected', () => {
+      const node = createMockNode();
+      const { container } = render(
+        <ReactFlowProvider>
+          <WhileNode
+            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('max iterations display', () => {
+    it('should handle custom max iterations', () => {
+      renderNode({ maxIterations: 50 });
+
+      expect(screen.getByText('50')).toBeInTheDocument();
+    });
+
+    it('should show progress against custom max iterations', () => {
+      const { container } = renderNode({
+        currentIteration: 25,
+        maxIterations: 50,
+      });
+
+      expect(screen.getByText('25 / 50')).toBeInTheDocument();
+      const progressBar = container.querySelector('.bg-orange-400, .bg-orange-500');
+      expect(progressBar).toBeInTheDocument();
+      expect(progressBar).toHaveAttribute('style', expect.stringContaining('50%'));
+    });
+  });
+});

package/tests/unit/agentStore.test.ts

@@ -0,0 +1,218 @@
+/**
+ * Tests for agent store
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useAgentStore } from '../../src/client/stores/agentStore';
+
+// Mock fetch
+global.fetch = vi.fn();
+
+describe('Agent Store', () => {
+  beforeEach(() => {
+    // Reset store
+    useAgentStore.setState({
+      providers: [],
+      activeProviderId: null,
+      isLoading: false,
+      error: null,
+    });
+
+    // Reset fetch mock
+    vi.clearAllMocks();
+  });
+
+  describe('loadProviders', () => {
+    it('should load providers successfully', async () => {
+      const mockProviders = [
+        {
+          id: 'copilot',
+          name: 'GitHub Copilot',
+          status: 'ready',
+          isActive: true,
+        },
+        {
+          id: 'claude',
+          name: 'Claude Code',
+          status: 'needs_config',
+          isActive: false,
+        },
+      ];
+
+      (global.fetch as any).mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({
+          activeProvider: 'copilot',
+          providers: mockProviders,
+        }),
+      });
+
+      const { loadProviders } = useAgentStore.getState();
+      await loadProviders();
+
+      const state = useAgentStore.getState();
+      expect(state.providers).toEqual(mockProviders);
+      expect(state.activeProviderId).toBe('copilot');
+      expect(state.isLoading).toBe(false);
+      expect(state.error).toBe(null);
+    });
+
+    it('should handle loading errors', async () => {
+      (global.fetch as any).mockRejectedValueOnce(new Error('Network error'));
+
+      const { loadProviders } = useAgentStore.getState();
+      await loadProviders();
+
+      const state = useAgentStore.getState();
+      expect(state.error).toBe('Network error');
+      expect(state.isLoading).toBe(false);
+    });
+
+    it('should handle HTTP errors', async () => {
+      (global.fetch as any).mockResolvedValueOnce({
+        ok: false,
+        status: 500,
+      });
+
+      const { loadProviders } = useAgentStore.getState();
+      await loadProviders();
+
+      const state = useAgentStore.getState();
+      expect(state.error).toBe('Failed to load providers');
+      expect(state.isLoading).toBe(false);
+    });
+
+    it('should set loading state during fetch', async () => {
+      let resolvePromise: any;
+      const promise = new Promise((resolve) => {
+        resolvePromise = resolve;
+      });
+
+      (global.fetch as any).mockReturnValueOnce(promise);
+
+      const { loadProviders } = useAgentStore.getState();
+      const loadPromise = loadProviders();
+
+      // Check loading state
+      expect(useAgentStore.getState().isLoading).toBe(true);
+
+      // Resolve promise
+      resolvePromise({
+        ok: true,
+        json: async () => ({ activeProvider: null, providers: [] }),
+      });
+
+      await loadPromise;
+      expect(useAgentStore.getState().isLoading).toBe(false);
+    });
+  });
+
+  describe('setProvider', () => {
+    it('should set provider successfully', async () => {
+      const mockProviders = [
+        {
+          id: 'copilot',
+          name: 'GitHub Copilot',
+          status: 'ready',
+          isActive: false,
+        },
+        {
+          id: 'claude',
+          name: 'Claude Code',
+          status: 'ready',
+          isActive: true,
+        },
+      ];
+
+      (global.fetch as any).mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({
+          success: true,
+          status: {
+            activeProvider: 'claude',
+            providers: mockProviders,
+          },
+        }),
+      });
+
+      const { setProvider } = useAgentStore.getState();
+      const result = await setProvider('claude');
+
+      expect(result).toBe(true);
+      const state = useAgentStore.getState();
+      expect(state.activeProviderId).toBe('claude');
+      expect(state.providers).toEqual(mockProviders);
+    });
+
+    it('should send configuration with request', async () => {
+      (global.fetch as any).mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({
+          success: true,
+          status: { activeProvider: 'claude', providers: [] },
+        }),
+      });
+
+      const { setProvider } = useAgentStore.getState();
+      await setProvider('claude', {
+        apiKey: 'test-key',
+        baseUrl: 'https://api.test.com',
+        model: 'claude-3',
+      });
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        '/api/ai/providers/claude',
+        expect.objectContaining({
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            apiKey: 'test-key',
+            baseUrl: 'https://api.test.com',
+            model: 'claude-3',
+          }),
+        })
+      );
+    });
+
+    it('should handle set provider errors', async () => {
+      (global.fetch as any).mockRejectedValueOnce(new Error('Network error'));
+
+      const { setProvider } = useAgentStore.getState();
+      const result = await setProvider('claude');
+
+      expect(result).toBe(false);
+      const state = useAgentStore.getState();
+      expect(state.error).toBe('Network error');
+    });
+
+    it('should handle HTTP errors', async () => {
+      (global.fetch as any).mockResolvedValueOnce({
+        ok: false,
+        json: async () => ({ message: 'Provider not found' }),
+      });
+
+      const { setProvider } = useAgentStore.getState();
+      const result = await setProvider('invalid');
+
+      expect(result).toBe(false);
+      const state = useAgentStore.getState();
+      expect(state.error).toBe('Provider not found');
+    });
+  });
+
+  describe('refreshStatus', () => {
+    it('should call loadProviders', async () => {
+      (global.fetch as any).mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ activeProvider: null, providers: [] }),
+      });
+
+      const { refreshStatus } = useAgentStore.getState();
+      await refreshStatus();
+
+      expect(global.fetch).toHaveBeenCalledWith('/api/ai/providers');
+    });
+  });
+});