meno-core 1.0.0

package/lib/test-utils/factories/StoreMockFactory.ts

@@ -0,0 +1,370 @@
+/**
+ * Store Mock Factory
+ * Properly typed mock factories for Zustand stores
+ */
+
+import { mock } from 'bun:test';
+import type { ComponentNode, JSONPage, PageData } from '../../shared/types';
+import type { Path } from '../../shared/pathArrayUtils';
+
+// ========== FileStore Types ==========
+
+export interface FileItem {
+  name: string;
+  path: string;
+  type: 'page' | 'component';
+}
+
+export interface NavigationContext {
+  path: string;
+  selectedTreeItem: Path | null;
+}
+
+export interface ApiError {
+  message: string;
+  code?: string;
+  status?: number;
+}
+
+export interface MockFileStoreState {
+  files: FileItem[];
+  selectedFile: FileItem | null;
+  navigationHistory: NavigationContext[];
+  iframeUrl: string;
+  lastError: ApiError | null;
+  isRecoverable: boolean;
+  pendingOperation: 'loading' | 'saving' | null;
+}
+
+export interface MockFileStoreActions {
+  setFiles: ReturnType<typeof mock>;
+  setSelectedFile: ReturnType<typeof mock>;
+  setIframeUrl: ReturnType<typeof mock>;
+  pushNavigationHistory: ReturnType<typeof mock>;
+  popNavigationHistory: ReturnType<typeof mock>;
+  clearNavigationHistory: ReturnType<typeof mock>;
+  setLastError: ReturnType<typeof mock>;
+  setPendingOperation: ReturnType<typeof mock>;
+  clearError: ReturnType<typeof mock>;
+}
+
+export type TypedMockFileStore = MockFileStoreState & MockFileStoreActions & {
+  /** Get current state (for assertions) */
+  getState: () => MockFileStoreState;
+};
+
+export function createTypedMockFileStore(
+  initialState: Partial<MockFileStoreState> = {}
+): TypedMockFileStore {
+  const state: MockFileStoreState = {
+    files: [],
+    selectedFile: null,
+    navigationHistory: [],
+    iframeUrl: '/',
+    lastError: null,
+    isRecoverable: false,
+    pendingOperation: null,
+    ...initialState,
+  };
+
+  const store: TypedMockFileStore = {
+    ...state,
+    setFiles: mock((files: FileItem[]) => {
+      state.files = files;
+      store.files = files;
+    }),
+    setSelectedFile: mock((file: FileItem | null) => {
+      state.selectedFile = file;
+      store.selectedFile = file;
+    }),
+    setIframeUrl: mock((url: string) => {
+      state.iframeUrl = url;
+      store.iframeUrl = url;
+    }),
+    pushNavigationHistory: mock((context: NavigationContext) => {
+      state.navigationHistory.push(context);
+    }),
+    popNavigationHistory: mock(() => {
+      return state.navigationHistory.pop() ?? null;
+    }),
+    clearNavigationHistory: mock(() => {
+      state.navigationHistory = [];
+    }),
+    setLastError: mock((error: ApiError | null, isRecoverable = false) => {
+      state.lastError = error;
+      state.isRecoverable = isRecoverable;
+      store.lastError = error;
+      store.isRecoverable = isRecoverable;
+    }),
+    setPendingOperation: mock((op: 'loading' | 'saving' | null) => {
+      state.pendingOperation = op;
+      store.pendingOperation = op;
+    }),
+    clearError: mock(() => {
+      state.lastError = null;
+      state.isRecoverable = false;
+      store.lastError = null;
+      store.isRecoverable = false;
+    }),
+    getState: () => ({ ...state }),
+  };
+
+  return store;
+}
+
+// ========== SelectionStore Types ==========
+
+export interface MockSelectionStoreState {
+  selectedTreeItem: Path | null;
+  selectedItemData: ComponentNode | null;
+  clipboard: ComponentNode | null;
+  hoveredPath: Path | null;
+}
+
+export interface MockSelectionStoreActions {
+  setSelectedTreeItem: ReturnType<typeof mock>;
+  setSelectedItemData: ReturnType<typeof mock>;
+  setClipboard: ReturnType<typeof mock>;
+  setHoveredPath: ReturnType<typeof mock>;
+  clearSelection: ReturnType<typeof mock>;
+  copyNode: ReturnType<typeof mock>;
+  pasteNode: ReturnType<typeof mock>;
+}
+
+export type TypedMockSelectionStore = MockSelectionStoreState &
+  MockSelectionStoreActions & {
+    getState: () => MockSelectionStoreState;
+  };
+
+export function createTypedMockSelectionStore(
+  initialState: Partial<MockSelectionStoreState> = {}
+): TypedMockSelectionStore {
+  const state: MockSelectionStoreState = {
+    selectedTreeItem: null,
+    selectedItemData: null,
+    clipboard: null,
+    hoveredPath: null,
+    ...initialState,
+  };
+
+  const store: TypedMockSelectionStore = {
+    ...state,
+    setSelectedTreeItem: mock((path: Path | null) => {
+      state.selectedTreeItem = path;
+      store.selectedTreeItem = path;
+    }),
+    setSelectedItemData: mock((data: ComponentNode | null) => {
+      state.selectedItemData = data;
+      store.selectedItemData = data;
+    }),
+    setClipboard: mock((node: ComponentNode | null) => {
+      state.clipboard = node;
+      store.clipboard = node;
+    }),
+    setHoveredPath: mock((path: Path | null) => {
+      state.hoveredPath = path;
+      store.hoveredPath = path;
+    }),
+    clearSelection: mock(() => {
+      state.selectedTreeItem = null;
+      state.selectedItemData = null;
+      store.selectedTreeItem = null;
+      store.selectedItemData = null;
+    }),
+    copyNode: mock(() => {
+      if (state.selectedItemData) {
+        state.clipboard = structuredClone(state.selectedItemData);
+        store.clipboard = state.clipboard;
+      }
+    }),
+    pasteNode: mock(() => {
+      return state.clipboard ? structuredClone(state.clipboard) : null;
+    }),
+    getState: () => ({ ...state }),
+  };
+
+  return store;
+}
+
+// ========== NodeStore Types ==========
+
+export interface MockNodeStoreState {
+  pageData: PageData | null;
+  isDirty: boolean;
+}
+
+export interface MockNodeStoreActions {
+  setPageData: ReturnType<typeof mock>;
+  updateNode: ReturnType<typeof mock>;
+  deleteNode: ReturnType<typeof mock>;
+  addNode: ReturnType<typeof mock>;
+  moveNode: ReturnType<typeof mock>;
+  markDirty: ReturnType<typeof mock>;
+  markClean: ReturnType<typeof mock>;
+}
+
+export type TypedMockNodeStore = MockNodeStoreState &
+  MockNodeStoreActions & {
+    getState: () => MockNodeStoreState;
+  };
+
+export function createTypedMockNodeStore(
+  initialState: Partial<MockNodeStoreState> = {}
+): TypedMockNodeStore {
+  const state: MockNodeStoreState = {
+    pageData: null,
+    isDirty: false,
+    ...initialState,
+  };
+
+  const store: TypedMockNodeStore = {
+    ...state,
+    setPageData: mock((data: PageData | null) => {
+      state.pageData = data;
+      store.pageData = data;
+      state.isDirty = false;
+      store.isDirty = false;
+    }),
+    updateNode: mock((path: Path, updates: Partial<ComponentNode>) => {
+      state.isDirty = true;
+      store.isDirty = true;
+    }),
+    deleteNode: mock((path: Path) => {
+      state.isDirty = true;
+      store.isDirty = true;
+    }),
+    addNode: mock((parentPath: Path, node: ComponentNode, index?: number) => {
+      state.isDirty = true;
+      store.isDirty = true;
+    }),
+    moveNode: mock((fromPath: Path, toPath: Path) => {
+      state.isDirty = true;
+      store.isDirty = true;
+    }),
+    markDirty: mock(() => {
+      state.isDirty = true;
+      store.isDirty = true;
+    }),
+    markClean: mock(() => {
+      state.isDirty = false;
+      store.isDirty = false;
+    }),
+    getState: () => ({ ...state }),
+  };
+
+  return store;
+}
+
+// ========== ComponentStore Types ==========
+
+export interface MockComponentStoreState {
+  components: Map<string, unknown>;
+  loading: boolean;
+}
+
+export interface MockComponentStoreActions {
+  setComponents: ReturnType<typeof mock>;
+  getComponent: ReturnType<typeof mock>;
+  hasComponent: ReturnType<typeof mock>;
+  setLoading: ReturnType<typeof mock>;
+}
+
+export type TypedMockComponentStore = MockComponentStoreState &
+  MockComponentStoreActions & {
+    getState: () => MockComponentStoreState;
+  };
+
+export function createTypedMockComponentStore(
+  initialState: Partial<MockComponentStoreState> = {}
+): TypedMockComponentStore {
+  const state: MockComponentStoreState = {
+    components: new Map(),
+    loading: false,
+    ...initialState,
+  };
+
+  const store: TypedMockComponentStore = {
+    ...state,
+    setComponents: mock((components: Map<string, unknown>) => {
+      state.components = components;
+      store.components = components;
+    }),
+    getComponent: mock((name: string) => {
+      return state.components.get(name);
+    }),
+    hasComponent: mock((name: string) => {
+      return state.components.has(name);
+    }),
+    setLoading: mock((loading: boolean) => {
+      state.loading = loading;
+      store.loading = loading;
+    }),
+    getState: () => ({ ...state }),
+  };
+
+  return store;
+}
+
+// ========== EditorServices Mock ==========
+
+export interface TypedMockEditorServices {
+  fileService: {
+    loadAllFiles: ReturnType<typeof mock>;
+    loadFileData: ReturnType<typeof mock>;
+    saveFileData: ReturnType<typeof mock>;
+    saveComponentJS: ReturnType<typeof mock>;
+    saveComponentCSS: ReturnType<typeof mock>;
+  };
+  nodeService: {
+    addElement: ReturnType<typeof mock>;
+    deleteElement: ReturnType<typeof mock>;
+    moveElement: ReturnType<typeof mock>;
+    copyNode: ReturnType<typeof mock>;
+    pasteNode: ReturnType<typeof mock>;
+  };
+  componentService: {
+    loadComponentDefinition: ReturnType<typeof mock>;
+    createFromSelection: ReturnType<typeof mock>;
+  };
+  fileStoreService: {
+    loadFiles: ReturnType<typeof mock>;
+    selectFile: ReturnType<typeof mock>;
+    reloadSelectedFilePreservingSelection: ReturnType<typeof mock>;
+  };
+}
+
+export function createTypedMockEditorServices(): TypedMockEditorServices {
+  return {
+    fileService: {
+      loadAllFiles: mock(() =>
+        Promise.resolve({ pages: [], components: [] })
+      ),
+      loadFileData: mock(() =>
+        Promise.resolve({ component: { type: 'div', children: [] } })
+      ),
+      saveFileData: mock(() => Promise.resolve()),
+      saveComponentJS: mock(() => Promise.resolve()),
+      saveComponentCSS: mock(() => Promise.resolve()),
+    },
+    nodeService: {
+      addElement: mock(() => Promise.resolve()),
+      deleteElement: mock(() => Promise.resolve()),
+      moveElement: mock(() => Promise.resolve()),
+      copyNode: mock(() => Promise.resolve()),
+      pasteNode: mock(() => Promise.resolve()),
+    },
+    componentService: {
+      loadComponentDefinition: mock(() => Promise.resolve()),
+      createFromSelection: mock(() => Promise.resolve()),
+    },
+    fileStoreService: {
+      loadFiles: mock(() => Promise.resolve()),
+      selectFile: mock(() =>
+        Promise.resolve({ component: { type: 'div', children: [] } })
+      ),
+      reloadSelectedFilePreservingSelection: mock(() =>
+        Promise.resolve({ component: { type: 'div', children: [] } })
+      ),
+    },
+  };
+}

