@panoramax/web-viewer 3.0.2-develop-a8ea8e60

package/tests/__snapshots__/Editor.test.js.snap

@@ -0,0 +1,300 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`_addMapBackgroundWidget works 1`] = `
+<div>
+  <div
+    class="gvs-panel gvs-widget-bg gvs-input-group"
+    id="gvs-map-bg"
+  >
+    <input
+      id="gvs-map-bg-streets"
+      name="gvs-map-bg"
+      type="radio"
+      value="streets"
+    />
+    <label
+      for="gvs-map-bg-streets"
+    >
+      <img
+        src="bg_streets.jpg"
+      />
+      Streets
+    </label>
+    <input
+      id="gvs-map-bg-aerial"
+      name="gvs-map-bg"
+      type="radio"
+      value="aerial"
+    />
+    <label
+      for="gvs-map-bg-aerial"
+    >
+      <img
+        src="bg_aerial.jpg"
+      />
+      Aerial
+    </label>
+  </div>
+</div>
+`;
+
+exports[`_bindPicturesEvents works 1`] = `
+Array [
+  Array [
+    "mousemove",
+    "geovisio_editor_pictures",
+    [Function],
+  ],
+  Array [
+    "mouseleave",
+    "geovisio_editor_pictures",
+    [Function],
+  ],
+  Array [
+    "click",
+    "geovisio_editor_pictures",
+    [Function],
+  ],
+]
+`;
+
+exports[`_createMapStyle works 1`] = `
+Object {
+  "layers": Array [
+    Object {
+      "id": "geovisio_editor_sequences",
+      "layout": Object {
+        "line-cap": "square",
+      },
+      "paint": Object {
+        "line-width": Array [
+          "interpolate",
+          Array [
+            "linear",
+          ],
+          Array [
+            "zoom",
+          ],
+          0,
+          0.5,
+          10,
+          2,
+          14,
+          4,
+          16,
+          5,
+          22,
+          3,
+        ],
+      },
+      "source": "geovisio_editor_sequences",
+      "type": "line",
+    },
+    Object {
+      "id": "geovisio_editor_pictures",
+      "layout": Object {},
+      "paint": Object {
+        "circle-opacity": Array [
+          "interpolate",
+          Array [
+            "linear",
+          ],
+          Array [
+            "zoom",
+          ],
+          15,
+          0,
+          16,
+          1,
+        ],
+        "circle-radius": Array [
+          "interpolate",
+          Array [
+            "linear",
+          ],
+          Array [
+            "zoom",
+          ],
+          15,
+          4.5,
+          18,
+          6,
+          24,
+          12,
+        ],
+        "circle-stroke-color": "#ffffff",
+        "circle-stroke-width": Array [
+          "interpolate",
+          Array [
+            "linear",
+          ],
+          Array [
+            "zoom",
+          ],
+          16,
+          0,
+          17,
+          1,
+          18,
+          1.5,
+          24,
+          3,
+        ],
+      },
+      "source": "geovisio_editor_sequences",
+      "type": "circle",
+    },
+  ],
+  "sources": Object {
+    "geovisio_editor_sequences": Object {
+      "data": Object {
+        "features": Array [],
+        "type": "FeatureCollection",
+      },
+      "type": "geojson",
+    },
+  },
+}
+`;
+
+exports[`_getNode works 1`] = `
+Object {
+  "caption": Object {},
+  "gps": Array [
+    0.1,
+    0.1,
+  ],
+  "horizontalFov": 70,
+  "id": undefined,
+  "panorama": Object {
+    "basePanoData": [Function],
+    "baseUrl": "2.jpg",
+    "cols": 2,
+    "hdUrl": undefined,
+    "origBaseUrl": "2.jpg",
+    "rows": 1,
+    "thumbUrl": undefined,
+    "tileUrl": [Function],
+    "width": 2,
+  },
+  "properties": Object {
+    "id": "2",
+  },
+  "sequence": Object {
+    "id": undefined,
+    "nextPic": undefined,
+    "prevPic": undefined,
+  },
+  "sphereCorrection": Object {
+    "pan": 0,
+    "roll": 0,
+    "tilt": 0,
+  },
+}
+`;
+
+exports[`previewSequenceHeadingChange works when setting preview 1`] = `
+Array [
+  Array [
+    Object {
+      "id": "sequence-headings",
+      "layout": Object {
+        "icon-image": "gvs-marker",
+        "icon-overlap": "always",
+        "icon-size": 0.8,
+      },
+      "source": "geovisio_editor_sequences",
+      "type": "symbol",
+    },
+  ],
+]
+`;
+
+exports[`previewSequenceHeadingChange works when setting preview 2`] = `
+Array [
+  Array [
+    "sequence-headings",
+    "visibility",
+    "visible",
+  ],
+  Array [
+    "sequence-headings",
+    "icon-rotate",
+    Array [
+      "+",
+      Array [
+        "get",
+        "view:azimuth",
+      ],
+      -12,
+      10,
+    ],
+  ],
+]
+`;
+
+exports[`previewSequenceHeadingChange works when setting preview 3`] = `
+Array [
+  Array [
+    "sequence-headings",
+    Array [
+      "all",
+      Array [
+        "==",
+        Array [
+          "geometry-type",
+        ],
+        "Point",
+      ],
+    ],
+  ],
+]
+`;
+
+exports[`previewSequenceHeadingChange works when unsetting 1`] = `Array []`;
+
+exports[`previewSequenceHeadingChange works when unsetting 2`] = `
+Array [
+  Array [
+    "sequence-headings",
+    "visibility",
+    "visible",
+  ],
+  Array [
+    "sequence-headings",
+    "icon-rotate",
+    Array [
+      "+",
+      Array [
+        "get",
+        "view:azimuth",
+      ],
+      -12,
+      10,
+    ],
+  ],
+  Array [
+    "sequence-headings",
+    "visibility",
+    "none",
+  ],
+]
+`;
+
+exports[`previewSequenceHeadingChange works when unsetting 3`] = `
+Array [
+  Array [
+    "sequence-headings",
+    Array [
+      "all",
+      Array [
+        "==",
+        Array [
+          "geometry-type",
+        ],
+        "Point",
+      ],
+    ],
+  ],
+]
+`;

