@panoramax/web-viewer/tests/utils/InitParameters.test.js

Panoramax web viewer for geolocated pictures

import {
	default as InitParameters, getMapPositionFromString, xyzParamToPSVPosition, paramsToMapFilters,
	alterPSVState, alterMapState, alterViewerState,
} from "../../src/utils/InitParameters";

describe("InitParameters", () => {
	let componentAttrs, urlParams, browserStorage;

	beforeEach(() => {
		console.warn = jest.fn();

		componentAttrs = {
			"psv-options": { transitionDuration: 1000, picturesNavigation: "seq" },
			"map-options": { theme: "age", background: "aerial", center: [0, 0], zoom: 10 },
			focus: "pic",
			picture: "pic1",
			users: "user1,user2",
			geocoder: true,
			widgets: true,
			sequence: true,
			"fetch-options": {},
			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",
		};

		browserStorage = {
			map: { theme: "qualityscore", background: "aerial", center: [-10, -20], zoom: 19 },
		};
	});

	afterEach(() => jest.clearAllMocks());

	it("should initialize with componentAttrs and urlParams", () => {
		const initParams = new InitParameters(componentAttrs, urlParams, browserStorage);

		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,
			keyboardShortcuts: true,
			willLoadPicture: true,
		});
		expect(initParams._psvInit).toEqual({ displayAnnotations: false });
		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,
			keyboardShortcuts: true,
			willLoadPicture: true,
		});
	});

	it("uses browserStorage parameters if no URL parameter is available", () => {
		componentAttrs["map-options"].raster = {};
		componentAttrs.picture = undefined;
		const initParams = new InitParameters(componentAttrs, undefined, browserStorage);
		expect(initParams._mapAny).toEqual({
			theme: "qualityscore",
			background: "aerial",
			center: [-10,-20],
			zoom: 19,
			pitch: undefined,
			bearing: undefined,
			users: "user1,user2",
		});
	});

	it("uses browserStorage parameters if no URL parameter is available, except map coords if picture is set", () => {
		componentAttrs["map-options"].raster = {};
		const initParams = new InitParameters(componentAttrs, undefined, browserStorage);
		expect(initParams._mapAny).toEqual({
			theme: "qualityscore",
			background: "aerial",
			center: [0,0],
			zoom: 19,
			pitch: undefined,
			bearing: undefined,
			users: "user1,user2",
		});
	});

	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,
			keyboardShortcuts: true,
			willLoadPicture: true,
		});
	});

	it("should get PSV initialization parameters", () => {
		const initParams = new InitParameters(componentAttrs, urlParams);
		const psvInit = initParams.getPSVInit();

		expect(psvInit).toEqual({
			displayAnnotations: false,
			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-options"] = "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-options"].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");
	});

	it("should handle keyboardShortcuts=false", () => {
		componentAttrs["keyboard-shortcuts"] = "false";
		const initParams = new InitParameters(componentAttrs, urlParams);
		expect(initParams._mapInit.keyboard).toBe(false);
		expect(initParams._parentPostInit.keyboardShortcuts).toBe(false);
		expect(initParams._psvInit.keyboard).toBe(false);
		expect(initParams._psvInit.keyboardActions).toEqual({});
	});
});

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 set pictures navigation mode when picturesNavigation=none", () => {
		const params = { picturesNavigation: "none" };
		alterPSVState(psv, params);
		expect(psv.setPicturesNavigation).toHaveBeenCalledWith("none");
	});

	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", async () => {
		const params = { map: "10/20/30" };
		const mapOpts = { center: [30,20], zoom: 10, pitch: 0 };

		await alterMapState(map, params);
		expect(map.jumpTo).toHaveBeenCalledWith(mapOpts);
	});

	it("should set visible users when users param is provided", async () => {
		const params = { users: "user1,user2" };
		await alterMapState(map, params);
		expect(map.setVisibleUsers).toHaveBeenCalledWith(["user1", "user2"]);
	});

	it("should set default visible user when users param is empty", async () => {
		const params = { users: "" };
		await alterMapState(map, params);
		expect(map.setVisibleUsers).toHaveBeenCalledWith(["geovisio"]);
	});

	it("should set map filters when params are provided", async () => {
		const params = { "date_from": "2024-01-01", "pic_score": "ABC" };
		const filters = { "minDate": "2024-01-01", "qualityscore": [5,4,3] };
		await alterMapState(map, params);
		expect(map.setFilters).toHaveBeenCalledWith(filters);
	});

	it("should set map background when background param is valid", async () => {
		const params = { background: "aerial" };
		map.setVisibleUsers = () => Promise.resolve();
		await alterMapState(map, params);
		expect(map.setBackground).toHaveBeenCalledWith("aerial");
	});

	it("should not set map background when background param is invalid", async () => {
		const params = { background: "invalid" };
		await alterMapState(map, params);
		expect(map.setBackground).not.toHaveBeenCalled();
	});

	it("should handle multiple params correctly", async () => {
		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" };

		await 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(),
			mini: {},
		};
	});

	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", true);
		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 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", true);
		expect(viewer.setPopup).toHaveBeenCalledWith(false);
		expect(viewer._setFocus).toHaveBeenCalledWith("map", null, true);
	});
});