Improve drivers (#856)

Co-authored-by: shelly_goldblit <shelly_goldblit@dell.com>
Co-authored-by: HarelM <harel.mazor@gmail.com>

.github/workflows/ci.yml

@@ -34,12 +34,6 @@ jobs:
     - uses: actions/setup-node@v4
       with:
         node-version-file: '.nvmrc'
-    - uses: actions/cache@v1
-      with:
-        path: ~/.npm
-        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-        restore-keys: |
-          ${{ runner.os }}-node-
     - run: npm ci
     - run: npm run build
     - run: npm run lint
@@ -57,12 +51,6 @@ jobs:
     - uses: actions/setup-node@v4
       with:
         node-version-file: '.nvmrc'
-    - uses: actions/cache@v1
-      with:
-        path: ~/.npm
-        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-        restore-keys: |
-          ${{ runner.os }}-node-
     - run: npm ci
     - run: npm run build
     - run: npm run build-storybook

cypress/e2e/accessibility.cy.ts

@@ -1,7 +1,7 @@
-import MaputnikDriver from "./maputnik-driver";
+import { MaputnikDriver } from "./maputnik-driver";
 
 describe("accessibility", () => {
-  let { beforeAndAfter, when, should } = new MaputnikDriver();
+  let { beforeAndAfter, get, when, then } = new MaputnikDriver();
   beforeAndAfter();
 
   describe("skip links", () => {
@@ -11,30 +11,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.elementByTestId(selector)).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);
+      then(get.elementByTestId(selector)).shouldBeFocused();
       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);
+      then(get.elementByTestId(selector)).shouldBeFocused();
       when.click(selector);
-      should.canvasBeFocused();
+      then(get.canvas()).shouldBeFocused();
     });
   });
 });

cypress/e2e/cypress-wrapper-driver.ts

@@ -1,41 +0,0 @@
-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;
-}

cypress/e2e/history.cy.ts

@@ -1,7 +1,7 @@
-import MaputnikDriver from "./maputnik-driver";
+import { MaputnikDriver } from "./maputnik-driver";
 
 describe("history", () => {
-  let { beforeAndAfter, when, get, should } = new MaputnikDriver();
+  let { beforeAndAfter, when, get, then } = new MaputnikDriver();
   beforeAndAfter();
 
   let undoKeyCombo: string;
@@ -16,23 +16,20 @@ describe("history", () => {
   it("undo/redo", () => {
     when.setStyle("geojson");
     when.modal.open();
-
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
-    should.equalStyleStore((a: any) => a.layers, []);
 
     when.modal.fillLayers({
       id: "step 1",
       type: "background",
     });
-
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-    should.equalStyleStore(
+      layers: [
-      (a: any) => a.layers,
-      [
         {
           id: "step 1",
           type: "background",
         },
-      ]
+      ],
-    );
+    });
 
     when.modal.open();
     when.modal.fillLayers({
@@ -40,9 +37,8 @@ describe("history", () => {
       type: "background",
     });
 
-    should.equalStyleStore(
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      (a: any) => a.layers,
+      layers: [
-      [
         {
           id: "step 1",
           type: "background",
@@ -51,38 +47,35 @@ describe("history", () => {
           id: "step 2",
           type: "background",
         },
-      ]
+      ],
-    );
+    });
 
     when.typeKeys(undoKeyCombo);
-    should.equalStyleStore(
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      (a: any) => a.layers,
+      layers: [
-      [
         {
           id: "step 1",
           type: "background",
         },
-      ]
+      ],
-    );
+    });
 
     when.typeKeys(undoKeyCombo);
-    should.equalStyleStore((a: any) => a.layers, []);
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
 
     when.typeKeys(redoKeyCombo);
-    should.equalStyleStore(
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      (a: any) => a.layers,
+      layers: [
-      [
         {
           id: "step 1",
           type: "background",
         },
-      ]
+      ],
-    );
+    });
 
     when.typeKeys(redoKeyCombo);
-    should.equalStyleStore(
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      (a: any) => a.layers,
+      layers: [
-      [
         {
           id: "step 1",
           type: "background",
@@ -91,7 +84,7 @@ describe("history", () => {
           id: "step 2",
           type: "background",
         },
-      ]
+      ],
-    );
+    });
   });
 });