package/tests/__snapshots__/StandaloneMap.test.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`_onSelect works 1`] = `
+Array [
+  Array [
+    Object {
+      "filter": Array [
+        "==",
+        Array [
+          "get",
+          "id",
+        ],
+        "bla",
+      ],
+      "layers": Array [
+        "geovisio_pictures",
+        "geovisio_toto_pictures",
+      ],
+    },
+  ],
+]
+`;
+
+exports[`_onSelect works 2`] = `Array []`;
+
+exports[`destroy works 1`] = `
+Array [
+  Array [],
+]
+`;

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

@@ -0,0 +1,195 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`setFilters works 1`] = `
+Array [
+  Array [
+    CustomEvent {
+      "isTrusted": false,
+    },
+  ],
+  Array [
+    CustomEvent {
+      "isTrusted": false,
+    },
+  ],
+]
+`;
+
+exports[`setFilters works 2`] = `
+Array [
+  Array [],
+]
+`;
+
+exports[`setFilters works 3`] = `
+Array [
+  Array [
+    "sequences",
+    Array [
+      "step",
+      Array [
+        "zoom",
+      ],
+      true,
+      7,
+      Array [
+        "all",
+        Array [
+          ">=",
+          Array [
+            "get",
+            "date",
+          ],
+          "2023-01-01",
+        ],
+        Array [
+          "<=",
+          Array [
+            "get",
+            "date",
+          ],
+          "2023-08-08",
+        ],
+        Array [
+          "==",
+          Array [
+            "get",
+            "type",
+          ],
+          "equirectangular",
+        ],
+        Array [
+          ">=",
+          Array [
+            "get",
+            "model",
+          ],
+          "sony                    ",
+          Array [
+            "collator",
+            Object {
+              "case-sensitive": false,
+              "diacritic-sensitive": false,
+            },
+          ],
+        ],
+        Array [
+          "<=",
+          Array [
+            "get",
+            "model",
+          ],
+          "sonyzzzzzzzzzzzzzzzzzzzz",
+          Array [
+            "collator",
+            Object {
+              "case-sensitive": false,
+              "diacritic-sensitive": false,
+            },
+          ],
+        ],
+      ],
+    ],
+  ],
+  Array [
+    "pictures",
+    Array [
+      "step",
+      Array [
+        "zoom",
+      ],
+      true,
+      15,
+      Array [
+        "all",
+        Array [
+          ">=",
+          Array [
+            "get",
+            "ts",
+          ],
+          "2023-01-01",
+        ],
+        Array [
+          "<=",
+          Array [
+            "get",
+            "ts",
+          ],
+          "2023-08-09",
+        ],
+        Array [
+          "==",
+          Array [
+            "get",
+            "type",
+          ],
+          "equirectangular",
+        ],
+        Array [
+          ">=",
+          Array [
+            "get",
+            "model",
+          ],
+          "sony                    ",
+          Array [
+            "collator",
+            Object {
+              "case-sensitive": false,
+              "diacritic-sensitive": false,
+            },
+          ],
+        ],
+        Array [
+          "<=",
+          Array [
+            "get",
+            "model",
+          ],
+          "sonyzzzzzzzzzzzzzzzzzzzz",
+          Array [
+            "collator",
+            Object {
+              "case-sensitive": false,
+              "diacritic-sensitive": false,
+            },
+          ],
+        ],
+      ],
+    ],
+  ],
+  Array [
+    "sequences",
+    null,
+  ],
+  Array [
+    "pictures",
+    null,
+  ],
+]
+`;
+
+exports[`setPicturesNavigation works 1`] = `
+Array [
+  Array [
+    CustomEvent {
+      "isTrusted": false,
+    },
+  ],
+  Array [
+    CustomEvent {
+      "isTrusted": false,
+    },
+  ],
+  Array [
+    CustomEvent {
+      "isTrusted": false,
+    },
+  ],
+]
+`;
+
+exports[`setPopup opens 1`] = `"<div class=\\"gvs-popup-backdrop\\"></div><div class=\\"gvs-widget-bg\\"><button id=\\"gvs-popup-btn-close\\" class=\\"gvs-btn gvs-widget-bg\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"xmark\\" class=\\"svg-inline--fa fa-xmark\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 384 512\\"><path fill=\\"currentColor\\" d=\\"M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z\\"></path></svg></button>BLABLABLA</div>"`;
+
+exports[`setPopup reopens 1`] = `"<div class=\\"gvs-popup-backdrop\\"></div><div class=\\"gvs-widget-bg\\"><button id=\\"gvs-popup-btn-close\\" class=\\"gvs-btn gvs-widget-bg\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"xmark\\" class=\\"svg-inline--fa fa-xmark\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 384 512\\"><path fill=\\"currentColor\\" d=\\"M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z\\"></path></svg></button>BLABLABLA</div>"`;

