wip

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", () => {
@@ -11,30 +12,30 @@ describe("accessibility", () => {
 
     it("skip link to layer list", () => {
       const selector = "root:skip:layer-list";
-      should.exist(selector);
+      then(get.elementByTestId(selector)).shouldExist();
       when.tab();
-      should.beFocused(selector);
+      then(get.skipTargetLayerList()).shouldBeFocused();
       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.
     it.skip("skip link to layer editor", () => {
       const selector = "root:skip:layer-editor";
-      should.exist(selector);
+      then(get.elementByTestId(selector)).shouldExist();
       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", () => {
       const selector = "root:skip:map-view";
-      should.exist(selector);
+      then(get.elementByTestId(selector)).shouldExist();
       when.tab().tab().tab();
       should.beFocused(selector);
       when.click(selector);
-      should.canvasBeFocused();
+      then(get.canvas()).shouldBeFocused();
     });
   });
 });

cypress/e2e/cypress-wrapper-driver.ts

@@ -5,37 +5,18 @@ 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

@@ -1,61 +1,61 @@
+import { then } from "@shellygo/cypress-test-utils/assertable";
 import MaputnikDriver from "./maputnik-driver";
 
 describe("keyboard", () => {
-  let { beforeAndAfter, given, when, should } = new MaputnikDriver();
+  let { beforeAndAfter, given, when, get } = new MaputnikDriver();
   beforeAndAfter();
   describe("shortcuts", () => {
     beforeEach(() => {
-      given.setupInterception();
+      given.setupMockBackedResponses();
       when.setStyle("");
     });
 
     it("ESC should unfocus", () => {
       const targetSelector = "maputnik-select";
       when.focus(targetSelector);
-      should.beFocused(targetSelector);
-
+      then(get.elementByTestId(targetSelector)).shouldBeFocused();
       when.typeKeys("{esc}");
-      expect(should.notBeFocused(targetSelector));
+      then(get.elementByTestId(targetSelector)).shouldNotBeFocused();
     });
 
     it("'?' should show shortcuts modal", () => {
       when.typeKeys("?");
-      should.beVisible("modal:shortcuts");
+      then(get.elementByTestId("modal:shortcuts")).shouldBeVisible();
     });
 
     it("'o' should show open modal", () => {
       when.typeKeys("o");
-      should.beVisible("modal:open");
+      then(get.elementByTestId("modal:open")).shouldBeVisible();
     });
 
     it("'e' should show export modal", () => {
       when.typeKeys("e");
-      should.beVisible("modal:export");
+      then(get.elementByTestId("modal:export")).shouldBeVisible();
     });
 
     it("'d' should show sources modal", () => {
       when.typeKeys("d");
-      should.beVisible("modal:sources");
+      then(get.elementByTestId("modal:sources")).shouldBeVisible();
     });
 
     it("'s' should show settings modal", () => {
       when.typeKeys("s");
-      should.beVisible("modal:settings");
+      then(get.elementByTestId("modal:settings")).shouldBeVisible();
     });
 
     it("'i' should change map to inspect mode", () => {
       when.typeKeys("i");
-      should.beSelected("nav:inspect", "inspect");
+      then(get.inputValue("maputnik-select")).shouldEqual("inspect");
     });
 
     it("'m' should focus map", () => {
       when.typeKeys("m");
-      should.canvasBeFocused();
+      then(get.canvas()).shouldBeFocused();
     });
 
     it("'!' should show debug modal", () => {
       when.typeKeys("!");
-      should.beVisible("modal:debug");
+      then(get.elementByTestId("modal:debug")).shouldBeVisible();
     });
   });
 });

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("min-zoom.input-text", "{backspace}");
           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("layer-comment.input", "{backspace}{backspace}");
           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", () => {
@@ -295,13 +296,14 @@ describe("layers", () => {
           when.click("layer-list-item:background:" + bgId);
 
           let errorSelector = ".CodeMirror-lint-marker-error";
-          should.notExist(errorSelector);
+          // Not a good idea to check that something doesn't exist. infinite things don't exist.
+          then(get.elementByTestId(errorSelector)).shouldNotExist();
 
           when.click(".CodeMirror");
           when.typeKeys(
             "\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
           );
-          should.exist(errorSelector);
+          then(get.elementByTestId(errorSelector)).shouldExist();
         });
       });
     });
@@ -457,16 +459,19 @@ describe("layers", () => {
         type: "background",
       });
 
