@panoramax/web-viewer 3.2.3-develop-d7e5a16d → 3.2.3-develop-6257391e

package/tests/components/ui/__snapshots__/SearchBar.test.js.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`_onIconClick resets on clear 1`] = `
+Array [
+  Array [],
+]
+`;
+
+exports[`_onIconClick resets on error 1`] = `
+Array [
+  Array [],
+]
+`;
+
+exports[`_onResultClick resets on null value 1`] = `
+Array [
+  Array [
+    CustomEvent {
+      "isTrusted": false,
+    },
+  ],
+]
+`;
+
+exports[`_onResultClick works on classic 1`] = `
+Array [
+  Array [
+    CustomEvent {
+      "isTrusted": false,
+    },
+  ],
+]
+`;
+
+exports[`_onResultClick works on reduced 1`] = `
+Array [
+  Array [
+    CustomEvent {
+      "isTrusted": false,
+    },
+  ],
+]
+`;
+
+exports[`_search skips if no searcher fct 1`] = `
+Array [
+  Array [
+    "No search handler defined",
+  ],
+]
+`;
+
+exports[`_search skips if value is empty 1`] = `
+Array [
+  Array [],
+]
+`;
+
+exports[`reset works 1`] = `
+Array [
+  Array [
+    null,
+  ],
+]
+`;

package/tests/utils/API.test.js

@@ -1,9 +1,7 @@
 import API from "../../src/utils/API";
 
-jest.mock("maplibre-gl", () => ({
-	addProtocol: jest.fn(),
-}));
 global.AbortSignal = { timeout: jest.fn() };