package/tests/components/CoreView.test.js

@@ -0,0 +1,91 @@
+import Loader from "../../src/components/Loader";
+import CoreView from "../../src/components/CoreView";
+import API from "../../src/utils/API";
+
+jest.mock("maplibre-gl", () => ({
+	addProtocol: jest.fn(),
+}));
+
+global.console = { info: jest.fn() };
+
+describe("constructor", () => {
+	it("works with JS element", () => {
+		const container = document.createElement("div");
+		const v = new CoreView(container, "https://geovisio.fr/api");
+		expect(v._t).toBeDefined();
+		expect(v._selectedPicId).toBeNull();
+		expect(v._selectedSeqId).toBeNull();
+		expect(v._api).toBeInstanceOf(API);
+		expect(v.container).toBe(container);
+		expect(v._loader).toBeInstanceOf(Loader);
+	});
+
+	it("works with string ID", () => {
+		const container = document.createElement("div");
+		container.id = "coreview";
+		document.body.appendChild(container);
+
+		const v = new CoreView("coreview", "https://geovisio.fr/api");
+		expect(v._t).toBeDefined();
+		expect(v._selectedPicId).toBeNull();
+		expect(v._selectedSeqId).toBeNull();
+		expect(v._api).toBeInstanceOf(API);
+		expect(v.container).toBe(container);
+		expect(v._loader).toBeInstanceOf(Loader);
+	});
+
+	it("fails on missing element", () => {
+		expect(() => new CoreView("geovisio", "https://geovisio.fr/api")).toThrow(new Error("Container is not a valid HTML element, does it exist in your page ?"));
+	});
+
+	it("handle options", () => {
+		const opts = {
+			selectedSequence: "seq",
+			selectedPicture: "pic",
+			fetchOptions: { "bla": "bla" }
+		};
+		const container = document.createElement("div");
+		const v = new CoreView(container, "https://geovisio.fr/api", opts);
+		expect(v._selectedPicId).toBe("pic");
+		expect(v._selectedSeqId).toBe("seq");
+		expect(v._api._fetchOpts).toEqual({ "bla": "bla" });
+	});
+});
+
+describe("select", () => {
+	it("works", () => {
+		const container = document.createElement("div");
+		const v = new CoreView(container, "https://geovisio.fr/api");
+		const p = new Promise(resolve => {
+			v.addEventListener("select", e => {
+				expect(v._selectedPicId).toBe("pic");
+				expect(v._selectedSeqId).toBe("seq");
+				expect(e.detail.picId).toBe("pic");
+				expect(e.detail.seqId).toBe("seq");
+				resolve();
+			});
+		});
+		v.select("seq", "pic");
+		return p;
+	});
+
+	it("unselects", () => {
+		const container = document.createElement("div");
+		const v = new CoreView(
+			container,
+			"https://geovisio.fr/api",
+			{ selectedSequence: "seq", selectedPicture: "pic" }
+		);
+		const p = new Promise(resolve => {
+			v.addEventListener("select", e => {
+				expect(v._selectedPicId).toBeNull();
+				expect(v._selectedSeqId).toBeNull();
+				expect(e.detail.picId).toBeNull();
+				expect(e.detail.seqId).toBeNull();
+				resolve();
+			});
+		});
+		v.select();
+		return p;
+	});
+});

