From 7ab6b507357000170a560245954ab013030e556d Mon Sep 17 00:00:00 2001 From: silvester-pari Date: Mon, 2 Dec 2024 14:25:11 +0100 Subject: [PATCH] chore: add test --- .../cases/hover/display-tooltip-for-layer.js | 72 +++++++++++++++++++ elements/map/test/cases/hover/index.js | 1 + .../fixtures/hoverInteractionLayerId.json | 39 ++++++++++ elements/map/test/tooltip.cy.js | 12 +++- 4 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 elements/map/test/cases/hover/display-tooltip-for-layer.js create mode 100644 elements/map/test/fixtures/hoverInteractionLayerId.json diff --git a/elements/map/test/cases/hover/display-tooltip-for-layer.js b/elements/map/test/cases/hover/display-tooltip-for-layer.js new file mode 100644 index 000000000..a16a93f9d --- /dev/null +++ b/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` + + `, + ).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; diff --git a/elements/map/test/cases/hover/index.js b/elements/map/test/cases/hover/index.js index 028665ecd..78bc9e39d 100644 --- a/elements/map/test/cases/hover/index.js +++ b/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"; diff --git a/elements/map/test/fixtures/hoverInteractionLayerId.json b/elements/map/test/fixtures/hoverInteractionLayerId.json new file mode 100644 index 000000000..89e7d0b48 --- /dev/null +++ b/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" + } + } + ] +} \ No newline at end of file diff --git a/elements/map/test/tooltip.cy.js b/elements/map/test/tooltip.cy.js index 7a5d05da9..2e38d5c7a 100644 --- a/elements/map/test/tooltip.cy.js +++ b/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()); });