package/lib/test-utils/factories/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Test Factories
+ * Re-export all typed mock factories
+ */
+
+export * from './DomMockFactory';
+export * from './FetchMockFactory';
+export * from './EventMockFactory';
+export * from './StoreMockFactory';
+export * from './ConsoleMockFactory';
+export * from './ServerMockFactory';

package/lib/test-utils/fixtures.ts

@@ -0,0 +1,134 @@
+/**
+ * Test Fixtures
+ * Common test data and fixtures for reuse across tests
+ */
+
+import type { Path } from "../shared/pathArrayUtils";
+
+/**
+ * Common test paths
+ */
+export const TEST_PATHS = {
+  ROOT: [0] as Path,
+  HEADER: [0, 0] as Path,
+  CONTENT: [0, 1] as Path,
+  FOOTER: [0, 2] as Path,
+  BUTTON_PRIMARY: [0, 1, 0] as Path,
+  BUTTON_SECONDARY: [0, 1, 1] as Path,
+  CARD: [1] as Path,
+  CARD_TITLE: [1, 0] as Path,
+  CARD_CONTENT: [1, 1] as Path,
+};
+
+/**
+ * Common component names for testing
+ */
+export const TEST_COMPONENTS = {
+  BUTTON: "Button",
+  CARD: "Card",
+  HEADER: "Header",
+  FOOTER: "Footer",
+  LAYOUT: "Layout",
+  GRID: "Grid",
+  FORM: "Form",
+  INPUT: "Input",
+};
+
+/**
+ * Sample component structures
+ */
+export const SAMPLE_STRUCTURES = {
+  button: {
+    type: "button",
+    props: {
+      className: "btn",
+      onClick: "handleClick",
+    },
+    children: ["Click me"],
+  },
+  card: {
+    type: "div",
+    props: {
+      className: "card",
+    },
+    children: [
+      {
+        type: "h3",
+        props: { className: "card-title" },
+        children: ["Card Title"],
+      },
+      {
+        type: "div",
+        props: { className: "card-content" },
+        children: ["Card content here"],
+      },
+    ],
+  },
+  layout: {
+    type: "div",
+    props: {
+      className: "layout",
+    },
+    children: [
+      {
+        type: "header",
+        children: ["Header"],
+      },
+      {
+        type: "main",
+        children: ["Content"],
+      },
+      {
+        type: "footer",
+        children: ["Footer"],
+      },
+    ],
+  },
+};
+
+/**
+ * Sample component props
+ */
+export const SAMPLE_PROPS = {
+  buttonPrimary: {
+    variant: "primary",
+    size: "md",
+    disabled: false,
+  },
+  buttonSecondary: {
+    variant: "secondary",
+    size: "lg",
+    disabled: false,
+  },
+  cardVariant: {
+    variant: "elevated",
+    compact: false,
+  },
+  layoutProps: {
+    spacing: "default",
+    responsive: true,
+  },
+};
+
+/**
+ * Error messages for testing error handling
+ */
+export const ERROR_MESSAGES = {
+  RENDER_ERROR: "Component render failed",
+  STRUCTURE_MISSING: "Component structure missing",
+  INVALID_PROP_TYPE: "Invalid prop type",
+  TEMPLATE_ERROR: "Template evaluation error",
+  COMPONENT_NOT_FOUND: "Component not found",
+  PATH_RESOLUTION: "Failed to resolve path",
+};
+
+/**
+ * Default test configuration
+ */
+export const DEFAULT_TEST_CONFIG = {
+  timeout: 5000,
+  scrollBehavior: "smooth" as const,
+  outlineColor: "#007acc",
+  outlineWidth: "2px",
+  outlineStyle: "solid" as const,
+};

