fix failing tests

cypress/e2e/layers.cy.ts

@@ -1,6 +1,5 @@
-import { then } from "@shellygo/cypress-test-utils/assertable";
 import { v1 as uuid } from "uuid";
-import MaputnikDriver from "./maputnik-driver";
+import { MaputnikDriver, then } from "./maputnik-driver";
 
 describe("layers", () => {
   let { beforeAndAfter, get, when, should } = new MaputnikDriver();
@@ -19,14 +18,16 @@ describe("layers", () => {
     });
 
     it("should update layers in local storage", () => {
-      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [
-          {
-            id: id,
-            type: "background",
-          },
-        ],
-      });
+      then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStrorageStyle(
+        {
+          layers: [
+            {
+              id: id,
+              type: "background",
+            },
+          ],
+        }
+      );
     });
 
     describe("when clicking delete", () => {
@@ -34,7 +35,9 @@ describe("layers", () => {
         when.click("layer-list-item:" + id + ":delete");
       });
       it("should empty layers in local storage", () => {
-        then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+        then(
+          get.maputnikStyleFromLocalStorage()
+        ).shouldIncludeLocalStrorageStyle({
           layers: [],
         });
       });
@@ -45,7 +48,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()
+        ).shouldIncludeLocalStrorageStyle({
           layers: [
             {
               id: id + "-copy",
@@ -66,7 +71,9 @@ describe("layers", () => {
       });
 
       it("should update visibility to none in local storage", () => {
-        then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+        then(
+          get.maputnikStyleFromLocalStorage()
+        ).shouldIncludeLocalStrorageStyle({
           layers: [
             {
               id: id,
@@ -82,11 +89,12 @@ describe("layers", () => {
       describe("when clicking show", () => {
         beforeEach(() => {
           when.click("layer-list-item:" + id + ":toggle-visibility");
-          when.wait(200);
         });
 
         it("should update visibility to visible in local storage", () => {
-          then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+          then(
+            get.maputnikStyleFromLocalStorage()
+          ).shouldIncludeLocalStrorageStyle({
             layers: [
               {
                 id: id,
@@ -174,7 +182,9 @@ describe("layers", () => {
           });
 
           it("should update min-zoom in local storage", () => {
-            then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+            then(
+              get.maputnikStyleFromLocalStorage()
+            ).shouldIncludeLocalStrorageStyle({
               layers: [
                 {
                   id: "background:" + bgId,
@@ -188,7 +198,9 @@ 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(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+            then(
+              get.maputnikStyleFromLocalStorage()
+            ).shouldIncludeLocalStrorageStyle({
               layers: [
                 {
                   id: "background:" + bgId,
@@ -208,11 +220,10 @@ describe("layers", () => {
             when.click("layer-list-item:background:" + bgId);
             when.setValue("max-zoom.input-text", "1");
             when.click("layer-editor.layer-id");
-            when.wait(200);
           });
 
           it("should update style in local storage", () => {
-            then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+            then(cy.window()).shouldIncludeLocalStrorageStyle({
               layers: [
                 {
                   id: "background:" + bgId,
@@ -233,11 +244,12 @@ describe("layers", () => {
             when.click("layer-list-item:background:" + bgId);
             when.setValue("layer-comment.input", comment);
             when.click("layer-editor.layer-id");
-            when.wait(200);
           });
 
           it("should update style in local stroage", () => {
-            then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+            then(
+              get.maputnikStyleFromLocalStorage()
+            ).shouldIncludeLocalStrorageStyle({
               layers: [
                 {
                   id: "background:" + bgId,
@@ -254,20 +266,19 @@ describe("layers", () => {
             beforeEach(() => {
               when.type("layer-comment.input", "{backspace}{backspace}");
               when.click("min-zoom.input-text");
-              when.wait(400);
             });
 
             it("should update style in local storage", () => {
-              then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude(
-                {
-                  layers: [
-                    {
-                      id: "background:" + bgId,
-                      type: "background",
-                    },
-                  ],
-                }
-              );
+              then(
+                get.maputnikStyleFromLocalStorage()
+              ).shouldIncludeLocalStrorageStyle({
+                layers: [
+                  {
+                    id: "background:" + bgId,
+                    type: "background",
+                  },
+                ],
+              });
             });
           });
         });
@@ -278,11 +289,12 @@ describe("layers", () => {
             bgId = createBackground();
             when.click("layer-list-item:background:" + bgId);
             when.click("spec-field:background-color");
-            when.wait(200);
           });
 
           it("should update style in local storage", () => {
-            then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
+            then(
+              get.maputnikStyleFromLocalStorage()
+            ).shouldIncludeLocalStrorageStyle({
               layers: [
                 {
                   id: "background:" + bgId,

cypress/e2e/maputnik-driver.ts

@@ -1,9 +1,33 @@
+import {
+  Assertable,
+  then as baseThen,
+} 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;
+  };
+  shouldIncludeLocalStrorageStyle = (styleObj: Object) =>
+    baseThen(
+      cy.window().then((win) => this.getStyleFromWindow(win))
+    ).shouldDeepNestedInclude(styleObj);
+
+  shouldHaveLocalStorageStyle = (styleObj: Object) =>
+    baseThen(
+      cy.window().then((win) => this.getStyleFromWindow(win))
+    ).shouldDeepEqual(styleObj);
+}
+
+export const then = (chainable: Cypress.Chainable<any>) =>
+  new MaputnikAssertable(chainable);
+
+export class MaputnikDriver {
   private helper = new CypressWrapperDriver();
   private modalDriver = new ModalDriver();
 
@@ -87,18 +111,18 @@ export default class MaputnikDriver {
     ) => {
       let url = "?debug";
       switch (styleProperties) {
-      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;
+        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`;
@@ -111,8 +135,7 @@ export default class MaputnikDriver {
       this.helper.get.elementByTestId("toolbar:link").should("be.visible");
     },
 
-    typeKeys: (keys: string) =>
-      this.helper.get.element("body").type(keys),
+    typeKeys: (keys: string) => this.helper.get.element("body").type(keys),
 
     clickZoomIn: () => {
       this.helper.get.element(".maplibregl-ctrl-zoom-in").click();
@@ -191,16 +214,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)