@marktoflow/gui 2.0.0-alpha.1

package/tests/unit/layoutStore.test.ts

@@ -0,0 +1,194 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useLayoutStore, getBreakpoint, BREAKPOINTS } from '../../src/client/stores/layoutStore';
+
+// Mock localStorage
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: (key: string) => store[key] || null,
+    setItem: (key: string, value: string) => { store[key] = value; },
+    removeItem: (key: string) => { delete store[key]; },
+    clear: () => { store = {}; },
+  };
+})();
+
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+
+describe('layoutStore', () => {
+  beforeEach(() => {
+    // Reset store state
+    useLayoutStore.setState({
+      sidebarOpen: true,
+      propertiesPanelOpen: true,
+      mobileMenuOpen: false,
+      breakpoint: 'desktop',
+    });
+    localStorageMock.clear();
+  });
+
+  describe('initial state', () => {
+    it('should have sidebar open by default', () => {
+      const state = useLayoutStore.getState();
+      expect(state.sidebarOpen).toBe(true);
+    });
+
+    it('should have properties panel open by default', () => {
+      const state = useLayoutStore.getState();
+      expect(state.propertiesPanelOpen).toBe(true);
+    });
+
+    it('should have mobile menu closed by default', () => {
+      const state = useLayoutStore.getState();
+      expect(state.mobileMenuOpen).toBe(false);
+    });
+
+    it('should default to desktop breakpoint', () => {
+      const state = useLayoutStore.getState();
+      expect(state.breakpoint).toBe('desktop');
+    });
+  });
+
+  describe('sidebar', () => {
+    it('should toggle sidebar', () => {
+      const { toggleSidebar } = useLayoutStore.getState();
+
+      toggleSidebar();
+      expect(useLayoutStore.getState().sidebarOpen).toBe(false);
+
+      toggleSidebar();
+      expect(useLayoutStore.getState().sidebarOpen).toBe(true);
+    });
+
+    it('should set sidebar open state', () => {
+      const { setSidebarOpen } = useLayoutStore.getState();
+
+      setSidebarOpen(false);
+      expect(useLayoutStore.getState().sidebarOpen).toBe(false);
+
+      setSidebarOpen(true);
+      expect(useLayoutStore.getState().sidebarOpen).toBe(true);
+    });
+  });
+
+  describe('properties panel', () => {
+    it('should toggle properties panel', () => {
+      const { togglePropertiesPanel } = useLayoutStore.getState();
+
+      togglePropertiesPanel();
+      expect(useLayoutStore.getState().propertiesPanelOpen).toBe(false);
+
+      togglePropertiesPanel();
+      expect(useLayoutStore.getState().propertiesPanelOpen).toBe(true);
+    });
+
+    it('should set properties panel open state', () => {
+      const { setPropertiesPanelOpen } = useLayoutStore.getState();
+
+      setPropertiesPanelOpen(false);
+      expect(useLayoutStore.getState().propertiesPanelOpen).toBe(false);
+
+      setPropertiesPanelOpen(true);
+      expect(useLayoutStore.getState().propertiesPanelOpen).toBe(true);
+    });
+  });
+
+  describe('mobile menu', () => {
+    it('should toggle mobile menu', () => {
+      const { toggleMobileMenu } = useLayoutStore.getState();
+
+      toggleMobileMenu();
+      expect(useLayoutStore.getState().mobileMenuOpen).toBe(true);
+
+      toggleMobileMenu();
+      expect(useLayoutStore.getState().mobileMenuOpen).toBe(false);
+    });
+
+    it('should set mobile menu open state', () => {
+      const { setMobileMenuOpen } = useLayoutStore.getState();
+
+      setMobileMenuOpen(true);
+      expect(useLayoutStore.getState().mobileMenuOpen).toBe(true);
+
+      setMobileMenuOpen(false);
+      expect(useLayoutStore.getState().mobileMenuOpen).toBe(false);
+    });
+  });
+
+  describe('breakpoint', () => {
+    it('should set breakpoint to mobile and close panels', () => {
+      const { setBreakpoint } = useLayoutStore.getState();
+
+      setBreakpoint('mobile');
+
+      const state = useLayoutStore.getState();
+      expect(state.breakpoint).toBe('mobile');
+      expect(state.sidebarOpen).toBe(false);
+      expect(state.propertiesPanelOpen).toBe(false);
+    });
+
+    it('should set breakpoint to tablet with sidebar open', () => {
+      const { setBreakpoint } = useLayoutStore.getState();
+
+      setBreakpoint('tablet');
+
+      const state = useLayoutStore.getState();
+      expect(state.breakpoint).toBe('tablet');
+      expect(state.sidebarOpen).toBe(true);
+      expect(state.propertiesPanelOpen).toBe(false);
+    });
+
+    it('should set breakpoint to desktop with all panels open', () => {
+      // First set to mobile
+      useLayoutStore.getState().setBreakpoint('mobile');
+
+      // Then set to desktop
+      useLayoutStore.getState().setBreakpoint('desktop');
+
+      const state = useLayoutStore.getState();
+      expect(state.breakpoint).toBe('desktop');
+      expect(state.sidebarOpen).toBe(true);
+      expect(state.propertiesPanelOpen).toBe(true);
+    });
+  });
+
+  describe('closeAllPanels', () => {
+    it('should close all panels', () => {
+      const { closeAllPanels } = useLayoutStore.getState();
+
+      closeAllPanels();
+
+      const state = useLayoutStore.getState();
+      expect(state.sidebarOpen).toBe(false);
+      expect(state.propertiesPanelOpen).toBe(false);
+      expect(state.mobileMenuOpen).toBe(false);
+    });
+  });
+});
+
+describe('getBreakpoint', () => {
+  it('should return mobile for small widths', () => {
+    expect(getBreakpoint(320)).toBe('mobile');
+    expect(getBreakpoint(500)).toBe('mobile');
+    expect(getBreakpoint(767)).toBe('mobile');
+  });
+
+  it('should return tablet for medium widths', () => {
+    expect(getBreakpoint(768)).toBe('tablet');
+    expect(getBreakpoint(900)).toBe('tablet');
+    expect(getBreakpoint(1023)).toBe('tablet');
+  });
+
+  it('should return desktop for large widths', () => {
+    expect(getBreakpoint(1024)).toBe('desktop');
+    expect(getBreakpoint(1280)).toBe('desktop');
+    expect(getBreakpoint(1920)).toBe('desktop');
+  });
+});
+
+describe('BREAKPOINTS', () => {
+  it('should have correct breakpoint values', () => {
+    expect(BREAKPOINTS.mobile).toBe(0);
+    expect(BREAKPOINTS.tablet).toBe(768);
+    expect(BREAKPOINTS.desktop).toBe(1024);
+  });
+});

