@panoramax/web-viewer 3.2.3 → 4.0.0-develop-9f9cf858

package/tests/components/core/Viewer.test.js

@@ -0,0 +1,84 @@
+import Viewer from "../../../src/components/core/Viewer";
+import "./BasicMock";
+
+jest.mock("../../../src/components/core/PhotoViewer", () => (
+	class PhotoViewer extends EventTarget {
+		constructor() {
+			super();
+			this.loader = { setAttribute: jest.fn() };
+			this.api = {
+				getMapStyle: () => ({}),
+				_getMapRequestTransform: () => ({}),
+				_endpoints: {},
+			};
+			this._t = { maplibre: {}, psv: {} };
+			this.grid = { appendChild: jest.fn() };
+		}
+		getAttribute() { return null; }
+		isWidthSmall() { return false; }
+		isHeightSmall() { return false; }
+		getSubComponentsNames() {
+			return ["loader", "api", "psv", "grid", "popup", "urlHandler"];
+		}
+		onceAPIReady() {
+			return Promise.resolve();
+		}
+		static GetJSONConverter() {
+			return {};
+		}
+	}
+));
+
+let comp;
+global.console = { info: jest.fn(), error: jest.fn(), warn: jest.fn(), log: global.console.log };
+
+beforeEach(() => comp = new Viewer());
+afterEach(() => jest.clearAllMocks());
+
+describe("_initWidgets", () => {
+	let initParamsMock;
+
+	beforeEach(() => {
+		comp.grid.appendChild = jest.fn();
+
+		// Mock the return value of getParentPostInit
+		initParamsMock = {
+			widgets: "true",
+			focus: "pic",
+			picture: "somePicture",
+		};
+		comp._createInitParamsHandler();
+		comp._initParams.getParentPostInit = jest.fn();
+		comp._initParams.getParentPostInit.mockReturnValue(initParamsMock);
+	});
+
+	it("should not add widgets if widgets is false", () => {
+		initParamsMock.widgets = "false";
+		comp._initWidgets();
+		expect(comp.grid.appendChild).not.toHaveBeenCalled();
+	});
+
+	it("should handle widgets if width is not small", () => {
+		comp.isWidthSmall = () => false;
+		comp._initWidgets();
+		expect(comp.grid.appendChild).toMatchSnapshot();
+	});
+
+	it("should handle widgets if width is small", () => {
+		comp.isWidthSmall = () => true;
+		comp._initWidgets();
+		expect(comp.grid.appendChild).toMatchSnapshot();
+	});
+});
+
+describe("getClassName", () => {
+	it("works", () => {
+		expect(comp.getClassName()).toBe("Viewer");
+	});
+});
+
+describe("getSubComponentsNames", () => {
+	it("works", () => {
+		expect(comp.getSubComponentsNames()).toEqual(["loader", "api", "psv", "grid", "popup", "urlHandler", "mini", "map"]);
+	});
+});