+global.console = { log: jest.fn(), info: jest.fn(), warn: jest.fn(), error: jest.fn() };
 
 const ENDPOINT = "https://panoramax.ign.fr/api";
 const VALID_LANDING = {
@@ -96,7 +94,6 @@ describe("onceReady", () => {
 	it("handles API failures", async () => {
 		// Mock landing fetch
 		fetch.mockRejectedValueOnce();
-		global.console = { error: jest.fn() };
 
 		const api = new API(ENDPOINT);
 		await expect(api.onceReady()).rejects.toBe("Viewer failed to communicate with API");
@@ -107,8 +104,6 @@ describe("onceReady", () => {
 });
 
 describe("isReady", () => {
-	global.console = { warn: jest.fn(), error: jest.fn() };
-
 	// Randomly fails for no reason
 	it.skip("works if API is ready", async () => {
 		// Mock landing fetch
@@ -136,7 +131,6 @@ describe("isReady", () => {
 
 describe("_parseLanding", () => {
 	it("handles overrides for tiles URL", () => {
-		global.console = { warn: jest.fn() };
 		const api = new API (ENDPOINT, { skipReadLanding: true });
 		api._parseLanding(VALID_LANDING, { tiles: "https://my.custom.tiles/" });
 		expect(api._endpoints.tiles).toBe("https://my.custom.tiles/");
@@ -203,7 +197,6 @@ describe("_loadMapStyles", () => {
 	it("works if no background style set", async() => {
 		const api = new API(ENDPOINT, { skipReadLanding: true });
 		api._parseLanding(VALID_LANDING);
-		global.console = { warn: jest.fn(), log: jest.fn(), error: jest.fn() };
 		await api._loadMapStyles();
 		expect(api.mapStyle).toMatchSnapshot();
 	});
@@ -211,7 +204,6 @@ describe("_loadMapStyles", () => {
 	it("loads background style from string", async () => {
 		const api = new API(ENDPOINT, { skipReadLanding: true });
 		api._parseLanding(LANDING_NO_PREVIEW);
-		global.console = { warn: jest.fn(), log: jest.fn(), error: jest.fn() };
 		global.fetch = () => Promise.resolve({ json: () => ({
 			name: "Provider",
 			sources: { provider: {} },
@@ -224,7 +216,6 @@ describe("_loadMapStyles", () => {
 	it("loads background style from json", async () => {
 		const api = new API(ENDPOINT, { skipReadLanding: true });
 		api._parseLanding(LANDING_NO_PREVIEW);
-		global.console = { warn: jest.fn(), log: jest.fn(), error: jest.fn() };
 		await api._loadMapStyles({
 			name: "Provider",
 			sources: { provider: {} },
@@ -236,7 +227,6 @@ describe("_loadMapStyles", () => {
 	it("handles default user", async () => {
 		const api = new API(ENDPOINT, { skipReadLanding: true });
 		api._parseLanding(VALID_LANDING);
-		global.console = { warn: jest.fn(), log: jest.fn(), error: jest.fn() };
 		await api._loadMapStyles(undefined, ["geovisio"]);
 		expect(api.mapStyle).toMatchSnapshot();
 	});
@@ -260,7 +250,6 @@ describe("_loadMapStyles", () => {
 				}
 			}
 		});
-		global.console = { warn: jest.fn(), log: jest.fn(), error: jest.fn() };
 		global.fetch = (url) => {
 			if(url.includes("/users") && url.includes("style.json")) {
 				let user = null;
@@ -415,7 +404,6 @@ describe("getMapStyle", () => {
 	it("fallbacks to /map route if any", async () => {
 		const api = new API(ENDPOINT, { skipReadLanding: true });
 		api._parseLanding(LANDING_NO_PREVIEW);
-		global.console = { warn: jest.fn(), log: jest.fn(), error: jest.fn() };
 		global.fetch = jest.fn(() => Promise.resolve());
 		const res = await api.getMapStyle();
 		expect(res).toStrictEqual({
@@ -434,7 +422,6 @@ describe("getMapStyle", () => {
 	it("fails if no fallback /map route", async () => {
 		const api = new API(ENDPOINT, { skipReadLanding: true });
 		api._parseLanding(LANDING_NO_PREVIEW);
-		global.console = { warn: jest.fn(), log: jest.fn(), error: jest.fn() };
 		global.fetch = jest.fn(() => Promise.reject());
 		await expect(async () => await api.getMapStyle()).rejects.toEqual(new Error("API doesn't offer a vector tiles endpoint"));
 	});

package/tests/utils/InitParameters.test.js

@@ -0,0 +1,485 @@
+import {
+	default as InitParameters, getMapPositionFromString, xyzParamToPSVPosition, paramsToMapFilters,
+	alterPSVState, alterMapState, alterViewerState,
+} from "../../src/utils/InitParameters";
+
+describe("InitParameters", () => {
+	let componentAttrs;
+	let urlParams;
+
+	beforeEach(() => {
+		console.warn = jest.fn();
+
+		componentAttrs = {
+			psv: { transitionDuration: 1000, picturesNavigation: "seq" },
+			map: { theme: "age", background: "aerial", center: [0, 0], zoom: 10 },
+			focus: "pic",
+			picture: "pic1",
+			users: "user1,user2",
+			geocoder: true,
+			widgets: true,
+			sequence: true,
+			fetchOptions: {},
+			style: {},
+			lang: "en",
+			endpoint: "https://panoramax.testapi.fr",
+		};
+
+		urlParams = {
+			map: "15/30/70",
+			focus: "map",
+			pic: "pic2",
+			users: "user3,user4",
+			speed: 2000,
+			nav: "any",
+			theme: "default",
+			background: "streets",
+			xyz: "1/2/3",
+			date_from: "2023-01-01",
+			date_to: "2023-12-31",
+			pic_type: "type1",
+			camera: "cam1",
+			pic_score: "high",
+		};
+	});
+
+	afterEach(() => jest.clearAllMocks());
+
+	it("should initialize with componentAttrs and urlParams", () => {
+		const initParams = new InitParameters(componentAttrs, urlParams);
+
+		expect(initParams._parentInit).toEqual({
+			map: true,
+			users: "user3,user4",
+			fetchOptions: {},
+			style: {},
+			lang: "en",
+			endpoint: "https://panoramax.testapi.fr",
+		});
+		expect(initParams._parentPostInit).toEqual({
+			focus: "map",
+			picture: "pic2",
+			sequence: true,
+			geocoder: true,
+			widgets: true,
+			forceFocus: true,
+		});
+		expect(initParams._psvInit).toEqual({});
+		expect(initParams._psvAny).toEqual({
+			transitionDuration: 2000,
+			picturesNavigation: "any",
+		});
+		expect(initParams._psvPostInit).toEqual({ xyz: "1/2/3" });
+		expect(initParams._mapInit).toEqual({ raster: undefined });
+		expect(initParams._mapAny).toEqual({
+			theme: "default",
+			background: "streets",
+			center: [70, 30],
+			zoom: 15,
+			pitch: undefined,
+			bearing: undefined,
+			users: "user3,user4",
+		});
+		expect(initParams._mapPostInit).toEqual({
+			date_from: "2023-01-01",
+			date_to: "2023-12-31",
+			pic_type: "type1",
+			camera: "cam1",
+			pic_score: "high",
+		});
+	});
+
+	it("should skip URL parameters if disabled by component", () => {
+		componentAttrs["url-parameters"] = "false";
+		const initParams = new InitParameters(componentAttrs, urlParams);
+
+		expect(initParams._parentInit).toEqual({
+			map: true,
+			users: "user1,user2",
+			fetchOptions: {},
+			style: {},
+			lang: "en",
+			endpoint: "https://panoramax.testapi.fr",
+		});
+		expect(initParams._parentPostInit).toEqual({
+			focus: "pic",
+			picture: "pic1",
+			sequence: true,
+			geocoder: true,
+			widgets: true,
+			forceFocus: true,
+		});
+	});
+
+	it("should sanitize objects correctly", () => {
+		const initParams = new InitParameters(componentAttrs, urlParams);
+		const obj = { a: 1, b: undefined, c: 3 };
+		const sanitizedObj = initParams._sanitize(obj);
+
+		expect(sanitizedObj).toEqual({ a: 1, c: 3 });
+	});
+
+	it("should get parent initialization parameters", () => {
+		const initParams = new InitParameters(componentAttrs, urlParams);
+		const parentInit = initParams.getParentInit();
+
+		expect(parentInit).toEqual({
+			map: true,
+			users: "user3,user4",
+			fetchOptions: {},
+			style: {},
+			lang: "en",
+			endpoint: "https://panoramax.testapi.fr",
+		});
+	});
+
+	it("should get parent post-initialization parameters", () => {
+		const initParams = new InitParameters(componentAttrs, urlParams);
+		const parentPostInit = initParams.getParentPostInit();
+
+		expect(parentPostInit).toEqual({
+			focus: "map",
+			picture: "pic2",
+			sequence: true,
+			geocoder: true,
+			widgets: true,
+			forceFocus: true,
+		});
+	});
+
+	it("should get PSV initialization parameters", () => {
+		const initParams = new InitParameters(componentAttrs, urlParams);
+		const psvInit = initParams.getPSVInit();
+
+		expect(psvInit).toEqual({
+			transitionDuration: 2000,
+			picturesNavigation: "any",
+		});
+	});
+
+	it("should get PSV post-initialization parameters", () => {
+		const initParams = new InitParameters(componentAttrs, urlParams);
+		const psvPostInit = initParams.getPSVPostInit();
+
+		expect(psvPostInit).toEqual({
+			transitionDuration: 2000,
+			picturesNavigation: "any",
+			xyz: "1/2/3",
+		});
+	});
+
+	it("should get map initialization parameters", () => {
+		const initParams = new InitParameters(componentAttrs, urlParams);
+		const mapInit = initParams.getMapInit();
+
+		expect(mapInit).toEqual({
+			theme: "default",
+			background: "streets",
+			center: [70, 30],
+			zoom: 15,
+			pitch: undefined,
+			bearing: undefined,
+			users: "user3,user4",
+			raster: undefined,
+		});
+	});
+
+	it("should get map post-initialization parameters", () => {
+		const initParams = new InitParameters(componentAttrs, urlParams);
+		const mapPostInit = initParams.getMapPostInit();
+
+		expect(mapPostInit).toEqual({
+			theme: "default",
+			background: "streets",
+			center: [70, 30],
+			zoom: 15,
+			pitch: undefined,
+			bearing: undefined,
+			users: "user3,user4",
+			date_from: "2023-01-01",
+			date_to: "2023-12-31",
+			pic_type: "type1",
+			camera: "cam1",
+			pic_score: "high",
+		});
+	});
+
+	it("should handle invalid focus parameter", () => {
+		urlParams.focus = "invalid";
+		const initParams = new InitParameters(componentAttrs, urlParams);
+		expect(initParams._parentPostInit.focus).toBe("pic");
+		expect(console.warn).toHaveBeenCalledWith("Invalid value for parameter focus:", "invalid");
+	});
+
+	it("should handle focus parameter when map is disabled", () => {
+		componentAttrs.map = "false";
+		urlParams.focus = "map";
+		const initParams = new InitParameters(componentAttrs, urlParams);
+		expect(initParams._parentPostInit.focus).toBe("pic");
+		expect(console.warn).toHaveBeenCalledWith("Parameter focus can't be 'map' as map is disabled");
+	});
+
+	it("should handle background parameter when aerial imagery is not available", () => {
+		componentAttrs.map.raster = false;
+		urlParams.background = "aerial";
+		const initParams = new InitParameters(componentAttrs, urlParams);
+		expect(initParams._mapAny.background).toBe("streets");
+		expect(console.warn).toHaveBeenCalledWith("Parameter background can't be 'aerial' as no aerial imagery is available");
+	});
+});
+
+describe("getMapPositionFromString", () => {
+	it("works without map", () => {
+		expect(getMapPositionFromString("18/-12.5/48.7")).toEqual({ center: [48.7, -12.5], zoom: 18, pitch: 0 });
+	});
+
+	it("works with map", () => {
+		const map = {
+			dragRotate: { isEnabled: () => true },
+			touchZoomRotate: { isEnabled: () => true },
+		};
+		expect(getMapPositionFromString("18/-12.5/48.7/15/12", map)).toEqual({ center: [48.7, -12.5], zoom: 18, pitch: 12, bearing: 15 });
+	});
+
+	it("nulls if string is invalid", () => {
+		expect(getMapPositionFromString("bla/bla/bla")).toBeNull();
+	});
+});
+
+describe("xyzParamToPSVPosition", () => {
+	it("works", () => {
+		expect(xyzParamToPSVPosition("18/-12.5/48.7")).toEqual({ x: 18, y: -12.5, z: 48.7 });
+	});
+
+	it("nulls if string is invalid", () => {
+		expect(xyzParamToPSVPosition("bla/bla/bla")).toBeNull();
+	});
+});
+
+describe("paramsToMapFilters", () => {
+	it("works", () => {
+		const vals = {
+			"date_from": "2023-01-01",
+			"date_to": "2023-05-05",
+			"pic_type": "equirectangular",
+			"camera": "sony",
+			"whatever": "whenever",
+			"theme": "type",
+		};
+		expect(paramsToMapFilters(vals)).toEqual({
+			"minDate": "2023-01-01",
+			"maxDate": "2023-05-05",
+			"pic_type": "equirectangular",
+			"camera": "sony",
+			"theme": "type",
+		});
+	});
+});
+
+describe("alterPSVState", () => {
+	let psv;
+
+	beforeEach(() => {
+		psv = {
+			addEventListener: jest.fn(),
+			setXYZ: jest.fn(),
+			setTransitionDuration: jest.fn(),
+			setPicturesNavigation: jest.fn(),
+		};
+	});
+
+	afterEach(() => jest.clearAllMocks());
+
+	it("should set XYZ position when xyz param is provided", () => {
+		const params = { xyz: "1/2/3" };
+		alterPSVState(psv, params);
+
+		expect(psv.addEventListener).toHaveBeenCalledWith("picture-loaded", expect.any(Function), { once: true });
+		const listener = psv.addEventListener.mock.calls[0][1];
+		listener();
+		expect(psv.setXYZ).toHaveBeenCalledWith(1, 2, 3);
+	});
+
+	it("should set transition duration when transitionDuration param is provided", () => {
+		const params = { transitionDuration: 1000 };
+		alterPSVState(psv, params);
+		expect(psv.setTransitionDuration).toHaveBeenCalledWith(1000);
+	});
+
+	it("should set pictures navigation mode when picturesNavigation param is provided", () => {
+		const params = { picturesNavigation: "pic" };
+		alterPSVState(psv, params);
+		expect(psv.setPicturesNavigation).toHaveBeenCalledWith("pic");
+	});
+
+	it("should not set pictures navigation mode when picturesNavigation param is invalid", () => {
+		const params = { picturesNavigation: "invalid" };
+		alterPSVState(psv, params);
+		expect(psv.setPicturesNavigation).not.toHaveBeenCalled();
+	});
+
+	it("should handle multiple params correctly", () => {
+		const params = { xyz: "1/2/3", transitionDuration: 1000, picturesNavigation: "seq" };
+		alterPSVState(psv, params);
+
+		expect(psv.addEventListener).toHaveBeenCalledWith("picture-loaded", expect.any(Function), { once: true });
+		const listener = psv.addEventListener.mock.calls[0][1];
+		listener();
+		expect(psv.setXYZ).toHaveBeenCalledWith(1, 2, 3);
+		expect(psv.setTransitionDuration).toHaveBeenCalledWith(1000);
+		expect(psv.setPicturesNavigation).toHaveBeenCalledWith("seq");
+	});
+});
+
+describe("alterMapState", () => {
+	let map;
+
+	beforeEach(() => {
+		map = {
+			jumpTo: jest.fn(),
+			setVisibleUsers: jest.fn(),
+			setFilters: jest.fn(),
+			setBackground: jest.fn(),
+			getBearing: jest.fn(),
+			dragRotate: {
+				isEnabled: jest.fn(),
+			},
+		};
+	});
+
+	afterEach(() => jest.clearAllMocks());
+
+	it("should jump to map position when map param is provided", () => {
+		const params = { map: "10/20/30" };
+		const mapOpts = { center: [30,20], zoom: 10, pitch: 0 };
+
+		alterMapState(map, params);
+		expect(map.jumpTo).toHaveBeenCalledWith(mapOpts);
+	});
+
+	it("should set visible users when users param is provided", () => {
+		const params = { users: "user1,user2" };
+		alterMapState(map, params);
+		expect(map.setVisibleUsers).toHaveBeenCalledWith(["user1", "user2"]);
+	});
+
+	it("should set default visible user when users param is empty", () => {
+		const params = { users: "" };
+		alterMapState(map, params);
+		expect(map.setVisibleUsers).toHaveBeenCalledWith(["geovisio"]);
+	});
+
+	it("should set map filters when params are provided", () => {
+		const params = { "date_from": "2024-01-01", "pic_score": "ABC" };
+		const filters = { "minDate": "2024-01-01", "qualityscore": [5,4,3] };
+
+		alterMapState(map, params);
+		expect(map.setFilters).toHaveBeenCalledWith(filters);
+	});
+
+	it("should set map background when background param is valid", () => {
+		const params = { background: "aerial" };
+		alterMapState(map, params);
+		expect(map.setBackground).toHaveBeenCalledWith("aerial");
+	});
+
+	it("should not set map background when background param is invalid", () => {
+		const params = { background: "invalid" };
+		alterMapState(map, params);
+		expect(map.setBackground).not.toHaveBeenCalled();
+	});
+
+	it("should handle multiple params correctly", () => {
+		const params = {
+			map: "15/7/6",
+			users: "user1,user2",
+			camera: "value1",
+			background: "streets",
+		};
+		const mapOpts = { center: [6, 7], zoom: 15, pitch: 0 };
+		const filters = { camera: "value1" };
+
+		alterMapState(map, params);
+		expect(map.jumpTo).toHaveBeenCalledWith(mapOpts);
+		expect(map.setVisibleUsers).toHaveBeenCalledWith(["user1", "user2"]);
+		expect(map.setFilters).toHaveBeenCalledWith(filters);
+		expect(map.setBackground).toHaveBeenCalledWith("streets");
+	});
+});
+
+describe("alterViewerState", () => {
+	let viewer;
+
+	beforeEach(() => {
+		console.warn = jest.fn();
+		viewer = {
+			psv: {
+				addEventListener: jest.fn(),
+			},
+			select: jest.fn(),
+			setPopup: jest.fn(),
+			_setFocus: jest.fn(),
+			_showPictureMetadata: jest.fn(),
+		};
+	});
+
+	afterEach(() => jest.clearAllMocks());
+
+	it("should select the first picture ID when picture param is provided", () => {
+		const params = { picture: "pic1;pic2" };
+		alterViewerState(viewer, params);
+		expect(viewer.select).toHaveBeenCalledWith(null, "pic1");
+		expect(console.warn).toHaveBeenCalledWith("Multiple picture IDs passed in URL, only first one kept");
+	});
+
+	it("should select no picture when picture param is not provided", () => {
+		const params = {};
+		alterViewerState(viewer, params);
+		expect(viewer.select).toHaveBeenCalledWith();
+	});
+
+	it("should show picture metadata when focus is meta and picture is loaded", () => {
+		const params = { picture: "pic1", focus: "meta" };
+		alterViewerState(viewer, params);
+		expect(viewer.psv.addEventListener).toHaveBeenCalledWith("picture-loaded", expect.any(Function), { once: true });
+		const listener = viewer.psv.addEventListener.mock.calls[0][1];
+		listener();
+		expect(viewer._showPictureMetadata).toHaveBeenCalled();
+	});
+
+	it("should set focus to map when focus param is map and map exists", () => {
+		const params = { focus: "map", forceFocus: true };
+		viewer.map = {};
+		alterViewerState(viewer, params);
+		expect(viewer.setPopup).toHaveBeenCalledWith(false);
+		expect(viewer._setFocus).toHaveBeenCalledWith("map", null, true);
+	});
+
+	it("should set focus to pic when focus param is pic", () => {
+		const params = { focus: "pic", forceFocus: true };
+		alterViewerState(viewer, params);
+		expect(viewer.setPopup).toHaveBeenCalledWith(false);
+		expect(viewer._setFocus).toHaveBeenCalledWith("pic", null, true);
+	});
+
+	it("should set focus to pic when focus param is meta", () => {
+		const params = { focus: "meta", forceFocus: true };
+		alterViewerState(viewer, params);
+		expect(viewer._setFocus).toHaveBeenCalledWith("pic", null, true);
+	});
+
+	it("should not set focus when focus param is invalid", () => {
+		const params = { focus: "invalid", forceFocus: true };
+		alterViewerState(viewer, params);
+		expect(viewer._setFocus).not.toHaveBeenCalled();
+	});
+
+	it("should handle multiple params correctly", () => {
+		const params = { picture: "pic1", focus: "map", forceFocus: true };
+		viewer.map = {};
+		alterViewerState(viewer, params);
+		expect(viewer.select).toHaveBeenCalledWith(null, "pic1");
+		expect(viewer.setPopup).toHaveBeenCalledWith(false);
+		expect(viewer._setFocus).toHaveBeenCalledWith("map", null, true);
+	});
+});