package/tests/unit/navigationStore.test.ts

@@ -0,0 +1,152 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useNavigationStore } from '../../src/client/stores/navigationStore';
+
+describe('navigationStore', () => {
+  beforeEach(() => {
+    // Reset store state before each test
+    useNavigationStore.setState({ breadcrumbs: [] });
+  });
+
+  describe('setRootWorkflow', () => {
+    it('should set the root workflow as the only breadcrumb', () => {
+      const { setRootWorkflow } = useNavigationStore.getState();
+
+      setRootWorkflow({
+        id: 'root-1',
+        name: 'Root Workflow',
+        path: '/workflows/root.md',
+      });
+
+      const state = useNavigationStore.getState();
+      expect(state.breadcrumbs).toHaveLength(1);
+      expect(state.breadcrumbs[0].id).toBe('root-1');
+      expect(state.breadcrumbs[0].name).toBe('Root Workflow');
+      expect(state.breadcrumbs[0].path).toBe('/workflows/root.md');
+    });
+
+    it('should replace existing breadcrumbs', () => {
+      const { setRootWorkflow, pushWorkflow } = useNavigationStore.getState();
+
+      setRootWorkflow({ id: 'root-1', name: 'Root 1', path: '/root1.md' });
+      pushWorkflow({ id: 'sub-1', name: 'Sub 1', path: '/sub1.md' });
+
+      // Reset with new root
+      setRootWorkflow({ id: 'root-2', name: 'Root 2', path: '/root2.md' });
+
+      const state = useNavigationStore.getState();
+      expect(state.breadcrumbs).toHaveLength(1);
+      expect(state.breadcrumbs[0].id).toBe('root-2');
+    });
+  });
+
+  describe('pushWorkflow', () => {
+    it('should add a workflow to the breadcrumb trail', () => {
+      const { setRootWorkflow, pushWorkflow } = useNavigationStore.getState();
+
+      setRootWorkflow({ id: 'root', name: 'Root', path: '/root.md' });
+      pushWorkflow({ id: 'sub-1', name: 'Sub Workflow 1', path: '/sub1.md' });
+
+      const state = useNavigationStore.getState();
+      expect(state.breadcrumbs).toHaveLength(2);
+      expect(state.breadcrumbs[1].id).toBe('sub-1');
+    });
+
+    it('should allow multiple nested workflows', () => {
+      const { setRootWorkflow, pushWorkflow } = useNavigationStore.getState();
+
+      setRootWorkflow({ id: 'root', name: 'Root', path: '/root.md' });
+      pushWorkflow({ id: 'sub-1', name: 'Sub 1', path: '/sub1.md' });
+      pushWorkflow({ id: 'sub-2', name: 'Sub 2', path: '/sub2.md' });
+      pushWorkflow({ id: 'sub-3', name: 'Sub 3', path: '/sub3.md' });
+
+      const state = useNavigationStore.getState();
+      expect(state.breadcrumbs).toHaveLength(4);
+      expect(state.breadcrumbs.map(b => b.id)).toEqual(['root', 'sub-1', 'sub-2', 'sub-3']);
+    });
+  });
+
+  describe('popWorkflow', () => {
+    it('should remove the last workflow from the trail', () => {
+      const { setRootWorkflow, pushWorkflow, popWorkflow } = useNavigationStore.getState();
+
+      setRootWorkflow({ id: 'root', name: 'Root', path: '/root.md' });
+      pushWorkflow({ id: 'sub-1', name: 'Sub 1', path: '/sub1.md' });
+      pushWorkflow({ id: 'sub-2', name: 'Sub 2', path: '/sub2.md' });
+
+      popWorkflow();
+
+      const state = useNavigationStore.getState();
+      expect(state.breadcrumbs).toHaveLength(2);
+      expect(state.breadcrumbs[1].id).toBe('sub-1');
+    });
+
+    it('should not remove the root workflow', () => {
+      const { setRootWorkflow, popWorkflow } = useNavigationStore.getState();
+
+      setRootWorkflow({ id: 'root', name: 'Root', path: '/root.md' });
+      popWorkflow();
+      popWorkflow(); // Try to pop again
+
+      const state = useNavigationStore.getState();
+      expect(state.breadcrumbs).toHaveLength(1);
+      expect(state.breadcrumbs[0].id).toBe('root');
+    });
+  });
+
+  describe('popToIndex', () => {
+    it('should navigate to a specific breadcrumb', () => {
+      const { setRootWorkflow, pushWorkflow, popToIndex } = useNavigationStore.getState();
+
+      setRootWorkflow({ id: 'root', name: 'Root', path: '/root.md' });
+      pushWorkflow({ id: 'sub-1', name: 'Sub 1', path: '/sub1.md' });
+      pushWorkflow({ id: 'sub-2', name: 'Sub 2', path: '/sub2.md' });
+      pushWorkflow({ id: 'sub-3', name: 'Sub 3', path: '/sub3.md' });
+
+      popToIndex(1); // Go to sub-1
+
+      const state = useNavigationStore.getState();
+      expect(state.breadcrumbs).toHaveLength(2);
+      expect(state.breadcrumbs[1].id).toBe('sub-1');
+    });
+
+    it('should navigate to root', () => {
+      const { setRootWorkflow, pushWorkflow, popToIndex } = useNavigationStore.getState();
+
+      setRootWorkflow({ id: 'root', name: 'Root', path: '/root.md' });
+      pushWorkflow({ id: 'sub-1', name: 'Sub 1', path: '/sub1.md' });
+
+      popToIndex(0); // Go to root
+
+      const state = useNavigationStore.getState();
+      expect(state.breadcrumbs).toHaveLength(1);
+      expect(state.breadcrumbs[0].id).toBe('root');
+    });
+
+    it('should handle invalid index gracefully', () => {
+      const { setRootWorkflow, pushWorkflow, popToIndex } = useNavigationStore.getState();
+
+      setRootWorkflow({ id: 'root', name: 'Root', path: '/root.md' });
+      pushWorkflow({ id: 'sub-1', name: 'Sub 1', path: '/sub1.md' });
+
+      popToIndex(5); // Invalid index
+      popToIndex(-1); // Invalid index
+
+      const state = useNavigationStore.getState();
+      expect(state.breadcrumbs).toHaveLength(2); // Should remain unchanged
+    });
+  });
+
+  describe('resetNavigation', () => {
+    it('should clear all breadcrumbs', () => {
+      const { setRootWorkflow, pushWorkflow, resetNavigation } = useNavigationStore.getState();
+
+      setRootWorkflow({ id: 'root', name: 'Root', path: '/root.md' });
+      pushWorkflow({ id: 'sub-1', name: 'Sub 1', path: '/sub1.md' });
+
+      resetNavigation();
+
+      const state = useNavigationStore.getState();
+      expect(state.breadcrumbs).toHaveLength(0);
+    });
+  });
+});

