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

package/tests/unit/layoutStore.test.ts

@@ -1,194 +0,0 @@
-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

@@ -1,152 +0,0 @@
-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

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