cypress/e2e/keyboard.cy.ts

@@ -1,61 +1,60 @@
-import MaputnikDriver from "./maputnik-driver";
+import { MaputnikDriver } from "./maputnik-driver";
 
 describe("keyboard", () => {
-  let { beforeAndAfter, given, when, should } = new MaputnikDriver();
+  let { beforeAndAfter, given, when, get, then } = 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,8 @@
 import { v1 as uuid } from "uuid";
-import MaputnikDriver from "./maputnik-driver";
+import { MaputnikDriver } from "./maputnik-driver";
 
 describe("layers", () => {
-  let { beforeAndAfter, when, should } = new MaputnikDriver();
+  let { beforeAndAfter, get, when, then } = new MaputnikDriver();
   beforeAndAfter();
   beforeEach(() => {
     when.setStyle("both");
@@ -10,120 +10,108 @@ describe("layers", () => {
   });
 
   describe("ops", () => {
-    it("delete", () => {
+    let id: string;
-      let id = when.modal.fillLayers({
+    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", () => {
+    it("should update layers in local storage", () => {
-      let id = when.modal.fillLayers({
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        type: "background",
+        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", () => {
+    describe("when clicking delete", () => {
-      let id = when.modal.fillLayers({
+      beforeEach(() => {
-        type: "background",
+        when.click("layer-list-item:" + id + ":delete");
+      });
+      it("should empty layers in local storage", () => {
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [],
+        });
+      });
+    });
+
+    describe("when clicking duplicate", () => {
+      beforeEach(() => {
+        when.click("layer-list-item:" + id + ":copy");
+      });
+      it("should add copy layer in local storage", () => {
+        then(get.styleFromLocalStorage()).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(
+      it("should update visibility to none in local storage", () => {
-        (a: any) => a.layers,
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        [
+          layers: [
-          {
+            {
-            id: id,
+              id: id,
-            type: "background",
+              type: "background",
-          },
+              layout: {
-        ]
+                visibility: "none",
-      );
+              },
-
-      when.click("layer-list-item:" + id + ":toggle-visibility");
-
-      should.equalStyleStore(
-        (a: any) => a.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(
+        it("should update visibility to visible in local storage", () => {
-        (a: any) => a.layers,
+          then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        [
+            layers: [
-          {
+              {
-            id: id,
+                id: id,
-            type: "background",
+                type: "background",
-            layout: {
+                layout: {
-              visibility: "visible",
+                  visibility: "visible",
-            },
+                },
-          },
+              },
-        ]
+            ],
-      );
+          });
+        });
+      });
     });
   });
-
   describe("background", () => {
     it("add", () => {
       let id = when.modal.fillLayers({
         type: "background",
       });
-
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      should.equalStyleStore(
+        layers: [
-        (a: any) => a.layers,
-        [
           {
             id: id,
             type: "background",
           },
-        ]
+        ],
-      );
+      });
     });
 
     describe("modify", () => {
@@ -136,15 +124,14 @@ describe("layers", () => {
 
         when.click("add-layer");
 
-        should.equalStyleStore(
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          (a: any) => a.layers,
+          layers: [
-          [
             {
               id: "background:" + id,
               type: "background",
             },
-          ]
+          ],
-        );
+        });
         return id;
       }
 
@@ -160,114 +147,138 @@ describe("layers", () => {
           when.setValue("layer-editor.layer-id.input", "foobar:" + id);
           when.click("min-zoom");
 
-          should.equalStyleStore(
+          then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-            (a: any) => a.layers,
+            layers: [
-            [
               {
                 id: "foobar:" + id,
                 type: "background",
               },
-            ]
+            ],
-          );
+          });
         });
 
-        it("min-zoom", () => {
+        describe("min-zoom", () => {
-          let bgId = createBackground();
+          let bgId: string;
 
-          when.click("layer-list-item:background:" + bgId);
+          beforeEach(() => {
-          when.setValue("min-zoom.input-text", "1");
+            bgId = createBackground();
+            when.click("layer-list-item:background:" + bgId);
+            when.setValue("min-zoom.input-text", "1");
+            when.click("layer-editor.layer-id");
+          });
 
-          when.click("layer-editor.layer-id");
+          it("should update min-zoom in local storage", () => {
+            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+              layers: [
+                {
+                  id: "background:" + bgId,
+                  type: "background",
+                  minzoom: 1,
+                },
+              ],
+            });
+          });
 
-          should.equalStyleStore(
+          it("when clicking next layer should update style on local storage", () => {
-            (a: any) => a.layers,
+            when.type("min-zoom.input-text", "{backspace}");
-            [
+            when.click("max-zoom.input-text");
-              {
+            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-                id: "background:" + bgId,
+              layers: [
-                type: "background",
+                {
-                minzoom: 1,
+                  id: "background:" + bgId,
-              },
+                  type: "background",
-            ]
+                  minzoom: 1,
-          );
+                },
-
+              ],
-          // AND RESET!
+            });
-          when.typeKeys("{backspace}", "min-zoom.input-text");
+          });
-          when.click("max-zoom.input-text");
-
-          should.equalStyleStore((a: any) => a.layers, [{
-            "id": 'background:'+bgId,
-            "type": 'background'
-          }]);
         });
 
-        it("max-zoom", () => {
+        describe("max-zoom", () => {
-          let bgId = createBackground();
+          let bgId: string;
 
-          when.click("layer-list-item:background:" + bgId);
+          beforeEach(() => {
-          when.setValue("max-zoom.input-text", "1");
+            bgId = createBackground();
+            when.click("layer-list-item:background:" + bgId);
+            when.setValue("max-zoom.input-text", "1");
+            when.click("layer-editor.layer-id");
+          });
 
-          when.click("layer-editor.layer-id");
+          it("should update style in local storage", () => {
-
+            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          should.equalStyleStore(
+              layers: [
-            (a: any) => a.layers,
+                {
-            [
+                  id: "background:" + bgId,
-              {
+                  type: "background",
-                id: "background:" + bgId,
+                  maxzoom: 1,
-                type: "background",
+                },
-                maxzoom: 1,
+              ],
-              },
+            });
-            ]
+          });
-          );
         });
 
-        it("comments", () => {
+        describe("comments", () => {
-          let bgId = createBackground();
+          let bgId: string;
           let comment = "42";
 
-          when.click("layer-list-item:background:" + bgId);
+          beforeEach(() => {
-          when.setValue("layer-comment.input", comment);
+            bgId = createBackground();
+            when.click("layer-list-item:background:" + bgId);
+            when.setValue("layer-comment.input", comment);
+            when.click("layer-editor.layer-id");
+          });
 
-          when.click("layer-editor.layer-id");
+          it("should update style in local storage", () => {
-
+            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          should.equalStyleStore(
+              layers: [
-            (a: any) => a.layers,
+                {
-            [
+                  id: "background:" + bgId,
-              {
+                  type: "background",
-                id: "background:" + bgId,
+                  metadata: {
-                type: "background",
+                    "maputnik:comment": comment,
-                metadata: {
+                  },
-                  "maputnik:comment": comment,
                 },
-              },
+              ],
-            ]
+            });
-          );
+          });
 
-          // Unset it again.
+          describe("when unsetting", () => {
-          when.typeKeys("{backspace}{backspace}", "layer-comment.input");
+            beforeEach(() => {
-          when.click("min-zoom.input-text");
+              when.clear("layer-comment.input");
+              when.click("min-zoom.input-text");
+            });
 
-          should.equalStyleStore((a: any) => a.layers, [{
+            it("should update style in local storage", () => {
-            "id": 'background:' + bgId,
+              then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-            "type": 'background'
+                layers: [
-          }]);
+                  {
+                    id: "background:" + bgId,
+                    type: "background",
+                  },
+                ],
+              });
+            });
+          });
         });
 
-        it("color", () => {
+        describe("color", () => {
-          let bgId = createBackground();
+          let bgId: string;
+          beforeEach(() => {
+            bgId = createBackground();
+            when.click("layer-list-item:background:" + bgId);
+            when.click("spec-field:background-color");
+          });
 
-          when.click("layer-list-item:background:" + bgId);
+          it("should update style in local storage", () => {
-
+            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          when.click("spec-field:background-color");
+              layers: [
-
+                {
-          should.equalStyleStore(
+                  id: "background:" + bgId,
-            (a: any) => a.layers,
+                  type: "background",
-            [
+                },
-              {
+              ],
-                id: "background:" + bgId,
+            });
-                type: "background",
+          });
-              },
-            ]
-          );
         });
       });
 
@@ -295,13 +306,13 @@ describe("layers", () => {
           when.click("layer-list-item:background:" + bgId);
 
           let errorSelector = ".CodeMirror-lint-marker-error";
-          should.notExist(errorSelector);
+          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();
         });
       });
     });
@@ -314,16 +325,15 @@ describe("layers", () => {
         layer: "example",
       });
 
-      should.equalStyleStore(
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        (a: any) => a.layers,
+        layers: [
-        [
           {
             id: id,
             type: "fill",
             source: "example",
           },
-        ]
+        ],
-      );
+      });
     });
 
     // TODO: Change source
@@ -337,16 +347,15 @@ describe("layers", () => {
         layer: "example",
       });
 
-      should.equalStyleStore(
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        (a: any) => a.layers,
+        layers: [
-        [
           {
             id: id,
             type: "line",
             source: "example",
           },
-        ]
+        ],
-      );
+      });
     });
 
     it("groups", () => {
@@ -362,16 +371,15 @@ describe("layers", () => {
         layer: "example",
       });
 
-      should.equalStyleStore(
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        (a: any) => a.layers,
+        layers: [
-        [
           {
             id: id,
             type: "symbol",
             source: "example",
           },
-        ]
+        ],
-      );
+      });
     });
   });
 