package/tests/components/core/__snapshots__/PhotoViewer.test.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`_initWidgets should handle widgets if width is not small 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      <pnx-widget-player
+        class="pnx-only-psv pnx-print-hidden"
+        size="xl"
+        slot="top"
+      />,
+    ],
+    Array [
+      <pnx-widget-zoom
+        class="pnx-print-hidden"
+        slot="bottom-right"
+      />,
+    ],
+    Array [
+      <pnx-widget-legend
+        focus="pic"
+        picture="somePicture"
+        slot="top-left"
+      />,
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
+
+exports[`_initWidgets should handle widgets if width is small 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      <pnx-widget-player
+        class="pnx-only-psv pnx-print-hidden"
+        size="xl"
+        slot="top"
+      />,
+    ],
+    Array [
+      <pnx-bottom-drawer
+        slot="bottom"
+      >
+        <pnx-picture-legend />
+      </pnx-bottom-drawer>,
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;

package/tests/components/core/__snapshots__/Viewer.test.js.snap

@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`_initWidgets should handle widgets if width is not small 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      <pnx-widget-zoom
+        class="pnx-print-hidden"
+        slot="bottom-right"
+      />,
+    ],
+    Array [
+      <pnx-widget-legend
+        focus="pic"
+        picture="somePicture"
+        slot="top-left"
+      />,
+    ],
+    Array [
+      <pnx-widget-player
+        class="pnx-only-psv pnx-print-hidden"
+        size="xl"
+        slot="top"
+      />,
+    ],
+    Array [
+      <pnx-widget-geosearch
+        class="pnx-only-map pnx-print-hidden"
+        slot="top-left"
+      />,
+    ],
+    Array [
+      <pnx-widget-mapfilters
+        class="pnx-only-map pnx-print-hidden"
+        slot="top-left"
+        user-search="true"
+      />,
+    ],
+    Array [
+      <pnx-widget-maplayers
+        class="pnx-only-map pnx-print-hidden"
+        slot="top-right"
+      />,
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
+
+exports[`_initWidgets should handle widgets if width is small 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      <pnx-widget-zoom
+        class="pnx-only-map pnx-print-hidden"
+        slot="top-left"
+      />,
+    ],
+    Array [
+      <pnx-bottom-drawer
+        slot="bottom"
+      >
+        <pnx-picture-legend />
+      </pnx-bottom-drawer>,
+    ],
+    Array [
+      <pnx-widget-player
+        class="pnx-only-psv pnx-print-hidden"
+        size="xl"
+        slot="top"
+      />,
+    ],
+    Array [
+      <pnx-widget-geosearch
+        class="pnx-only-map pnx-print-hidden"
+        slot="top-right"
+      />,
+    ],
+    Array [
+      <pnx-widget-mapfilters
+        class="pnx-only-map pnx-print-hidden"
+        slot="top-right"
+        user-search="true"
+      />,
+    ],
+    Array [
+      <pnx-widget-maplayers
+        class="pnx-only-map pnx-print-hidden"
+        slot="top-right"
+      />,
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;

package/tests/components/ui/CopyButton.test.js

@@ -0,0 +1,52 @@
+import CopyButton from "../../../src/components/ui/CopyButton";
+
+window.navigator.clipboard = { writeText: jest.fn() };
+
+describe("constructor", () => {
+	it("listens to click", () => {
+		const cb = new CopyButton();
+		expect(cb._handlers).toMatchSnapshot();
+	});
+});
+
+describe("_onClick", () => {
+	it("works with text", () => {
+		const cb = new CopyButton();
+		cb.text = "I am a copy text";
+		cb._onClick();
+		expect(cb._active).toBe(true);
+		expect(global.navigator.clipboard.writeText.mock.calls).toMatchSnapshot();
+		return new Promise(resolve => setTimeout(() => {
+			expect(cb._active).toBe(false);
+			resolve();
+		}, 2000));
+	});
+
+	it("works with input", () => {
+		const i = document.createElement("input");
+		i.value = "copy me from input";
+		i.id = "input-to-copy";
+		document.body.appendChild(i);
+
+		const cb = new CopyButton();
+		cb.input = "input-to-copy";
+		cb._onClick();
+
+		expect(cb._active).toBe(true);
+		expect(global.navigator.clipboard.writeText.mock.calls).toMatchSnapshot();
+	});
+
+	it("works with textarea", () => {
+		const i = document.createElement("textarea");
+		i.appendChild(document.createTextNode("copy me from textarea"));
+		i.id = "textarea-to-copy";
+		document.body.appendChild(i);
+
+		const cb = new CopyButton();
+		cb.input = "textarea-to-copy";
+		cb._onClick();
+
+		expect(cb._active).toBe(true);
+		expect(global.navigator.clipboard.writeText.mock.calls).toMatchSnapshot();
+	});
+});

package/tests/components/ui/Loader.test.js

@@ -0,0 +1,55 @@
+import Loader from "../../../src/components/ui/Loader";
+
+describe("constructor", () => {
+	it("works", () => {
+		const l = new Loader();
+		expect(l.isVisible()).toBe(true);
+	});
+});
+
+describe("dismiss", () => {
+	it("works on success", () => {
+		const p = { dispatchEvent: jest.fn() };
+		const l = new Loader();
+		l._parent = p;
+		l.dismiss();
+
+		expect(l.isVisible()).toBe(false);
+		expect(p.dispatchEvent.mock.calls).toMatchSnapshot();
+	});
+
+	it("works on success + next fct", () => {
+		const p = { dispatchEvent: jest.fn() };
+		const n = jest.fn();
+		const l = new Loader();
+		l._parent = p;
+		l.dismiss(null, null, n);
+
+		expect(l.isVisible()).toBe(false);
+		expect(p.dispatchEvent.mock.calls).toMatchSnapshot();
+		expect(n.mock.calls).toMatchSnapshot();
+	});
+
+	it("works with error", () => {
+		const p = { dispatchEvent: jest.fn(), _t: { pnx: {} } };
+		const l = new Loader();
+		l._parent = p;
+		expect(() => l.dismiss(true, "an error")).toThrow(new Error("an error"))
+
+		expect(l.isVisible()).toBe(true);
+		expect(p.dispatchEvent.mock.calls).toMatchSnapshot();
+	});
+
+	it("works with error + next fct", () => {
+		const p = { dispatchEvent: jest.fn(), _t: { pnx: {} } };
+		const n = jest.fn();
+		const l = new Loader();
+		l.addEventListener = jest.fn();
+		l._parent = p;
+		expect(() => l.dismiss(true, "an error", n)).toThrow(new Error("an error"))
+
+		expect(l.isVisible()).toBe(true);
+		expect(p.dispatchEvent.mock.calls).toMatchSnapshot();
+		expect(l.addEventListener.mock.calls).toMatchSnapshot();
+	});
+});

package/tests/components/{Map.test.js → ui/Map.test.js}

@@ -1,54 +1,13 @@
-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: {},
-				metadata: {},
-			};
-		}
-		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());
-		}
-	},
-}));
+import Map from "../../../src/components/ui/Map";
 
 const createParent = () => ({
 	addEventListener: jest.fn(),
 	dispatchEvent: jest.fn(),
 	isWidthSmall: jest.fn(),
-	_options: {
-		users: ["geovisio"],
-	},
-	_api: {
+	onceReady: () => Promise.resolve(),
+	onceAPIReady: () => Promise.resolve(),
+	users: ["geovisio"],
+	api: {
 		onceReady: () => Promise.resolve(),
 		getDataBbox: jest.fn(),
 		getPicturesTilesUrl: jest.fn(),
@@ -61,6 +20,20 @@ const createParent = () => ({
 });
 
 
+describe("_postLoad", () => {
+	it("send ready event", async () => {
+		const p = createParent();
+		const c = document.createElement("div");
+		const m = new Map(p, c);
+		const listener = jest.fn();
+		m.addEventListener("ready", listener, { once: true });
+
+		await m._postLoad();
+		
+		expect(listener).toHaveBeenCalledTimes(1);
+	});
+});
+
 describe("reloadVectorTiles", () => {
 	it("works", () => {
 		const p = createParent();
@@ -79,7 +52,7 @@ describe("hasTwoBackgrounds", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const m = new Map(p, c);
-		m.getLayer = (id) => id == "gvs-aerial";
+		m.getLayer = (id) => id == "pnx-aerial";
 		expect(m.hasTwoBackgrounds()).toBeTruthy();
 	});
 
@@ -87,7 +60,7 @@ describe("hasTwoBackgrounds", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const m = new Map(p, c);
-		m.getLayer = (id) => id == "gvs-aerial" ? undefined : {};
+		m.getLayer = (id) => id == "pnx-aerial" ? undefined : {};
 		expect(m.hasTwoBackgrounds()).toBeFalsy();
 	});
 });
@@ -115,14 +88,18 @@ describe("getBackground", () => {
 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();
+		return new Promise(resolve => {
+			m.on("background-changed", e => {
+				expect(m.setLayoutProperty.mock.calls).toMatchSnapshot();
+				expect(e.background).toEqual("aerial");
+				resolve();
+			});
+			m.setBackground("aerial");
+		})
 	});
 
 	it("skips if setting streets and no raster available", () => {
@@ -169,7 +146,7 @@ describe("setVisibleUsers", () => {
 
 	it("works when user already exist but is hidden", async () => {
 		const p = createParent();
-		p._options.users = ["blabla", "geovisio"];
+		p.users = ["blabla", "geovisio"];
 		const c = document.createElement("div");
 		const m = new Map(p, c);
 		m.setPaintProperty = jest.fn();
@@ -178,12 +155,7 @@ describe("setVisibleUsers", () => {
 		let cptlCount = 0;
 		let deCalls = [];
 		return new Promise(async (resolve) => {
-			p.dispatchEvent = (e) => {
-				deCalls.push(e);
-				if(e.type == "map:users-changed") {
-					resolve();
-				}
-			};
+			m.on("users-changed", resolve);
 			await m._postLoad();
 		}).then(() => {
 			m.setLayoutProperty = jest.fn();
@@ -201,7 +173,7 @@ describe("setVisibleUsers", () => {
 describe("filterUserLayersContent", () => {
 	it("works", async () => {
 		const p = createParent();
-		p._options.users = ["blabla", "geovisio"];
+		p.users = ["blabla", "geovisio"];
 		const c = document.createElement("div");
 		const m = new Map(p, c);
 		m.getSource = () => true;
@@ -217,7 +189,7 @@ describe("filterUserLayersContent", () => {
 describe("reloadLayersStyles", () => {
 	it("works", async () => {
 		const p = createParent();
-		p._options.users = ["blabla", "geovisio"];
+		p.users = ["blabla", "geovisio"];
 		const c = document.createElement("div");
 		const m = new Map(p, c);
 		m.getSource = () => true;
@@ -230,3 +202,43 @@ describe("reloadLayersStyles", () => {
 		expect(m.setPaintProperty.mock.calls).toMatchSnapshot();
 	});
 });
+
+describe("addEventListener", () => {
+	let map;
+	beforeEach(() => {
+		const p = createParent();
+		const c = document.createElement("div");
+		map = new Map(p, c);
+	});
+	
+	it("should add an event listener", () => {
+		const listener = jest.fn();
+		map.addEventListener("ready", listener);
+		map.fire("ready");
+		expect(listener).toHaveBeenCalled();
+	});
+	
+	it("should add an event listener that only fires once", () => {
+		const listener = jest.fn();
+		map.addEventListener("ready", listener, { once: true });
+		map.fire("ready");
+		map.fire("ready");
+		expect(listener).toHaveBeenCalledTimes(1);
+	});
+	
+	it("should not add an event listener if options.once is false", () => {
+		const listener = jest.fn();
+		map.addEventListener("ready", listener, { once: false });
+		map.fire("ready");
+		map.fire("ready");
+		expect(listener).toHaveBeenCalledTimes(2);
+	});
+	
+	it("should default options.once to false if not provided", () => {
+		const listener = jest.fn();
+		map.addEventListener("ready", listener);
+		map.fire("ready");
+		map.fire("ready");
+		expect(listener).toHaveBeenCalledTimes(2);
+	});
+});