gistda-sphere-react 1.0.0

package/src/__tests__/hooks.test.tsx

@@ -0,0 +1,173 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MapProvider } from "../context/MapContext";
+import { SphereProvider } from "../context/SphereContext";
+import { useMapClick, useMapEvent, useMapZoom } from "../hooks/useMapEvent";
+import { useSphere } from "../hooks/useSphere";
+import { createMockSphereApi } from "./setup";
+
+describe("Hooks", () => {
+  const { mockSphere, mockMap } = createMockSphereApi();
+  const map = mockMap as any;
+
+  beforeEach(() => {
+    // @ts-expect-error - mockSphere is a partial mock
+    window.sphere = mockSphere;
+    vi.clearAllMocks();
+  });
+
+  describe("useSphere", () => {
+    function createWrapper() {
+      return function Wrapper({ children }: { children: ReactNode }) {
+        return <SphereProvider apiKey="test-key">{children}</SphereProvider>;
+      };
+    }
+
+    it("returns sphere namespace when loaded", async () => {
+      const { result } = renderHook(() => useSphere(), {
+        wrapper: createWrapper(),
+      });
+
+      await waitFor(() => {
+        expect(result.current.sphere).toBe(mockSphere);
+      });
+    });
+
+    it("returns isLoaded true when sphere is available", async () => {
+      const { result } = renderHook(() => useSphere(), {
+        wrapper: createWrapper(),
+      });
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+    });
+
+    it("returns error as null when no errors", async () => {
+      const { result } = renderHook(() => useSphere(), {
+        wrapper: createWrapper(),
+      });
+
+      await waitFor(() => {
+        expect(result.current.error).toBeNull();
+      });
+    });
+  });
+
+  describe("useMapEvent", () => {
+    function createWrapper() {
+      return function Wrapper({ children }: { children: ReactNode }) {
+        return (
+          <SphereProvider apiKey="test-key">
+            <MapProvider isReady={true} map={map}>
+              {children}
+            </MapProvider>
+          </SphereProvider>
+        );
+      };
+    }
+
+    it("binds event handler to map", () => {
+      const handler = vi.fn();
+
+      renderHook(() => useMapEvent("click", handler), {
+        wrapper: createWrapper(),
+      });
+
+      expect(mockMap.Event.bind).toHaveBeenCalledWith(
+        "click",
+        expect.any(Function)
+      );
+    });
+
+    it("unbinds event handler on unmount", () => {
+      const handler = vi.fn();
+
+      const { unmount } = renderHook(() => useMapEvent("click", handler), {
+        wrapper: createWrapper(),
+      });
+
+      unmount();
+
+      expect(mockMap.Event.unbind).toHaveBeenCalledWith(
+        "click",
+        expect.any(Function)
+      );
+    });
+
+    it("calls handler when event is triggered", () => {
+      const handler = vi.fn();
+
+      renderHook(() => useMapEvent("click", handler), {
+        wrapper: createWrapper(),
+      });
+
+      // Get the bound handler and call it
+      const boundHandler = mockMap.Event.bind.mock.calls.find(
+        (call) => call[0] === "click"
+      )?.[1];
+
+      const eventData = { lon: 100.5, lat: 13.75 };
+      act(() => {
+        boundHandler?.(eventData);
+      });
+
+      expect(handler).toHaveBeenCalledWith(eventData);
+    });
+  });
+
+  describe("useMapClick", () => {
+    function createWrapper() {
+      return function Wrapper({ children }: { children: ReactNode }) {
+        return (
+          <SphereProvider apiKey="test-key">
+            <MapProvider isReady={true} map={map}>
+              {children}
+            </MapProvider>
+          </SphereProvider>
+        );
+      };
+    }
+
+    it("binds click event", () => {
+      const handler = vi.fn();
+
+      renderHook(() => useMapClick(handler), {
+        wrapper: createWrapper(),
+      });
+
+      expect(mockMap.Event.bind).toHaveBeenCalledWith(
+        "click",
+        expect.any(Function)
+      );
+    });
+  });
+
+  describe("useMapZoom", () => {
+    function createWrapper() {
+      return function Wrapper({ children }: { children: ReactNode }) {
+        return (
+          <SphereProvider apiKey="test-key">
+            <MapProvider isReady={true} map={map}>
+              {children}
+            </MapProvider>
+          </SphereProvider>
+        );
+      };
+    }
+
+    it("binds zoom event", () => {
+      const handler = vi.fn();
+
+      renderHook(() => useMapZoom(handler), {
+        wrapper: createWrapper(),
+      });
+
+      expect(mockMap.Event.bind).toHaveBeenCalledWith(
+        "zoom",
+        expect.any(Function)
+      );
+    });
+  });
+});

