meno-core 1.0.0

package/lib/client/navigation.test.ts

@@ -0,0 +1,441 @@
+import { test, expect, describe, beforeEach, afterEach, mock } from "bun:test";
+import { navigateTo, createNavigationHandler } from "./navigation";
+
+// Setup browser-like environment
+function setupWindowMock() {
+  if (typeof globalThis.window === 'undefined') {
+    globalThis.window = {
+      history: {
+        pushState: mock(() => {}),
+      },
+      dispatchEvent: mock(() => true),
+    } as any;
+  }
+  // Add PopStateEvent if not defined
+  if (typeof globalThis.PopStateEvent === 'undefined') {
+    globalThis.PopStateEvent = class PopStateEvent extends Event {
+      constructor(type: string, eventInitDict?: PopStateEventInit) {
+        super(type, eventInitDict);
+      }
+    } as any;
+  }
+}
+
+describe("Navigation - navigateTo", () => {
+  let originalPushState: any;
+  let originalDispatchEvent: any;
+  let pushStateCalls: Array<{ state: any; title: string; url: string }>;
+  let dispatchedEvents: Event[];
+
+  beforeEach(() => {
+    setupWindowMock();
+    
+    // Save originals
+    originalPushState = (globalThis as any).window.history.pushState;
+    originalDispatchEvent = (globalThis as any).window.dispatchEvent;
+    
+    // Track calls
+    pushStateCalls = [];
+    dispatchedEvents = [];
+    
+    // Mock pushState
+    (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+      pushStateCalls.push({ state, title, url });
+    }) as any;
+    
+    // Mock dispatchEvent
+    (globalThis as any).window.dispatchEvent = mock((event: Event) => {
+      dispatchedEvents.push(event);
+      return true;
+    });
+  });
+
+  afterEach(() => {
+    // Restore originals
+    if ((globalThis as any).window) {
+      (globalThis as any).window.history.pushState = originalPushState;
+      (globalThis as any).window.dispatchEvent = originalDispatchEvent;
+    }
+  });
+
+  test("should navigate to root path", () => {
+    navigateTo("/");
+    
+    expect(pushStateCalls.length).toBe(1);
+    expect(pushStateCalls[0].url).toBe("/");
+    expect(dispatchedEvents.length).toBe(1);
+    expect(dispatchedEvents[0].type).toBe("popstate");
+  });
+
+  test("should navigate to nested path", () => {
+    navigateTo("/about");
+    
+    expect(pushStateCalls.length).toBe(1);
+    expect(pushStateCalls[0].url).toBe("/about");
+    expect(dispatchedEvents[0].type).toBe("popstate");
+  });
+
+  test("should navigate to deeply nested path", () => {
+    navigateTo("/blog/post-1");
+    
+    expect(pushStateCalls[0].url).toBe("/blog/post-1");
+  });
+
+  test("should call pushState with empty state object", () => {
+    navigateTo("/test");
+    
+    expect(pushStateCalls[0].state).toEqual({});
+    expect(pushStateCalls[0].title).toBe("");
+  });
+
+  test("should dispatch PopStateEvent", () => {
+    navigateTo("/test");
+    
+    expect(dispatchedEvents.length).toBe(1);
+    expect(dispatchedEvents[0]).toBeInstanceOf(PopStateEvent);
+  });
+
+  test("should handle path with query string", () => {
+    navigateTo("/search?q=test");
+    
+    expect(pushStateCalls[0].url).toBe("/search?q=test");
+  });
+
+  test("should handle path with hash", () => {
+    navigateTo("/page#section");
+    
+    expect(pushStateCalls[0].url).toBe("/page#section");
+  });
+});
+
+describe("Navigation - createNavigationHandler", () => {
+  let originalPushState: any;
+  let originalDispatchEvent: any;
+  let pushStateCalls: Array<{ url: string }>;
+  let preventDefaultCalled: boolean;
+
+  beforeEach(() => {
+    setupWindowMock();
+    originalPushState = (globalThis as any).window.history.pushState;
+    originalDispatchEvent = (globalThis as any).window.dispatchEvent;
+    
+    pushStateCalls = [];
+    preventDefaultCalled = false;
+    
+    (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+      pushStateCalls.push({ url });
+    }) as any;
+    
+    (globalThis as any).window.dispatchEvent = mock(() => true);
+  });
+
+  afterEach(() => {
+    if ((globalThis as any).window) {
+      (globalThis as any).window.history.pushState = originalPushState;
+      (globalThis as any).window.dispatchEvent = originalDispatchEvent;
+    }
+  });
+
+  test("should create handler that prevents default", () => {
+    const handler = createNavigationHandler("/test");
+    const mockEvent = {
+      preventDefault: mock(() => {
+        preventDefaultCalled = true;
+      })
+    } as any;
+    
+    handler(mockEvent);
+    
+    expect(preventDefaultCalled).toBe(true);
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+  });
+
+  test("should create handler that navigates to path", () => {
+    const handler = createNavigationHandler("/about");
+    const mockEvent = {
+      preventDefault: mock(() => {})
+    } as any;
+    
+    handler(mockEvent);
+    
+    expect(pushStateCalls.length).toBe(1);
+    expect(pushStateCalls[0].url).toBe("/about");
+  });
+
+  test("should prevent default before navigating", () => {
+    const handler = createNavigationHandler("/test");
+    let preventDefaultCalledFirst = false;
+    let navigationCalledFirst = false;
+    
+    const mockEvent = {
+      preventDefault: mock(() => {
+        preventDefaultCalledFirst = !navigationCalledFirst;
+      })
+    } as any;
+    
+    const originalPushState = (globalThis as any).window.history.pushState;
+    (globalThis as any).window.history.pushState = mock(() => {
+      navigationCalledFirst = !preventDefaultCalledFirst;
+    }) as any;
+    
+    handler(mockEvent);
+    
+    // preventDefault should be called before navigation
+    expect(preventDefaultCalledFirst).toBe(true);
+  });
+
+  test("should handle root path in handler", () => {
+    const handler = createNavigationHandler("/");
+    const mockEvent = {
+      preventDefault: mock(() => {})
+    } as any;
+    
+    handler(mockEvent);
+    
+    expect(pushStateCalls[0].url).toBe("/");
+  });
+
+  test("should handle nested paths in handler", () => {
+    const handler = createNavigationHandler("/blog/post-1");
+    const mockEvent = {
+      preventDefault: mock(() => {})
+    } as any;
+    
+    handler(mockEvent);
+    
+    expect(pushStateCalls[0].url).toBe("/blog/post-1");
+  });
+});
+
+describe("Navigation - Path handling", () => {
+  let originalPushState: any;
+  let originalDispatchEvent: any;
+
+  beforeEach(() => {
+    setupWindowMock();
+    originalPushState = (globalThis as any).window.history.pushState;
+    originalDispatchEvent = (globalThis as any).window.dispatchEvent;
+    
+    (globalThis as any).window.history.pushState = mock(() => {}) as any;
+    (globalThis as any).window.dispatchEvent = mock(() => true);
+  });
+
+  afterEach(() => {
+    if ((globalThis as any).window) {
+      (globalThis as any).window.history.pushState = originalPushState;
+      (globalThis as any).window.dispatchEvent = originalDispatchEvent;
+    }
+  });
+
+  describe("Root path handling", () => {
+    test("should navigate to root path correctly", () => {
+      const pushStateCalls: Array<{ url: string }> = [];
+      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+        pushStateCalls.push({ url });
+      }) as any;
+      
+      navigateTo("/");
+      
+      expect(pushStateCalls[0].url).toBe("/");
+    });
+
+    test("should handle root path with handler", () => {
+      const handler = createNavigationHandler("/");
+      const pushStateCalls: Array<{ url: string }> = [];
+      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+        pushStateCalls.push({ url });
+      }) as any;
+      
+      const mockEvent = {
+        preventDefault: mock(() => {})
+      } as any;
+      
+      handler(mockEvent);
+      
+      expect(pushStateCalls[0].url).toBe("/");
+    });
+  });
+
+  describe("Nested paths handling", () => {
+    test("should handle single level nested path", () => {
+      const pushStateCalls: Array<{ url: string }> = [];
+      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+        pushStateCalls.push({ url });
+      }) as any;
+      
+      navigateTo("/about");
+      
+      expect(pushStateCalls[0].url).toBe("/about");
+    });
+
+    test("should handle multi-level nested paths", () => {
+      const pushStateCalls: Array<{ url: string }> = [];
+      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+        pushStateCalls.push({ url });
+      }) as any;
+      
+      navigateTo("/blog/category/post-1");
+      
+      expect(pushStateCalls[0].url).toBe("/blog/category/post-1");
+    });
+
+    test("should handle paths with trailing slash", () => {
+      const pushStateCalls: Array<{ url: string }> = [];
+      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+        pushStateCalls.push({ url });
+      }) as any;
+      
+      navigateTo("/about/");
+      
+      expect(pushStateCalls[0].url).toBe("/about/");
+    });
+  });
+
+  describe("Special path handling", () => {
+    test("should handle paths with query parameters", () => {
+      const pushStateCalls: Array<{ url: string }> = [];
+      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+        pushStateCalls.push({ url });
+      }) as any;
+      
+      navigateTo("/search?q=test&page=1");
+      
+      expect(pushStateCalls[0].url).toBe("/search?q=test&page=1");
+    });
+
+    test("should handle paths with hash fragments", () => {
+      const pushStateCalls: Array<{ url: string }> = [];
+      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+        pushStateCalls.push({ url });
+      }) as any;
+      
+      navigateTo("/page#section");
+      
+      expect(pushStateCalls[0].url).toBe("/page#section");
+    });
+
+    test("should handle paths with both query and hash", () => {
+      const pushStateCalls: Array<{ url: string }> = [];
+      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+        pushStateCalls.push({ url });
+      }) as any;
+      
+      navigateTo("/page?param=value#section");
+      
+      expect(pushStateCalls[0].url).toBe("/page?param=value#section");
+    });
+  });
+
+  describe("Link component behavior simulation", () => {
+    test("should simulate Link component click behavior", () => {
+      const handler = createNavigationHandler("/link-target");
+      const mockEvent = {
+        preventDefault: mock(() => {}),
+        type: "click",
+        target: {}
+      } as any;
+      
+      const pushStateCalls: Array<{ url: string }> = [];
+      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+        pushStateCalls.push({ url });
+      }) as any;
+      
+      handler(mockEvent);
+      
+      // Should prevent default (no page reload)
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+      // Should navigate using history API
+      expect(pushStateCalls.length).toBe(1);
+      expect(pushStateCalls[0].url).toBe("/link-target");
+    });
+
+    test("should handle multiple Link clicks", () => {
+      const handler1 = createNavigationHandler("/page1");
+      const handler2 = createNavigationHandler("/page2");
+      
+      const pushStateCalls: Array<{ url: string }> = [];
+      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+        pushStateCalls.push({ url });
+      }) as any;
+      
+      const mockEvent1 = { preventDefault: mock(() => {}) } as any;
+      const mockEvent2 = { preventDefault: mock(() => {}) } as any;
+      
+      handler1(mockEvent1);
+      handler2(mockEvent2);
+      
+      expect(pushStateCalls.length).toBe(2);
+      expect(pushStateCalls[0].url).toBe("/page1");
+      expect(pushStateCalls[1].url).toBe("/page2");
+    });
+  });
+});
+
+describe("Navigation - Integration scenarios", () => {
+  let originalPushState: any;
+  let originalDispatchEvent: any;
+  let pushStateCalls: Array<{ url: string }>;
+  let dispatchedEvents: Event[];
+
+  beforeEach(() => {
+    setupWindowMock();
+    originalPushState = (globalThis as any).window.history.pushState;
+    originalDispatchEvent = (globalThis as any).window.dispatchEvent;
+    
+    pushStateCalls = [];
+    dispatchedEvents = [];
+    
+    (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+      pushStateCalls.push({ url });
+    }) as any;
+    
+    (globalThis as any).window.dispatchEvent = mock((event: Event) => {
+      dispatchedEvents.push(event);
+      return true;
+    });
+  });
+
+  afterEach(() => {
+    if ((globalThis as any).window) {
+      (globalThis as any).window.history.pushState = originalPushState;
+      (globalThis as any).window.dispatchEvent = originalDispatchEvent;
+    }
+  });
+
+  test("should handle navigation sequence", () => {
+    navigateTo("/");
+    navigateTo("/about");
+    navigateTo("/contact");
+    
+    expect(pushStateCalls.length).toBe(3);
+    expect(pushStateCalls[0].url).toBe("/");
+    expect(pushStateCalls[1].url).toBe("/about");
+    expect(pushStateCalls[2].url).toBe("/contact");
+    expect(dispatchedEvents.length).toBe(3);
+  });
+
+  test("should work with navigation handler in sequence", () => {
+    const handler1 = createNavigationHandler("/page1");
+    const handler2 = createNavigationHandler("/page2");
+    
+    const mockEvent = {
+      preventDefault: mock(() => {})
+    } as any;
+    
+    handler1(mockEvent);
+    handler2(mockEvent);
+    
+    expect(pushStateCalls.length).toBe(2);
+  });
+
+  test("should handle back/forward navigation simulation", () => {
+    // Navigate forward
+    navigateTo("/page1");
+    navigateTo("/page2");
+    navigateTo("/page3");
+    
+    // Simulate back button (this would normally be handled by popstate listener)
+    // The navigateTo function doesn't handle back/forward, but the router does
+    expect(pushStateCalls.length).toBe(3);
+  });
+});

package/lib/client/navigation.ts

@@ -0,0 +1,23 @@
+/**
+ * Navigation utilities for client-side routing
+ */
+
+/**
+ * Navigate to a path using the history API and dispatch a popstate event
+ * This allows the router to handle the navigation
+ */
+export function navigateTo(path: string): void {
+  window.history.pushState({}, '', path);
+  window.dispatchEvent(new PopStateEvent('popstate'));
+}
+
+/**
+ * Create a navigation click handler that prevents default and navigates
+ */
+export function createNavigationHandler(path: string): (e: Event) => void {
+  return (e: Event) => {
+    e.preventDefault();
+    navigateTo(path);
+  };
+}
+