gistda-sphere-react 1.0.0

package/src/__tests__/useOverlays.test.tsx

@@ -0,0 +1,265 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  useCircles,
+  useMarkers,
+  useOverlays,
+  usePolygons,
+  usePolylines,
+} from "../hooks/useOverlays";
+
+describe("useOverlays hooks", () => {
+  describe("useMarkers", () => {
+    it("starts with empty items", () => {
+      const { result } = renderHook(() => useMarkers());
+      expect(result.current.items).toEqual([]);
+    });
+
+    it("adds a marker and returns its id", () => {
+      const { result } = renderHook(() => useMarkers());
+
+      let id = "";
+      act(() => {
+        id = result.current.add({
+          position: { lon: 100.5, lat: 13.75 },
+          title: "Test Marker",
+        });
+      });
+
+      expect(result.current.items).toHaveLength(1);
+
+      const marker = result.current.items[0];
+      expect(marker).toBeDefined();
+      expect(marker?.id).toBe(id);
+      expect(marker?.position).toEqual({
+        lon: 100.5,
+        lat: 13.75,
+      });
+      expect(marker?.title).toBe("Test Marker");
+    });
+
+    it("allows custom id", () => {
+      const { result } = renderHook(() => useMarkers());
+
+      act(() => {
+        result.current.add({
+          id: "custom-id",
+          position: { lon: 100.5, lat: 13.75 },
+        });
+      });
+
+      const marker = result.current.items[0];
+      expect(marker).toBeDefined();
+      expect(marker?.id).toBe("custom-id");
+    });
+
+    it("updates a marker", () => {
+      const { result } = renderHook(() => useMarkers());
+
+      let id = "";
+      act(() => {
+        id = result.current.add({
+          position: { lon: 100.5, lat: 13.75 },
+          title: "Original",
+        });
+      });
+
+      act(() => {
+        result.current.update(id, { title: "Updated" });
+      });
+
+      const marker = result.current.items[0];
+      expect(marker).toBeDefined();
+      expect(marker?.title).toBe("Updated");
+      expect(marker?.position).toEqual({
+        lon: 100.5,
+        lat: 13.75,
+      });
+    });
+
+    it("removes a marker", () => {
+      const { result } = renderHook(() => useMarkers());
+
+      let id = "";
+      act(() => {
+        id = result.current.add({
+          position: { lon: 100.5, lat: 13.75 },
+        });
+      });
+
+      expect(result.current.items).toHaveLength(1);
+
+      act(() => {
+        result.current.remove(id);
+      });
+
+      expect(result.current.items).toHaveLength(0);
+    });
+
+    it("clears all markers", () => {
+      const { result } = renderHook(() => useMarkers());
+
+      act(() => {
+        result.current.add({ position: { lon: 100.5, lat: 13.75 } });
+        result.current.add({ position: { lon: 101.5, lat: 14.75 } });
+        result.current.add({ position: { lon: 102.5, lat: 15.75 } });
+      });
+
+      expect(result.current.items).toHaveLength(3);
+
+      act(() => {
+        result.current.clear();
+      });
+
+      expect(result.current.items).toHaveLength(0);
+    });
+
+    it("gets a marker by id", () => {
+      const { result } = renderHook(() => useMarkers());
+
+      let id = "";
+      act(() => {
+        id = result.current.add({
+          position: { lon: 100.5, lat: 13.75 },
+          title: "Find Me",
+        });
+      });
+
+      const found = result.current.get(id);
+      expect(found?.title).toBe("Find Me");
+
+      const notFound = result.current.get("non-existent");
+      expect(notFound).toBeUndefined();
+    });
+  });
+
+  describe("usePolygons", () => {
+    it("adds and removes polygons", () => {
+      const { result } = renderHook(() => usePolygons());
+
+      let id = "";
+      act(() => {
+        id = result.current.add({
+          positions: [
+            { lon: 100.4, lat: 13.8 },
+            { lon: 100.6, lat: 13.8 },
+            { lon: 100.5, lat: 13.6 },
+          ],
+          fillColor: "rgba(255, 0, 0, 0.3)",
+        });
+      });
+
+      expect(result.current.items).toHaveLength(1);
+
+      const polygon = result.current.items[0];
+      expect(polygon).toBeDefined();
+      expect(polygon?.positions).toHaveLength(3);
+
+      act(() => {
+        result.current.remove(id);
+      });
+
+      expect(result.current.items).toHaveLength(0);
+    });
+  });
+
+  describe("usePolylines", () => {
+    it("adds and updates polylines", () => {
+      const { result } = renderHook(() => usePolylines());
+
+      let id = "";
+      act(() => {
+        id = result.current.add({
+          positions: [
+            { lon: 100.4, lat: 13.8 },
+            { lon: 100.6, lat: 13.6 },
+          ],
+          lineWidth: 2,
+        });
+      });
+
+      act(() => {
+        result.current.update(id, { lineWidth: 5 });
+      });
+
+      const polyline = result.current.items[0];
+      expect(polyline).toBeDefined();
+      expect(polyline?.lineWidth).toBe(5);
+    });
+  });
+
+  describe("useCircles", () => {
+    it("adds circles with center and radius", () => {
+      const { result } = renderHook(() => useCircles());
+
+      act(() => {
+        result.current.add({
+          center: { lon: 100.5, lat: 13.75 },
+          radius: 0.01,
+          fillColor: "rgba(0, 0, 255, 0.3)",
+        });
+      });
+
+      expect(result.current.items).toHaveLength(1);
+
+      const circle = result.current.items[0];
+      expect(circle).toBeDefined();
+      expect(circle?.center).toEqual({
+        lon: 100.5,
+        lat: 13.75,
+      });
+      expect(circle?.radius).toBe(0.01);
+    });
+  });
+
+  describe("useOverlays", () => {
+    it("provides all overlay types", () => {
+      const { result } = renderHook(() => useOverlays());
+
+      expect(result.current.markers).toBeDefined();
+      expect(result.current.polygons).toBeDefined();
+      expect(result.current.polylines).toBeDefined();
+      expect(result.current.circles).toBeDefined();
+      expect(result.current.clearAll).toBeDefined();
+    });
+
+    it("clearAll removes all overlays", () => {
+      const { result } = renderHook(() => useOverlays());
+
+      act(() => {
+        result.current.markers.add({ position: { lon: 100, lat: 13 } });
+        result.current.polygons.add({
+          positions: [
+            { lon: 100, lat: 13 },
+            { lon: 101, lat: 14 },
+            { lon: 100, lat: 14 },
+          ],
+        });
+        result.current.polylines.add({
+          positions: [
+            { lon: 100, lat: 13 },
+            { lon: 101, lat: 14 },
+          ],
+        });
+        result.current.circles.add({
+          center: { lon: 100, lat: 13 },
+          radius: 0.01,
+        });
+      });
+
+      expect(result.current.markers.items).toHaveLength(1);
+      expect(result.current.polygons.items).toHaveLength(1);
+      expect(result.current.polylines.items).toHaveLength(1);
+      expect(result.current.circles.items).toHaveLength(1);
+
+      act(() => {
+        result.current.clearAll();
+      });
+
+      expect(result.current.markers.items).toHaveLength(0);
+      expect(result.current.polygons.items).toHaveLength(0);
+      expect(result.current.polylines.items).toHaveLength(0);
+      expect(result.current.circles.items).toHaveLength(0);
+    });
+  });
+});