@@ -382,16 +390,15 @@ describe("layers", () => {
         layer: "raster",
       });
 
-      should.equalStyleStore(
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        (a: any) => a.layers,
+        layers: [
-        [
           {
             id: id,
             type: "raster",
             source: "raster",
           },
-        ]
+        ],
-      );
+      });
     });
   });
 
@@ -402,16 +409,15 @@ describe("layers", () => {
         layer: "example",
       });
 
-      should.equalStyleStore(
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        (a: any) => a.layers,
+        layers: [
-        [
           {
             id: id,
             type: "circle",
             source: "example",
           },
-        ]
+        ],
-      );
+      });
     });
   });
 
@@ -422,16 +428,15 @@ describe("layers", () => {
         layer: "example",
       });
 
-      should.equalStyleStore(
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        (a: any) => a.layers,
+        layers: [
-        [
           {
             id: id,
             type: "fill-extrusion",
             source: "example",
           },
-        ]
+        ],
-      );
+      });
     });
   });
 
@@ -457,16 +462,17 @@ describe("layers", () => {
         type: "background",
       });
 
-      should.beVisible("layer-list-item:foo");
+      then(get.elementByTestId("layer-list-item:foo")).shouldBeVisible();
-
+      then(get.elementByTestId("layer-list-item:foo_bar")).shouldNotBeVisible();
-      should.notBeVisible("layer-list-item:foo_bar");
+      then(
-      should.notBeVisible("layer-list-item:foo_bar_baz");
+        get.elementByTestId("layer-list-item:foo_bar_baz")
-
+      ).shouldNotBeVisible();
       when.click("layer-list-group:foo-0");
