wip

cypress/e2e/accessibility.cy.ts

@@ -12,9 +12,9 @@ describe("accessibility", () => {
 
     it("skip link to layer list", () => {
       const selector = "root:skip:layer-list";
-      should.exist(selector);
+      then(get.elementByTestId(selector)).shouldExist();
       when.tab();
-      should.beFocused(selector);
+      then(get.skipTargetLayerList()).shouldBeFocused();
       when.click(selector);
       then(get.skipTargetLayerList()).shouldBeFocused();
     });
@@ -22,7 +22,7 @@ describe("accessibility", () => {
     // This fails for some reason only in Chrome, but passes in firefox. Adding a skip here to allow merge and later on we'll decide if we want to fix this or not.
     it.skip("skip link to layer editor", () => {
       const selector = "root:skip:layer-editor";
-      should.exist(selector);
+      then(get.elementByTestId(selector)).shouldExist();
       when.tab().tab();
       should.beFocused(selector);
       when.click(selector);
@@ -31,7 +31,7 @@ describe("accessibility", () => {
 
     it("skip link to map view", () => {
       const selector = "root:skip:map-view";
-      should.exist(selector);
+      then(get.elementByTestId(selector)).shouldExist();
       when.tab().tab().tab();
       should.beFocused(selector);
       when.click(selector);

cypress/e2e/layers.cy.ts

@@ -182,7 +182,7 @@ describe("layers", () => {
           );
 
           // AND RESET!
-          when.type("{backspace}", "min-zoom.input-text");
+          when.type("min-zoom.input-text", "{backspace}");
           when.click("max-zoom.input-text");
 
           should.equalStyleStore(
@@ -239,7 +239,7 @@ describe("layers", () => {
           );
 
           // Unset it again.
-          when.type("{backspace}{backspace}", "layer-comment.input");
+          when.type("layer-comment.input", "{backspace}{backspace}");
           when.click("min-zoom.input-text");
 
           should.equalStyleStore(
@@ -459,16 +459,19 @@ describe("layers", () => {
         type: "background",
       });
 
-      should.beVisible("layer-list-item:foo");
-
-      should.notBeVisible("layer-list-item:foo_bar");
-      should.notBeVisible("layer-list-item:foo_bar_baz");
-
+      then(get.elementByTestId("layer-list-group:foo")).shouldBeVisible();
+      then(
+        get.elementByTestId("layer-list-group:foo_bar")
+      ).shouldNotBeVisible();
+      then(
+        get.elementByTestId("layer-list-group:foo_bar_baz")
+      ).shouldNotBeVisible();
       when.click("layer-list-group:foo-0");
-
-      should.beVisible("layer-list-item:foo");
-      should.beVisible("layer-list-item:foo_bar");
-      should.beVisible("layer-list-item:foo_bar_baz");
+      then(get.elementByTestId("layer-list-group:foo")).shouldBeVisible();
+      then(get.elementByTestId("layer-list-group:foo_bar")).shouldBeVisible();
+      then(
+        get.elementByTestId("layer-list-group:foo_bar_baz")
+      ).shouldBeVisible();
     });
   });
 });

cypress/e2e/maputnik-driver.ts

@@ -15,6 +15,7 @@ export default class MaputnikDriver {
   };
 
   public given = {
+    ...this.helper.given,
     setupMockBackedResponses: () => {
       this.helper.given.interceptAndMockResponse({
         method: "GET",
@@ -26,7 +27,7 @@ export default class MaputnikDriver {
       });
       this.helper.given.interceptAndMockResponse({
         method: "GET",
-        url: baseUrl + "/example-layer-style.json",
+        url: baseUrl + "example-layer-style.json",
         response: {
           fixture: "example-layer-style.json",
         },
@@ -72,7 +73,7 @@ export default class MaputnikDriver {
       this.helper.when.within(fn, selector);
     },
     tab: () => this.helper.get.element("body").tab(),
-    waitForExampleFileRequset: () => {
+    waitForExampleFileResponse: () => {
       this.helper.when.waitForResponse("example-style.json");
     },
     chooseExampleFile: () => {
@@ -106,6 +107,7 @@ export default class MaputnikDriver {
       if (styleProperties) {
         this.helper.when.confirmAlert();
       }
+      // when methods should not include assertions
       this.helper.get.elementByTestId("toolbar:link").should("be.visible");
     },
 
@@ -150,11 +152,15 @@ export default class MaputnikDriver {
       return obj;
     },
 
-    maputnikStyleFromLocalStorage: () => {
+    maputnikStyleFromLocalStorageObj: () => {
       const styleId = localStorage.getItem("maputnik:latest_style");
       const styleItem = localStorage.getItem(`maputnik:style:${styleId}`);
       const obj = JSON.parse(styleItem || "");
-      return cy.wrap(obj);
+      console.log(obj);
+      return obj;
+    },
+    maputnikStyleFromLocalStorage: () => {
+      return cy.wrap(this.get.maputnikStyleFromLocalStorageObj());
     },
     exampleFileUrl: () => {
       return baseUrl + "example-style.json";
@@ -178,14 +184,6 @@ export default class MaputnikDriver {
       this.helper.get.elementByTestId(selector).should("not.have.focus");
     },
 
-    beVisible: (selector: string) => {
-      this.helper.get.elementByTestId(selector).should("be.visible");
-    },
-
-    notBeVisible: (selector: string) => {
-      this.helper.get.elementByTestId(selector).should("not.be.visible");
-    },
-
     equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
       cy.window().then((win: any) => {
         const obj = this.get.styleFromWindow(win);
@@ -196,23 +194,18 @@ export default class MaputnikDriver {
     styleStoreEqualToExampleFileData: () => {
       cy.window().then((win: any) => {
         const obj = this.get.styleFromWindow(win);
+        const bobj = this.get.maputnikStyleFromLocalStorageObj();
         this.helper.given
           .fixture("example-style.json", "file:example-style.json")
           .should("deep.equal", obj);
       });
     },
 
-    exist: (selector: string) => {
-      this.helper.get.elementByTestId(selector).should("exist");
-    },
     beSelected: (selector: string, value: string) => {
       this.helper.get
         .elementByTestId(selector)
         .find(`option[value="${value}"]`)
         .should("be.selected");
     },
-    containText: (selector: string, text: string) => {
-      this.helper.get.elementByTestId(selector).should("contain.text", text);
-    },
   };
 }

cypress/e2e/modals.cy.ts

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

package.json

@@ -91,7 +91,7 @@
     "@cypress/code-coverage": "^3.12.15",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@rollup/plugin-replace": "^5.0.5",
-    "@shellygo/cypress-test-utils": "^2.0.14",
+    "@shellygo/cypress-test-utils": "^2.0.15",
     "@storybook/addon-a11y": "^7.6.5",
     "@storybook/addon-actions": "^7.6.5",
     "@storybook/addon-links": "^7.6.5",