Fix tests, types, added data-wd-key

maplibre · Dec 19, 2023 · 3ba3a20 · 3ba3a20
1 parent 84adbe6
commit 3ba3a20
Show file tree

Hide file tree

Showing 14 changed files with 1,126 additions and 1,315 deletions.
diff --git a/cypress/e2e/accessibility.cy.ts b/cypress/e2e/accessibility.cy.ts
@@ -11,7 +11,7 @@ describe("accessibility", () => {
 
     it("skip link to layer list", () => {
       const selector = "root:skip:layer-list";
-      should.isExists(selector);
+      should.exist(selector);
       when.tab();
       should.beFocused(selector);
       when.click(selector);
@@ -20,7 +20,7 @@ describe("accessibility", () => {
 
     it("skip link to layer editor", () => {
       const selector = "root:skip:layer-editor";
-      should.isExists(selector);
+      should.exist(selector);
       when.tab().tab();
       should.beFocused(selector);
       when.click(selector);
@@ -29,7 +29,7 @@ describe("accessibility", () => {
 
     it("skip link to map view", () => {
       const selector = "root:skip:map-view";
-      should.isExists(selector);
+      should.exist(selector);
       when.tab().tab().tab();
       should.beFocused(selector);
       when.click(selector);

diff --git a/cypress/e2e/driver.ts b/cypress/e2e/driver.ts
@@ -73,7 +73,7 @@ export default class MaputnikDriver {
       }
       cy.get(".maputnik-toolbar-link").should("be.visible");
     },
-    fillLayersModal: (opts: any) => {
+    fillLayersModal: (opts: {type: string, layer?: string, id?: string}) => {
       var type = opts.type;
       var layer = opts.layer;
       var id;
@@ -84,12 +84,12 @@ export default class MaputnikDriver {
       }
 
       cy.get(
-        this.get.getDataAttribute("add-layer.layer-type", "select")
+        this.get.dataAttribute("add-layer.layer-type", "select")
       ).select(type);
-      cy.get(this.get.getDataAttribute("add-layer.layer-id", "input")).type(id);
+      cy.get(this.get.dataAttribute("add-layer.layer-id", "input")).type(id);
       if (layer) {
         cy.get(
-          this.get.getDataAttribute("add-layer.layer-source-block", "input")
+          this.get.dataAttribute("add-layer.layer-source-block", "input")
         ).type(layer);
       }
       this.when.click("add-layer");
@@ -103,11 +103,20 @@ export default class MaputnikDriver {
 
     click: (selector: string) => {
       this.helper.when.click(selector);
-      // cy.get(selector).click({ force: true });
+    },
+
+    clickZoomin: () => {
+      cy.get(".maplibregl-ctrl-zoom-in").click();
+    },
+
+    selectWithin: (selector: string, value: string) => {
+      this.when.within(selector, () => {
+        cy.get("select").select(value);
+      });
     },
 
     select: (selector: string, value: string) => {
-      cy.get(selector).select(value);
+      this.helper.get.element(selector).select(value);
     },
 
     focus: (selector: string) => {
@@ -126,25 +135,25 @@ export default class MaputnikDriver {
     openLayersModal: () => {
       this.helper.when.click("layer-list:add-layer");
 
-      cy.get(this.get.getDataAttribute("modal:add-layer")).should("exist");
-      cy.get(this.get.getDataAttribute("modal:add-layer")).should("be.visible");
+      cy.get(this.get.dataAttribute("modal:add-layer")).should("exist");
+      cy.get(this.get.dataAttribute("modal:add-layer")).should("be.visible");
     },
   };
 
   public get = {
     isMac: () => {
       return Cypress.platform === "darwin";
     },
-    getStyleFromWindow: (win: Window) => {
+    styleFromWindow: (win: Window) => {
       const styleId = win.localStorage.getItem("maputnik:latest_style");
       const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`);
       const obj = JSON.parse(styleItem || "");
       return obj;
     },
-    getExampleFileUrl: () => {
+    exampleFileUrl: () => {
       return "http://localhost:8888/example-style.json";
     },
-    getDataAttribute: (key: string, selector?: string): string => {
+    dataAttribute: (key: string, selector?: string): string => {
       return `*[data-wd-key='${key}'] ${selector || ""}`;
     },
   };
@@ -176,23 +185,26 @@ export default class MaputnikDriver {
 
     equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
       cy.window().then((win: any) => {
-        const obj = this.get.getStyleFromWindow(win);
+        const obj = this.get.styleFromWindow(win);
         assert.deepEqual(getter(obj), styleObj);
       });
     },
 
-    isStyleStoreEqualToExampleFileData: () => {
+    styleStoreEqualToExampleFileData: () => {
       cy.window().then((win: any) => {
-        const obj = this.get.getStyleFromWindow(win);
+        const obj = this.get.styleFromWindow(win);
         cy.fixture("example-style.json").should("deep.equal", obj);
       });
     },
 
-    isExists: (selector: string) => {
+    exist: (selector: string) => {
       this.helper.get.element(selector).should("exist");
     },
-    isSelected: (selector: string, value: string) => {
-      cy.get(selector).find(`option[value="${value}"]`).should("be.selected");
+    beSelected: (selector: string, value: string) => {
+      this.helper.get.element(selector).find(`option[value="${value}"]`).should("be.selected");
     },
+    containText: (selector: string, text: string) => {
+      this.helper.get.element(selector).should("contain.text", text);
+    }
   };
 }
diff --git a/cypress/e2e/keyboard.cy.ts b/cypress/e2e/keyboard.cy.ts
@@ -1,4 +1,4 @@
-import { default as MaputnikDriver } from "./driver";
+import MaputnikDriver from "./driver";
 
 describe("keyboard", () => {
   let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
@@ -45,12 +45,12 @@ describe("keyboard", () => {
 
     it("'i' should change map to inspect mode", () => {
       when.typeKeys("i");
-      should.isSelected(get.getDataAttribute("nav:inspect"), "inspect");
+      should.beSelected("nav:inspect", "inspect");
     });
 
     it("'m' should focus map", () => {
       when.typeKeys("m");
-      should.beFocused(".maplibregl-canvas");
+      should.canvasBeFocused();
     });
 
     it("'!' should show debug modal", () => {

diff --git a/cypress/e2e/layers.cy.ts b/cypress/e2e/layers.cy.ts
@@ -1,4 +1,3 @@
-var assert = require("assert");
 import { v1 as uuid } from "uuid";
 import MaputnikDriver from "./driver";
 
@@ -134,12 +133,9 @@ describe("layers", () => {
         // Setup
         var id = uuid();
 
-        when.select(
-          get.getDataAttribute("add-layer.layer-type", "select"),
-          "background"
-        );
+        when.selectWithin("add-layer.layer-type", "background");
         when.setValue(
-          get.getDataAttribute("add-layer.layer-id", "input"),
+          get.dataAttribute("add-layer.layer-id", "input"),
           "background:" + id
         );
 
@@ -167,7 +163,7 @@ describe("layers", () => {
 
           var id = uuid();
           when.setValue(
-            get.getDataAttribute("layer-editor.layer-id", "input"),
+            get.dataAttribute("layer-editor.layer-id", "input"),
             "foobar:" + id
           );
           when.click("min-zoom");
@@ -188,7 +184,7 @@ describe("layers", () => {
 
           when.click("layer-list-item:background:" + bgId);
           when.setValue(
-            get.getDataAttribute("min-zoom", 'input[type="text"]'),
+            get.dataAttribute("min-zoom", 'input[type="text"]'),
             "1"
           );
 
@@ -206,8 +202,8 @@ describe("layers", () => {
           );
 
           // AND RESET!
-          // driver.setValue(driver.getDataAttribute("min-zoom", "input"), "")
-          // driver.click(driver.getDataAttribute("max-zoom", "input"));
+          // driver.setValue(driver.get.dataAttribute("min-zoom", "input"), "")
+          // driver.click(driver.get.dataAttribute("max-zoom", "input"));
 
           // driver.isStyleStoreEqual((a: any) => a.layers, [
           //   {
@@ -222,7 +218,7 @@ describe("layers", () => {
 
           when.click("layer-list-item:background:" + bgId);
           when.setValue(
-            get.getDataAttribute("max-zoom", 'input[type="text"]'),
+            get.dataAttribute("max-zoom", 'input[type="text"]'),
             "1"
           );
 
@@ -245,7 +241,7 @@ describe("layers", () => {
           var id = uuid();
 
           when.click("layer-list-item:background:" + bgId);
-          when.setValue(get.getDataAttribute("layer-comment", "textarea"), id);
+          when.setValue(get.dataAttribute("layer-comment", "textarea"), id);
 
           when.click("layer-editor.layer-id");
 
@@ -324,9 +320,7 @@ describe("layers", () => {
           when.typeKeys(
             "\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
           );
-          should.isExists(errorSelector);
-
-          when.click("layer-editor.layer-id");
+          should.exist(errorSelector);
         });
       });
     });

diff --git a/cypress/e2e/map.cy.ts b/cypress/e2e/map.cy.ts
@@ -8,18 +8,16 @@ describe("map", () => {
       var zoomLevel = 12.37;
       when.setStyle("geojson", zoomLevel);
       should.beVisible("maplibre:ctrl-zoom");
-      // HM TODO
-      //driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel);
+      should.containText("maplibre:ctrl-zoom", "Zoom: " + zoomLevel);
     });
 
     it("via map controls", () => {
       var zoomLevel = 12.37;
       when.setStyle("geojson", zoomLevel);
 
-      when.click("maplibre:ctrl-zoom");
       should.beVisible("maplibre:ctrl-zoom");
-      // HM TODO
-      //driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel + 1);
+      when.clickZoomin();
+      should.containText("maplibre:ctrl-zoom", "Zoom: "+(zoomLevel + 1));
     });
   });
 });
diff --git a/cypress/e2e/modals.cy.ts b/cypress/e2e/modals.cy.ts
@@ -20,17 +20,17 @@ describe("modals", () => {
       // HM: I was not able to make the following choose file actually to select a file and close the modal...
       when.chooseExampleFile();
 
-      should.isStyleStoreEqualToExampleFileData();
+      should.styleStoreEqualToExampleFileData();
     });
 
     it("load from url", () => {
-      var styleFileUrl = get.getExampleFileUrl();
+      var styleFileUrl = get.exampleFileUrl();
 
-      when.setValue(get.getDataAttribute("modal:open.url.input"), styleFileUrl);
+      when.setValue(get.dataAttribute("modal:open.url.input"), styleFileUrl);
       when.click("modal:open.url.button");
       when.waitForExampleFileRequset();
 
-      should.isStyleStoreEqualToExampleFileData();
+      should.styleStoreEqualToExampleFileData();
     });
   });
 
@@ -67,7 +67,7 @@ describe("modals", () => {
     it("toggle", () => {
       when.setStyle("geojson");
 
-      when.select(get.getDataAttribute("nav:inspect", "select"), "inspect");
+      when.selectWithin("nav:inspect", "inspect");
     });
   });
 
@@ -77,20 +77,20 @@ describe("modals", () => {
     });
 
     it("name", () => {
-      when.setValue(get.getDataAttribute("modal:settings.name"), "foobar");
+      when.setValue(get.dataAttribute("modal:settings.name"), "foobar");
       when.click("modal:settings.owner");
 
       should.equalStyleStore((obj) => obj.name, "foobar");
     });
     it("owner", () => {
-      when.setValue(get.getDataAttribute("modal:settings.owner"), "foobar");
+      when.setValue(get.dataAttribute("modal:settings.owner"), "foobar");
       when.click("modal:settings.name");
 
       should.equalStyleStore((obj) => obj.owner, "foobar");
     });
     it("sprite url", () => {
       when.setValue(
-        get.getDataAttribute("modal:settings.sprite"),
+        get.dataAttribute("modal:settings.sprite"),
         "http://example.com"
       );
       when.click("modal:settings.name");
@@ -99,7 +99,7 @@ describe("modals", () => {
     });
     it("glyphs url", () => {
       var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
-      when.setValue(get.getDataAttribute("modal:settings.glyphs"), glyphsUrl);
+      when.setValue(get.dataAttribute("modal:settings.glyphs"), glyphsUrl);
       when.click("modal:settings.name");
 
       should.equalStyleStore((obj) => obj.glyphs, glyphsUrl);
@@ -108,7 +108,7 @@ describe("modals", () => {
     it("maptiler access token", () => {
       var apiKey = "testing123";
       when.setValue(
-        get.getDataAttribute(
+        get.dataAttribute(
           "modal:settings.maputnik:openmaptiles_access_token"
         ),
         apiKey
@@ -124,7 +124,7 @@ describe("modals", () => {
     it("thunderforest access token", () => {
       var apiKey = "testing123";
       when.setValue(
-        get.getDataAttribute(
+        get.dataAttribute(
           "modal:settings.maputnik:thunderforest_access_token"
         ),
         apiKey
@@ -139,14 +139,8 @@ describe("modals", () => {
 
     it("style renderer", () => {
       cy.on("uncaught:exception", () => false); // this is due to the fact that this is an invalid style for openlayers
-      when.select(
-        get.getDataAttribute("modal:settings.maputnik:renderer"),
-        "ol"
-      );
-      should.isSelected(
-        get.getDataAttribute("modal:settings.maputnik:renderer"),
-        "ol"
-      );
+      when.select("modal:settings.maputnik:renderer", "ol");
+      should.beSelected("modal:settings.maputnik:renderer", "ol");
 
       when.click("modal:settings.name");