package/tests/components/Loader.test.js

@@ -0,0 +1,38 @@
+import Loader from "../../src/components/Loader";
+
+describe("constructor", () => {
+	it("works", () => {
+		const p = { _t: { gvs: { loading_labels_serious: ["Loading..."], loading_labels_fun: ["FUN..."] }, map: {} } };
+		const c = document.createElement("div");
+		const l = new Loader(p, c);
+		expect(l.container.className).toBe("gvs-loader gvs-loader-visible");
+		expect(l.container.innerHTML).toMatchSnapshot();
+	});
+});
+
+describe("dismiss", () => {
+	it("works when no error set", () => {
+		const p = {
+			_t: { gvs: { loading_labels_serious: ["Loading..."], loading_labels_fun: ["FUN..."] }, map: {} },
+			dispatchEvent: jest.fn()
+		};
+		const c = document.createElement("div");
+		const l = new Loader(p, c);
+		l.dismiss();
+		expect(c.className).toBe("gvs-loader");
+		expect(p.dispatchEvent.mock.calls).toMatchSnapshot();
+	});
+
+	it("works with error set", () => {
+		global.console = { error: jest.fn() };
+		const p = {
+			_t: { gvs: { loading_labels_serious: ["Loading..."], loading_labels_fun: ["FUN..."] }, map: {} },
+			dispatchEvent: jest.fn()
+		};
+		const c = document.createElement("div");
+		const l = new Loader(p, c);
+		expect(() => l.dismiss("Technical issue", "Oops it's broken")).toThrowError("Oops it's broken");
+		expect(c.className).toBe("gvs-loader gvs-loader-visible");
+		expect(c.innerHTML).toMatchSnapshot();
+	});
+});