-
+      then(get.elementByTestId("layer-list-item:foo")).shouldBeVisible();
-      should.beVisible("layer-list-item:foo");
+      then(get.elementByTestId("layer-list-item:foo_bar")).shouldBeVisible();
-      should.beVisible("layer-list-item:foo_bar");
+      then(
-      should.beVisible("layer-list-item:foo_bar_baz");
+        get.elementByTestId("layer-list-item:foo_bar_baz")
+      ).shouldBeVisible();
     });
   });
 });

cypress/e2e/map.cy.ts

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

cypress/e2e/maputnik-cypress-helper.ts

@@ -0,0 +1,19 @@
+import { CypressHelper } from "@shellygo/cypress-test-utils";
+
+export default class MaputnikCypressHelper {
+  private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
+
+  public given = {
+    ...this.helper.given,
+  };
+
+  public get = {
+    ...this.helper.get,
+  };
+
+  public when = {
+    ...this.helper.when,
+  };
+
+  public beforeAndAfter = this.helper.beforeAndAfter;
+}

cypress/e2e/maputnik-driver.ts

@@ -1,46 +1,106 @@
-import CypressWrapperDriver from "./cypress-wrapper-driver";
+import { CypressHelper } from "@shellygo/cypress-test-utils";
+import { Assertable, then } from "@shellygo/cypress-test-utils/assertable";
+import MaputnikCypressHelper from "./maputnik-cypress-helper";
 import ModalDriver from "./modal-driver";
