improve drivers

cypress/e2e/accessibility.cy.ts

@@ -1,7 +1,8 @@
+import { then } from "@shellygo/cypress-test-utils/assertable";
 import MaputnikDriver from "./maputnik-driver";
 
 describe("accessibility", () => {
-  let { beforeAndAfter, when, should } = new MaputnikDriver();
+  let { beforeAndAfter, get, when, should } = new MaputnikDriver();
   beforeAndAfter();
 
   describe("skip links", () => {
@@ -16,6 +17,8 @@ describe("accessibility", () => {
       should.beFocused(selector);
       when.click(selector);
       should.beFocused("skip-target-layer-list");
+
+      // 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.
@@ -25,7 +28,7 @@ describe("accessibility", () => {
       when.tab().tab();
       should.beFocused(selector);
       when.click(selector);
-      should.beFocused("skip-target-layer-editor");
+      then(get.skipTargetLayerEditor()).shouldBeFocused();
     });
 
     it("skip link to map view", () => {

cypress/e2e/cypress-wrapper-driver.ts

@@ -5,37 +5,21 @@ export default class CypressWrapperDriver {
 
   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;
-}
+}

cypress/e2e/keyboard.cy.ts

@@ -5,7 +5,7 @@ describe("keyboard", () => {
   beforeAndAfter();
   describe("shortcuts", () => {
     beforeEach(() => {
-      given.setupInterception();
+      given.setupMockBackedResponses();
       when.setStyle("");
     });
 

cypress/e2e/maputnik-driver.ts

@@ -9,21 +9,59 @@ export default class MaputnikDriver {
 
   public beforeAndAfter = () => {
     beforeEach(() => {
-      this.given.setupInterception();
+      this.given.setupMockBackedResponses();
       this.when.setStyle("both");
     });
   };
 
   public given = {
-    setupInterception: () => {
-      this.helper.given.interceptGetToFile(SERVER_ADDRESS + "example-style.json");
-      this.helper.given.interceptGetToFile(SERVER_ADDRESS + "example-layer-style.json");
-      this.helper.given.interceptGetToFile(SERVER_ADDRESS + "geojson-style.json");
-      this.helper.given.interceptGetToFile(SERVER_ADDRESS + "raster-style.json");
-      this.helper.given.interceptGetToFile(SERVER_ADDRESS + "geojson-raster-style.json");
-
-      this.helper.given.interceptAndIgnore("*example.local/*");
-      this.helper.given.interceptAndIgnore("*example.com/*");
+    setupMockBackedResponses: () => {
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: "http://localhost:8888/example-style.json",
+        response: {
+          fixture: "example-style.json",
+        },
+        alias: "example-style.json",
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: "http://localhost:8888/example-layer-style.json",
+        response: {
+          fixture: "example-layer-style.json",
+        },
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: "http://localhost:8888/geojson-style.json",
+        response: {
+          fixture: "geojson-style.json",
+        },
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: "http://localhost:8888/raster-style.json",
+        response: {
+          fixture: "raster-style.json",
+        },
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: "http://localhost:8888/geojson-raster-style.json",
+        response: {
+          fixture: "geojson-raster-style.json",
+        },
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: "*example.local/*",
+        response: [],
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: "*example.com/*",
+        response: [],
+      });
     },
   };
 
@@ -37,10 +75,9 @@ export default class MaputnikDriver {
       this.helper.when.waitForResponse("example-style.json");
     },
     chooseExampleFile: () => {
-      this.helper.get.elementByClassOrType("input[type='file']").selectFile(
-        "cypress/fixtures/example-style.json",
-        { force: true }
-      );
+      this.helper.get
+        .bySelector("type", "file")
+        .selectFile("cypress/fixtures/example-style.json", { force: true });
     },
     setStyle: (
       styleProperties: "geojson" | "raster" | "both" | "layer" | "",
@@ -48,18 +85,18 @@ export default class MaputnikDriver {
     ) => {
       let url = "?debug";
       switch (styleProperties) {
-      case "geojson":
-        url += `&style=${SERVER_ADDRESS}geojson-style.json`;
-        break;
-      case "raster":
-        url += `&style=${SERVER_ADDRESS}raster-style.json`;
-        break;
-      case "both":
-        url += `&style=${SERVER_ADDRESS}geojson-raster-style.json`;
-        break;
-      case "layer":
-        url += `&style=${SERVER_ADDRESS}/example-layer-style.json`;
-        break;
+        case "geojson":
+          url += `&style=${SERVER_ADDRESS}geojson-style.json`;
+          break;
+        case "raster":
+          url += `&style=${SERVER_ADDRESS}raster-style.json`;
+          break;
+        case "both":
+          url += `&style=${SERVER_ADDRESS}geojson-raster-style.json`;
+          break;
+        case "layer":
+          url += `&style=${SERVER_ADDRESS}/example-layer-style.json`;
+          break;
       }
       if (zoom) {
         url += `#${zoom}/41.3805/2.1635`;
@@ -102,7 +139,10 @@ export default class MaputnikDriver {
     },
 
     setValue: (selector: string, text: string) => {
-      this.helper.get.element(selector).clear().type(text, { parseSpecialCharSequences: false });
+      this.helper.get
+        .element(selector)
+        .clear()
+        .type(text, { parseSpecialCharSequences: false });
     },
   };
 
@@ -119,12 +159,16 @@ export default class MaputnikDriver {
     exampleFileUrl: () => {
       return SERVER_ADDRESS + "example-style.json";
     },
+    skipTargetLayerList: () =>
+      this.helper.get.element("skip-target-layer-list"),
+    skipTargetLayerEditor: () =>
+      this.helper.get.element("skip-target-layer-editor"),
   };
 
   public should = {
     canvasBeFocused: () => {
       this.when.within("maplibre:map", () => {
-        this.helper.get.elementByClassOrType("canvas").should("be.focused");
+        this.helper.get.element("canvas").should("be.focused");
       });
     },
     notExist: (selector: string) => {
@@ -156,7 +200,9 @@ export default class MaputnikDriver {
     styleStoreEqualToExampleFileData: () => {
       cy.window().then((win: any) => {
         const obj = this.get.styleFromWindow(win);
-        this.helper.given.fixture("example-style.json", "file:example-style.json").should("deep.equal", obj);
+        this.helper.given
+          .fixture("example-style.json", "file:example-style.json")
+          .should("deep.equal", obj);
       });
     },
 
@@ -164,10 +210,13 @@ export default class MaputnikDriver {
       this.helper.get.element(selector).should("exist");
     },
     beSelected: (selector: string, value: string) => {
-      this.helper.get.element(selector).find(`option[value="${value}"]`).should("be.selected");
+      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);
-    }
+    },
   };
 }

cypress/e2e/modal-driver.ts

@@ -5,7 +5,7 @@ export default class ModalDriver {
   private helper = new CypressWrapperDriver();
 
   public when = {
-    fillLayers: (opts: {type: string, layer?: string, id?: string}) => {
+    fillLayers: (opts: { type: string; layer?: string; id?: string }) => {
       let type = opts.type;
       let layer = opts.layer;
       let id;
@@ -14,22 +14,22 @@ export default class ModalDriver {
       } else {
         id = `${type}:${uuid()}`;
       }
-        
+
       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!);
-        }, "add-layer.layer-source-block")
+        }, "add-layer.layer-source-block");
       }
       this.helper.when.click("add-layer");
-        
+
       return id;
     },
 
     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");
     },
@@ -38,5 +38,5 @@ export default class ModalDriver {
       this.helper.when.waitUntil(() => this.helper.get.element(key));
       this.helper.when.click(key + ".close-modal");
     },
-  }
-}
+  };
+}

package.json

@@ -91,7 +91,7 @@
     "@cypress/code-coverage": "^3.12.15",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@rollup/plugin-replace": "^5.0.5",
-    "@shellygo/cypress-test-utils": "^2.0.9",
+    "@shellygo/cypress-test-utils": "^2.0.14",
     "@storybook/addon-a11y": "^7.6.5",
     "@storybook/addon-actions": "^7.6.5",
     "@storybook/addon-links": "^7.6.5",