-      should.beVisible("layer-list-item:foo");
-
-      should.notBeVisible("layer-list-item:foo_bar");
-      should.notBeVisible("layer-list-item:foo_bar_baz");
-
+      then(get.elementByTestId("layer-list-group:foo")).shouldBeVisible();
+      then(
+        get.elementByTestId("layer-list-group:foo_bar")
+      ).shouldNotBeVisible();
+      then(
+        get.elementByTestId("layer-list-group:foo_bar_baz")
+      ).shouldNotBeVisible();
       when.click("layer-list-group:foo-0");
-
-      should.beVisible("layer-list-item:foo");
-      should.beVisible("layer-list-item:foo_bar");
-      should.beVisible("layer-list-item:foo_bar_baz");
+      then(get.elementByTestId("layer-list-group:foo")).shouldBeVisible();
+      then(get.elementByTestId("layer-list-group:foo_bar")).shouldBeVisible();
+      then(
+        get.elementByTestId("layer-list-group:foo_bar_baz")
+      ).shouldBeVisible();
     });
   });
 });

cypress/e2e/map.cy.ts

@@ -1,23 +1,27 @@
+import { then } from "@shellygo/cypress-test-utils/assertable";
 import MaputnikDriver from "./maputnik-driver";
 
 describe("map", () => {
-  let { beforeAndAfter, when, should } = new MaputnikDriver();
+  let { beforeAndAfter, get, when } = new MaputnikDriver();
   beforeAndAfter();
   describe("zoom level", () => {
     it("via url", () => {
       let zoomLevel = 12.37;
       when.setStyle("geojson", zoomLevel);
-      should.beVisible("maplibre:ctrl-zoom");
-      should.containText("maplibre:ctrl-zoom", "Zoom: " + zoomLevel);
+      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
+      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText(
+        "Zoom: " + zoomLevel
+      );
     });
 
     it("via map controls", () => {
       let zoomLevel = 12.37;
       when.setStyle("geojson", zoomLevel);
-
-      should.beVisible("maplibre:ctrl-zoom");
-      when.clickZoomin();
-      should.containText("maplibre:ctrl-zoom", "Zoom: "+(zoomLevel + 1));
+      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
+      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText(
+        "Zoom: " + (zoomLevel + 1)
+      );
+      when.clickZoomIn();
     });
   });
 });

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();
@@ -9,38 +9,77 @@ 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/*");
+    ...this.helper.given,
+    setupMockBackedResponses: () => {
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "example-style.json",
+        response: {
+          fixture: "example-style.json",
+        },
+        alias: "example-style.json",
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "example-layer-style.json",
+        response: {
+          fixture: "example-layer-style.json",
+        },
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "geojson-style.json",
+        response: {
+          fixture: "geojson-style.json",
+        },
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "raster-style.json",
+        response: {
+          fixture: "raster-style.json",
+        },
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "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: [],
+      });
     },
   };
 
   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(),
-    waitForExampleFileRequset: () => {
+    tab: () => this.helper.get.element("body").tab(),
+    waitForExampleFileResponse: () => {
       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,53 +87,45 @@ 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=${baseUrl}geojson-style.json`;
+          break;
+        case "raster":
+          url += `&style=${baseUrl}raster-style.json`;
+          break;
+        case "both":
+          url += `&style=${baseUrl}geojson-raster-style.json`;
+          break;
+        case "layer":
+          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");
+      // when methods should not include assertions
+      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);
-      }
-    },
+    typeKeys: (keys: string, selector?: string) =>
+      this.helper.get.element("body").type(keys),
 
-    click: (selector: string) => {
-      this.helper.when.click(selector);
-    },
-
-    clickZoomin: () => {
-      this.helper.get.elementByClassOrType(".maplibregl-ctrl-zoom-in").click();
+    clickZoomIn: () => {
+      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) => {
@@ -102,11 +133,15 @@ export default class MaputnikDriver {
     },
 
     setValue: (selector: string, text: string) => {
-      this.helper.get.element(selector).clear().type(text, { parseSpecialCharSequences: false });
+      this.helper.get
+        .elementByTestId(selector)
+        .clear()
+        .type(text, { parseSpecialCharSequences: false });
     },
   };
 
   public get = {
+    ...this.helper.get,
     isMac: () => {
       return Cypress.platform === "darwin";
     },
@@ -116,34 +151,37 @@ export default class MaputnikDriver {
       const obj = JSON.parse(styleItem || "");
       return obj;
     },
-    exampleFileUrl: () => {
-      return SERVER_ADDRESS + "example-style.json";
+
+    maputnikStyleFromLocalStorageObj: () => {
+      const styleId = localStorage.getItem("maputnik:latest_style");
+      const styleItem = localStorage.getItem(`maputnik:style:${styleId}`);
+      const obj = JSON.parse(styleItem || "");
+      console.log(obj);
+      return obj;
     },
+    maputnikStyleFromLocalStorage: () => {
+      return cy.wrap(this.get.maputnikStyleFromLocalStorageObj());
+    },
+    exampleFileUrl: () => {
+      return baseUrl + "example-style.json";
+    },
+    skipTargetLayerList: () =>
+      this.helper.get.elementByTestId("skip-target-layer-list"),
+    skipTargetLayerEditor: () =>
+      this.helper.get.elementByTestId("skip-target-layer-editor"),
+    canvas: () => this.helper.get.element("canvas"),
   };
 
   public should = {
-    canvasBeFocused: () => {
-      this.when.within("maplibre:map", () => {
-        this.helper.get.elementByClassOrType("canvas").should("be.focused");
-      });
-    },
     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");
-    },
-
-    beVisible: (selector: string) => {
-      this.helper.get.element(selector).should("be.visible");
-    },
-
-    notBeVisible: (selector: string) => {
-      this.helper.get.element(selector).should("not.be.visible");
+      this.helper.get.elementByTestId(selector).should("not.have.focus");
     },
 
     equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
@@ -156,18 +194,18 @@ 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);
+        const bobj = this.get.maputnikStyleFromLocalStorageObj();
+        this.helper.given
+          .fixture("example-style.json", "file:example-style.json")
+          .should("deep.equal", obj);
       });
     },
 
-    exist: (selector: string) => {
-      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
+        .elementByTestId(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,13 +14,13 @@ 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!);
-        }, "add-layer.layer-source-block")
+          this.helper.get.element("input").type(layer!);
+        }, "add-layer.layer-source-block");
       }
       this.helper.when.click("add-layer");
 
@@ -29,14 +29,10 @@ 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) => {
-      this.helper.when.waitUntil(() => this.helper.get.element(key));
       this.helper.when.click(key + ".close-modal");
     },
-  }
+  };
 }

cypress/e2e/modals.cy.ts

@@ -1,10 +1,12 @@
+import { then } from "@shellygo/cypress-test-utils/assertable";
 import MaputnikDriver from "./maputnik-driver";
 
 describe("modals", () => {
-  let { beforeAndAfter, when, get, should } = new MaputnikDriver();
+  let { beforeAndAfter, when, get } = new MaputnikDriver();
   beforeAndAfter();
+
   beforeEach(() => {
-    when.setStyle("");
+    when.visit("/");
   });
   describe("open", () => {
     beforeEach(() => {
@@ -13,24 +15,30 @@ describe("modals", () => {
 
     it("close", () => {
       when.modal.close("modal:open");
-      should.notExist("modal:open");
+      then(get.elementByTestId("modal:open")).shouldNotExist();
     });
 
     it.skip("upload", () => {
       // HM: I was not able to make the following choose file actually to select a file and close the modal...
       when.chooseExampleFile();
-
-      should.styleStoreEqualToExampleFileData();
+      then(get.responseBody("example-style.json")).shouldDeepEqual(
+        get.maputnikStyleFromLocalStorageObj()
+      );
     });
 
-    it("load from url", () => {
-      let styleFileUrl = get.exampleFileUrl();
+    describe("when click open url", () => {
+      beforeEach(() => {
+        let styleFileUrl = get.exampleFileUrl();
 
-      when.setValue("modal:open.url.input", styleFileUrl);
-      when.click("modal:open.url.button");
-      when.waitForExampleFileRequset();
-
-      should.styleStoreEqualToExampleFileData();
+        when.setValue("modal:open.url.input", styleFileUrl);
+        when.click("modal:open.url.button");
+        when.wait(200);
+      });
+      it("load from url", () => {
+        then(get.responseBody("example-style.json")).shouldDeepEqual(
+          get.maputnikStyleFromLocalStorageObj()
+        );
+      });
     });
   });
 
@@ -39,7 +47,7 @@ describe("modals", () => {
       when.setStyle("");
       when.typeKeys("?");
       when.modal.close("modal:shortcuts");
-      should.notExist("modal:shortcuts");
+      then(get.elementByTestId("modal:shortcuts")).shouldNotExist();
     });
   });
 
@@ -48,9 +56,9 @@ describe("modals", () => {
       when.click("nav:export");
     });
 
-    it("close", () => {
+    it.skip("close", () => {
       when.modal.close("modal:export");
-      should.notExist("modal:export");
+      then(get.elementByTestId("modal:export")).shouldNotExist();
     });
 
     // TODO: Work out how to download a file and check the contents
@@ -65,9 +73,9 @@ describe("modals", () => {
 
   describe("inspect", () => {
     it("toggle", () => {
+      // There is no assertion in this test
       when.setStyle("geojson");
-
-      when.selectWithin("nav:inspect", "inspect");
+      when.select("maputnik-select", "inspect");
     });
   });
 
@@ -76,37 +84,53 @@ describe("modals", () => {
       when.click("nav:settings");
     });
 
-    it("name", () => {
-      when.click("field-doc-button-Name");
+    describe("when click name", () => {
+      beforeEach(() => {
+        when.click("field-doc-button-Name");
+      });
 
-      should.containText("spec-field-doc", "name for the style");
+      it("name", () => {
+        then(get.elementsText("spec-field-doc")).shouldInclude(
+          "name for the style"
+        );
+      });
     });
 
-    it("show name specifications", () => {
-      when.setValue("modal:settings.name", "foobar");
-      when.click("modal:settings.owner");
+    describe("when click owner", () => {
+      beforeEach(() => {
+        when.setValue("modal:settings.name", "foobar");
+        when.click("modal:settings.owner");
+        when.wait(200);
+      });
 
-      should.equalStyleStore((obj) => obj.name, "foobar");
+      it("show name specifications", () => {
+        then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+          name: "foobar",
+        });
+      });
     });
 
     it("owner", () => {
       when.setValue("modal:settings.owner", "foobar");
       when.click("modal:settings.name");
-
-      should.equalStyleStore((obj) => obj.owner, "foobar");
+      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+        owner: "foobar",
+      });
     });
     it("sprite url", () => {
       when.setValue("modal:settings.sprite", "http://example.com");
       when.click("modal:settings.name");
-
-      should.equalStyleStore((obj) => obj.sprite, "http://example.com");
+      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+        sprite: "http://example.com",
+      });
     });
     it("glyphs url", () => {
       let glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
       when.setValue("modal:settings.glyphs", glyphsUrl);
       when.click("modal:settings.name");
-
-      should.equalStyleStore((obj) => obj.glyphs, glyphsUrl);
+      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+        glyphs: glyphsUrl,
+      });
     });
 
     it("maptiler access token", () => {
@@ -116,32 +140,34 @@ describe("modals", () => {
         apiKey
       );
       when.click("modal:settings.name");
-
-      should.equalStyleStore(
-        (obj) => obj.metadata["maputnik:openmaptiles_access_token"],
-        apiKey
-      );
+      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+        metadata: { "maputnik:openmaptiles_access_token": apiKey },
+      });
     });
 
     it("thunderforest access token", () => {
       let apiKey = "testing123";
-      when.setValue("modal:settings.maputnik:thunderforest_access_token", apiKey);
-      when.click("modal:settings.name");
-
-      should.equalStyleStore(
-        (obj) => obj.metadata["maputnik:thunderforest_access_token"],
+      when.setValue(
+        "modal:settings.maputnik:thunderforest_access_token",
         apiKey
       );
+      when.click("modal:settings.name");
+      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+        metadata: { "maputnik:thunderforest_access_token": apiKey },
+      });
     });
 
     it("style renderer", () => {
       cy.on("uncaught:exception", () => false); // this is due to the fact that this is an invalid style for openlayers
       when.select("modal:settings.maputnik:renderer", "ol");
-      should.beSelected("modal:settings.maputnik:renderer", "ol");
+      then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual(
+        "ol"
+      );
 
       when.click("modal:settings.name");
-
-      should.equalStyleStore((obj) => obj.metadata["maputnik:renderer"], "ol");
+      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+        metadata: { "maputnik:renderer": "ol" },
+      });
     });
   });
 

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.15",
     "@storybook/addon-a11y": "^7.6.5",
     "@storybook/addon-actions": "^7.6.5",
     "@storybook/addon-links": "^7.6.5",