@marktoflow/gui 2.0.0-alpha.4 → 2.0.1

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/serviceIcons.test.ts

@@ -1,197 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { getServiceIcon, getServiceColor } from '../../src/client/utils/serviceIcons.js';
-import { HelpCircle } from 'lucide-react';
-
-describe('Service Icons', () => {
-  describe('getServiceIcon', () => {
-    it('should return icons for all standard services', () => {
-      const services = [
-        'slack',
-        'github',
-        'jira',
-        'gmail',
-        'outlook',
-        'linear',
-        'notion',
-        'discord',
-        'airtable',
-        'confluence',
-        'http',
-        'claude',
-        'opencode',
-        'ollama',
-      ];
-
-      services.forEach((service) => {
-        const icon = getServiceIcon(service);
-        expect(icon).toBeDefined();
-        expect(icon).not.toBe(HelpCircle);
-      });
-    });
-
-    it('should return icons for new integrations', () => {
-      const newServices = [
-        'stripe',
-        'teams',
-        'twilio',
-        'sendgrid',
-        'shopify',
-        'zendesk',
-        'mailchimp',
-        'asana',
-        'trello',
-        'dropbox',
-        's3',
-        'aws-s3',
-      ];
-
-      newServices.forEach((service) => {
-        const icon = getServiceIcon(service);
-        expect(icon).toBeDefined();
-        expect(icon).not.toBe(HelpCircle);
-      });
-    });
-
-    it('should return HelpCircle for unknown services', () => {
-      const icon = getServiceIcon('unknown-service');
-      expect(icon).toBe(HelpCircle);
-    });
-
-    it('should handle service names with dots (action paths)', () => {
-      const icon = getServiceIcon('slack.chat.postMessage');
-      expect(icon).toBeDefined();
-      expect(icon).not.toBe(HelpCircle);
-    });
-
-    it('should handle case insensitive service names', () => {
-      const lowerIcon = getServiceIcon('slack');
-      const upperIcon = getServiceIcon('SLACK');
-      expect(lowerIcon).toBe(upperIcon);
-    });
-  });
-
-  describe('getServiceColor', () => {
-    it('should return brand colors for standard services', () => {
-      const serviceColors = {
-        slack: '#4A154B',
-        github: '#24292e',
-        jira: '#0052CC',
-        gmail: '#EA4335',
-        outlook: '#0078D4',
-        discord: '#5865F2',
-      };
-
-      Object.entries(serviceColors).forEach(([service, expectedColor]) => {
-        const color = getServiceColor(service);
-        expect(color).toBe(expectedColor);
-      });
-    });
-
-    it('should return brand colors for new integrations', () => {
-      const newServiceColors = {
-        stripe: '#635BFF',
-        teams: '#6264A7',
-        twilio: '#F22F46',
-        sendgrid: '#1A82E2',
-        shopify: '#96BF48',
-        zendesk: '#03363D',
-        mailchimp: '#FFE01B',
-        asana: '#F06A6A',
-        trello: '#0079BF',
-        dropbox: '#0061FF',
-        's3': '#FF9900',
-        'aws-s3': '#FF9900',
-      };
-
-      Object.entries(newServiceColors).forEach(([service, expectedColor]) => {
-        const color = getServiceColor(service);
-        expect(color).toBe(expectedColor);
-      });
-    });
-
-    it('should return default gray color for unknown services', () => {
-      const color = getServiceColor('unknown-service');
-      expect(color).toBe('#6B7280');
-    });
-
-    it('should handle service names with dots', () => {
-      const color = getServiceColor('github.pulls.create');
-      expect(color).toBe('#24292e');
-    });
-
-    it('should handle case insensitive service names', () => {
-      const lowerColor = getServiceColor('stripe');
-      const upperColor = getServiceColor('STRIPE');
-      expect(lowerColor).toBe(upperColor);
-    });
-
-    it('should return valid hex colors', () => {
-      const services = [
-        'slack',
-        'stripe',
-        'teams',
-        'twilio',
-        'shopify',
-        'zendesk',
-        'unknown',
-      ];
-
-      services.forEach((service) => {
-        const color = getServiceColor(service);
-        expect(color).toMatch(/^#[0-9A-F]{6}$/i);
-      });
-    });
-  });
-
-  describe('Integration Coverage', () => {
-    it('should have icons for all 30 service integrations', () => {
-      const allServices = [
-        // Standard services
-        'slack',
-        'github',
-        'jira',
-        'gmail',
-        'outlook',
-        'linear',
-        'notion',
-        'discord',
-        'airtable',
-        'confluence',
-        'http',
-        'ollama',
-        'claude',
-        'opencode',
-        // New integrations
-        'stripe',
-        'teams',
-        'twilio',
-        'sendgrid',
-        'shopify',
-        'zendesk',
-        'mailchimp',
-        'asana',
-        'trello',
-        'dropbox',
-        'aws-s3',
-        // Database services
-        'postgres',
-        'mysql',
-        'supabase',
-        // Google services
-        'google-sheets',
-        'google-calendar',
-      ];
-
-      allServices.forEach((service) => {
-        const icon = getServiceIcon(service);
-        const color = getServiceColor(service);
-
-        // Icon should not be the fallback HelpCircle
-        expect(icon).toBeDefined();
-
-        // Color should be a valid hex color
-        expect(color).toMatch(/^#[0-9A-F]{6}$/i);
-      });
-    });
-  });
-});