@panoramax/web-viewer 3.0.2-develop-a8ea8e60

package/tests/components/Map.test.js

@@ -0,0 +1,230 @@
+import Map from "../../src/components/Map";
+
+jest.mock("maplibre-gl", () => ({
+	addProtocol: jest.fn(),
+	AttributionControl: jest.fn(),
+	GeolocateControl: class {
+		onAdd() {;}
+	},
+	Marker: jest.fn(),
+	Popup: class {
+		on() {;}
+	},
+	Map: class {
+		constructor(opts) {
+			this._mapOpts = opts;
+		}
+		getContainer() {
+			return this._mapOpts.container;
+		}
+		addControl() {;}
+		addSource() {;}
+		addLayer() {;}
+		getLayer() {;}
+		setLayoutProperty() {;}
+		getStyle() {
+			return {
+				layers: [],
+				sources: {},
+			};
+		}
+		resize() {;}
+		on(type, handler) {
+			if(!this._handlers) { this._handlers = {}; }
+			if(!this._handlers[type]) { this._handlers[type] = []; }
+			this._handlers[type].push(handler);
+		}
+		_fire(type) {
+			this._handlers[type].forEach(f => f());
+		}
+	},
+}));
+
+const createParent = () => ({
+	addEventListener: jest.fn(),
+	dispatchEvent: jest.fn(),
+	isWidthSmall: jest.fn(),
+	_options: {
+		users: ["geovisio"],
+	},
+	_api: {
+		onceReady: () => Promise.resolve(),
+		getDataBbox: jest.fn(),
+		getPicturesTilesUrl: jest.fn(),
+		_getMapRequestTransform: jest.fn(),
+		getMapStyle: () => ({ sources: {}, layers: [] }),
+	},
+	_t: {
+		maplibre: {},
+	}
+});
+
+
+describe("reloadVectorTiles", () => {
+	it("works", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const m = new Map(p, c);
+		const setter = jest.fn();
+		m.getSource = (user) => ({ tiles: [`https://bla.xyz/${user}/x/y/z`], setTiles: setter });
+		m._userLayers = ["geovisio", "toto"];
+		m.reloadVectorTiles();
+		expect(setter.mock.calls).toMatchSnapshot();
+	});
+});
+
+describe("hasTwoBackgrounds", () => {
+	it("is true if 2 bg", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const m = new Map(p, c);
+		m.getLayer = (id) => id == "gvs-aerial";
+		expect(m.hasTwoBackgrounds()).toBeTruthy();
+	});
+
+	it("is false if 1 bg", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const m = new Map(p, c);
+		m.getLayer = (id) => id == "gvs-aerial" ? undefined : {};
+		expect(m.hasTwoBackgrounds()).toBeFalsy();
+	});
+});
+
+describe("getBackground", () => {
+	it("works if raster is enabled", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const m = new Map(p, c, { raster: { type: "raster" } });
+		m.getLayer = () => true;
+		m.getLayoutProperty = () => "hidden";
+		expect(m.getBackground()).toBe("streets");
+		m.getLayoutProperty = () => "visible";
+		expect(m.getBackground()).toBe("aerial");
+	});
+
+	it("works if no raster enabled", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const m = new Map(p, c);
+		expect(m.getBackground()).toBe("streets");
+	});
+});
+
+describe("setBackground", () => {
+	it("works if raster is enabled", () => {
+		const p = createParent();
+		p.dispatchEvent = jest.fn();
+		const c = document.createElement("div");
+		const m = new Map(p, c, { raster: { type: "raster" } });
+		m.setLayoutProperty = jest.fn();
+		m.getLayer = () => true;
+		m.setBackground("aerial");
+		expect(m.setLayoutProperty.mock.calls).toMatchSnapshot();
+		expect(p.dispatchEvent.mock.calls).toMatchSnapshot();
+	});
+
+	it("skips if setting streets and no raster available", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const m = new Map(p, c);
+		m.setLayoutProperty = jest.fn();
+		m.setBackground("streets");
+		expect(m.setLayoutProperty.mock.calls.length).toBe(0);
+	});
+
+	it("fails if no raster available", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const m = new Map(p, c);
+		expect(() => m.setBackground("aerial")).toThrowError("No aerial imagery available");
+	});
+});
+
+describe("getVisibleUsers", () => {
+	it("works", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const m = new Map(p, c);
+		m.getSource = () => true;
+		m.setPaintProperty = jest.fn();
+		m._fire("load");
+		m.getLayoutProperty = () => "visible";
+		expect(m.getVisibleUsers()).toStrictEqual(["geovisio"]);
+	});
+});
+
+describe("setVisibleUsers", () => {
+	it("works when no users exists", async () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const m = new Map(p, c);
+		m._createPicturesTilesLayer = (url, id) => m._userLayers.add(id);
+		m.setLayoutProperty = jest.fn();
+		await m.setVisibleUsers(["blabla"]);
+		expect(m.setLayoutProperty.mock.calls).toMatchSnapshot();
+		expect(p.dispatchEvent.mock.calls).toMatchSnapshot();
+	});
+
+	it("works when user already exist but is hidden", async () => {
+		const p = createParent();
+		p._options.users = ["blabla", "geovisio"];
+		const c = document.createElement("div");
+		const m = new Map(p, c);
+		m.setPaintProperty = jest.fn();
+		m.getSource = () => true;
+		m.getLayer = () => true;
+		let cptlCount = 0;
+		let deCalls = [];
+		return new Promise(resolve => {
+			p.dispatchEvent = (e) => {
+				deCalls.push(e);
+				if(e.type == "map:users-changed") {
+					resolve();
+				}
+			};
+			m._fire("load");
+		}).then(() => {
+			m.setLayoutProperty = jest.fn();
+			m._createPicturesTilesLayer = () => { cptlCount++; return Promise.resolve(); };
+			expect(m._userLayers).toEqual(new Set(["blabla", "geovisio"]));
+			m.setVisibleUsers(["blabla"]);
+		}).then(() => {
+			expect(cptlCount).toBe(0);
+			expect(deCalls).toMatchSnapshot();
+			expect(m.setLayoutProperty.mock.calls).toMatchSnapshot();
+		});
+	});
+});
+
+describe("filterUserLayersContent", () => {
+	it("works", () => {
+		const p = createParent();
+		p._options.users = ["blabla", "geovisio"];
+		const c = document.createElement("div");
+		const m = new Map(p, c);
+		m.getSource = () => true;
+		m.setPaintProperty = jest.fn();
+		m._fire("load");
+		m.setFilter = jest.fn();
+		m.filterUserLayersContent("pictures", [["test", "true"]]);
+		expect(m.setFilter.mock.calls).toMatchSnapshot();
+	});
+});
+
+describe("reloadLayersStyles", () => {
+	it("works", () => {
+		const p = createParent();
+		p._options.users = ["blabla", "geovisio"];
+		const c = document.createElement("div");
+		const m = new Map(p, c);
+		m.getSource = () => true;
+		m.setPaintProperty = jest.fn();
+		m._fire("load");
+		m.setLayoutProperty = jest.fn();
+		m.setPaintProperty = jest.fn();
+		m.reloadLayersStyles();
+		expect(m.setLayoutProperty.mock.calls).toMatchSnapshot();
+		expect(m.setPaintProperty.mock.calls).toMatchSnapshot();
+	});
+});

