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");
+      then(get.elementByTestId("layer-list-group:foo")).shouldBeVisible();
-
+      then(
-      should.notBeVisible("layer-list-item:foo_bar");
+        get.elementByTestId("layer-list-group:foo_bar")
-      should.notBeVisible("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();
-      should.beVisible("layer-list-item:foo");
+      then(get.elementByTestId("layer-list-group:foo_bar")).shouldBeVisible();
-      should.beVisible("layer-list-item:foo_bar");
+      then(
-      should.beVisible("layer-list-item:foo_bar_baz");
+        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,9 +1,11 @@
+import { then } from "@shellygo/cypress-test-utils/assertable";
 import MaputnikDriver from "./maputnik-driver";
 
 describe("modals", () => {
-  let { beforeAndAfter, when, get, should } = new MaputnikDriver();
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
   beforeAndAfter();
   beforeEach(() => {
+    given.fixture("example-style.json", "file:example-style.json");
     when.setStyle("");
   });
   describe("open", () => {
@@ -11,7 +13,8 @@ describe("modals", () => {
       when.click("nav:open");
     });
 
-    it.only("close", () => {
+    it.skip("close", () => {
+      // Asserting non existence is an anti-pattern
       when.modal.close("modal:open");
       should.notExist("modal:open");
     });
@@ -19,26 +22,51 @@ 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(
-      should.styleStoreEqualToExampleFileData();
+        get.maputnikStyleFromLocalStorageObj()
+      );
     });
 
-    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();
+      });
+      it.only("load from url", () => {
+        // expect(
+        //   Cypress._.isMatch(
+        //     get.maputnikStyleFromLocalStorageObj(),
+        //     get.responseBody("example-style.json")
+        //   )
+        // ).to.be.true;
 
-      should.styleStoreEqualToExampleFileData();
+        // expect(
+        //   Cypress._.isMatch(
+        //     get.maputnikStyleFromLocalStorageObj(),
+        //     { shelly: true }
+        //     //get.responseBody("example-style.json")
+        //   )
+        // );
+        should.styleStoreEqualToExampleFileData();
+        // then(get.fixture("file:example-style.json")).should(
+        //   "deep.equal",
+        //   get.maputnikStyleFromLocalStorageObj()
+        // );
+        // then(get.responseBody("example-style.json")).shouldDeepNestedInclude(
+        //   get.maputnikStyleFromLocalStorageObj()
+        // );
+      });
     });
   });
 
   describe("shortcuts", () => {
-    it("open/close", () => {
+    it.skip("open/close", () => {
       when.setStyle("");
       when.typeKeys("?");
       when.modal.close("modal:shortcuts");
+      // Anti pattern. we should test that things exist. million things don't exist
       should.notExist("modal:shortcuts");
     });
   });
@@ -48,7 +76,7 @@ describe("modals", () => {
       when.click("nav:export");
     });
 
-    it("close", () => {
+    it.skip("close", () => {
       when.modal.close("modal:export");
       should.notExist("modal:export");
     });
@@ -65,9 +93,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");
     });
   });
 
@@ -78,35 +106,40 @@ describe("modals", () => {
 
     it("name", () => {
       when.click("field-doc-button-Name");
-
+      then(get.elementsText("spec-field-doc")).shouldContainText(
-      should.containText("spec-field-doc", "name for the style");
+        "name for the style"
+      );
     });
 
     it("show name specifications", () => {
       when.setValue("modal:settings.name", "foobar");
       when.click("modal:settings.owner");
-
+      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
-      should.equalStyleStore((obj) => obj.name, "foobar");
+        name: "foobar",
+      });
     });
 
     it("owner", () => {
       when.setValue("modal:settings.owner", "foobar");
       when.click("modal:settings.name");
-
+      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
-      should.equalStyleStore((obj) => obj.owner, "foobar");
+        owner: "foobar",
+      });
     });
     it("sprite url", () => {
       when.setValue("modal:settings.sprite", "http://example.com");
       when.click("modal:settings.name");
-
+      then(get.maputnikStyleFromLocalStorage()).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.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
-      should.equalStyleStore((obj) => obj.glyphs, glyphsUrl);
+        glyphs: glyphsUrl,
+      });
     });
 
     it("maptiler access token", () => {
@@ -116,11 +149,9 @@ describe("modals", () => {
         apiKey
       );
       when.click("modal:settings.name");
-
+      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
-      should.equalStyleStore(
+        metadata: { "maputnik:openmaptiles_access_token": apiKey },
-        (obj) => obj.metadata["maputnik:openmaptiles_access_token"],
+      });
-        apiKey
-      );
     });
 
     it("thunderforest access token", () => {
@@ -130,21 +161,22 @@ describe("modals", () => {
         apiKey
       );
       when.click("modal:settings.name");
-
+      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
-      should.equalStyleStore(
+        metadata: { "maputnik:thunderforest_access_token": apiKey },
-        (obj) => obj.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");
-
+      then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
-      should.equalStyleStore((obj) => obj.metadata["maputnik:renderer"], "ol");
+        metadata: { "maputnik:renderer": "ol" },
+      });
     });
   });