+const baseUrl = "http://localhost:8888/";
 
-const SERVER_ADDRESS = "http://localhost:8888/";
+const 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;
+};
 
-export default class MaputnikDriver {
+export class MaputnikAssertable<T> extends Assertable<T> {
-  private helper = new CypressWrapperDriver();
+  shouldEqualToStoredStyle = () =>
+    then(
+      new CypressHelper().get.window().then((win) => {
+        const style = styleFromWindow(win);
+        then(this.chainable).shouldDeepNestedInclude(style);
+      })
+    );
+}
+
+export class MaputnikDriver {
+  private helper = new MaputnikCypressHelper();
   private modalDriver = new ModalDriver();
 
   public beforeAndAfter = () => {
     beforeEach(() => {
-      this.given.setupInterception();
+      this.given.setupMockBackedResponses();
       this.when.setStyle("both");
     });
   };
 
-  public given = {
+  public then = (chainable: Cypress.Chainable<any>) =>
-    setupInterception: () => {
+    new MaputnikAssertable(chainable);
-      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/*");
+  public given = {
-      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(),
+    tab: () => this.helper.get.element("body").tab(),
-    waitForExampleFileRequset: () => {
+    waitForExampleFileResponse: () => {
       this.helper.when.waitForResponse("example-style.json");
     },
     chooseExampleFile: () => {
-      this.helper.get.elementByClassOrType("input[type='file']").selectFile(
+      this.helper.get
-        "cypress/fixtures/example-style.json",
+        .bySelector("type", "file")
-        { force: true }
+        .selectFile("cypress/fixtures/example-style.json", { force: true });
-      );
     },
     setStyle: (
       styleProperties: "geojson" | "raster" | "both" | "layer" | "",
@@ -49,52 +109,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.when.acceptConfirm();
       }
-      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) => {
+    typeKeys: (keys: string) => this.helper.get.element("body").type(keys),
-      if (selector) {
-        this.helper.get.element(selector).type(keys);
-      } else {
-        this.helper.get.elementByClassOrType("body").type(keys);
-      }
-    },
 
-    click: (selector: string) => {
+    clickZoomIn: () => {
-      this.helper.when.click(selector);
+      this.helper.get.element(".maplibregl-ctrl-zoom-in").click();
-    },
-
-    clickZoomin: () => {
-      this.helper.get.elementByClassOrType(".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,72 +153,29 @@ 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";
     },
-    styleFromWindow: (win: Window) => {
+
-      const styleId = win.localStorage.getItem("maputnik:latest_style");
+    styleFromLocalStorage: () =>
-      const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`);
+      this.helper.get.window().then((win) => styleFromWindow(win)),
-      const obj = JSON.parse(styleItem || "");
+
-      return obj;
-    },
     exampleFileUrl: () => {
-      return SERVER_ADDRESS + "example-style.json";
+      return baseUrl + "example-style.json";
     },
-  };
+    skipTargetLayerList: () =>
-
+      this.helper.get.elementByTestId("skip-target-layer-list"),
-  public should = {
+    skipTargetLayerEditor: () =>
-    canvasBeFocused: () => {
+      this.helper.get.elementByTestId("skip-target-layer-editor"),
-      this.when.within("maplibre:map", () => {
+    canvas: () => this.helper.get.element("canvas"),
-        this.helper.get.elementByClassOrType("canvas").should("be.focused");
-      });
-    },
-    notExist: (selector: string) => {
-      this.helper.get.elementByClassOrType(selector).should("not.exist");
-    },
-    beFocused: (selector: string) => {
-      this.helper.get.element(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");
-    },
-
-    equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
-      cy.window().then((win: any) => {
-        const obj = this.get.styleFromWindow(win);
-        assert.deepEqual(getter(obj), styleObj);
-      });
-    },
-
-    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);
-      });
-    },
-
-    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");
-    },
-    containText: (selector: string, text: string) => {
-      this.helper.get.element(selector).should("contain.text", text);
-    }
   };
 }

cypress/e2e/modal-driver.ts

@@ -1,11 +1,13 @@
 import { v1 as uuid } from "uuid";
-import CypressWrapperDriver from "./cypress-wrapper-driver";
+import MaputnikCypressHelper from "./maputnik-cypress-helper";
 
 export default class ModalDriver {
-  private helper = new CypressWrapperDriver();
+  private helper = new MaputnikCypressHelper();
 
   public when = {
-    fillLayers: (opts: {type: string, layer?: string, id?: string}) => {
+    fillLayers: (opts: { type: string; layer?: string; id?: string }) => {
+      // Having logic in test code is an anti pattern.
+      // This should be splitted to multiple single responsibility functions
       let type = opts.type;
       let layer = opts.layer;
       let id;
@@ -14,29 +16,25 @@ export default class ModalDriver {
       } else {
         id = `${type}:${uuid()}`;
       }
-        
+      this.helper.when.selectOption("add-layer.layer-type.select", type);
-      this.helper.get.element("add-layer.layer-type.select").select(type);
+      this.helper.when.type("add-layer.layer-id.input", id);
-      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")
+        }, "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");
     },
 
     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,8 +1,9 @@
-import MaputnikDriver from "./maputnik-driver";
+import { MaputnikDriver } from "./maputnik-driver";
 
 describe("modals", () => {
-  let { beforeAndAfter, when, get, should } = new MaputnikDriver();
+  let { beforeAndAfter, when, get, then } = new MaputnikDriver();
   beforeAndAfter();
+
   beforeEach(() => {
     when.setStyle("");
   });
@@ -13,24 +14,26 @@ 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();
-
+      then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
-      should.styleStoreEqualToExampleFileData();
     });
 
-    it("load from url", () => {
+    describe("when click open url", () => {
-      let styleFileUrl = get.exampleFileUrl();
+      beforeEach(() => {
+        let styleFileUrl = get.exampleFileUrl();
 
-      when.setValue("modal:open.url.input", styleFileUrl);
+        when.setValue("modal:open.url.input", styleFileUrl);
-      when.click("modal:open.url.button");
+        when.click("modal:open.url.button");
-      when.waitForExampleFileRequset();
+        when.wait(200);
-
+      });
-      should.styleStoreEqualToExampleFileData();
+      it("load from url", () => {
+        then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
+      });
     });
   });
 
@@ -39,7 +42,7 @@ describe("modals", () => {
       when.setStyle("");
       when.typeKeys("?");
       when.modal.close("modal:shortcuts");
-      should.notExist("modal:shortcuts");
+      then(get.elementByTestId("modal:shortcuts")).shouldNotExist();
     });
   });
 
@@ -50,7 +53,7 @@ describe("modals", () => {
 
     it("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 +68,9 @@ describe("modals", () => {
 
   describe("inspect", () => {
     it("toggle", () => {
+      // There is no assertion in this test
       when.setStyle("geojson");
-
+      when.select("maputnik-select", "inspect");
-      when.selectWithin("nav:inspect", "inspect");
     });
   });
 
@@ -76,37 +79,59 @@ describe("modals", () => {
       when.click("nav:settings");
     });
 
-    it("name", () => {
+    describe("when click name", () => {
-      when.click("field-doc-button-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", () => {
+    describe("when set name and click owner", () => {
-      when.setValue("modal:settings.name", "foobar");
+      beforeEach(() => {
-      when.click("modal:settings.owner");
+        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.styleFromLocalStorage()).shouldDeepNestedInclude({
+          name: "foobar",
+        });
+      });
     });
 
-    it("owner", () => {
+    describe("when set owner and click name", () => {
-      when.setValue("modal:settings.owner", "foobar");
+      beforeEach(() => {
-      when.click("modal:settings.name");
+        when.setValue("modal:settings.owner", "foobar");
-
+        when.click("modal:settings.name");
-      should.equalStyleStore((obj) => obj.owner, "foobar");
+        when.wait(200);
+      });
+      it("should update owner in local storage", () => {
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          owner: "foobar",
+        });
+      });
     });
+
     it("sprite url", () => {
       when.setValue("modal:settings.sprite", "http://example.com");
       when.click("modal:settings.name");
-
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      should.equalStyleStore((obj) => obj.sprite, "http://example.com");
+        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");
-
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      should.equalStyleStore((obj) => obj.glyphs, glyphsUrl);
+        glyphs: glyphsUrl,
+      });
     });
 
     it("maptiler access token", () => {
@@ -116,32 +141,36 @@ describe("modals", () => {
         apiKey
       );
       when.click("modal:settings.name");
-
+      then(
-      should.equalStyleStore(
+        get.styleFromLocalStorage().pipe((style) => style.metadata)
-        (obj) => obj.metadata["maputnik:openmaptiles_access_token"],
+      ).shouldInclude({
-        apiKey
+        "maputnik:openmaptiles_access_token": apiKey,
-      );
+      });
     });
 
     it("thunderforest access token", () => {
       let apiKey = "testing123";
-      when.setValue("modal:settings.maputnik:thunderforest_access_token", apiKey);
+      when.setValue(
-      when.click("modal:settings.name");
+        "modal:settings.maputnik:thunderforest_access_token",
-
-      should.equalStyleStore(
-        (obj) => obj.metadata["maputnik:thunderforest_access_token"],
         apiKey
       );
+      when.click("modal:settings.name");
+      then(
+        get.styleFromLocalStorage().pipe((style) => style.metadata)
+      ).shouldInclude({ "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");
-
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      should.equalStyleStore((obj) => obj.metadata["maputnik:renderer"], "ol");
+        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.17",
     "@storybook/addon-a11y": "^7.6.5",
     "@storybook/addon-actions": "^7.6.5",
     "@storybook/addon-links": "^7.6.5",

src/components/FieldFunction.tsx

@@ -399,7 +399,7 @@ export default class FieldFunction extends React.Component<FieldFunctionProps, F
         />
       )
     }
-    return <div className={propClass} data-wd-key={"spec-field:"+this.props.fieldName}>
+    return <div className={propClass} data-wd-key={"spec-field-container:"+this.props.fieldName}>
       {specField}
     </div>
   }