package/tests/components/Photo.test.js

@@ -0,0 +1,335 @@
+import Photo from "../../src/components/Photo";
+import fs from "fs";
+import path from "path";
+
+jest.mock("@photo-sphere-viewer/core", () => ({
+	Viewer: class {
+		constructor(opts) {
+			this._psvOpts = opts;
+			this.loader = {
+				canvas: { setAttribute: jest.fn() },
+				__updateContent: jest.fn(),
+				show: jest.fn(),
+			};
+			this.renderer = {
+				renderer: {
+					toneMapping: null,
+					toneMappingExposure: null,
+				}
+			};
+		}
+		addEventListener() {;}
+		getPlugin() {
+			return {
+				addEventListener: jest.fn(),
+				datasource: {
+					nodeResolver: jest.fn(),
+				},
+				arrowsRenderer: {
+					clear: jest.fn(),
+				},
+				state: {
+					currentNode: null,
+					datasource: { nodes: {} },
+				},
+				config: {
+					transitionOptions: jest.fn(),
+				},
+				__onEnterObject: jest.fn(),
+				__onLeaveObject: jest.fn(),
+			};
+		}
+	}
+}));
+
+jest.mock("@photo-sphere-viewer/equirectangular-tiles-adapter", () => ({
+	EquirectangularTilesAdapter: jest.fn(),
+}));
+
+jest.mock("@photo-sphere-viewer/virtual-tour-plugin", () => ({
+	VirtualTourPlugin: jest.fn(),
+}));
+
+const createParent = () => ({
+	addEventListener: jest.fn(),
+	dispatchEvent: jest.fn(),
+	isWidthSmall: jest.fn(),
+	select: jest.fn(),
+	_t: { gvs: {} },
+	_api: {
+		_getFetchOptions: jest.fn(),
+		getPictureMetadataUrl: (picId, seqId) => `https://geovisio.fr/api/collections/${seqId}/items/${picId}`
+	},
+});
+
+
+describe("constructor", () => {
+	it("works", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		expect(c.className).toBe("gvs-psv");
+	});
+});
+
+describe("_getNodeFromAPI", () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it("works", async () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		global.fetch = jest.fn(() =>
+			Promise.resolve({
+				ok: true,
+				json: () => Promise.resolve(JSON.parse(fs.readFileSync(path.join(__dirname, "..", "data", "Viewer_pictures_1.json")))),
+			})
+		);
+		global.Date = jest.fn(() => ({ toLocaleDateString: () => "June 3 2022" }));
+		const res = await ph._getNodeFromAPI("id");
+		expect(res).toMatchSnapshot();
+	});
+
+	it("works with nav filter", async () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		p._picturesNavFilter = () => false;
+		global.fetch = jest.fn(() =>
+			Promise.resolve({
+				ok: true,
+				json: () => Promise.resolve(JSON.parse(fs.readFileSync(path.join(__dirname, "..", "data", "Viewer_pictures_1.json")))),
+			})
+		);
+		global.Date = jest.fn(() => ({ toLocaleDateString: () => "June 3 2022" }));
+		const res = await ph._getNodeFromAPI("id");
+		expect(res).toMatchSnapshot();
+	});
+});
+
+describe("getPictureMetadata", () => {
+	it("works when pic is selected", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph._myVTour.state.currentNode = { bla: "bla" };
+		expect(ph.getPictureMetadata()).toStrictEqual({ bla: "bla" });
+	});
+
+	it("nulls when no pic is selected", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		expect(ph.getPictureMetadata()).toBeNull();
+	});
+});
+
+describe("_onSelect", () => {
+	it("works", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph._myVTour = { setCurrentNode: jest.fn(() => Promise.resolve()), getCurrentNode: jest.fn() };
+		ph._onSelect({ detail: { picId: "id" } });
+		expect(ph._myVTour.setCurrentNode.mock.calls).toEqual([["id"]]);
+	});
+
+	it("works on pic ID already used", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph._myVTour = { setCurrentNode: jest.fn(() => Promise.resolve()), getCurrentNode: () => "id" };
+		ph._onSelect({ detail: { picId: "id" } });
+		expect(ph._myVTour.setCurrentNode.mock.calls).toEqual([["id"]]);
+	});
+});
+
+describe("goToNextPicture", () => {
+	it("fails if no current picture", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph._myVTour = { state: { currentNode: undefined } };
+		expect(() => ph.goToNextPicture()).toThrow(new Error("No picture currently selected"));
+	});
+
+	it("works if next pic exists", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph._myVTour = { state: { currentNode: { sequence: { id: "seq", nextPic: "idnext" } } } };
+		ph.goToNextPicture();
+		expect(p.select.mock.calls).toEqual([["seq", "idnext"]]);
+	});
+
+	it("fails if no next picture", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph._myVTour = { state: { currentNode: { sequence: {} } } };
+		expect(() => ph.goToNextPicture()).toThrow(new Error("No next picture available"));
+	});
+});
+
+describe("goToPrevPicture", () => {
+	it("fails if no current picture", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph._myVTour = { state: { currentNode: undefined } };
+		expect(() => ph.goToPrevPicture()).toThrow(new Error("No picture currently selected"));
+	});
+
+	it("works if next pic exists", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph._myVTour = { state: { currentNode: { sequence: { id: "seq", prevPic: "idprev" } } } };
+		ph.goToPrevPicture();
+		expect(p.select.mock.calls).toEqual([["seq", "idprev"]]);
+	});
+
+	it("fails if no next picture", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph._myVTour = { state: { currentNode: { sequence: {} } } };
+		expect(() => ph.goToPrevPicture()).toThrow(new Error("No previous picture available"));
+	});
+});
+
+describe("goToPosition", () => {
+	it("works", async () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		p._api = {
+			getPicturesAroundCoordinates: () => Promise.resolve(JSON.parse(fs.readFileSync(path.join(__dirname, "..", "data", "Viewer_pictures_1.json")))),
+			_getFetchOptions: jest.fn()
+		};
+
+		const res = await ph.goToPosition(48.7, -1.8);
+
+		expect(res).toEqual("0005086d-65eb-4a90-9764-86b3661aaa77");
+		expect(p.select.mock.calls).toEqual([["bb129602-5ac1-4512-bf67-9ec1fa23033f", "0005086d-65eb-4a90-9764-86b3661aaa77"]]);
+	});
+
+	it("handles empty result from API", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		p._api = {
+			getPicturesAroundCoordinates: () => Promise.resolve({ "features": [] }),
+			_getFetchOptions: jest.fn()
+		};
+		return expect(ph.goToPosition()).rejects.toStrictEqual(new Error("No picture found nearby given coordinates"));
+	});
+});
+
+describe("getXY", () => {
+	it("works", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph.getPosition = () => ({ yaw: 0.7853981634, pitch: -1.2217304764 });
+		expect(ph.getXY()).toEqual({ x: 45.0000000001462, y: -70.00000000022743 });
+	});
+});
+
+describe("getXYZ", () => {
+	it("works", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph.getPosition = () => ({ yaw: 0.7853981634, pitch: -1.2217304764 });
+		ph.getZoomLevel = () => 15;
+		expect(ph.getXYZ()).toEqual({ x: 45.0000000001462, y: -70.00000000022743, z: 15 });
+	});
+});
+
+describe("clearPictureMetadataCache", () => {
+	it("works when no pic is selected", async () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		await ph.clearPictureMetadataCache();
+		expect(ph._myVTour.state.currentNode).toBeNull();
+		expect(ph._myVTour.state.datasource.nodes).toStrictEqual({});
+	});
+
+	it("works when a pic is selected", async () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph._myVTour.state.currentNode = { id: "pic", sequence: { id: "seq" } };
+		await ph.clearPictureMetadataCache();
+		expect(p.select.mock.calls).toMatchSnapshot();
+	});
+});
+
+describe("setXYZ", () => {
+	it("works", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph.rotate = jest.fn();
+		ph.zoom = jest.fn();
+		ph.setXYZ(45, -45, 3);
+		expect(ph.zoom.mock.calls).toEqual([[3]]);
+		expect(ph.rotate.mock.calls).toEqual([[{ yaw: 0.7853981633974483, pitch: -0.7853981633974483 }]]);
+	});
+});
+
+describe("setHigherContrast", () => {
+	it("works on enable", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph.needsUpdate = jest.fn();
+		ph.setHigherContrast(true);
+		expect(ph.renderer.renderer.toneMapping).toBe(3);
+		expect(ph.renderer.renderer.toneMappingExposure).toBe(2);
+		expect(ph.needsUpdate.mock.calls.length).toBe(1);
+	});
+
+	it("works on disable", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph.needsUpdate = jest.fn();
+		ph.setHigherContrast(false);
+		expect(ph.renderer.renderer.toneMapping).toBe(0);
+		expect(ph.renderer.renderer.toneMappingExposure).toBe(1);
+		expect(ph.needsUpdate.mock.calls.length).toBe(1);
+	});
+});
+
+describe("getTransitionDuration", () => {
+	it("works", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c, { transitionDuration: 42 });
+		expect(ph.getTransitionDuration()).toBe(42);
+	});
+});
+
+describe("setTransitionDuration", () => {
+	it("works", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		ph.setTransitionDuration(1024);
+		expect(ph.getTransitionDuration()).toBe(1024);
+		expect(p.dispatchEvent.mock.calls).toMatchSnapshot();
+	});
+
+	it("fails when value is invalid", () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const ph = new Photo(p, c);
+		expect(() => ph.setTransitionDuration(-1)).toThrowError("Invalid transition duration (should be between 100 and 3000)");
+		expect(() => ph.setTransitionDuration(3001)).toThrowError("Invalid transition duration (should be between 100 and 3000)");
+	});
+});

package/tests/components/__snapshots__/Loader.test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`constructor works 1`] = `"<img src=\\"marker.svg\\" title=\\"undefined\\" class=\\"gvs-loader-img\\"><div><span>Loading...</span></div>"`;
+
+exports[`dismiss works when no error set 1`] = `
+Array [
+  Array [
+    CustomEvent {
+      "isTrusted": false,
+    },
+  ],
+]
+`;
+
+exports[`dismiss works with error set 1`] = `"<img src=\\"logo_dead.svg\\" title=\\"undefined\\" class=\\"gvs-loader-img\\" style=\\"width: 200px; animation: unset;\\"><div>undefined<br>Oops it's broken<br><small>undefined</small></div>"`;