chore: add test

elements/map/test/cases/hover/display-tooltip-for-layer.js

@@ -0,0 +1,72 @@
+import { html } from "lit";
+import ecoRegionsFixture from "../../fixtures/ecoregions.json";
+import hoverInteractionLayerFixture from "../../fixtures/hoverInteractionLayerId.json";
+import vectorLayerStyleJson from "../../fixtures/hoverInteraction.json";
+import { simulateEvent } from "../../utils/events";
+
+/**
+ * Tests to display tooltip on hover
+ */
+const displayTooltipForLayer = () => {
+  cy.intercept("https://openlayers.org/data/vector/ecoregions.json", (req) => {
+    req.reply(ecoRegionsFixture);
+  });
+  cy.intercept("https://foo.bar/baz.json", (req) => {
+    req.reply(hoverInteractionLayerFixture);
+  });
+  cy.mount(
+    html`<eox-map
+      .layers=${[
+        ...vectorLayerStyleJson,
+        {
+          type: "Vector",
+          properties: {
+            id: "targetLayer",
+          },
+          source: {
+            type: "Vector",
+            format: "GeoJSON",
+            url: "https://foo.bar/baz.json",
+          },
+          interactions: [
+            {
+              type: "select",
+              options: {
+                id: "selectInteraction",
+                condition: "pointermove",
+              },
+            },
+          ],
+        },
+      ]}
+    >
+      <eox-map-tooltip for="targetLayer"></eox-map-tooltip>
+    </eox-map>`,
+  ).as("eox-map");
+  cy.get("eox-map").and(($el) => {
+    const eoxMap = $el[0];
+
+    eoxMap.map.on("loadend", () => {
+      simulateEvent(eoxMap.map, "pointermove", 120, -140);
+    });
+  });
+  cy.get("eox-map")
+    .shadow()
+    .within(() => {
+      cy.get("eox-map-tooltip").should("exist");
+      cy.get("eox-map-tooltip")
+        .shadow()
+        .within(() => {
+          cy.get("ul").should("exist");
+          cy.get("ul").children().should("have.length", 2);
+          cy.get("ul>li").and(($lis) => {
+            assert(
+              $lis[1].textContent.includes("targetLayer"),
+              "includes property from targetLayer",
+            );
+          });
+        });
+    });
+};
+
+export default displayTooltipForLayer;

elements/map/test/cases/hover/index.js

@@ -4,3 +4,4 @@ export { default as addSelectInteraction } from "./add-select-interaction";
 export { default as selectAfterReArrangingLayers } from "./select-after-re-arranging-layers";
 export { default as displayTooltip } from "./display-tooltip";
 export { default as displayTooltipOneLayerVisible } from "./display-tooltip-one-layer-visible";
+export { default as displayTooltipForLayer } from "./display-tooltip-for-layer";

elements/map/test/fixtures/hoverInteractionLayerId.json

@@ -0,0 +1,39 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "fromLayer": "targetLayer"
+      },
+      "id": 1,
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              49.37329931631518,
+              75.25339585285323
+            ],
+            [
+              30.792756530335794,
+              13.182720975583408
+            ],
+            [
+              131.51801085877827,
+              13.182720975583408
+            ],
+            [
+              150.80216977046496,
+              67.37626215156416
+            ],
+            [
+              49.37329931631518,
+              75.25339585285323
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      }
+    }
+  ]
+}

elements/map/test/tooltip.cy.js

@@ -1,5 +1,9 @@
 import "../src/main";
-import { displayTooltip, displayTooltipOneLayerVisible } from "./cases/hover";
+import {
+  displayTooltip,
+  displayTooltipOneLayerVisible,
+  displayTooltipForLayer,
+} from "./cases/hover";
 
 /**
  * Test suite for the EOX Map to load Tooltip
@@ -15,4 +19,10 @@ describe("tooltip", () => {
    */
   it("displays a tooltip on hover when multiple layers are initialized and only one visible", () =>
     displayTooltipOneLayerVisible());
+
+  /**
+   * Test case to check if the tooltip is correctly rendered for a specific layer
+   * instead of default (topmost)
+   */
+  it("displays a tooltip for a specific layer", () => displayTooltipForLayer());
 });