E2E: Improve tests, lint, and add more drivers (#855)

This PR introduces lint to cypress code, adds drivers to try and abstract the usage of cypress as much as possible. Nothing very interesting, mainly to try out the driver pattern for the e2e tests.
maplibre · Dec 27, 2023 · 124ae98 · 124ae98
1 parent b784bf2
commit 124ae98
Show file tree

Hide file tree

Showing 12 changed files with 180 additions and 134 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -37,7 +37,8 @@
       "react/prop-types": ["off"],
       // Disable no-undef. It's covered by @typescript-eslint
       "no-undef": "off",
-      "indent": ["error", 2]
+      "indent": ["error", 2],
+      "no-var": ["error"]
     },
     "globals": {
       "global": "readonly"

diff --git a/cypress/e2e/accessibility.cy.ts b/cypress/e2e/accessibility.cy.ts
@@ -1,7 +1,7 @@
-import MaputnikDriver from "./driver";
+import MaputnikDriver from "./maputnik-driver";
 
 describe("accessibility", () => {
-  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  let { beforeAndAfter, when, should } = new MaputnikDriver();
   beforeAndAfter();
 
   describe("skip links", () => {

diff --git a/cypress/e2e/cypress-wrapper-driver.ts b/cypress/e2e/cypress-wrapper-driver.ts
@@ -0,0 +1,41 @@
+import { CypressHelper } from "@shellygo/cypress-test-utils";
+
+export default class CypressWrapperDriver {
+  private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
+
+  public given = {
+    ...this.helper.given,
+    /**
+         * 
+         * @param url a url to a file, this assumes the file name is the last part of the url
+         * @param alias 
+         */
+    interceptGetToFile(url: string) {
+      let fileNameAndAlias = url.split('/').pop();
+      cy.intercept('GET', url, { fixture: fileNameAndAlias }).as(fileNameAndAlias!);
+    },
+
+    interceptAndIgnore(url: string) {
+      cy.intercept({ method: "GET", url }, []);
+    }
+  }
+
+  public get = {
+    ...this.helper.get,
+    elementByClassOrType(slector: string) {
+      return cy.get(slector);
+    }
+  }
+
+  public when = {
+    ...this.helper.when,
+    visit(address: string) {
+      cy.visit(address);
+    },
+    confirmAlert() {
+      cy.on("window:confirm", () => true);
+    }
+  }
+
+  public beforeAndAfter = this.helper.beforeAndAfter;
+}
diff --git a/cypress/e2e/history.cy.ts b/cypress/e2e/history.cy.ts
@@ -1,7 +1,7 @@
-import MaputnikDriver from "./driver";
+import MaputnikDriver from "./maputnik-driver";
 
 describe("history", () => {
-  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  let { beforeAndAfter, when, get, should } = new MaputnikDriver();
   beforeAndAfter();
 
   let undoKeyCombo: string;
@@ -15,11 +15,11 @@ describe("history", () => {
 
   it("undo/redo", () => {
     when.setStyle("geojson");
-    when.openLayersModal();
+    when.modal.open();
 
     should.equalStyleStore((a: any) => a.layers, []);
 
-    when.fillLayersModal({
+    when.modal.fillLayers({
       id: "step 1",
       type: "background",
     });
@@ -34,8 +34,8 @@ describe("history", () => {
       ]
     );
 
-    when.openLayersModal();
-    when.fillLayersModal({
+    when.modal.open();
+    when.modal.fillLayers({
       id: "step 2",
       type: "background",
     });

diff --git a/cypress/e2e/keyboard.cy.ts b/cypress/e2e/keyboard.cy.ts
@@ -1,7 +1,7 @@
-import MaputnikDriver from "./driver";
+import MaputnikDriver from "./maputnik-driver";
 
 describe("keyboard", () => {
-  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  let { beforeAndAfter, given, when, should } = new MaputnikDriver();
   beforeAndAfter();
   describe("shortcuts", () => {
     beforeEach(() => {

diff --git a/cypress/e2e/layers.cy.ts b/cypress/e2e/layers.cy.ts
@@ -1,17 +1,17 @@
 import { v1 as uuid } from "uuid";
-import MaputnikDriver from "./driver";
+import MaputnikDriver from "./maputnik-driver";
 
 describe("layers", () => {
-  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  let { beforeAndAfter, when, should } = new MaputnikDriver();
   beforeAndAfter();
   beforeEach(() => {
     when.setStyle("both");
-    when.openLayersModal();
+    when.modal.open();
   });
 
   describe("ops", () => {
     it("delete", () => {
-      var id = when.fillLayersModal({
+      let id = when.modal.fillLayers({
         type: "background",
       });
 
@@ -31,8 +31,7 @@ describe("layers", () => {
     });
 
     it("duplicate", () => {
-      var styleObj;
-      var id = when.fillLayersModal({
+      let id = when.modal.fillLayers({
         type: "background",
       });
 
@@ -64,8 +63,7 @@ describe("layers", () => {
     });
 
     it("hide", () => {
-      var styleObj;
-      var id = when.fillLayersModal({
+      let id = when.modal.fillLayers({
         type: "background",
       });
 
@@ -113,7 +111,7 @@ describe("layers", () => {
 
   describe("background", () => {
     it("add", () => {
-      var id = when.fillLayersModal({
+      let id = when.modal.fillLayers({
         type: "background",
       });
 
@@ -131,7 +129,7 @@ describe("layers", () => {
     describe("modify", () => {
       function createBackground() {
         // Setup
-        var id = uuid();
+        let id = uuid();
 
         when.selectWithin("add-layer.layer-type", "background");
         when.setValue("add-layer.layer-id.input", "background:" + id);
@@ -154,11 +152,11 @@ describe("layers", () => {
       describe("layer", () => {
         it("expand/collapse");
         it("id", () => {
-          var bgId = createBackground();
+          let bgId = createBackground();
 
           when.click("layer-list-item:background:" + bgId);
 
-          var id = uuid();
+          let id = uuid();
           when.setValue("layer-editor.layer-id.input", "foobar:" + id);
           when.click("min-zoom");
 
@@ -174,7 +172,7 @@ describe("layers", () => {
         });
 
         it("min-zoom", () => {
-          var bgId = createBackground();
+          let bgId = createBackground();
 
           when.click("layer-list-item:background:" + bgId);
           when.setValue("min-zoom.input-text", "1");
@@ -203,7 +201,7 @@ describe("layers", () => {
         });
 
         it("max-zoom", () => {
-          var bgId = createBackground();
+          let bgId = createBackground();
 
           when.click("layer-list-item:background:" + bgId);
           when.setValue("max-zoom.input-text", "1");
@@ -223,8 +221,8 @@ describe("layers", () => {
         });
 
         it("comments", () => {
-          var bgId = createBackground();
-          var comment = "42";
+          let bgId = createBackground();
+          let comment = "42";
 
           when.click("layer-list-item:background:" + bgId);
           when.setValue("layer-comment.input", comment);
@@ -255,7 +253,7 @@ describe("layers", () => {
         });
 
         it("color", () => {
-          var bgId = createBackground();
+          let bgId = createBackground();
 
           when.click("layer-list-item:background:" + bgId);
 
@@ -292,11 +290,11 @@ describe("layers", () => {
 
         // TODO
         it.skip("parse error", () => {
-          var bgId = createBackground();
+          let bgId = createBackground();
 
           when.click("layer-list-item:background:" + bgId);
 
-          var errorSelector = ".CodeMirror-lint-marker-error";
+          let errorSelector = ".CodeMirror-lint-marker-error";
           should.notExist(errorSelector);
 
           when.click(".CodeMirror");
@@ -311,7 +309,7 @@ describe("layers", () => {
 
   describe("fill", () => {
     it("add", () => {
-      var id = when.fillLayersModal({
+      let id = when.modal.fillLayers({
         type: "fill",
         layer: "example",
       });
@@ -334,7 +332,7 @@ describe("layers", () => {
 
   describe("line", () => {
     it("add", () => {
-      var id = when.fillLayersModal({
+      let id = when.modal.fillLayers({
         type: "line",
         layer: "example",
       });
@@ -359,7 +357,7 @@ describe("layers", () => {
 
   describe("symbol", () => {
     it("add", () => {
-      var id = when.fillLayersModal({
+      let id = when.modal.fillLayers({
         type: "symbol",
         layer: "example",
       });
@@ -379,7 +377,7 @@ describe("layers", () => {
 
   describe("raster", () => {
     it("add", () => {
-      var id = when.fillLayersModal({
+      let id = when.modal.fillLayers({
         type: "raster",
         layer: "raster",
       });
@@ -399,7 +397,7 @@ describe("layers", () => {
 
   describe("circle", () => {
     it("add", () => {
-      var id = when.fillLayersModal({
+      let id = when.modal.fillLayers({
         type: "circle",
         layer: "example",
       });
@@ -419,7 +417,7 @@ describe("layers", () => {
 
   describe("fill extrusion", () => {
     it("add", () => {
-      var id = when.fillLayersModal({
+      let id = when.modal.fillLayers({
         type: "fill-extrusion",
         layer: "example",
       });
@@ -441,20 +439,20 @@ describe("layers", () => {
     it("simple", () => {
       when.setStyle("geojson");
 
-      when.openLayersModal();
-      when.fillLayersModal({
+      when.modal.open();
+      when.modal.fillLayers({
         id: "foo",
         type: "background",
       });
 
-      when.openLayersModal();
-      when.fillLayersModal({
+      when.modal.open();
+      when.modal.fillLayers({
         id: "foo_bar",
         type: "background",
       });
 
-      when.openLayersModal();
-      when.fillLayersModal({
+      when.modal.open();
+      when.modal.fillLayers({
         id: "foo_bar_baz",
         type: "background",
       });

diff --git a/cypress/e2e/map.cy.ts b/cypress/e2e/map.cy.ts
@@ -1,18 +1,18 @@
-import MaputnikDriver from "./driver";
+import MaputnikDriver from "./maputnik-driver";
 
 describe("map", () => {
-  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  let { beforeAndAfter, when, should } = new MaputnikDriver();
   beforeAndAfter();
   describe("zoom level", () => {
     it("via url", () => {
-      var zoomLevel = 12.37;
+      let zoomLevel = 12.37;
       when.setStyle("geojson", zoomLevel);
       should.beVisible("maplibre:ctrl-zoom");
       should.containText("maplibre:ctrl-zoom", "Zoom: " + zoomLevel);
     });
 
     it("via map controls", () => {
-      var zoomLevel = 12.37;
+      let zoomLevel = 12.37;
       when.setStyle("geojson", zoomLevel);
 
       should.beVisible("maplibre:ctrl-zoom");