fix failing build

cypress/e2e/accessibility.cy.ts

@@ -1,7 +1,7 @@
 import { MaputnikDriver } from "./maputnik-driver";
 
 describe("accessibility", () => {
-  let { beforeAndAfter, get, when, should, then } = new MaputnikDriver();
+  let { beforeAndAfter, get, when, then } = new MaputnikDriver();
   beforeAndAfter();
 
   describe("skip links", () => {
@@ -23,7 +23,7 @@ describe("accessibility", () => {
       const selector = "root:skip:layer-editor";
       then(get.elementByTestId(selector)).shouldExist();
       when.tab().tab();
-      should.beFocused(selector);
+      then(get.elementByTestId(selector)).shouldBeFocused();
       when.click(selector);
       then(get.skipTargetLayerEditor()).shouldBeFocused();
     });
@@ -32,7 +32,7 @@ describe("accessibility", () => {
       const selector = "root:skip:map-view";
       then(get.elementByTestId(selector)).shouldExist();
       when.tab().tab().tab();
-      should.beFocused(selector);
+      then(get.elementByTestId(selector)).shouldBeFocused();
       when.click(selector);
       then(get.canvas()).shouldBeFocused();
     });

cypress/e2e/cypress-wrapper-driver.ts

@@ -1,6 +1,6 @@
 import { CypressHelper } from "@shellygo/cypress-test-utils";
 
-export default class CypressWrapperDriver {
+export default class MaputnikCypressHelper {
   private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
 
   public given = {
@@ -13,9 +13,6 @@ export default class CypressWrapperDriver {
 
   public when = {
     ...this.helper.when,
-    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";
 
 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/layers.cy.ts

@@ -2,7 +2,7 @@ import { v1 as uuid } from "uuid";
 import { MaputnikDriver } from "./maputnik-driver";
 
 describe("layers", () => {
-  let { beforeAndAfter, get, when, should, then } = new MaputnikDriver();
+  let { beforeAndAfter, get, when, then } = new MaputnikDriver();
   beforeAndAfter();
   beforeEach(() => {
     when.setStyle("both");
@@ -18,7 +18,7 @@ describe("layers", () => {
     });
 
     it("should update layers in local storage", () => {
-      then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
         layers: [
           {
             id: id,
@@ -33,9 +33,7 @@ describe("layers", () => {
         when.click("layer-list-item:" + id + ":delete");
       });
       it("should empty layers in local storage", () => {
-        then(
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          get.maputnikStyleFromLocalStorage()
-        ).shouldIncludeLocalStorageStyle({
           layers: [],
         });
       });
@@ -46,9 +44,7 @@ describe("layers", () => {
         when.click("layer-list-item:" + id + ":copy");
       });
       it("should add copy layer in local storage", () => {
-        then(
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          get.maputnikStyleFromLocalStorage()
-        ).shouldIncludeLocalStorageStyle({
           layers: [
             {
               id: id + "-copy",
@@ -69,9 +65,7 @@ describe("layers", () => {
       });
 
       it("should update visibility to none in local storage", () => {
-        then(
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          get.maputnikStyleFromLocalStorage()
-        ).shouldIncludeLocalStorageStyle({
           layers: [
             {
               id: id,
@@ -90,9 +84,7 @@ describe("layers", () => {
         });
 
         it("should update visibility to visible in local storage", () => {
-          then(
+          then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-            get.maputnikStyleFromLocalStorage()
-          ).shouldIncludeLocalStorageStyle({
             layers: [
               {
                 id: id,
@@ -112,16 +104,14 @@ describe("layers", () => {
       let id = when.modal.fillLayers({
         type: "background",
       });
-
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-      should.equalStyleStore(
+        layers: [
-        (a: any) => a.layers,
-        [
           {
             id: id,
             type: "background",
           },
-        ]
+        ],
-      );
+      });
     });
 
     describe("modify", () => {
@@ -134,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;
       }
 
@@ -158,15 +147,14 @@ 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",
               },
-            ]
+            ],
-          );
+          });
         });
 
         describe("min-zoom", () => {
@@ -180,9 +168,7 @@ describe("layers", () => {
           });
 
           it("should update min-zoom in local storage", () => {
-            then(
+            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-              get.maputnikStyleFromLocalStorage()
-            ).shouldIncludeLocalStorageStyle({
               layers: [
                 {
                   id: "background:" + bgId,
@@ -196,9 +182,7 @@ describe("layers", () => {
           it("when clicking next layer should update style on local storage", () => {
             when.type("min-zoom.input-text", "{backspace}");
             when.click("max-zoom.input-text");
-            then(
+            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-              get.maputnikStyleFromLocalStorage()
-            ).shouldIncludeLocalStorageStyle({
               layers: [
                 {
                   id: "background:" + bgId,
@@ -221,7 +205,7 @@ describe("layers", () => {
           });
 
           it("should update style in local storage", () => {
-            then(cy.window()).shouldIncludeLocalStorageStyle({
+            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
               layers: [
                 {
                   id: "background:" + bgId,
@@ -245,9 +229,7 @@ describe("layers", () => {
           });
 
           it("should update style in local storage", () => {
-            then(
+            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-              get.maputnikStyleFromLocalStorage()
-            ).shouldIncludeLocalStorageStyle({
               layers: [
                 {
                   id: "background:" + bgId,
@@ -267,9 +249,7 @@ describe("layers", () => {
             });
 
             it("should update style in local storage", () => {
-              then(
+              then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-                get.maputnikStyleFromLocalStorage()
-              ).shouldIncludeLocalStorageStyle({
                 layers: [
                   {
                     id: "background:" + bgId,
@@ -290,9 +270,7 @@ describe("layers", () => {
           });
 
           it("should update style in local storage", () => {
-            then(
+            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-              get.maputnikStyleFromLocalStorage()
-            ).shouldIncludeLocalStorageStyle({
               layers: [
                 {
                   id: "background:" + bgId,
@@ -348,16 +326,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
@@ -371,16 +348,15 @@ describe("layers", () => {
         layer: "example",
       });
 
-      should.equalStyleStore(
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        (a: any) => a.layers,
+        layers: [
-        [
           {
             id: id,
             type: "line",
             source: "example",
           },
-        ]
+        ],
-      );
+      });
     });
 
     it("groups", () => {
@@ -396,16 +372,15 @@ describe("layers", () => {
         layer: "example",
       });
 
-      should.equalStyleStore(
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        (a: any) => a.layers,
+        layers: [
-        [
           {
             id: id,
             type: "symbol",
             source: "example",
           },
-        ]
+        ],
-      );
+      });
     });
   });
 
@@ -416,16 +391,15 @@ describe("layers", () => {
         layer: "raster",
       });
 
-      should.equalStyleStore(
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        (a: any) => a.layers,
+        layers: [
-        [
           {
             id: id,
             type: "raster",
             source: "raster",
           },
-        ]
+        ],
-      );
+      });
     });
   });
 
@@ -436,16 +410,15 @@ describe("layers", () => {
         layer: "example",
       });
 
-      should.equalStyleStore(
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        (a: any) => a.layers,
+        layers: [
-        [
           {
             id: id,
             type: "circle",
             source: "example",
           },
-        ]
+        ],
-      );
+      });
     });
   });
 
@@ -456,16 +429,15 @@ describe("layers", () => {
         layer: "example",
       });
 
-      should.equalStyleStore(
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        (a: any) => a.layers,
+        layers: [
-        [
           {
             id: id,
             type: "fill-extrusion",
             source: "example",
           },
-        ]
+        ],
-      );
+      });
     });
   });
 

cypress/e2e/maputnik-driver.ts

@@ -1,28 +1,28 @@
+import { CypressHelper } from "@shellygo/cypress-test-utils";
 import { Assertable, then } from "@shellygo/cypress-test-utils/assertable";
-import CypressWrapperDriver from "./cypress-wrapper-driver";
+import MaputnikCypressHelper from "./cypress-wrapper-driver";
 import ModalDriver from "./modal-driver";
 const baseUrl = "http://localhost:8888/";
 
-export class MaputnikAssertable<T> extends Assertable<T> {
+const styleFromWindow = (win: Window) => {
-  private getStyleFromWindow = (win: Window) => {
+  const styleId = win.localStorage.getItem("maputnik:latest_style");
-    const styleId = win.localStorage.getItem("maputnik:latest_style");
+  const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`);
-    const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`);
+  const obj = JSON.parse(styleItem || "");
-    const obj = JSON.parse(styleItem || "");
+  return obj;
-    return obj;
+};
-  };
-  shouldIncludeLocalStorageStyle = (styleObj: Object) =>
-    then(
-      cy.window().then((win) => this.getStyleFromWindow(win))
-    ).shouldDeepNestedInclude(styleObj);
 
-  shouldHaveLocalStorageStyle = (styleObj: Object) =>
+export class MaputnikAssertable<T> extends Assertable<T> {
+  shouldEqualToStoredStyle = () =>
     then(
-      cy.window().then((win) => this.getStyleFromWindow(win))
+      new CypressHelper().get.window().then((win) => {
-    ).shouldDeepEqual(styleObj);
+        const style = styleFromWindow(win);
+        then(this.chainable).shouldDeepNestedInclude(style);
+      })
+    );
 }
 
 export class MaputnikDriver {
-  private helper = new CypressWrapperDriver();
+  private helper = new MaputnikCypressHelper();
   private modalDriver = new ModalDriver();
 
   public beforeAndAfter = () => {
@@ -126,7 +126,7 @@ export class MaputnikDriver {
       }
       this.helper.when.visit(baseUrl + url);
       if (styleProperties) {
-        this.helper.when.confirmAlert();
+        this.helper.when.acceptConfirm();
       }
       // when methods should not include assertions
       this.helper.get.elementByTestId("toolbar:link").should("be.visible");
@@ -165,23 +165,17 @@ export class MaputnikDriver {
     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;
-    },
 
     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";
     },
@@ -191,31 +185,4 @@ export class MaputnikDriver {
       this.helper.get.elementByTestId("skip-target-layer-editor"),
     canvas: () => this.helper.get.element("canvas"),
   };
-
-  public should = {
-    notExist: (selector: string) => {
-      this.helper.get.element(selector).should("not.exist");
-    },
-    beFocused: (selector: string) => {
-      this.helper.get.elementByTestId(selector).should("have.focus");
-    },
-
-    notBeFocused: (selector: string) => {
-      this.helper.get.elementByTestId(selector).should("not.have.focus");
-    },
-
-    equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
-      cy.window().then((win: any) => {
-        const obj = this.get.styleFromWindow(win);
-        assert.deepEqual(getter(obj), styleObj);
-      });
-    },
-
-    beSelected: (selector: string, value: string) => {
-      this.helper.get
-        .elementByTestId(selector)
-        .find(`option[value="${value}"]`)
-        .should("be.selected");
-    },
-  };
 }

cypress/e2e/modal-driver.ts

@@ -1,11 +1,13 @@
 import { v1 as uuid } from "uuid";
-import CypressWrapperDriver from "./cypress-wrapper-driver";
+import MaputnikCypressHelper from "./cypress-wrapper-driver";
 
 export default class ModalDriver {
-  private helper = new CypressWrapperDriver();
+  private helper = new MaputnikCypressHelper();
 
   public when = {
     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;

cypress/e2e/modals.cy.ts

@@ -20,9 +20,7 @@ describe("modals", () => {
     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")).shouldHaveLocalStorageStyle(
+      then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
-        get.maputnikStyleFromLocalStorageObj()
-      );
     });
 
     describe("when click open url", () => {
@@ -34,9 +32,7 @@ describe("modals", () => {
         when.wait(200);
       });
       it("load from url", () => {
-        then(
+        then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
-          get.responseBody("example-style.json")
-        ).shouldHaveLocalStorageStyle(get.maputnikStyleFromLocalStorageObj());
       });
     });
   });
@@ -103,9 +99,7 @@ describe("modals", () => {
       });
 
       it("show name specifications", () => {
-        then(
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          get.maputnikStyleFromLocalStorage()
-        ).shouldIncludeLocalStorageStyle({
           name: "foobar",
         });
       });
@@ -118,9 +112,7 @@ describe("modals", () => {
         when.wait(200);
       });
       it("should update owner in local storage", () => {
-        then(
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          get.maputnikStyleFromLocalStorage()
-        ).shouldIncludeLocalStorageStyle({
           owner: "foobar",
         });
       });
@@ -129,7 +121,7 @@ describe("modals", () => {
     it("sprite url", () => {
       when.setValue("modal:settings.sprite", "http://example.com");
       when.click("modal:settings.name");
-      then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
         sprite: "http://example.com",
       });
     });
@@ -137,7 +129,7 @@ describe("modals", () => {
       let glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
       when.setValue("modal:settings.glyphs", glyphsUrl);
       when.click("modal:settings.name");
-      then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
         glyphs: glyphsUrl,
       });
     });
@@ -149,7 +141,9 @@ describe("modals", () => {
         apiKey
       );
       when.click("modal:settings.name");
-      then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
+      then(
+        get.styleFromLocalStorage().pipe((style) => style.metadata)
+      ).shouldInclude({
         "maputnik:openmaptiles_access_token": apiKey,
       });
     });
@@ -161,9 +155,9 @@ describe("modals", () => {
         apiKey
       );
       when.click("modal:settings.name");
-      then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
+      then(
-        metadata: { "maputnik:thunderforest_access_token": apiKey },
+        get.styleFromLocalStorage().pipe((style) => style.metadata)
-      });
+      ).shouldInclude({ "maputnik:thunderforest_access_token": apiKey });
     });
 
     it("style renderer", () => {
@@ -174,7 +168,7 @@ describe("modals", () => {
       );
 
       when.click("modal:settings.name");
-      then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
         metadata: { "maputnik:renderer": "ol" },
       });
     });