package/src/__tests__/useRoute.test.tsx

@@ -0,0 +1,219 @@
+import { renderHook } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { useEffect } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { SphereProvider, useSphereContext } from "../context/SphereContext";
+import { useRoute } from "../hooks/useRoute";
+import { createMockSphereApi } from "./setup";
+
+describe("useRoute", () => {
+  const { mockSphere, mockMap } = createMockSphereApi();
+  const map = mockMap as any;
+
+  beforeEach(() => {
+    // @ts-expect-error - mockSphere is a partial mock
+    window.sphere = mockSphere;
+    vi.clearAllMocks();
+
+    map.Route = {
+      add: vi.fn(),
+      insert: vi.fn(),
+      remove: vi.fn(),
+      removeAt: vi.fn(),
+      clearDestination: vi.fn(),
+      clearPath: vi.fn(),
+      clear: vi.fn(),
+      reverse: vi.fn(),
+      search: vi.fn(),
+      distance: vi.fn().mockReturnValue(450),
+      interval: vi.fn().mockReturnValue(19_800),
+      guide: vi.fn().mockReturnValue([]),
+      exportRouteLine: vi.fn().mockReturnValue(null),
+      list: vi.fn().mockReturnValue([]),
+      size: vi.fn().mockReturnValue(0),
+      mode: vi.fn(),
+      modeOf: vi.fn(),
+      enableRoute: vi.fn(),
+      label: vi.fn(),
+      auto: vi.fn(),
+      language: vi.fn(),
+    };
+  });
+
+  function MapRegistrar({ mapInstance }: { mapInstance: any }) {
+    const { registerMap } = useSphereContext();
+    useEffect(() => {
+      registerMap(mapInstance);
+    }, [mapInstance, registerMap]);
+    return null;
+  }
+
+  function createWrapper() {
+    return function Wrapper({ children }: { children: ReactNode }) {
+      return (
+        <SphereProvider apiKey="test-key">
+          <MapRegistrar mapInstance={map} />
+          {children}
+        </SphereProvider>
+      );
+    };
+  }
+
+  describe("destination management", () => {
+    it("delegates addDestination to Route API", () => {
+      const { result } = renderHook(() => useRoute(), {
+        wrapper: createWrapper(),
+      });
+
+      const location = { lon: 100.5, lat: 13.75 };
+      result.current.addDestination(location);
+
+      expect(map.Route.add).toHaveBeenCalledWith(location, undefined);
+    });
+
+    it("delegates insertDestination to Route API", () => {
+      const { result } = renderHook(() => useRoute(), {
+        wrapper: createWrapper(),
+      });
+
+      const location = { lon: 100.5, lat: 13.75 };
+      result.current.insertDestination(1, location, "Traffic");
+
+      expect(map.Route.insert).toHaveBeenCalledWith(1, location, "Traffic");
+    });
+
+    it("delegates removeDestinationAt to Route API", () => {
+      const { result } = renderHook(() => useRoute(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.removeDestinationAt(0);
+
+      expect(map.Route.removeAt).toHaveBeenCalledWith(0);
+    });
+
+    it("delegates clearDestinations to Route API", () => {
+      const { result } = renderHook(() => useRoute(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.clearDestinations();
+
+      expect(map.Route.clearDestination).toHaveBeenCalled();
+    });
+  });
+
+  describe("route operations", () => {
+    it("delegates search to Route API", () => {
+      const { result } = renderHook(() => useRoute(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.search();
+
+      expect(map.Route.search).toHaveBeenCalled();
+    });
+
+    it("delegates clear to Route API", () => {
+      const { result } = renderHook(() => useRoute(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.clear();
+
+      expect(map.Route.clear).toHaveBeenCalled();
+    });
+
+    it("delegates reverse to Route API", () => {
+      const { result } = renderHook(() => useRoute(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.reverse();
+
+      expect(map.Route.reverse).toHaveBeenCalled();
+    });
+  });
+
+  describe("route info", () => {
+    it("returns distance from Route API", () => {
+      const { result } = renderHook(() => useRoute(), {
+        wrapper: createWrapper(),
+      });
+
+      expect(result.current.getDistance()).toBe(450);
+      expect(map.Route.distance).toHaveBeenCalledWith(false);
+    });
+
+    it("returns formatted distance from Route API", () => {
+      map.Route.distance.mockReturnValue("450 km");
+
+      const { result } = renderHook(() => useRoute(), {
+        wrapper: createWrapper(),
+      });
+
+      expect(result.current.getDistance(true)).toBe("450 km");
+      expect(map.Route.distance).toHaveBeenCalledWith(true);
+    });
+
+    it("returns interval from Route API", () => {
+      const { result } = renderHook(() => useRoute(), {
+        wrapper: createWrapper(),
+      });
+
+      expect(result.current.getInterval()).toBe(19_800);
+      expect(map.Route.interval).toHaveBeenCalledWith(false);
+    });
+
+    it("returns guide from Route API", () => {
+      const { result } = renderHook(() => useRoute(), {
+        wrapper: createWrapper(),
+      });
+
+      expect(result.current.getGuide()).toEqual([]);
+      expect(map.Route.guide).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe("route settings", () => {
+    it("delegates setMode to Route API", () => {
+      const { result } = renderHook(() => useRoute(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.setMode("Traffic");
+
+      expect(map.Route.mode).toHaveBeenCalledWith("Traffic");
+    });
+
+    it("delegates setLabel to Route API", () => {
+      const { result } = renderHook(() => useRoute(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.setLabel("Distance");
+
+      expect(map.Route.label).toHaveBeenCalledWith("Distance");
+    });
+
+    it("delegates setLanguage to Route API", () => {
+      const { result } = renderHook(() => useRoute(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.setLanguage("en");
+
+      expect(map.Route.language).toHaveBeenCalledWith("en");
+    });
+
+    it("delegates setAuto to Route API", () => {
+      const { result } = renderHook(() => useRoute(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.setAuto(true);
+
+      expect(map.Route.auto).toHaveBeenCalledWith(true);
+    });
+  });
+});

package/src/__tests__/useSearch.test.tsx

@@ -0,0 +1,205 @@
+import { renderHook } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { useEffect } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { SphereProvider, useSphereContext } from "../context/SphereContext";
+import { useSearch } from "../hooks/useSearch";
+import { createMockSphereApi } from "./setup";
+
+describe("useSearch", () => {
+  const { mockSphere, mockMap } = createMockSphereApi();
+  const map = mockMap as any;
+
+  beforeEach(() => {
+    // @ts-expect-error - mockSphere is a partial mock
+    window.sphere = mockSphere;
+    vi.clearAllMocks();
+  });
+
+  /**
+   * Registers the mock map in SphereContext so useMap() returns it.
+   * useSearch reads from SphereContext.useMap, not MapContext.
+   */
+  function MapRegistrar({ map: mapInstance }: { map: any }) {
+    const { registerMap } = useSphereContext();
+    useEffect(() => {
+      if (mapInstance) {
+        registerMap(mapInstance);
+      }
+    }, [mapInstance, registerMap]);
+    return null;
+  }
+
+  function createWrapper(mapReady = true) {
+    return function Wrapper({ children }: { children: ReactNode }) {
+      return (
+        <SphereProvider apiKey="test-key">
+          {mapReady && <MapRegistrar map={map} />}
+          {children}
+        </SphereProvider>
+      );
+    };
+  }
+
+  describe("when Search API is not available", () => {
+    it("throws when calling suggest without map", async () => {
+      const { result } = renderHook(() => useSearch(), {
+        wrapper: createWrapper(false),
+      });
+
+      await expect(result.current.suggest("coffee")).rejects.toThrow(
+        "Search API not available"
+      );
+    });
+
+    it("throws when calling search without map", async () => {
+      const { result } = renderHook(() => useSearch(), {
+        wrapper: createWrapper(false),
+      });
+
+      await expect(result.current.search("coffee")).rejects.toThrow(
+        "Search API not available"
+      );
+    });
+
+    it("throws when calling address without map", async () => {
+      const { result } = renderHook(() => useSearch(), {
+        wrapper: createWrapper(false),
+      });
+
+      await expect(
+        result.current.address({ lon: 100.5, lat: 13.75 })
+      ).rejects.toThrow("Search API not available");
+    });
+
+    it("throws when calling nearPoi without map", async () => {
+      const { result } = renderHook(() => useSearch(), {
+        wrapper: createWrapper(false),
+      });
+
+      await expect(
+        result.current.nearPoi({ lon: 100.5, lat: 13.75 })
+      ).rejects.toThrow("Search API not available");
+    });
+  });
+
+  describe("when Search API is available", () => {
+    beforeEach(() => {
+      map.Search = {
+        suggest: vi
+          .fn()
+          .mockResolvedValue({ data: [{ name: "Coffee A" }], total: 1 }),
+        search: vi
+          .fn()
+          .mockResolvedValue({ data: [{ name: "Coffee B" }], total: 1 }),
+        address: vi.fn().mockResolvedValue({
+          address: "123 Street",
+          province: "Bangkok",
+        }),
+        nearPoi: vi.fn().mockResolvedValue({
+          data: [
+            { id: "1", name: "Coffee C", location: { lon: 100.5, lat: 13.75 } },
+          ],
+        }),
+        clear: vi.fn(),
+        enablePopup: vi.fn(),
+        language: vi.fn(),
+      };
+    });
+
+    it("calls suggest with keyword and options", async () => {
+      const { result } = renderHook(() => useSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      const searchResult = await result.current.suggest("coffee", { limit: 5 });
+
+      expect(map.Search.suggest).toHaveBeenCalledWith("coffee", {
+        limit: 5,
+      });
+      expect(searchResult).toEqual({ data: [{ name: "Coffee A" }], total: 1 });
+    });
+
+    it("calls search with keyword and options", async () => {
+      const { result } = renderHook(() => useSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      const searchResult = await result.current.search("coffee", { limit: 10 });
+
+      expect(map.Search.search).toHaveBeenCalledWith("coffee", {
+        limit: 10,
+      });
+      expect(searchResult).toEqual({ data: [{ name: "Coffee B" }], total: 1 });
+    });
+
+    it("calls address with location", async () => {
+      const { result } = renderHook(() => useSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      const addressResult = await result.current.address({
+        lon: 100.5,
+        lat: 13.75,
+      });
+
+      expect(map.Search.address).toHaveBeenCalledWith(
+        { lon: 100.5, lat: 13.75 },
+        undefined
+      );
+      expect(addressResult).toEqual({
+        address: "123 Street",
+        province: "Bangkok",
+      });
+    });
+
+    it("calls nearPoi with location and options", async () => {
+      const { result } = renderHook(() => useSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      const pois = await result.current.nearPoi(
+        { lon: 100.5, lat: 13.75 },
+        { limit: 5 }
+      );
+
+      expect(map.Search.nearPoi).toHaveBeenCalledWith(
+        { lon: 100.5, lat: 13.75 },
+        { limit: 5 }
+      );
+      expect(pois).toEqual([
+        { id: "1", name: "Coffee C", location: { lon: 100.5, lat: 13.75 } },
+      ]);
+    });
+
+    it("delegates clear to Search API", () => {
+      const { result } = renderHook(() => useSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.clear();
+
+      expect(map.Search.clear).toHaveBeenCalled();
+    });
+
+    it("delegates enablePopup to Search API", () => {
+      const { result } = renderHook(() => useSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.enablePopup(true);
+
+      expect(map.Search.enablePopup).toHaveBeenCalledWith(true);
+    });
+
+    it("delegates setLanguage to Search API", () => {
+      const { result } = renderHook(() => useSearch(), {
+        wrapper: createWrapper(),
+      });
+
+      result.current.setLanguage("en");
+
+      expect(map.Search.language).toHaveBeenCalledWith("en");
+    });
+  });
+});