package/src/__tests__/setup.ts

@@ -0,0 +1,204 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup } from "@testing-library/react";
+import { afterEach, beforeEach, vi } from "vitest";
+
+afterEach(() => {
+  cleanup();
+});
+
+/**
+ * Creates a mock Sphere API for testing.
+ * This mock simulates the behavior of the GISTDA Sphere API.
+ */
+type EventHandler = (data?: unknown) => void;
+
+export function createMockSphereApi() {
+  const eventHandlers: Record<string, Set<EventHandler>> = {};
+
+  const mockEvent = {
+    bind: vi.fn((eventName: string, handler: EventHandler) => {
+      if (!eventHandlers[eventName]) {
+        eventHandlers[eventName] = new Set();
+      }
+      eventHandlers[eventName].add(handler);
+      return mockEvent;
+    }),
+    unbind: vi.fn((eventName: string, handler: EventHandler) => {
+      eventHandlers[eventName]?.delete(handler);
+      return mockEvent;
+    }),
+    fire: vi.fn((eventName: string, data?: unknown) => {
+      const handlers = eventHandlers[eventName];
+      if (handlers) {
+        for (const handler of handlers) {
+          handler(data);
+        }
+      }
+    }),
+  };
+
+  const mockOverlays = {
+    add: vi.fn().mockReturnThis(),
+    remove: vi.fn().mockReturnThis(),
+    load: vi.fn().mockReturnThis(),
+    unload: vi.fn().mockReturnThis(),
+    clear: vi.fn().mockReturnThis(),
+    list: vi.fn().mockReturnValue([]),
+    size: vi.fn().mockReturnValue(0),
+    lastOpenPopup: vi.fn().mockReturnValue(null),
+  };
+
+  const mockLayers = {
+    setBase: vi.fn().mockReturnThis(),
+    add: vi.fn().mockReturnThis(),
+    remove: vi.fn().mockReturnThis(),
+    clear: vi.fn().mockReturnThis(),
+    list: vi.fn().mockReturnValue([]),
+    size: vi.fn().mockReturnValue(0),
+    language: vi.fn().mockReturnThis(),
+  };
+
+  const mockMap = {
+    Event: mockEvent,
+    Overlays: mockOverlays,
+    Layers: mockLayers,
+    Ui: {},
+    Search: {},
+    Tags: {},
+    Route: {},
+    Renderer: { on: vi.fn() },
+    id: vi.fn().mockReturnValue(1),
+    resize: vi.fn().mockReturnThis(),
+    repaint: vi.fn().mockReturnThis(),
+    placeholder: vi.fn().mockReturnValue(document.createElement("div")),
+    zoom: vi.fn((value?: number) => (value !== undefined ? mockMap : 10)),
+    zoomRange: vi.fn().mockReturnThis(),
+    location: vi.fn((value?: object) =>
+      value !== undefined ? mockMap : { lon: 100.5, lat: 13.75 }
+    ),
+    bound: vi.fn().mockReturnThis(),
+    move: vi.fn().mockReturnThis(),
+    language: vi.fn().mockReturnValue("th"),
+    rotate: vi.fn((value?: number) => (value !== undefined ? mockMap : 0)),
+    pitch: vi.fn((value?: number) => (value !== undefined ? mockMap : 0)),
+    enableFilter: vi.fn().mockReturnThis(),
+    goTo: vi.fn().mockReturnThis(),
+    // Helper to trigger ready event in tests
+    _triggerReady: () => mockEvent.fire("ready"),
+    _triggerClick: (location: object) => mockEvent.fire("click", location),
+    _triggerZoom: () => mockEvent.fire("zoom"),
+  };
+
+  const createMockOverlay = (_type: string) => {
+    return vi.fn().mockImplementation(() => ({
+      location: vi.fn().mockReturnValue({ lon: 100.5, lat: 13.75 }),
+      visibleRange: vi.fn().mockReturnValue({ min: 0, max: 22 }),
+      active: vi.fn().mockReturnValue(true),
+      shift: vi.fn().mockReturnThis(),
+      distance: vi.fn().mockReturnValue(0),
+      intersects: vi.fn().mockReturnValue(false),
+      contains: vi.fn().mockReturnValue(false),
+      within: vi.fn().mockReturnValue(false),
+      toJSON: vi.fn().mockReturnValue({}),
+      popup: vi.fn().mockReturnValue(null),
+      element: vi.fn().mockReturnValue(document.createElement("div")),
+      pop: vi.fn().mockReturnThis(),
+      update: vi.fn().mockReturnThis(),
+      pivot: vi.fn().mockReturnValue({ lon: 100.5, lat: 13.75 }),
+      centroid: vi.fn().mockReturnValue({ lon: 100.5, lat: 13.75 }),
+      bound: vi.fn().mockReturnValue({
+        minLon: 100,
+        minLat: 13,
+        maxLon: 101,
+        maxLat: 14,
+      }),
+      rotate: vi.fn().mockReturnThis(),
+      size: vi.fn().mockReturnValue(100),
+      union: vi.fn().mockReturnThis(),
+      intersection: vi.fn().mockReturnThis(),
+      difference: vi.fn().mockReturnThis(),
+      split: vi.fn().mockReturnValue([]),
+      radius: vi.fn().mockReturnValue(100),
+      title: vi.fn().mockReturnThis(),
+      detail: vi.fn().mockReturnThis(),
+    }));
+  };
+
+  const mockSphere = {
+    Map: vi.fn().mockImplementation(() => mockMap),
+    Marker: createMockOverlay("Marker"),
+    Popup: createMockOverlay("Popup"),
+    Polyline: createMockOverlay("Polyline"),
+    Polygon: createMockOverlay("Polygon"),
+    Circle: createMockOverlay("Circle"),
+    Dot: createMockOverlay("Dot"),
+    Rectangle: createMockOverlay("Rectangle"),
+    Layer: vi.fn().mockImplementation(() => ({})),
+    Layers: {
+      SIMPLE: {},
+      STREETS: {},
+      STREETS_NIGHT: {},
+      HYBRID: {},
+      TRAFFIC: {},
+      IMAGES: {},
+      PM25: {},
+      HOTSPOT: {},
+      FLOOD: {},
+      DROUGHT: {},
+    },
+    LayerType: {
+      Vector: "Vector",
+      XYZ: "XYZ",
+      WMS: "WMS",
+      WMTS: "WMTS",
+      WMTS_REST: "WMTS_REST",
+      TMS: "TMS",
+      Tiles3D: "Tiles3D",
+      I3S: "I3S",
+    },
+    LineStyle: {
+      Solid: "Solid",
+      Dashed: "Dashed",
+      Dot: "Dot",
+    },
+    Filter: {
+      Dark: "Dark" as const,
+      Light: "Light" as const,
+      Protanopia: "Protanopia" as const,
+      Deuteranopia: "Deuteranopia" as const,
+      None: "None" as const,
+    },
+    EventName: {},
+    TagType: { WFS: "WFS", OGC: "OGC" },
+    RouteMode: {
+      Traffic: "Traffic",
+      Cost: "Cost",
+      Distance: "Distance",
+      Fly: "Fly",
+    },
+    RouteType: { Road: "Road", Ferry: "Ferry", Tollway: "Tollway", All: "All" },
+    RouteLabel: { Distance: "Distance", Time: "Time", Hide: "Hide" },
+    Util: {},
+    Math: {},
+    Overlays: {},
+  };
+
+  return { mockSphere, mockMap };
+}
+
+// Helper to set up global Sphere mock
+export function setupSphereGlobal() {
+  const { mockSphere, mockMap } = createMockSphereApi();
+
+  beforeEach(() => {
+    // @ts-expect-error - mockSphere is a partial mock of SphereNamespace
+    window.sphere = mockSphere;
+  });
+
+  afterEach(() => {
+    window.sphere = undefined;
+    vi.clearAllMocks();
+  });
+
+  return { mockSphere, mockMap };
+}