package/tests/unit/stepValidation.test.ts

@@ -0,0 +1,226 @@
+import { describe, it, expect } from 'vitest';
+import { validateStep, getFieldError, hasFieldError } from '../../src/client/utils/stepValidation';
+
+describe('stepValidation', () => {
+  describe('validateStep', () => {
+    it('should pass for valid step with action', () => {
+      const step = {
+        id: 'valid-step',
+        action: 'slack.chat.postMessage',
+        inputs: {},
+      };
+
+      const result = validateStep(step);
+      expect(result.valid).toBe(true);
+      expect(result.errors).toHaveLength(0);
+    });
+
+    it('should pass for valid step with workflow', () => {
+      const step = {
+        id: 'sub-workflow',
+        workflow: './path/to/workflow.md',
+        inputs: {},
+      };
+
+      const result = validateStep(step);
+      expect(result.valid).toBe(true);
+      expect(result.errors).toHaveLength(0);
+    });
+
+    it('should fail when id is empty', () => {
+      const step = {
+        id: '',
+        action: 'slack.chat.postMessage',
+        inputs: {},
+      };
+
+      const result = validateStep(step);
+      expect(result.valid).toBe(false);
+      expect(result.errors.some((e) => e.field === 'id')).toBe(true);
+    });
+
+    it('should fail when id starts with number', () => {
+      const step = {
+        id: '123-step',
+        action: 'slack.chat.postMessage',
+        inputs: {},
+      };
+
+      const result = validateStep(step);
+      expect(result.valid).toBe(false);
+      expect(result.errors.some((e) => e.field === 'id')).toBe(true);
+    });
+
+    it('should fail when neither action nor workflow is provided', () => {
+      const step = {
+        id: 'empty-step',
+        inputs: {},
+      };
+
+      const result = validateStep(step);
+      expect(result.valid).toBe(false);
+      expect(result.errors.some((e) => e.field === 'action')).toBe(true);
+    });
+
+    it('should fail when action is not in correct format', () => {
+      const step = {
+        id: 'bad-action',
+        action: 'invalid',
+        inputs: {},
+      };
+
+      const result = validateStep(step);
+      expect(result.valid).toBe(false);
+      expect(result.errors.some((e) => e.field === 'action')).toBe(true);
+    });
+
+    it('should pass for valid action formats', () => {
+      // Two-part action
+      let step = {
+        id: 'step-1',
+        action: 'http.get',
+        inputs: {},
+      };
+      expect(validateStep(step).valid).toBe(true);
+
+      // Three-part action
+      step = {
+        id: 'step-2',
+        action: 'slack.chat.postMessage',
+        inputs: {},
+      };
+      expect(validateStep(step).valid).toBe(true);
+    });
+
+    it('should fail for invalid workflow extensions', () => {
+      const step = {
+        id: 'sub-workflow',
+        workflow: './path/to/workflow.txt',
+        inputs: {},
+      };
+
+      const result = validateStep(step);
+      expect(result.valid).toBe(false);
+      expect(result.errors.some((e) => e.field === 'workflow')).toBe(true);
+    });
+
+    it('should pass for valid workflow extensions', () => {
+      const extensions = ['.md', '.yaml', '.yml'];
+      for (const ext of extensions) {
+        const step = {
+          id: 'sub-workflow',
+          workflow: `./path/to/workflow${ext}`,
+          inputs: {},
+        };
+        expect(validateStep(step).valid).toBe(true);
+      }
+    });
+
+    it('should fail for invalid output variable name', () => {
+      const step = {
+        id: 'step',
+        action: 'http.get',
+        inputs: {},
+        outputVariable: '123invalid',
+      };
+
+      const result = validateStep(step);
+      expect(result.valid).toBe(false);
+      expect(result.errors.some((e) => e.field === 'outputVariable')).toBe(true);
+    });
+
+    it('should pass for valid output variable name', () => {
+      const step = {
+        id: 'step',
+        action: 'http.get',
+        inputs: {},
+        outputVariable: 'result_data',
+      };
+
+      expect(validateStep(step).valid).toBe(true);
+    });
+
+    it('should fail for invalid timeout', () => {
+      const step = {
+        id: 'step',
+        action: 'http.get',
+        inputs: {},
+        timeout: -5,
+      };
+
+      const result = validateStep(step);
+      expect(result.valid).toBe(false);
+      expect(result.errors.some((e) => e.field === 'timeout')).toBe(true);
+    });
+
+    it('should validate error handling', () => {
+      const step = {
+        id: 'step',
+        action: 'http.get',
+        inputs: {},
+        errorHandling: {
+          action: 'invalid' as any,
+        },
+      };
+
+      const result = validateStep(step);
+      expect(result.valid).toBe(false);
+      expect(result.errors.some((e) => e.field === 'errorHandling.action')).toBe(true);
+    });
+
+    it('should validate retry settings', () => {
+      const step = {
+        id: 'step',
+        action: 'http.get',
+        inputs: {},
+        errorHandling: {
+          action: 'retry' as const,
+          maxRetries: 0,
+          retryDelay: -100,
+        },
+      };
+
+      const result = validateStep(step);
+      expect(result.valid).toBe(false);
+      expect(result.errors.some((e) => e.field === 'errorHandling.maxRetries')).toBe(true);
+      expect(result.errors.some((e) => e.field === 'errorHandling.retryDelay')).toBe(true);
+    });
+
+    it('should fail for empty conditions', () => {
+      const step = {
+        id: 'step',
+        action: 'http.get',
+        inputs: {},
+        conditions: ['valid condition', '', 'another'],
+      };
+
+      const result = validateStep(step);
+      expect(result.valid).toBe(false);
+      expect(result.errors.some((e) => e.field === 'conditions[1]')).toBe(true);
+    });
+  });
+
+  describe('getFieldError', () => {
+    it('should return error message for field', () => {
+      const errors = [
+        { field: 'id', message: 'ID is required' },
+        { field: 'action', message: 'Action is invalid' },
+      ];
+
+      expect(getFieldError(errors, 'id')).toBe('ID is required');
+      expect(getFieldError(errors, 'action')).toBe('Action is invalid');
+      expect(getFieldError(errors, 'name')).toBeUndefined();
+    });
+  });
+
+  describe('hasFieldError', () => {
+    it('should return true if field has error', () => {
+      const errors = [
+        { field: 'id', message: 'ID is required' },
+      ];
+
+      expect(hasFieldError(errors, 'id')).toBe(true);
+      expect(hasFieldError(errors, 'name')).toBe(false);
+    });
+  });
+});