chore: add additional groupLayer tests (#1124)

* add additional groupLayer tests

* also test adding layer to group

* remove "only" statement

* embrace new types

elements/map/test/groupLayer.cy.ts

@@ -132,12 +132,188 @@ describe("layers", () => {
     cy.mount(html`<eox-map .layers=${layersJson}></eox-map>`).as("eox-map");
     cy.get("eox-map").and(($el) => {
       const eoxMap = <EOxMap>$el[0];
-      layersJson[0].layers.length = 1;
-      eoxMap.layers = layersJson as Array<EoxLayer>;
+      const jsonCopy = JSON.parse(JSON.stringify(layersJson));
+      jsonCopy[0].layers.length = 1;
+      eoxMap.layers = jsonCopy;
       expect(
         eoxMap.getLayerById("groupLayerInsideGroup"),
         "reactively remove layer from group"
       ).to.not.exist;
     });
   });
+
+  it("layer inside group is reactive", () => {
+    cy.intercept(
+      "https://openlayers.org/data/vector/ecoregions.json",
+      (req) => {
+        req.reply(ecoRegionsFixture);
+      }
+    );
+    cy.intercept(/^.*openstreetmap.*$/, {
+      fixture: "./map/test/fixtures/tiles/osm/0/0/0.png",
+    });
+    cy.mount(html`<eox-map .layers=${layersJson}></eox-map>`).as("eox-map");
+    cy.get("eox-map").and(($el) => {
+      const eoxMap = <EOxMap>$el[0];
+
+      layersJson[0].layers[1].layers[0].opacity = 0.2;
+      eoxMap.layers = layersJson as Array<EoxLayer>;
+
+      expect(
+        eoxMap.getLayerById("layerInsideGroupInsideGroup").getOpacity(),
+        "reactive layer 2 levels deep"
+      ).to.be.equal(0.2);
+    });
+  });
+
+  it("can reactively add new layers to nested groups", () => {
+    cy.intercept(
+      "https://openlayers.org/data/vector/ecoregions.json",
+      (req) => {
+        req.reply(ecoRegionsFixture);
+      }
+    );
+    cy.intercept(/^.*openstreetmap.*$/, {
+      fixture: "./map/test/fixtures/tiles/osm/0/0/0.png",
+    });
+    const layersJson = [
+      {
+        type: "Group",
+        properties: { id: "outerGroup" },
+        layers: [
+          {
+            type: "Group",
+            properties: {
+              id: "groupLayerInsideGroup",
+            },
+            layers: [
+              {
+                type: "Tile",
+                properties: {
+                  id: "layerInsideGroupInsideGroup",
+                },
+                source: {
+                  type: "OSM",
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ] as Array<EoxLayer>;
+
+    cy.mount(html`<eox-map .layers=${layersJson}></eox-map>`).as("eox-map");
+
+    layersJson[0].layers[0].layers.push({
+      type: "Vector",
+      properties: {
+        id: "regionsRed",
+      },
+      style: {
+        "fill-color": "red",
+      },
+      source: {
+        type: "Vector",
+        url: "https://openlayers.org/data/vector/ecoregions.json",
+        format: "GeoJSON",
+      },
+    } as EoxLayer);
+
+    cy.get("eox-map").and(($el) => {
+      const eoxMap = <EOxMap>$el[0];
+      eoxMap.layers = layersJson as Array<EoxLayer>;
+      const layer = eoxMap.getLayerById(
+        "regionsRed"
+      ) as import("ol/layer").Vector;
+      const styleObject = layer.getStyle() as import("ol/style/flat").FlatStyle;
+      const fillColor = styleObject["fill-color"];
+      expect(fillColor, "reactive layer 2 levels deep").to.be.equal("red");
+    });
+  });
+
+  it("realistic groupLayer reactivity", () => {
+    const layersJson = [
+      {
+        type: "Group",
+        properties: {
+          id: "group1",
+        },
+        layers: [
+          {
+            type: "Vector",
+            properties: {
+              id: "dummyInsideGroup1",
+            },
+          },
+        ],
+      },
+      {
+        type: "Group",
+        properties: {
+          id: "group2",
+        },
+        layers: [
+          {
+            type: "Vector",
+            properties: {
+              id: "dummyInsideGroup2",
+            },
+          },
+        ],
+      },
+      {
+        type: "Group",
+        properties: {
+          id: "group3",
+        },
+        layers: [
+          {
+            type: "Vector",
+            properties: {
+              id: "dummyInsideGroup3",
+            },
+          },
+        ],
+      },
+    ] as Array<EoxLayer>;
+
+    cy.mount(html`<eox-map .layers=${layersJson}></eox-map>`).as("eox-map");
+    cy.get("eox-map").and(($el) => {
+      const eoxMap = <EOxMap>$el[0];
+      const allRealLayers = eoxMap.getFlatLayersArray(
+        eoxMap.map.getAllLayers() as Array<import("../src/generate").AnyLayer>
+      );
+      expect(allRealLayers.length).to.be.equal(3);
+      layersJson[0].layers = [
+        {
+          type: "Vector",
+          properties: {
+            id: "newDummyInsideGroup1",
+          },
+          opacity: 0.5,
+        },
+      ];
+      layersJson[0].layers.push({
+        type: "Vector",
+        properties: {
+          id: "newDummyInsideGroup2",
+        },
+        opacity: 0.5,
+      });
+      eoxMap.layers = layersJson as Array<EoxLayer>;
+      const newRealLayers = eoxMap.getFlatLayersArray(
+        eoxMap.map.getAllLayers() as Array<import("../src/generate").AnyLayer>
+      );
+
+      expect(
+        newRealLayers.length,
+        "correctly updates a layer inside group"
+      ).to.be.equal(4);
+      const newLayer = eoxMap.getLayerById("newDummyInsideGroup1");
+      expect(
+        newLayer.getOpacity(),
+        "correctly updates a layer inside group"
+      ).to.be.equal(0.5);
+    });
+  });
 });