package/lib/test-utils/helpers/asyncHelpers.test.ts

@@ -0,0 +1,112 @@
+import { describe, test, expect } from 'bun:test';
+import {
+  waitFor,
+  flushPromises,
+  wait,
+  createDeferred,
+  retry,
+  createCallCounter,
+} from './asyncHelpers';
+
+describe('asyncHelpers', () => {
+  describe('waitFor', () => {
+    test('resolves when condition is true', async () => {
+      let value = false;
+      setTimeout(() => { value = true; }, 50);
+      await waitFor(() => value);
+      expect(value).toBe(true);
+    });
+
+    test('throws on timeout', async () => {
+      await expect(
+        waitFor(() => false, { timeout: 100 })
+      ).rejects.toThrow('timed out');
+    });
+
+    test('handles async conditions', async () => {
+      let value = false;
+      setTimeout(() => { value = true; }, 50);
+      await waitFor(async () => value);
+      expect(value).toBe(true);
+    });
+  });
+
+  describe('flushPromises', () => {
+    test('waits for microtask queue', async () => {
+      let resolved = false;
+      Promise.resolve().then(() => { resolved = true; });
+      expect(resolved).toBe(false);
+      await flushPromises();
+      expect(resolved).toBe(true);
+    });
+  });
+
+  describe('wait', () => {
+    test('waits for specified time', async () => {
+      const start = Date.now();
+      await wait(50);
+      const elapsed = Date.now() - start;
+      expect(elapsed).toBeGreaterThanOrEqual(45);
+    });
+  });
+
+  describe('createDeferred', () => {
+    test('creates promise with external resolve', async () => {
+      const deferred = createDeferred<number>();
+      setTimeout(() => deferred.resolve(42), 10);
+      const result = await deferred.promise;
+      expect(result).toBe(42);
+    });
+
+    test('creates promise with external reject', async () => {
+      const deferred = createDeferred<number>();
+      setTimeout(() => deferred.reject(new Error('Failed')), 10);
+      await expect(deferred.promise).rejects.toThrow('Failed');
+    });
+  });
+
+  describe('retry', () => {
+    test('returns result on first success', async () => {
+      const fn = () => 42;
+      const result = await retry(fn);
+      expect(result).toBe(42);
+    });
+
+    test('retries on failure', async () => {
+      let attempts = 0;
+      const fn = () => {
+        attempts++;
+        if (attempts < 3) throw new Error('Not yet');
+        return 42;
+      };
+      const result = await retry(fn, { maxAttempts: 3, delay: 10 });
+      expect(result).toBe(42);
+      expect(attempts).toBe(3);
+    });
+
+    test('throws after max attempts', async () => {
+      const fn = () => { throw new Error('Always fails'); };
+      await expect(
+        retry(fn, { maxAttempts: 2, delay: 10 })
+      ).rejects.toThrow('Always fails');
+    });
+  });
+
+  describe('createCallCounter', () => {
+    test('resolves after target count', async () => {
+      const counter = createCallCounter(3);
+      counter.increment();
+      counter.increment();
+      counter.increment();
+      await counter.promise;
+      expect(true).toBe(true); // If we get here, it worked
+    });
+
+    test('resolves immediately if already at target', async () => {
+      const counter = createCallCounter(1);
+      counter.increment();
+      await counter.promise;
+      expect(true).toBe(true);
+    });
+  });
+});