modify some of the layer tests

2026-02-06 20:50:12 +00:00 · 2023-12-30 18:26:50 +02:00
parent 9014e12ca6
commit 6ed08c7416
5 changed files with 141 additions and 148 deletions
--- a/cypress/e2e/accessibility.cy.ts
+++ b/cypress/e2e/accessibility.cy.ts
@@ -16,9 +16,7 @@ describe("accessibility", () => {
      when.tab();
      should.beFocused(selector);
      when.click(selector);
-      should.beFocused("skip-target-layer-list");
-
-      // then(get.skipTargetLayerList()).shouldBeFocused();
+      then(get.skipTargetLayerList()).shouldBeFocused();
    });

    // This fails for some reason only in Chrome, but passes in firefox. Adding a skip here to allow merge and later on we'll decide if we want to fix this or not.
@@ -37,7 +35,7 @@ describe("accessibility", () => {
      when.tab().tab().tab();
      should.beFocused(selector);
      when.click(selector);
-      should.canvasBeFocused();
+      then(get.canvas()).shouldBeFocused();
    });
  });
 });
--- a/cypress/e2e/cypress-wrapper-driver.ts
+++ b/cypress/e2e/cypress-wrapper-driver.ts
@@ -9,9 +9,6 @@ export default class CypressWrapperDriver {

  public get = {
    ...this.helper.get,
-    elementByClassOrType(slector: string) {
-      return cy.get(slector);
-    },
  };

  public when = {
--- a/cypress/e2e/layers.cy.ts
+++ b/cypress/e2e/layers.cy.ts
@@ -1,8 +1,9 @@
+import { then } from "@shellygo/cypress-test-utils/assertable";
 import { v1 as uuid } from "uuid";
 import MaputnikDriver from "./maputnik-driver";

 describe("layers", () => {
-  let { beforeAndAfter, when, should } = new MaputnikDriver();
+  let { beforeAndAfter, get, when, should } = new MaputnikDriver();
  beforeAndAfter();
  beforeEach(() => {
    when.setStyle("both");
@@ -10,105 +11,95 @@ describe("layers", () => {
  });

  describe("ops", () => {
-    it("delete", () => {
-      let id = when.modal.fillLayers({
+    let id: string;
+    beforeEach(() => {
+      id = when.modal.fillLayers({
        type: "background",
      });
-
-      should.equalStyleStore(
-        (a: any) => a.layers,
-        [
-          {
-            id: id,
-            type: "background",
-          },
-        ]
-      );
-
-      when.click("layer-list-item:" + id + ":delete");
-
-      should.equalStyleStore((a: any) => a.layers, []);
    });

-    it("duplicate", () => {
-      let id = when.modal.fillLayers({
-        type: "background",
+    it("should update layers in local storage", () => {
+      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: id,
+            type: "background",
+          },
+        ],
      });
-
-      should.equalStyleStore(
-        (a: any) => a.layers,
-        [
-          {
-            id: id,
-            type: "background",
-          },
-        ]
-      );
-
-      when.click("layer-list-item:" + id + ":copy");
-
-      should.equalStyleStore(
-        (a: any) => a.layers,
-        [
-          {
-            id: id + "-copy",
-            type: "background",
-          },
-          {
-            id: id,
-            type: "background",
-          },
-        ]
-      );
    });

-    it("hide", () => {
-      let id = when.modal.fillLayers({
-        type: "background",
+    describe("when clicking delete", () => {
+      beforeEach(() => {
+        when.click("layer-list-item:" + id + ":delete");
+      });
+      it("should empty layers in local storage", () => {
+        then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [],
+        });
+      });
+    });
+
+    describe("when clicking duplicate", () => {
+      beforeEach(() => {
+        when.click("layer-list-item:" + id + ":copy");
+      });
+      it("should add copy layer in local storage", () => {
+        then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [
+            {
+              id: id + "-copy",
+              type: "background",
+            },
+            {
+              id: id,
+              type: "background",
+            },
+          ],
+        });
+      });
+    });
+
+    describe("when clicking hide", () => {
+      beforeEach(() => {
+        when.click("layer-list-item:" + id + ":toggle-visibility");
      });

-      should.equalStyleStore(
-        (a: any) => a.layers,
-        [
-          {
-            id: id,
-            type: "background",
-          },
-        ]
-      );
-
-      when.click("layer-list-item:" + id + ":toggle-visibility");
-
-      should.equalStyleStore(
-        (a: any) => a.layers,
-        [
-          {
-            id: id,
-            type: "background",
-            layout: {
-              visibility: "none",
+      it("should update visibility to none in local storage", () => {
+        then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [
+            {
+              id: id,
+              type: "background",
+              layout: {
+                visibility: "none",
+              },
            },
-          },
-        ]
-      );
+          ],
+        });
+      });

-      when.click("layer-list-item:" + id + ":toggle-visibility");
+      describe("when clicking show", () => {
+        beforeEach(() => {
+          when.click("layer-list-item:" + id + ":toggle-visibility");
+        });

-      should.equalStyleStore(
-        (a: any) => a.layers,
-        [
-          {
-            id: id,
-            type: "background",
-            layout: {
-              visibility: "visible",
-            },
-          },
-        ]
-      );
+        it("should update visibility to visible in local storage", () => {
+          then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+            layers: [
+              {
+                id: id,
+                type: "background",
+                layout: {
+                  visibility: "visible",
+                },
+              },
+            ],
+          });
+        });
+      });
    });
  });
-
  describe("background", () => {
    it("add", () => {
      let id = when.modal.fillLayers({
@@ -191,13 +182,18 @@ describe("layers", () => {
          );

          // AND RESET!
-          when.typeKeys("{backspace}", "min-zoom.input-text");
+          when.type("{backspace}", "min-zoom.input-text");
          when.click("max-zoom.input-text");

-          should.equalStyleStore((a: any) => a.layers, [{
-            "id": 'background:'+bgId,
-            "type": 'background'
-          }]);
+          should.equalStyleStore(
+            (a: any) => a.layers,
+            [
+              {
+                id: "background:" + bgId,
+                type: "background",
+              },
+            ]
+          );
        });

        it("max-zoom", () => {
@@ -243,13 +239,18 @@ describe("layers", () => {
          );

          // Unset it again.
-          when.typeKeys("{backspace}{backspace}", "layer-comment.input");
+          when.type("{backspace}{backspace}", "layer-comment.input");
          when.click("min-zoom.input-text");

-          should.equalStyleStore((a: any) => a.layers, [{
-            "id": 'background:' + bgId,
-            "type": 'background'
-          }]);
+          should.equalStyleStore(
+            (a: any) => a.layers,
+            [
+              {
+                id: "background:" + bgId,
+                type: "background",
+              },
+            ]
+          );
        });

        it("color", () => {
--- a/cypress/e2e/maputnik-driver.ts
+++ b/cypress/e2e/maputnik-driver.ts
@@ -1,7 +1,7 @@
 import CypressWrapperDriver from "./cypress-wrapper-driver";
 import ModalDriver from "./modal-driver";

-const SERVER_ADDRESS = "http://localhost:8888/";
+const baseUrl = "http://localhost:8888/";

 export default class MaputnikDriver {
  private helper = new CypressWrapperDriver();
@@ -18,7 +18,7 @@ export default class MaputnikDriver {
    setupMockBackedResponses: () => {
      this.helper.given.interceptAndMockResponse({
        method: "GET",
-        url: "http://localhost:8888/example-style.json",
+        url: baseUrl + "example-style.json",
        response: {
          fixture: "example-style.json",
        },
@@ -26,28 +26,28 @@ export default class MaputnikDriver {
      });
      this.helper.given.interceptAndMockResponse({
        method: "GET",
-        url: "http://localhost:8888/example-layer-style.json",
+        url: baseUrl + "/example-layer-style.json",
        response: {
          fixture: "example-layer-style.json",
        },
      });
      this.helper.given.interceptAndMockResponse({
        method: "GET",
-        url: "http://localhost:8888/geojson-style.json",
+        url: baseUrl + "geojson-style.json",
        response: {
          fixture: "geojson-style.json",
        },
      });
      this.helper.given.interceptAndMockResponse({
        method: "GET",
-        url: "http://localhost:8888/raster-style.json",
+        url: baseUrl + "raster-style.json",
        response: {
          fixture: "raster-style.json",
        },
      });
      this.helper.given.interceptAndMockResponse({
        method: "GET",
-        url: "http://localhost:8888/geojson-raster-style.json",
+        url: baseUrl + "geojson-raster-style.json",
        response: {
          fixture: "geojson-raster-style.json",
        },
@@ -66,11 +66,12 @@ export default class MaputnikDriver {
  };

  public when = {
+    ...this.helper.when,
    modal: this.modalDriver.when,
    within: (selector: string, fn: () => void) => {
      this.helper.when.within(fn, selector);
    },
-    tab: () => this.helper.get.elementByClassOrType("body").tab(),
+    tab: () => this.helper.get.element("body").tab(),
    waitForExampleFileRequset: () => {
      this.helper.when.waitForResponse("example-style.json");
    },
@@ -86,52 +87,43 @@ export default class MaputnikDriver {
      let url = "?debug";
      switch (styleProperties) {
        case "geojson":
-          url += `&style=${SERVER_ADDRESS}geojson-style.json`;
+          url += `&style=${baseUrl}geojson-style.json`;
          break;
        case "raster":
-          url += `&style=${SERVER_ADDRESS}raster-style.json`;
+          url += `&style=${baseUrl}raster-style.json`;
          break;
        case "both":
-          url += `&style=${SERVER_ADDRESS}geojson-raster-style.json`;
+          url += `&style=${baseUrl}geojson-raster-style.json`;
          break;
        case "layer":
-          url += `&style=${SERVER_ADDRESS}/example-layer-style.json`;
+          url += `&style=${baseUrl}/example-layer-style.json`;
          break;
      }
      if (zoom) {
        url += `#${zoom}/41.3805/2.1635`;
      }
-      this.helper.when.visit(SERVER_ADDRESS + url);
+      this.helper.when.visit(baseUrl + url);
      if (styleProperties) {
        this.helper.when.confirmAlert();
      }
-      this.helper.get.element("toolbar:link").should("be.visible");
+      this.helper.get.elementByTestId("toolbar:link").should("be.visible");
    },

-    typeKeys: (keys: string, selector?: string) => {
-      if (selector) {
-        this.helper.get.element(selector).type(keys);
-      } else {
-        this.helper.get.elementByClassOrType("body").type(keys);
-      }
-    },
-
-    click: (selector: string) => {
-      this.helper.when.click(selector);
-    },
+    typeKeys: (keys: string, selector?: string) =>
+      this.helper.get.element("body").type(keys),

    clickZoomin: () => {
-      this.helper.get.elementByClassOrType(".maplibregl-ctrl-zoom-in").click();
+      this.helper.get.element(".maplibregl-ctrl-zoom-in").click();
    },

    selectWithin: (selector: string, value: string) => {
      this.when.within(selector, () => {
-        this.helper.get.elementByClassOrType("select").select(value);
+        this.helper.get.element("select").select(value);
      });
    },

    select: (selector: string, value: string) => {
-      this.helper.get.element(selector).select(value);
+      this.helper.get.elementByTestId(selector).select(value);
    },

    focus: (selector: string) => {
@@ -140,7 +132,7 @@ export default class MaputnikDriver {

    setValue: (selector: string, text: string) => {
      this.helper.get
-        .element(selector)
+        .elementByTestId(selector)
        .clear()
        .type(text, { parseSpecialCharSequences: false });
    },
@@ -156,13 +148,21 @@ export default class MaputnikDriver {
      const obj = JSON.parse(styleItem || "");
      return obj;
    },
+
+    maputnikStyleFromLocalStorage: () => {
+      const styleId = localStorage.getItem("maputnik:latest_style");
+      const styleItem = localStorage.getItem(`maputnik:style:${styleId}`);
+      const obj = JSON.parse(styleItem || "");
+      return cy.wrap(obj);
+    },
    exampleFileUrl: () => {
-      return SERVER_ADDRESS + "example-style.json";
+      return baseUrl + "example-style.json";
    },
    skipTargetLayerList: () =>
-      this.helper.get.element("skip-target-layer-list"),
+      this.helper.get.elementByTestId("skip-target-layer-list"),
    skipTargetLayerEditor: () =>
-      this.helper.get.element("skip-target-layer-editor"),
+      this.helper.get.elementByTestId("skip-target-layer-editor"),
+    canvas: () => this.helper.get.element("canvas"),
  };

  public should = {
@@ -172,22 +172,22 @@ export default class MaputnikDriver {
      });
    },
    notExist: (selector: string) => {
-      this.helper.get.elementByClassOrType(selector).should("not.exist");
+      this.helper.get.element(selector).should("not.exist");
    },
    beFocused: (selector: string) => {
-      this.helper.get.element(selector).should("have.focus");
+      this.helper.get.elementByTestId(selector).should("have.focus");
    },

    notBeFocused: (selector: string) => {
-      this.helper.get.element(selector).should("not.have.focus");
+      this.helper.get.elementByTestId(selector).should("not.have.focus");
    },

    beVisible: (selector: string) => {
-      this.helper.get.element(selector).should("be.visible");
+      this.helper.get.elementByTestId(selector).should("be.visible");
    },

    notBeVisible: (selector: string) => {
-      this.helper.get.element(selector).should("not.be.visible");
+      this.helper.get.elementByTestId(selector).should("not.be.visible");
    },

    equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
@@ -207,16 +207,16 @@ export default class MaputnikDriver {
    },

    exist: (selector: string) => {
-      this.helper.get.element(selector).should("exist");
+      this.helper.get.elementByTestId(selector).should("exist");
    },
    beSelected: (selector: string, value: string) => {
      this.helper.get
-        .element(selector)
+        .elementByTestId(selector)
        .find(`option[value="${value}"]`)
        .should("be.selected");
    },
    containText: (selector: string, text: string) => {
-      this.helper.get.element(selector).should("contain.text", text);
+      this.helper.get.elementByTestId(selector).should("contain.text", text);
    },
  };
 }
--- a/cypress/e2e/modal-driver.ts
+++ b/cypress/e2e/modal-driver.ts
@@ -14,12 +14,12 @@ export default class ModalDriver {
      } else {
        id = `${type}:${uuid()}`;
      }
+      this.helper.when.selectOption("add-layer.layer-type.select", type);
+      this.helper.when.type("add-layer.layer-id.input", id);

-      this.helper.get.element("add-layer.layer-type.select").select(type);
-      this.helper.get.element("add-layer.layer-id.input").type(id);
      if (layer) {
        this.helper.when.within(() => {
-          this.helper.get.elementByClassOrType("input").type(layer!);
+          this.helper.get.element("input").type(layer!);
        }, "add-layer.layer-source-block");
      }
      this.helper.when.click("add-layer");
@@ -29,9 +29,6 @@ export default class ModalDriver {

    open: () => {
      this.helper.when.click("layer-list:add-layer");
-
-      this.helper.get.element("modal:add-layer").should("exist");
-      this.helper.get.element("modal:add-layer").should("be.visible");
    },

    close: (key: string) => {