package/src/__tests__/useMapControls.test.tsx

@@ -0,0 +1,168 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { SphereProvider, useMapControls } from "../context/SphereContext";
+import { createMockSphereApi } from "./setup";
+
+describe("useMapControls", () => {
+  const { mockSphere } = createMockSphereApi();
+
+  beforeEach(() => {
+    // @ts-expect-error - mockSphere is a partial mock
+    window.sphere = mockSphere;
+    vi.clearAllMocks();
+  });
+
+  function createWrapper() {
+    return function Wrapper({ children }: { children: ReactNode }) {
+      return <SphereProvider apiKey="test-key">{children}</SphereProvider>;
+    };
+  }
+
+  describe("when map is not registered", () => {
+    it("reports isReady as false", () => {
+      const { result } = renderHook(() => useMapControls(), {
+        wrapper: createWrapper(),
+      });
+
+      expect(result.current.isReady).toBe(false);
+    });
+
+    it("goTo is a no-op when map is not ready", () => {
+      const { result } = renderHook(() => useMapControls(), {
+        wrapper: createWrapper(),
+      });
+
+      // Should not throw
+      result.current.goTo({ center: { lon: 100, lat: 13 }, zoom: 12 });
+    });
+
+    it("setCenter is a no-op when map is not ready", () => {
+      const { result } = renderHook(() => useMapControls(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.setCenter({ lon: 100, lat: 13 });
+    });
+
+    it("setZoom is a no-op when map is not ready", () => {
+      const { result } = renderHook(() => useMapControls(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.setZoom(15);
+    });
+
+    it("setBound is a no-op when map is not ready", () => {
+      const { result } = renderHook(() => useMapControls(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.setBound({
+        minLon: 100,
+        minLat: 13,
+        maxLon: 101,
+        maxLat: 14,
+      });
+    });
+
+    it("setRotate is a no-op when map is not ready", () => {
+      const { result } = renderHook(() => useMapControls(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.setRotate(45);
+    });
+
+    it("setPitch is a no-op when map is not ready", () => {
+      const { result } = renderHook(() => useMapControls(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.setPitch(30);
+    });
+
+    it("setFilter is a no-op when map is not ready", () => {
+      const { result } = renderHook(() => useMapControls(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.setFilter("Dark");
+    });
+
+    it("setLanguage is a no-op when map is not ready", () => {
+      const { result } = renderHook(() => useMapControls(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.setLanguage("en");
+    });
+
+    it("setBaseLayer is a no-op when map is not ready", () => {
+      const { result } = renderHook(() => useMapControls(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.setBaseLayer("HYBRID");
+    });
+
+    it("addLayer is a no-op when map is not ready", () => {
+      const { result } = renderHook(() => useMapControls(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.addLayer("TRAFFIC");
+    });
+
+    it("removeLayer is a no-op when map is not ready", () => {
+      const { result } = renderHook(() => useMapControls(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.removeLayer("TRAFFIC");
+    });
+
+    it("resize is a no-op when map is not ready", () => {
+      const { result } = renderHook(() => useMapControls(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.resize();
+    });
+
+    it("repaint is a no-op when map is not ready", () => {
+      const { result } = renderHook(() => useMapControls(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.repaint();
+    });
+  });
+
+  describe("control methods return correct interface", () => {
+    it("exposes all 14 control methods", async () => {
+      const { result } = renderHook(() => useMapControls(), {
+        wrapper: createWrapper(),
+      });
+
+      await waitFor(() => {
+        expect(result.current).toBeDefined();
+      });
+
+      expect(typeof result.current.isReady).toBe("boolean");
+      expect(typeof result.current.goTo).toBe("function");
+      expect(typeof result.current.setCenter).toBe("function");
+      expect(typeof result.current.setZoom).toBe("function");
+      expect(typeof result.current.setBound).toBe("function");
+      expect(typeof result.current.setRotate).toBe("function");
+      expect(typeof result.current.setPitch).toBe("function");
+      expect(typeof result.current.setFilter).toBe("function");
+      expect(typeof result.current.setLanguage).toBe("function");
+      expect(typeof result.current.setBaseLayer).toBe("function");
+      expect(typeof result.current.addLayer).toBe("function");
+      expect(typeof result.current.removeLayer).toBe("function");
+      expect(typeof result.current.resize).toBe("function");
+      expect(typeof result.current.repaint).toBe("function");
+    });
+  });
+});