Added tests and minor refactoring

visgl · Dec 21, 2023 · 450835f · 450835f
1 parent fac359b
commit 450835f
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 19 deletions.
diff --git a/src/pages/debug-app/debug-app.tsx b/src/pages/debug-app/debug-app.tsx
@@ -193,7 +193,7 @@ export const DebugApp = () => {
     dispatch(setDragMode(DragMode.pan));
     dispatch(setDebugOptions({ minimap: true }));
 
-    urlParamsToViewState(viewState, setStateUrlViewStateParams);
+    setStateUrlViewStateParams(urlParamsToViewState(viewState));
 
     return () => {
       dispatch(resetDebugOptions());
@@ -723,7 +723,7 @@ export const DebugApp = () => {
       !isPanning &&
       !isRotating
     ) {
-      viewStateToUrlParams(viewState, setSearchParams);
+      setSearchParams(viewStateToUrlParams(viewState), { replace: true });
     }
   };
 

diff --git a/src/pages/viewer-app/viewer-app.tsx b/src/pages/viewer-app/viewer-app.tsx
@@ -162,7 +162,7 @@ export const ViewerApp = () => {
     dispatch(setColorsByAttrubute(null));
     dispatch(setDragMode(DragMode.pan));
 
-    urlParamsToViewState(viewState, setStateUrlViewStateParams);
+    setStateUrlViewStateParams(urlParamsToViewState(viewState));
 
     return () => {
       dispatch(setInitialBaseMaps());
@@ -576,7 +576,7 @@ export const ViewerApp = () => {
       !isPanning &&
       !isRotating
     ) {
-      viewStateToUrlParams(viewState, setSearchParams);
+      setSearchParams(viewStateToUrlParams(viewState), { replace: true });
     }
   };
 

diff --git a/src/utils/url-utils.spec.ts b/src/utils/url-utils.spec.ts
@@ -3,6 +3,8 @@ import {
   getTilesetType,
   parseTilesetFromUrl,
   parseTilesetUrlParams,
+  urlParamsToViewState,
+  viewStateToUrlParams,
 } from "./url-utils";
 
 const mockResponse = jest.fn();
@@ -134,3 +136,46 @@ describe("Url Utils - getTilesetType", () => {
     expect(resultEmptyUrl).toEqual(TilesetType.I3S);
   });
 });
+
+describe("Url Utils - viewStateToUrlParams", () => {
+  test("Should generate updated url search params", () => {
+    Object.defineProperty(window, "location", {
+      value: {
+        search: "tileset=test-tileset-name&token=test-token",
+      },
+      writable: true,
+    });
+    const viewState = {
+      main: { zoom: 1, longitude: 2, latitude: 3, bearing: 4, pitch: 5 },
+    };
+    const result = viewStateToUrlParams(viewState);
+    expect(result).toEqual({
+      ...viewState.main,
+      tileset: "test-tileset-name",
+      token: "test-token",
+    });
+  });
+});
+
+describe("Url Utils - urlParamsToViewState", () => {
+  test("Should generate updated url search params", () => {
+    Object.defineProperty(window, "location", {
+      value: {
+        search:
+          "tileset=test-tileset-name&zoom=6&longitude=7&latitude=8&bearing=9&pitch=10",
+      },
+      writable: true,
+    });
+    const viewState = {
+      main: { zoom: 1, longitude: 2, latitude: 3, bearing: 4, pitch: 5 },
+    };
+    const result = urlParamsToViewState(viewState);
+    expect(result).toEqual({
+      zoom: 6,
+      longitude: 7,
+      latitude: 8,
+      bearing: 9,
+      pitch: 10,
+    });
+  });
+});
diff --git a/src/utils/url-utils.ts b/src/utils/url-utils.ts
@@ -1,4 +1,4 @@
-import { TilesetType } from "../types";
+import { TilesetType, ViewStateSet } from "../types";
 
 export const parseTilesetFromUrl = () => {
   const parsedUrl = new URL(window.location.href);
@@ -58,25 +58,32 @@ const prepareTilesetUrl = (parsedUrl) => {
   return `${parsedUrl.origin}${replacedPathName}${parsedUrl.search}`;
 };
 
-export const viewStateToUrlParams = (viewState, setSearchParams) => {
+/**
+ * Generate updated url search params according to the viewState
+ * @param viewState view state
+ * @returns updated url search params object
+ */
+export const viewStateToUrlParams = (viewState: ViewStateSet) => {
   const search = Object.fromEntries(
     new URLSearchParams(window.location.search)
   );
   const { longitude, latitude, pitch, bearing, zoom } = viewState.main;
-  setSearchParams(
-    {
-      ...search,
-      longitude,
-      latitude,
-      pitch,
-      bearing,
-      zoom,
-    },
-    { replace: true }
-  );
+  return {
+    ...search,
+    longitude,
+    latitude,
+    pitch,
+    bearing,
+    zoom,
+  };
 };
 
-export const urlParamsToViewState = (viewState, setStateUrlViewStateParams) => {
+/**
+ * Parse view state params from the url search params
+ * @param viewState view state
+ * @returns viewState params available in the url search params
+ */
+export const urlParamsToViewState = (viewState: ViewStateSet) => {
   const search = new URLSearchParams(window.location.search);
   const urlViewStateParams = {};
   for (const viewStateParam of search) {
@@ -87,5 +94,5 @@ export const urlParamsToViewState = (viewState, setStateUrlViewStateParams) => {
       urlViewStateParams[viewStateParam[0]] = parseFloat(viewStateParam[1]);
     }
   }
-  setStateUrlViewStateParams(urlViewStateParams);
+  return urlViewStateParams;
 };