update test utils version

cypress/e2e/accessibility.cy.ts

@@ -1,8 +1,7 @@
-import { then } from "@shellygo/cypress-test-utils/assertable";
+import { MaputnikDriver } from "./maputnik-driver";
-import MaputnikDriver from "./maputnik-driver";
 
 describe("accessibility", () => {
-  let { beforeAndAfter, get, when, should } = new MaputnikDriver();
+  let { beforeAndAfter, get, when, should, then } = new MaputnikDriver();
   beforeAndAfter();
 
   describe("skip links", () => {

cypress/e2e/history.cy.ts

@@ -1,4 +1,4 @@
-import MaputnikDriver from "./maputnik-driver";
+import { MaputnikDriver } from "./maputnik-driver";
 
 describe("history", () => {
   let { beforeAndAfter, when, get, should } = new MaputnikDriver();

cypress/e2e/keyboard.cy.ts

@@ -1,8 +1,7 @@
-import { then } from "@shellygo/cypress-test-utils/assertable";
+import { MaputnikDriver } from "./maputnik-driver";
-import MaputnikDriver from "./maputnik-driver";
 
 describe("keyboard", () => {
-  let { beforeAndAfter, given, when, get } = new MaputnikDriver();
+  let { beforeAndAfter, given, when, get, then } = new MaputnikDriver();
   beforeAndAfter();
   describe("shortcuts", () => {
     beforeEach(() => {

cypress/e2e/layers.cy.ts

@@ -1,9 +1,8 @@
-import { then } from "@shellygo/cypress-test-utils/assertable";
 import { v1 as uuid } from "uuid";
-import MaputnikDriver from "./maputnik-driver";
+import { MaputnikDriver } from "./maputnik-driver";
 
 describe("layers", () => {
-  let { beforeAndAfter, get, when, should } = new MaputnikDriver();
+  let { beforeAndAfter, get, when, should, then } = new MaputnikDriver();
   beforeAndAfter();
   beforeEach(() => {
     when.setStyle("both");
@@ -19,7 +18,7 @@ describe("layers", () => {
     });
 
     it("should update layers in local storage", () => {
-      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+      then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
         layers: [
           {
             id: id,
@@ -34,7 +33,9 @@ describe("layers", () => {
         when.click("layer-list-item:" + id + ":delete");
       });
       it("should empty layers in local storage", () => {
-        then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+        then(
+          get.maputnikStyleFromLocalStorage()
+        ).shouldIncludeLocalStorageStyle({
           layers: [],
         });
       });
@@ -45,7 +46,9 @@ describe("layers", () => {
         when.click("layer-list-item:" + id + ":copy");
       });
       it("should add copy layer in local storage", () => {
-        then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+        then(
+          get.maputnikStyleFromLocalStorage()
+        ).shouldIncludeLocalStorageStyle({
           layers: [
             {
               id: id + "-copy",
@@ -66,7 +69,9 @@ describe("layers", () => {
       });
 
       it("should update visibility to none in local storage", () => {
-        then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+        then(
+          get.maputnikStyleFromLocalStorage()
+        ).shouldIncludeLocalStorageStyle({
           layers: [
             {
               id: id,
@@ -85,7 +90,9 @@ describe("layers", () => {
         });
 
         it("should update visibility to visible in local storage", () => {
-          then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+          then(
+            get.maputnikStyleFromLocalStorage()
+          ).shouldIncludeLocalStorageStyle({
             layers: [
               {
                 id: id,
@@ -162,113 +169,138 @@ describe("layers", () => {
           );
         });
 
-        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.maputnikStyleFromLocalStorage()
+            ).shouldIncludeLocalStorageStyle({
+              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(
-                id: "background:" + bgId,
+              get.maputnikStyleFromLocalStorage()
-                type: "background",
+            ).shouldIncludeLocalStorageStyle({
-                minzoom: 1,
+              layers: [
-              },
+                {
-            ]
+                  id: "background:" + bgId,
-          );
+                  type: "background",
-
+                  minzoom: 1,
-          // AND RESET!
+                },
-          when.type("min-zoom.input-text", "{backspace}");
+              ],
-          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(cy.window()).shouldIncludeLocalStorageStyle({
-          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(
-          should.equalStyleStore(
+              get.maputnikStyleFromLocalStorage()
-            (a: any) => a.layers,
+            ).shouldIncludeLocalStorageStyle({
-            [
+              layers: [
-              {
+                {
-                id: "background:" + bgId,
+                  id: "background:" + bgId,
-                type: "background",
+                  type: "background",
-                metadata: {
+                  metadata: {
-                  "maputnik:comment": comment,
+                    "maputnik:comment": comment,
+                  },
                 },
-              },
+              ],
-            ]
+            });
-          );
+          });
 
-          // Unset it again.
+          describe("when unsetting", () => {
-          when.type("layer-comment.input", "{backspace}{backspace}");
+            beforeEach(() => {
-          when.click("min-zoom.input-text");
+              when.clear("layer-comment.input");
+              when.click("min-zoom.input-text");
+            });
 
-          should.equalStyleStore(
+            it("should update style in local storage", () => {
-            (a: any) => a.layers,
+              then(
-            [
+                get.maputnikStyleFromLocalStorage()
-              {
+              ).shouldIncludeLocalStorageStyle({
-                id: "background:" + bgId,
+                layers: [
-                type: "background",
+                  {
-              },
+                    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", 0);
+          });
 
-          when.click("layer-list-item:background:" + bgId);
+          it("should update style in local storage", () => {
-
+            then(
-          when.click("spec-field:background-color");
+              get.maputnikStyleFromLocalStorage()
-
+            ).shouldIncludeLocalStorageStyle({
-          should.equalStyleStore(
+              layers: [
-            (a: any) => a.layers,
+                {
-            [
+                  id: "background:" + bgId,
-              {
+                  type: "background",
-                id: "background:" + bgId,
+                },
-                type: "background",
+              ],
-              },
+            });
-            ]
+          });
-          );
         });
       });
 
@@ -459,18 +491,16 @@ describe("layers", () => {
         type: "background",
       });
 
-      then(get.elementByTestId("layer-list-group:foo")).shouldBeVisible();
+      then(get.elementByTestId("layer-list-item:foo")).shouldBeVisible();
+      then(get.elementByTestId("layer-list-item:foo_bar")).shouldNotBeVisible();
       then(
-        get.elementByTestId("layer-list-group:foo_bar")
+        get.elementByTestId("layer-list-item:foo_bar_baz")
-      ).shouldNotBeVisible();
-      then(
-        get.elementByTestId("layer-list-group:foo_bar_baz")
       ).shouldNotBeVisible();
       when.click("layer-list-group:foo-0");
-      then(get.elementByTestId("layer-list-group:foo")).shouldBeVisible();
+      then(get.elementByTestId("layer-list-item:foo")).shouldBeVisible();
-      then(get.elementByTestId("layer-list-group:foo_bar")).shouldBeVisible();
+      then(get.elementByTestId("layer-list-item:foo_bar")).shouldBeVisible();
       then(
-        get.elementByTestId("layer-list-group:foo_bar_baz")
+        get.elementByTestId("layer-list-item:foo_bar_baz")
       ).shouldBeVisible();
     });
   });

cypress/e2e/map.cy.ts

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

cypress/e2e/maputnik-driver.ts

@@ -1,9 +1,27 @@
+import { Assertable, then } from "@shellygo/cypress-test-utils/assertable";
 import CypressWrapperDriver from "./cypress-wrapper-driver";
 import ModalDriver from "./modal-driver";
-
 const baseUrl = "http://localhost:8888/";
 
-export default class MaputnikDriver {
+export class MaputnikAssertable<T> extends Assertable<T> {
+  private getStyleFromWindow = (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;
+  };
+  shouldIncludeLocalStorageStyle = (styleObj: Object) =>
+    then(
+      cy.window().then((win) => this.getStyleFromWindow(win))
+    ).shouldDeepNestedInclude(styleObj);
+
+  shouldHaveLocalStorageStyle = (styleObj: Object) =>
+    then(
+      cy.window().then((win) => this.getStyleFromWindow(win))
+    ).shouldDeepEqual(styleObj);
+}
+
+export class MaputnikDriver {
   private helper = new CypressWrapperDriver();
   private modalDriver = new ModalDriver();
 
@@ -14,6 +32,9 @@ export default class MaputnikDriver {
     });
   };
 
+  public then = (chainable: Cypress.Chainable<any>) =>
+    new MaputnikAssertable(chainable);
+
   public given = {
     ...this.helper.given,
     setupMockBackedResponses: () => {
@@ -111,8 +132,7 @@ export default class MaputnikDriver {
       this.helper.get.elementByTestId("toolbar:link").should("be.visible");
     },
 
-    typeKeys: (keys: string) =>
+    typeKeys: (keys: string) => this.helper.get.element("body").type(keys),
-      this.helper.get.element("body").type(keys),
 
     clickZoomIn: () => {
       this.helper.get.element(".maplibregl-ctrl-zoom-in").click();
@@ -191,16 +211,6 @@ export default class MaputnikDriver {
       });
     },
 
-    styleStoreEqualToExampleFileData: () => {
-      cy.window().then((_win: any) => {
-        //const obj = this.get.styleFromWindow(win);
-        const obj = this.get.maputnikStyleFromLocalStorageObj();
-        this.helper.given
-          .fixture("example-style.json", "file:example-style.json")
-          .should("deep.equal", obj);
-      });
-    },
-
     beSelected: (selector: string, value: string) => {
       this.helper.get
         .elementByTestId(selector)

cypress/e2e/modals.cy.ts

@@ -1,8 +1,7 @@
-import { then } from "@shellygo/cypress-test-utils/assertable";
+import { MaputnikDriver } from "./maputnik-driver";
-import MaputnikDriver from "./maputnik-driver";
 
 describe("modals", () => {
-  let { beforeAndAfter, when, get } = new MaputnikDriver();
+  let { beforeAndAfter, when, get, then } = new MaputnikDriver();
   beforeAndAfter();
 
   beforeEach(() => {
@@ -21,7 +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")).shouldDeepEqual(
+      then(get.responseBody("example-style.json")).shouldHaveLocalStorageStyle(
         get.maputnikStyleFromLocalStorageObj()
       );
     });
@@ -35,9 +34,9 @@ describe("modals", () => {
         when.wait(200);
       });
       it("load from url", () => {
-        then(get.responseBody("example-style.json")).shouldDeepEqual(
+        then(
-          get.maputnikStyleFromLocalStorageObj()
+          get.responseBody("example-style.json")
-        );
+        ).shouldHaveLocalStorageStyle(get.maputnikStyleFromLocalStorageObj());
       });
     });
   });
@@ -104,7 +103,9 @@ describe("modals", () => {
       });
 
       it("show name specifications", () => {
-        then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+        then(
+          get.maputnikStyleFromLocalStorage()
+        ).shouldIncludeLocalStorageStyle({
           name: "foobar",
         });
       });
@@ -117,7 +118,9 @@ describe("modals", () => {
         when.wait(200);
       });
       it("should update owner in local storage", () => {
-        then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+        then(
+          get.maputnikStyleFromLocalStorage()
+        ).shouldIncludeLocalStorageStyle({
           owner: "foobar",
         });
       });
@@ -126,7 +129,7 @@ describe("modals", () => {
     it("sprite url", () => {
       when.setValue("modal:settings.sprite", "http://example.com");
       when.click("modal:settings.name");
-      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+      then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
         sprite: "http://example.com",
       });
     });
@@ -134,7 +137,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()).shouldDeepNestedInclude({
+      then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
         glyphs: glyphsUrl,
       });
     });
@@ -146,8 +149,8 @@ describe("modals", () => {
         apiKey
       );
       when.click("modal:settings.name");
-      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+      then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
-        metadata: { "maputnik:openmaptiles_access_token": apiKey },
+        "maputnik:openmaptiles_access_token": apiKey,
       });
     });
 
@@ -158,7 +161,7 @@ describe("modals", () => {
         apiKey
       );
       when.click("modal:settings.name");
-      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+      then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
         metadata: { "maputnik:thunderforest_access_token": apiKey },
       });
     });
@@ -171,7 +174,7 @@ describe("modals", () => {
       );
 
       when.click("modal:settings.name");
-      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+      then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
         metadata: { "maputnik:renderer": "ol" },
       });
     });

package-lock.json

@@ -61,7 +61,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.15",
+        "@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",
@@ -3613,9 +3613,9 @@
       ]
     },
     "node_modules/@shellygo/cypress-test-utils": {
-      "version": "2.0.15",
+      "version": "2.0.17",
-      "resolved": "https://registry.npmjs.org/@shellygo/cypress-test-utils/-/cypress-test-utils-2.0.15.tgz",
+      "resolved": "https://registry.npmjs.org/@shellygo/cypress-test-utils/-/cypress-test-utils-2.0.17.tgz",
-      "integrity": "sha512-sm/ezwsI/+H8ohoa7R0+Is5GGZ3IRyg55tPMk30Je4tswlxVpJd7IItj5RymZFhbpX3IRR320Rkw++XyX7xqiQ==",
+      "integrity": "sha512-eI7TL2D3wbWgjBxhMfLBOMV5XpvVcLN8e2hCKQSzvNp/Eis7ZmcGExsNMEFhY8BYG59A2TGX2daWJfv5bJdNhg==",
       "dev": true,
       "dependencies": {
         "@cypress/mount-utils": "^4.0.0",

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.15",
+    "@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",