Refactor driver for E2E (#841)

Added shellygo package.
Refactor driver and e2e tests.
Added data-wd attributes to missing places.

---------

Co-authored-by: shelly_goldblit <shelly_goldblit@dell.com>

cypress/e2e/accessibility.cy.ts

@@ -1,41 +1,39 @@
-import driver from "./driver";
+import MaputnikDriver from "./driver";
 
 describe("accessibility", () => {
-    // skipped due to the following issue with cypress: https://github.com/cypress-io/cypress/issues/299
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
-  describe.skip("skip links", () => {
+  beforeAndAfter();
+
+  describe("skip links", () => {
     beforeEach(() => {
-        driver.beforeEach();
+      when.setStyle("layer");
-        driver.setStyle("layer");
     });
 
     it("skip link to layer list", () => {
-      const selector = driver.getDataAttribute("root:skip:layer-list");
+      const selector = "root:skip:layer-list";
-      driver.isExists(selector);
+      should.isExists(selector);
-      driver.typeKeys('{tab}');
+      when.tab();
-      driver.isFocused(selector);
+      should.beFocused(selector);
-      driver.click(selector);
+      when.click(selector);
-  
+      should.beFocused("skip-target-layer-list");
-      driver.isFocused("#skip-target-layer-list");
     });
 
     it("skip link to layer editor", () => {
-      const selector = driver.getDataAttribute("root:skip:layer-editor");
+      const selector = "root:skip:layer-editor";
-      driver.isExists(selector);
+      should.isExists(selector);
-      driver.typeKeys('{tab}{tab}');
+      when.tab().tab();
-      driver.isFocused(selector);
+      should.beFocused(selector);
-      driver.click(selector);
+      when.click(selector);
-  
+      should.beFocused("skip-target-layer-editor");
-      driver.isFocused("#skip-target-layer-editor");
     });
 
     it("skip link to map view", () => {
-      const selector = driver.getDataAttribute("root:skip:map-view");
+      const selector = "root:skip:map-view";
-      driver.isExists(selector);
+      should.isExists(selector);
-      driver.typeKeys('{tab}{tab}{tab}');
+      when.tab().tab().tab();
-      driver.isFocused(selector);
+      should.beFocused(selector);
-      driver.click(selector);
+      when.click(selector);
-  
+      should.canvasBeFocused();
-      driver.isFocused(".maplibregl-canvas");
+    });
   });
 });
-})

cypress/e2e/driver.ts

@@ -1,26 +1,54 @@
+import { CypressHelper } from "@shellygo/cypress-test-utils";
 import { v1 as uuid } from "uuid";
+export default class MaputnikDriver {
+  private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
+  public beforeAndAfter = () => {
+    beforeEach(() => {
+      this.given.setupInterception();
+      this.when.setStyle("both");
+    });
+  };
 
-export default {
+  public given = {
-    isMac() {
+    setupInterception: () => {
-        return Cypress.platform === "darwin";
+      cy.intercept("GET", "http://localhost:8888/example-style.json", {
+        fixture: "example-style.json",
+      }).as("example-style.json");
+      cy.intercept("GET", "http://localhost:8888/example-layer-style.json", {
+        fixture: "example-layer-style.json",
+      });
+      cy.intercept("GET", "http://localhost:8888/geojson-style.json", {
+        fixture: "geojson-style.json",
+      });
+      cy.intercept("GET", "http://localhost:8888/raster-style.json", {
+        fixture: "raster-style.json",
+      });
+      cy.intercept("GET", "http://localhost:8888/geojson-raster-style.json", {
+        fixture: "geojson-raster-style.json",
+      });
+      cy.intercept({ method: "GET", url: "*example.local/*" }, []);
+      cy.intercept({ method: "GET", url: "*example.com/*" }, []);
     },
+  };
 
-    beforeEach() {
+  public when = {
-      this.setupInterception();
+    within: (selector: string, fn: () => void) => {
-      this.setStyle('both');
+      this.helper.when.within(fn, selector);
     },
-
+    tab: () => cy.get("body").tab(),
-    setupInterception() {
+    waitForExampleFileRequset: () => {
-      cy.intercept('GET', 'http://localhost:8888/example-style.json', { fixture: 'example-style.json' }).as('example-style.json');
+      this.helper.when.waitForResponse("example-style.json");
-      cy.intercept('GET', 'http://localhost:8888/example-layer-style.json', { fixture: 'example-layer-style.json' });
-      cy.intercept('GET', 'http://localhost:8888/geojson-style.json', { fixture: 'geojson-style.json' });
-      cy.intercept('GET', 'http://localhost:8888/raster-style.json', { fixture: 'raster-style.json' });
-      cy.intercept('GET', 'http://localhost:8888/geojson-raster-style.json', { fixture: 'geojson-raster-style.json' });
-      cy.intercept({method: 'GET', url: '*example.local/*' }, []);
-      cy.intercept({method: 'GET', url: '*example.com/*' }, []);
     },
-
+    chooseExampleFile: () => {
-    setStyle(styleProperties: 'geojson' | 'raster' | 'both' | 'layer' | '', zoom? : number) {
+      cy.get("input[type='file']").selectFile(
+        "cypress/fixtures/example-style.json",
+        { force: true }
+      );
+    },
+    setStyle: (
+      styleProperties: "geojson" | "raster" | "both" | "layer" | "",
+      zoom?: number
+    ) => {
       let url = "?debug";
       switch (styleProperties) {
         case "geojson":
@@ -41,130 +69,130 @@ export default {
       }
       cy.visit("http://localhost:8888/" + url);
       if (styleProperties) {
-            cy.on('window:confirm', () => true)
+        cy.on("window:confirm", () => true);
       }
       cy.get(".maputnik-toolbar-link").should("be.visible");
     },
-
+    fillLayersModal: (opts: any) => {
-      getDataAttribute(key: string, selector?: string) {
-        return `*[data-wd-key='${key}'] ${selector || ''}`;
-      },
-
-      closeModal(key: string) {
-        const selector = this.getDataAttribute(key);
-      
-        this.isDisplayedInViewport(selector);
-      
-        this.click(this.getDataAttribute(key + ".close-modal"));
-      
-        this.doesNotExists(selector);
-      },
-
-      openLayersModal() {
-        cy.get(this.getDataAttribute('layer-list:add-layer')).click();
-  
-        cy.get(this.getDataAttribute('modal:add-layer')).should('exist');
-        cy.get(this.getDataAttribute('modal:add-layer')).should('be.visible');
-      },
-
-      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;
-      },
-
-      isStyleStoreEqual(getter: (obj:any) => any, styleObj: any) {
-        cy.window().then((win: any) => {
-          const obj = this.getStyleFromWindow(win);
-          assert.deepEqual(getter(obj), styleObj);
-        });
-      },
-
-      isStyleStoreEqualToExampleFileData() {
-        cy.window().then((win: any) => {
-          const obj = this.getStyleFromWindow(win);
-          cy.fixture('example-style.json').should('deep.equal', obj);
-        });
-      },
-
-      fillLayersModal(opts: any) {
       var type = opts.type;
       var layer = opts.layer;
       var id;
       if (opts.id) {
-          id = opts.id
+        id = opts.id;
-        }
+      } else {
-        else {
         id = `${type}:${uuid()}`;
       }
 
-        cy.get(this.getDataAttribute('add-layer.layer-type', "select")).select(type);
+      cy.get(
-        cy.get(this.getDataAttribute("add-layer.layer-id", "input")).type(id);
+        this.get.getDataAttribute("add-layer.layer-type", "select")
+      ).select(type);
+      cy.get(this.get.getDataAttribute("add-layer.layer-id", "input")).type(id);
       if (layer) {
-            cy.get(this.getDataAttribute("add-layer.layer-source-block", "input")).type(layer);
+        cy.get(
+          this.get.getDataAttribute("add-layer.layer-source-block", "input")
+        ).type(layer);
       }
-        cy.get(this.getDataAttribute("add-layer")).click();
+      this.when.click("add-layer");
 
       return id;
     },
 
-      typeKeys(keys: string) {
+    typeKeys: (keys: string) => {
-        cy.get('body').type(keys);
+      cy.get("body").type(keys);
     },
 
-      click(selector: string) {
+    click: (selector: string) => {
-        cy.get(selector).click();
+      this.helper.when.click(selector);
+      // cy.get(selector).click({ force: true });
     },
 
-      select(selector: string, value: string) {
+    select: (selector: string, value: string) => {
       cy.get(selector).select(value);
     },
 
-      isSelected(selector: string, value: string) {
+    focus: (selector: string) => {
-        cy.get(selector).find(`option[value="${value}"]`).should("be.selected");
+      this.helper.when.focus(selector);
     },
 
-
+    setValue: (selector: string, text: string) => {
-      focus(selector: string) {
-        cy.get(selector).focus();
-      },
-
-      isFocused(selector: string) {
-        cy.get(selector).should('have.focus');
-      },
-
-      isDisplayedInViewport(selector: string) {
-        cy.get(selector).should('be.visible');
-      },
-
-      isNotDisplayedInViewport(selector: string) {
-        cy.get(selector).should('not.be.visible');
-      },
-
-      setValue(selector: string, text: string) {
       cy.get(selector).clear().type(text, { parseSpecialCharSequences: false });
     },
 
-      isExists(selector: string) {
+    closeModal: (key: string) => {
-        cy.get(selector).should('exist');
+      this.helper.when.waitUntil(() => this.helper.get.element(key));
+      this.when.click(key + ".close-modal");
     },
 
-      doesNotExists(selector: string) {
+    openLayersModal: () => {
-        cy.get(selector).should('not.exist');
+      this.helper.when.click("layer-list:add-layer");
-      },
 
-      chooseExampleFile() {
+      cy.get(this.get.getDataAttribute("modal:add-layer")).should("exist");
-        cy.get("input[type='file']").selectFile('cypress/fixtures/example-style.json', {force: true});
+      cy.get(this.get.getDataAttribute("modal:add-layer")).should("be.visible");
     },
+  };
 
-      getExampleFileUrl() {
+  public get = {
+    isMac: () => {
+      return Cypress.platform === "darwin";
+    },
+    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;
+    },
+    getExampleFileUrl: () => {
       return "http://localhost:8888/example-style.json";
     },
+    getDataAttribute: (key: string, selector?: string): string => {
+      return `*[data-wd-key='${key}'] ${selector || ""}`;
+    },
+  };
 
-      waitForExampleFileRequset() {
+  public should = {
-        cy.wait('@example-style.json');
+    canvasBeFocused: () => {
-      }
+      this.when.within("maplibre:map", () => {
-
+        cy.get("canvas").should("be.focused");
-
+      });
+    },
+    notExist: (selector: string) => {
+      cy.get(selector).should("not.exist");
+    },
+    beFocused: (selector: string) => {
+      this.helper.get.element(selector).should("have.focus");
+    },
+
+    notBeFocused: (selector: string) => {
+      this.helper.get.element(selector).should("not.have.focus");
+    },
+
+    beVisible: (selector: string) => {
+      this.helper.get.element(selector).should("be.visible");
+    },
+
+    notBeVisible: (selector: string) => {
+      this.helper.get.element(selector).should("not.be.visible");
+    },
+
+    equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
+      cy.window().then((win: any) => {
+        const obj = this.get.getStyleFromWindow(win);
+        assert.deepEqual(getter(obj), styleObj);
+      });
+    },
+
+    isStyleStoreEqualToExampleFileData: () => {
+      cy.window().then((win: any) => {
+        const obj = this.get.getStyleFromWindow(win);
+        cy.fixture("example-style.json").should("deep.equal", obj);
+      });
+    },
+
+    isExists: (selector: string) => {
+      this.helper.get.element(selector).should("exist");
+    },
+    isSelected: (selector: string, value: string) => {
+      cy.get(selector).find(`option[value="${value}"]`).should("be.selected");
+    },
+  };
 }

cypress/e2e/history.cy.ts

@@ -1,80 +1,97 @@
-import driver from "./driver";
+import MaputnikDriver from "./driver";
 
 describe("history", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  beforeAndAfter();
+
   let undoKeyCombo: string;
   let redoKeyCombo: string;
 
   before(() => {
-    const isMac = driver.isMac();
+    const isMac = get.isMac();
-    undoKeyCombo = isMac ? '{meta}z' : '{ctrl}z';
+    undoKeyCombo = isMac ? "{meta}z" : "{ctrl}z";
-    redoKeyCombo = isMac ? '{meta}{shift}z' : '{ctrl}y';
+    redoKeyCombo = isMac ? "{meta}{shift}z" : "{ctrl}y";
-    driver.beforeEach();
   });
 
   it("undo/redo", () => {
-    driver.setStyle('geojson');
+    when.setStyle("geojson");
-    driver.openLayersModal();
+    when.openLayersModal();
 
-    driver.isStyleStoreEqual((a: any) => a.layers, []);
+    should.equalStyleStore((a: any) => a.layers, []);
 
-    driver.fillLayersModal({
+    when.fillLayersModal({
       id: "step 1",
-      type: "background"
+      type: "background",
-    })
+    });
-
+
-    driver.isStyleStoreEqual((a: any) => a.layers, [
+    should.equalStyleStore(
-      {
+      (a: any) => a.layers,
-        "id": "step 1",
+      [
-        "type": 'background'
+        {
-      }
+          id: "step 1",
-    ]);
+          type: "background",
-
+        },
-    driver.openLayersModal();
+      ]
-    driver.fillLayersModal({
+    );
-      id: "step 2",
+
-      type: "background"
+    when.openLayersModal();
-    })
+    when.fillLayersModal({
-
+      id: "step 2",
-    driver.isStyleStoreEqual((a: any) => a.layers, [
+      type: "background",
-      {
+    });
-        "id": "step 1",
+
-        "type": 'background'
+    should.equalStyleStore(
-      },
+      (a: any) => a.layers,
-      {
+      [
-        "id": "step 2",
+        {
-        "type": 'background'
+          id: "step 1",
-      }
+          type: "background",
-    ]);
+        },
-
+        {
-    driver.typeKeys(undoKeyCombo);
+          id: "step 2",
-    driver.isStyleStoreEqual((a: any) => a.layers, [
+          type: "background",
-      {
+        },
-        "id": "step 1",
+      ]
-        "type": 'background'
+    );
-      }
+
-    ]);
+    when.typeKeys(undoKeyCombo);
-
+    should.equalStyleStore(
-    driver.typeKeys(undoKeyCombo)
+      (a: any) => a.layers,
-    driver.isStyleStoreEqual((a: any) => a.layers, []);
+      [
-
+        {
-    driver.typeKeys(redoKeyCombo)
+          id: "step 1",
-    driver.isStyleStoreEqual((a: any) => a.layers, [
+          type: "background",
-      {
+        },
-        "id": "step 1",
+      ]
-        "type": 'background'
+    );
-      }
+
-    ]);
+    when.typeKeys(undoKeyCombo);
-
+    should.equalStyleStore((a: any) => a.layers, []);
-    driver.typeKeys(redoKeyCombo)
+
-    driver.isStyleStoreEqual((a: any) => a.layers, [
+    when.typeKeys(redoKeyCombo);
-      {
+    should.equalStyleStore(
-        "id": "step 1",
+      (a: any) => a.layers,
-        "type": 'background'
+      [
-      },
+        {
-      {
+          id: "step 1",
-        "id": "step 2",
+          type: "background",
-        "type": 'background'
+        },
-      }
+      ]
-    ]);
+    );
+
+    when.typeKeys(redoKeyCombo);
+    should.equalStyleStore(
+      (a: any) => a.layers,
+      [
+        {
+          id: "step 1",
+          type: "background",
+        },
+        {
+          id: "step 2",
+          type: "background",
+        },
+      ]
+    );
+  });
 });
-})

cypress/e2e/keyboard.cy.ts

@@ -1,60 +1,61 @@
-import driver from "./driver";
+import { default as MaputnikDriver } from "./driver";
 
 describe("keyboard", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  beforeAndAfter();
   describe("shortcuts", () => {
     beforeEach(() => {
-        driver.setupInterception();
+      given.setupInterception();
-        driver.setStyle('');
+      when.setStyle("");
-    })
+    });
 
     it("ESC should unfocus", () => {
-      const targetSelector = driver.getDataAttribute("nav:inspect") + " select";
+      const targetSelector = "maputnik-select";
-      driver.focus(targetSelector);
+      when.focus(targetSelector);
-      driver.isFocused(targetSelector);
+      should.beFocused(targetSelector);
 
-      //driver.typeKeys("{esc}");
+      when.typeKeys("{esc}");
-      //driver.isFocused('body');
+      expect(should.notBeFocused(targetSelector));
     });
 
     it("'?' should show shortcuts modal", () => {
-      driver.typeKeys("?");
+      when.typeKeys("?");
-      driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts"));
+      should.beVisible("modal:shortcuts");
     });
 
     it("'o' should show open modal", () => {
-      driver.typeKeys("o");
+      when.typeKeys("o");
-      driver.isDisplayedInViewport(driver.getDataAttribute("modal:open"));
+      should.beVisible("modal:open");
     });
 
     it("'e' should show export modal", () => {
-      driver.typeKeys("e");
+      when.typeKeys("e");
-      driver.isDisplayedInViewport(driver.getDataAttribute("modal:export"));
+      should.beVisible("modal:export");
     });
 
     it("'d' should show sources modal", () => {
-      driver.typeKeys("d");
+      when.typeKeys("d");
-      driver.isDisplayedInViewport(driver.getDataAttribute("modal:sources"));
+      should.beVisible("modal:sources");
     });
 
     it("'s' should show settings modal", () => {
-      driver.typeKeys("s");
+      when.typeKeys("s");
-      driver.isDisplayedInViewport(driver.getDataAttribute("modal:settings"));
+      should.beVisible("modal:settings");
     });
 
     it("'i' should change map to inspect mode", () => {
-      driver.typeKeys("i");
+      when.typeKeys("i");
-      driver.isSelected(driver.getDataAttribute("nav:inspect"), "inspect");
+      should.isSelected(get.getDataAttribute("nav:inspect"), "inspect");
     });
 
     it("'m' should focus map", () => {
-      driver.typeKeys("m");
+      when.typeKeys("m");
-      driver.isFocused(".maplibregl-canvas");
+      should.beFocused(".maplibregl-canvas");
     });
 
     it("'!' should show debug modal", () => {
-      driver.typeKeys("!");
+      when.typeKeys("!");
-      driver.isDisplayedInViewport(driver.getDataAttribute("modal:debug"));
+      should.beVisible("modal:debug");
     });
   });
-
 });

cypress/e2e/layers.cy.ts

@@ -1,112 +1,132 @@
 var assert = require("assert");
-import driver from "./driver";
+import { v1 as uuid } from "uuid";
-import { v1 as uuid } from 'uuid';
+import MaputnikDriver from "./driver";
 
 describe("layers", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  beforeAndAfter();
   beforeEach(() => {
-    driver.beforeEach();
+    when.setStyle("both");
-    driver.setStyle('both');
+    when.openLayersModal();
-    driver.openLayersModal();
   });
 
   describe("ops", () => {
     it("delete", () => {
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
-        type: "background"
+        type: "background",
-      })
+      });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
           {
-          "id": id,
+            id: id,
-          "type": 'background'
+            type: "background",
           },
-      ]);
+        ]
+      );
 
-      driver.click(driver.getDataAttribute("layer-list-item:"+id+":delete", ""))
+      when.click("layer-list-item:" + id + ":delete");
 
-      driver.isStyleStoreEqual((a: any) => a.layers, []);
+      should.equalStyleStore((a: any) => a.layers, []);
     });
 
     it("duplicate", () => {
       var styleObj;
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
-        type: "background"
+        type: "background",
-      })
+      });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
           {
-          "id": id,
+            id: id,
-          "type": 'background'
+            type: "background",
           },
-      ]);
+        ]
+      );
 
-      driver.click(driver.getDataAttribute("layer-list-item:"+id+":copy", ""));
+      when.click("layer-list-item:" + id + ":copy");
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
           {
-          "id": id+"-copy",
+            id: id + "-copy",
-          "type": "background"
+            type: "background",
           },
           {
-          "id": id,
+            id: id,
-          "type": "background"
+            type: "background",
           },
-      ]);
+        ]
+      );
     });
 
     it("hide", () => {
       var styleObj;
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
-        type: "background"
+        type: "background",
-      })
+      });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
           {
-          "id": id,
+            id: id,
-          "type": 'background'
+            type: "background",
           },
-      ]);
+        ]
+      );
 
-      driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
+      when.click("layer-list-item:" + id + ":toggle-visibility");
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
           {
-          "id": id,
+            id: id,
-          "type": "background",
+            type: "background",
-          "layout": {
+            layout: {
-            "visibility": "none"
+              visibility: "none",
-          }
             },
-      ]);
+          },
+        ]
+      );
 
-      driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
+      when.click("layer-list-item:" + id + ":toggle-visibility");
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
           {
-          "id": id,
+            id: id,
-          "type": "background",
+            type: "background",
-          "layout": {
+            layout: {
-            "visibility": "visible"
+              visibility: "visible",
-          }
             },
-      ]);
+          },
-    })
+        ]
-  })
+      );
-
+    });
-
+  });
-  describe('background', () => {
 
+  describe("background", () => {
     it("add", () => {
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
-        type: "background"
+        type: "background",
-      })
+      });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
           {
-          "id": id,
+            id: id,
-          "type": 'background'
+            type: "background",
-        }
+          },
-      ]);
+        ]
+      );
     });
 
     describe("modify", () => {
@@ -114,17 +134,26 @@ describe("layers", () => {
         // Setup
         var id = uuid();
 
-        driver.select(driver.getDataAttribute("add-layer.layer-type", "select"), "background");
+        when.select(
-        driver.setValue(driver.getDataAttribute("add-layer.layer-id", "input"), "background:"+id);
+          get.getDataAttribute("add-layer.layer-type", "select"),
+          "background"
+        );
+        when.setValue(
+          get.getDataAttribute("add-layer.layer-id", "input"),
+          "background:" + id
+        );
 
-        driver.click(driver.getDataAttribute("add-layer"));
+        when.click("add-layer");
 
-        driver.isStyleStoreEqual((a: any) => a.layers, [
+        should.equalStyleStore(
+          (a: any) => a.layers,
+          [
             {
-            "id": 'background:'+id,
+              id: "background:" + id,
-            "type": 'background'
+              type: "background",
-          }
+            },
-        ]);
+          ]
+        );
         return id;
       }
 
@@ -134,35 +163,47 @@ describe("layers", () => {
         it("id", () => {
           var bgId = createBackground();
 
-          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          when.click("layer-list-item:background:" + bgId);
 
           var id = uuid();
-          driver.setValue(driver.getDataAttribute("layer-editor.layer-id", "input"), "foobar:"+id)
+          when.setValue(
-          driver.click(driver.getDataAttribute("min-zoom"));
+            get.getDataAttribute("layer-editor.layer-id", "input"),
+            "foobar:" + id
+          );
+          when.click("min-zoom");
 
-          driver.isStyleStoreEqual((a: any) => a.layers, [
+          should.equalStyleStore(
+            (a: any) => a.layers,
+            [
               {
-              "id": 'foobar:'+id,
+                id: "foobar:" + id,
-              "type": 'background'
+                type: "background",
-            }
+              },
-          ]);
+            ]
+          );
         });
 
         it("min-zoom", () => {
           var bgId = createBackground();
 
-          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          when.click("layer-list-item:background:" + bgId);
-          driver.setValue(driver.getDataAttribute("min-zoom", 'input[type="text"]'), "1");
+          when.setValue(
+            get.getDataAttribute("min-zoom", 'input[type="text"]'),
+            "1"
+          );
 
-          driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
+          when.click("layer-editor.layer-id");
 
-          driver.isStyleStoreEqual((a: any) => a.layers, [
+          should.equalStyleStore(
+            (a: any) => a.layers,
+            [
               {
-              "id": 'background:'+bgId,
+                id: "background:" + bgId,
-              "type": 'background',
+                type: "background",
-              "minzoom": 1
+                minzoom: 1,
-            }
+              },
-          ]);
+            ]
+          );
 
           // AND RESET!
           // driver.setValue(driver.getDataAttribute("min-zoom", "input"), "")
@@ -179,38 +220,47 @@ describe("layers", () => {
         it("max-zoom", () => {
           var bgId = createBackground();
 
-          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          when.click("layer-list-item:background:" + bgId);
-          driver.setValue(driver.getDataAttribute("max-zoom", 'input[type="text"]'), "1")
+          when.setValue(
+            get.getDataAttribute("max-zoom", 'input[type="text"]'),
+            "1"
+          );
 
-          driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
+          when.click("layer-editor.layer-id");
 
-          driver.isStyleStoreEqual((a: any) => a.layers, [
+          should.equalStyleStore(
+            (a: any) => a.layers,
+            [
               {
-              "id": 'background:'+bgId,
+                id: "background:" + bgId,
-              "type": 'background',
+                type: "background",
-              "maxzoom": 1
+                maxzoom: 1,
-            }
+              },
-          ]);
+            ]
+          );
         });
 
         it("comments", () => {
           var bgId = createBackground();
           var id = uuid();
 
-          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          when.click("layer-list-item:background:" + bgId);
-          driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), id);
+          when.setValue(get.getDataAttribute("layer-comment", "textarea"), id);
 
-          driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
+          when.click("layer-editor.layer-id");
 
-          driver.isStyleStoreEqual((a: any) => a.layers, [
+          should.equalStyleStore(
+            (a: any) => a.layers,
+            [
               {
-              "id": 'background:'+bgId,
+                id: "background:" + bgId,
-              "type": 'background',
+                type: "background",
                 metadata: {
-                'maputnik:comment': id
+                  "maputnik:comment": id,
-              }
+                },
-            }
+              },
-          ]);
+            ]
+          );
 
           // Unset it again.
           // TODO: This fails
@@ -228,31 +278,33 @@ describe("layers", () => {
         it("color", () => {
           var bgId = createBackground();
 
-          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          when.click("layer-list-item:background:" + bgId);
 
-          driver.click(driver.getDataAttribute("spec-field:background-color", "input"));
+          when.click("spec-field:background-color");
 
-          driver.isStyleStoreEqual((a: any) => a.layers, [
+          should.equalStyleStore(
+            (a: any) => a.layers,
+            [
               {
-              "id": 'background:'+bgId,
+                id: "background:" + bgId,
-              "type": 'background'
+                type: "background",
-            }
+              },
-          ]);
+            ]
-
+          );
-        })
+        });
-      })
+      });
 
       describe("filter", () => {
         it("expand/collapse");
         it("compound filter");
-      })
+      });
 
       describe("paint", () => {
         it("expand/collapse");
         it("color");
         it("pattern");
         it("opacity");
-      })
+      });
       // <=====
 
       describe("json-editor", () => {
@@ -263,165 +315,183 @@ describe("layers", () => {
         it.skip("parse error", () => {
           var bgId = createBackground();
 
-          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          when.click("layer-list-item:background:" + bgId);
 
           var errorSelector = ".CodeMirror-lint-marker-error";
-          driver.doesNotExists(errorSelector);
+          should.notExist(errorSelector);
 
-          driver.click(".CodeMirror");
+          when.click(".CodeMirror");
-          driver.typeKeys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {");
+          when.typeKeys(
-          driver.isExists(errorSelector);
+            "\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
+          );
+          should.isExists(errorSelector);
 
-          driver.click(driver.getDataAttribute("layer-editor.layer-id"));
+          when.click("layer-editor.layer-id");
+        });
       });
     });
-    })
   });
 
-  describe('fill', () => {
+  describe("fill", () => {
     it("add", () => {
-
+      var id = when.fillLayersModal({
-      var id = driver.fillLayersModal({
         type: "fill",
-        layer: "example"
+        layer: "example",
       });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
           {
-          "id": id,
+            id: id,
-          "type": 'fill',
+            type: "fill",
-          "source": "example"
+            source: "example",
-        }
+          },
-      ]);
+        ]
-    })
+      );
+    });
 
     // TODO: Change source
-    it("change source")
+    it("change source");
   });
 
-  describe('line', () => {
+  describe("line", () => {
     it("add", () => {
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
         type: "line",
-        layer: "example"
+        layer: "example",
       });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
           {
-          "id": id,
+            id: id,
-          "type": "line",
+            type: "line",
-          "source": "example",
+            source: "example",
-        }
+          },
-      ]);
+        ]
+      );
     });
 
     it("groups", () => {
       // TODO
       // Click each of the layer groups.
-    })
+    });
   });
 
-  describe('symbol', () => {
+  describe("symbol", () => {
     it("add", () => {
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
         type: "symbol",
-        layer: "example"
+        layer: "example",
       });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
           {
-          "id": id,
+            id: id,
-          "type": "symbol",
+            type: "symbol",
-          "source": "example",
+            source: "example",
-        }
+          },
-      ]);
+        ]
+      );
     });
   });
 
-  describe('raster', () => {
+  describe("raster", () => {
     it("add", () => {
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
         type: "raster",
-        layer: "raster"
+        layer: "raster",
       });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
           {
-          "id": id,
+            id: id,
-          "type": "raster",
+            type: "raster",
-          "source": "raster",
+            source: "raster",
-        }
+          },
-      ]);
+        ]
+      );
     });
   });
 
-  describe('circle', () => {
+  describe("circle", () => {
     it("add", () => {
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
         type: "circle",
-        layer: "example"
+        layer: "example",
       });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
           {
-          "id": id,
+            id: id,
-          "type": "circle",
+            type: "circle",
-          "source": "example",
+            source: "example",
-        }
+          },
-      ]);
+        ]
+      );
+    });
   });
 
-  });
+  describe("fill extrusion", () => {
-
-  describe('fill extrusion', () => {
     it("add", () => {
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
         type: "fill-extrusion",
-        layer: "example"
+        layer: "example",
       });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
           {
-          "id": id,
+            id: id,
-          "type": 'fill-extrusion',
+            type: "fill-extrusion",
-          "source": "example"
+            source: "example",
-        }
+          },
-      ]);
+        ]
+      );
     });
   });
 
-
   describe("groups", () => {
     it("simple", () => {
-      driver.setStyle("geojson");
+      when.setStyle("geojson");
 
-      driver.openLayersModal();
+      when.openLayersModal();
-      driver.fillLayersModal({
+      when.fillLayersModal({
         id: "foo",
-        type: "background"
+        type: "background",
-      })
+      });
-
+
-      driver.openLayersModal();
+      when.openLayersModal();
-      driver.fillLayersModal({
+      when.fillLayersModal({
-        id: "foo_bar",
+        id: "foo_bar",
-        type: "background"
+        type: "background",
-      })
+      });
-
+
-      driver.openLayersModal();
+      when.openLayersModal();
-      driver.fillLayersModal({
+      when.fillLayersModal({
-        id: "foo_bar_baz",
+        id: "foo_bar_baz",
-        type: "background"
+        type: "background",
-      })
+      });
-
+
-      driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo"));
+      should.beVisible("layer-list-item:foo");
-      driver.isNotDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar"));
+
-      driver.isNotDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz"));
+      should.notBeVisible("layer-list-item:foo_bar");
-
+      should.notBeVisible("layer-list-item:foo_bar_baz");
-      driver.click(driver.getDataAttribute("layer-list-group:foo-0"));
+
-
+      when.click("layer-list-group:foo-0");
-      driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo"));
+
-      driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar"));
+      should.beVisible("layer-list-item:foo");
-      driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz"));
+      should.beVisible("layer-list-item:foo_bar");
-    })
+      should.beVisible("layer-list-item:foo_bar_baz");
-  })
+    });
+  });
 });

cypress/e2e/map.cy.ts

@@ -1,25 +1,25 @@
-import driver from "./driver";
+import MaputnikDriver from "./driver";
 
 describe("map", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  beforeAndAfter();
   describe("zoom level", () => {
-      beforeEach(() => {
-        driver.beforeEach();
-      });
     it("via url", () => {
       var zoomLevel = 12.37;
-        driver.setStyle("geojson", zoomLevel);
+      when.setStyle("geojson", zoomLevel);
-        driver.isDisplayedInViewport(".maplibregl-ctrl-zoom");
+      should.beVisible("maplibre:ctrl-zoom");
       // HM TODO
       //driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel);
-      })
+    });
+
     it("via map controls", () => {
       var zoomLevel = 12.37;
-        driver.setStyle("geojson", zoomLevel);
+      when.setStyle("geojson", zoomLevel);
 
-        driver.click(".maplibregl-ctrl-zoom-in");
+      when.click("maplibre:ctrl-zoom");
-        driver.isDisplayedInViewport(".maplibregl-ctrl-zoom");
+      should.beVisible("maplibre:ctrl-zoom");
       // HM TODO
       //driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel + 1);
-      })
+    });
-    })
+  });
-  })
+});

cypress/e2e/modals.cy.ts

@@ -1,137 +1,160 @@
-import driver from "./driver";
+import MaputnikDriver from "./driver";
 
 describe("modals", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  beforeAndAfter();
   beforeEach(() => {
-    driver.beforeEach();
+    when.setStyle("");
-    driver.setStyle('');
   });
   describe("open", () => {
     beforeEach(() => {
-        driver.click(driver.getDataAttribute("nav:open"));
+      when.click("nav:open");
     });
 
     it("close", () => {
-      driver.closeModal("modal:open");
+      when.closeModal("modal:open");
+      should.notExist("modal:open");
     });
 
     it.skip("upload", () => {
       // HM: I was not able to make the following choose file actually to select a file and close the modal...
-      driver.chooseExampleFile();
+      when.chooseExampleFile();
 
-      driver.isStyleStoreEqualToExampleFileData();
+      should.isStyleStoreEqualToExampleFileData();
     });
 
     it("load from url", () => {
-      var styleFileUrl = driver.getExampleFileUrl();
+      var styleFileUrl = get.getExampleFileUrl();
 
-      driver.setValue(driver.getDataAttribute("modal:open.url.input"), styleFileUrl);
+      when.setValue(get.getDataAttribute("modal:open.url.input"), styleFileUrl);
-      driver.click(driver.getDataAttribute("modal:open.url.button"))
+      when.click("modal:open.url.button");
-      driver.waitForExampleFileRequset();
+      when.waitForExampleFileRequset();
 
-      driver.isStyleStoreEqualToExampleFileData();
+      should.isStyleStoreEqualToExampleFileData();
+    });
   });
-  })
 
   describe("shortcuts", () => {
     it("open/close", () => {
-      driver.setStyle('');
+      when.setStyle("");
-
+      when.typeKeys("?");
-      driver.typeKeys("?");
+      when.closeModal("modal:shortcuts");
-
+      should.notExist("modal:shortcuts");
-      driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts"));
-
-      driver.closeModal("modal:shortcuts");
     });
-
   });
 
   describe("export", () => {
     beforeEach(() => {
-      driver.click(driver.getDataAttribute("nav:export"));
+      when.click("nav:export");
     });
 
     it("close", () => {
-      driver.closeModal("modal:export");
+      when.closeModal("modal:export");
+      should.notExist("modal:export");
     });
 
     // TODO: Work out how to download a file and check the contents
-    it("download")
+    it("download");
-
+  });
-  })
 
   describe("sources", () => {
-    it("active sources")
+    it("active sources");
-    it("public source")
+    it("public source");
-    it("add new source")
+    it("add new source");
-  })
+  });
 
   describe("inspect", () => {
     it("toggle", () => {
-      driver.setStyle('geojson');
+      when.setStyle("geojson");
 
-      driver.select(driver.getDataAttribute("nav:inspect", "select"), "inspect");
+      when.select(get.getDataAttribute("nav:inspect", "select"), "inspect");
-    })
+    });
-  })
+  });
 
   describe("style settings", () => {
     beforeEach(() => {
-      driver.click(driver.getDataAttribute("nav:settings"));
+      when.click("nav:settings");
     });
 
     it("name", () => {
-      driver.setValue(driver.getDataAttribute("modal:settings.name"), "foobar");
+      when.setValue(get.getDataAttribute("modal:settings.name"), "foobar");
-      driver.click(driver.getDataAttribute("modal:settings.owner"));
+      when.click("modal:settings.owner");
 
-      driver.isStyleStoreEqual((obj) => obj.name, "foobar");
+      should.equalStyleStore((obj) => obj.name, "foobar");
-    })
+    });
     it("owner", () => {
-      driver.setValue(driver.getDataAttribute("modal:settings.owner"), "foobar")
+      when.setValue(get.getDataAttribute("modal:settings.owner"), "foobar");
-      driver.click(driver.getDataAttribute("modal:settings.name"));
+      when.click("modal:settings.name");
 
-      driver.isStyleStoreEqual((obj) => obj.owner, "foobar");
+      should.equalStyleStore((obj) => obj.owner, "foobar");
-    })
+    });
     it("sprite url", () => {
-      driver.setValue(driver.getDataAttribute("modal:settings.sprite"), "http://example.com")
+      when.setValue(
-      driver.click(driver.getDataAttribute("modal:settings.name"));
+        get.getDataAttribute("modal:settings.sprite"),
+        "http://example.com"
+      );
+      when.click("modal:settings.name");
 
-      driver.isStyleStoreEqual((obj) => obj.sprite, "http://example.com");
+      should.equalStyleStore((obj) => obj.sprite, "http://example.com");
-    })
+    });
     it("glyphs url", () => {
-      var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"
+      var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
-      driver.setValue(driver.getDataAttribute("modal:settings.glyphs"), glyphsUrl);
+      when.setValue(get.getDataAttribute("modal:settings.glyphs"), glyphsUrl);
-      driver.click(driver.getDataAttribute("modal:settings.name"));
+      when.click("modal:settings.name");
 
-      driver.isStyleStoreEqual((obj) => obj.glyphs, glyphsUrl);
+      should.equalStyleStore((obj) => obj.glyphs, glyphsUrl);
-    })
+    });
 
     it("maptiler access token", () => {
       var apiKey = "testing123";
-      driver.setValue(driver.getDataAttribute("modal:settings.maputnik:openmaptiles_access_token"), apiKey);
+      when.setValue(
-      driver.click(driver.getDataAttribute("modal:settings.name"));
+        get.getDataAttribute(
+          "modal:settings.maputnik:openmaptiles_access_token"
+        ),
+        apiKey
+      );
+      when.click("modal:settings.name");
 
-      driver.isStyleStoreEqual((obj) => obj.metadata["maputnik:openmaptiles_access_token"], apiKey);
+      should.equalStyleStore(
-    })
+        (obj) => obj.metadata["maputnik:openmaptiles_access_token"],
+        apiKey
+      );
+    });
 
     it("thunderforest access token", () => {
       var apiKey = "testing123";
-      driver.setValue(driver.getDataAttribute("modal:settings.maputnik:thunderforest_access_token"), apiKey);
+      when.setValue(
-      driver.click(driver.getDataAttribute("modal:settings.name"));
+        get.getDataAttribute(
+          "modal:settings.maputnik:thunderforest_access_token"
+        ),
+        apiKey
+      );
+      when.click("modal:settings.name");
 
-      driver.isStyleStoreEqual((obj) => obj.metadata["maputnik:thunderforest_access_token"], apiKey);
+      should.equalStyleStore(
-    })
+        (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
+      cy.on("uncaught:exception", () => false); // this is due to the fact that this is an invalid style for openlayers
-      driver.select(driver.getDataAttribute("modal:settings.maputnik:renderer"), "ol");
+      when.select(
-      driver.isSelected(driver.getDataAttribute("modal:settings.maputnik:renderer"), "ol");
+        get.getDataAttribute("modal:settings.maputnik:renderer"),
+        "ol"
+      );
+      should.isSelected(
+        get.getDataAttribute("modal:settings.maputnik:renderer"),
+        "ol"
+      );
 
-      driver.click(driver.getDataAttribute("modal:settings.name"));
+      when.click("modal:settings.name");
 
-      driver.isStyleStoreEqual((obj) => obj.metadata["maputnik:renderer"], "ol");
+      should.equalStyleStore((obj) => obj.metadata["maputnik:renderer"], "ol");
-    })
+    });
-  })
+  });
 
   describe("sources", () => {
-    it("toggle")
+    it("toggle");
-  })
+  });
-})
+});

cypress/support/e2e.ts

@@ -14,7 +14,8 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "cypress-plugin-tab";
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

package.json

@@ -86,6 +86,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.5",
+    "@shellygo/cypress-test-utils": "^2.0.9",
     "@storybook/addon-a11y": "^7.6.5",
     "@storybook/addon-actions": "^7.6.5",
     "@storybook/addon-links": "^7.6.5",

src/components/AppToolbar.jsx

@@ -1,24 +1,33 @@
-import React from 'react'
+import classnames from "classnames";
-import PropTypes from 'prop-types'
+import { detect } from "detect-browser";
-import classnames from 'classnames'
+import PropTypes from "prop-types";
-import {detect} from 'detect-browser';
+import React from "react";
 
-import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
+import {
-import pkgJson from '../../package.json'
+  MdAssignmentTurnedIn,
+  MdFileDownload,
+  MdFindInPage,
+  MdHelpOutline,
+  MdLayers,
+  MdOpenInBrowser,
+  MdSettings,
+} from "react-icons/md";
 
+import logoImage from "maputnik-design/logos/logo-color.svg";
+import pkgJson from "../../package.json";
 
 // This is required because of <https://stackoverflow.com/a/49846426>, there isn't another way to detect support that I'm aware of.
 const browser = detect();
-const colorAccessibilityFiltersEnabled = ['chrome', 'firefox'].indexOf(browser.name) > -1;
+const colorAccessibilityFiltersEnabled =
-
+  ["chrome", "firefox"].indexOf(browser.name) > -1;
 
 class IconText extends React.Component {
   static propTypes = {
     children: PropTypes.node,
-  }
+  };
 
   render() {
-    return <span className="maputnik-icon-text">{this.props.children}</span>
+    return <span className="maputnik-icon-text">{this.props.children}</span>;
   }
 }
 
@@ -28,17 +37,19 @@ class ToolbarLink extends React.Component {
     children: PropTypes.node,
     href: PropTypes.string,
     onToggleModal: PropTypes.func,
-  }
+  };
 
   render() {
-    return <a
+    return (
-      className={classnames('maputnik-toolbar-link', this.props.className)}
+      <a
+        className={classnames("maputnik-toolbar-link", this.props.className)}
         href={this.props.href}
         rel="noopener noreferrer"
         target="_blank"
       >
         {this.props.children}
       </a>
+    );
   }
 }
 
@@ -47,12 +58,17 @@ class ToolbarLinkHighlighted extends React.Component {
     className: PropTypes.string,
     children: PropTypes.node,
     href: PropTypes.string,
-    onToggleModal: PropTypes.func
+    onToggleModal: PropTypes.func,
-  }
+  };
 
   render() {
-    return <a
+    return (
-      className={classnames('maputnik-toolbar-link', "maputnik-toolbar-link--highlighted", this.props.className)}
+      <a
+        className={classnames(
+          "maputnik-toolbar-link",
+          "maputnik-toolbar-link--highlighted",
+          this.props.className
+        )}
         href={this.props.href}
         rel="noopener noreferrer"
         target="_blank"
@@ -61,22 +77,22 @@ class ToolbarLinkHighlighted extends React.Component {
           {this.props.children}
         </span>
       </a>
+    );
   }
 }
 
 class ToolbarSelect extends React.Component {
   static propTypes = {
     children: PropTypes.node,
-    wdKey: PropTypes.string
+    wdKey: PropTypes.string,
-  }
+  };
 
   render() {
-    return <div
+    return (
-      className='maputnik-toolbar-select'
+      <div className="maputnik-toolbar-select" data-wd-key={this.props.wdKey}>
-      data-wd-key={this.props.wdKey}
-    >
         {this.props.children}
       </div>
+    );
   }
 }
 
@@ -84,17 +100,19 @@ class ToolbarAction extends React.Component {
   static propTypes = {
     children: PropTypes.node,
     onClick: PropTypes.func,
-    wdKey: PropTypes.string
+    wdKey: PropTypes.string,
-  }
+  };
 
   render() {
-    return <button
+    return (
-      className='maputnik-toolbar-action'
+      <button
+        className="maputnik-toolbar-action"
         data-wd-key={this.props.wdKey}
         onClick={this.props.onClick}
       >
         {this.props.children}
       </button>
+    );
   }
 }
 
@@ -112,7 +130,7 @@ export default class AppToolbar extends React.Component {
     onSetMapState: PropTypes.func,
     mapState: PropTypes.string,
     renderer: PropTypes.string,
-  }
+  };
 
   state = {
     isOpen: {
@@ -121,8 +139,8 @@ export default class AppToolbar extends React.Component {
       open: false,
       add: false,
       export: false,
-    }
+    },
-  }
+  };
 
   handleSelection(val) {
     this.props.onSetMapState(val);
@@ -131,12 +149,11 @@ export default class AppToolbar extends React.Component {
   onSkip = (target) => {
     if (target === "map") {
       document.querySelector(".maplibregl-canvas").focus();
-    }
+    } else {
-    else {
       const el = document.querySelector("#skip-target-" + target);
       el.focus();
     }
-  }
+  };
 
   render() {
     const views = [
@@ -149,7 +166,7 @@ export default class AppToolbar extends React.Component {
         id: "inspect",
         group: "general",
         title: "Inspect",
-        disabled: this.props.renderer === 'ol',
+        disabled: this.props.renderer === "ol",
       },
       {
         id: "filter-deuteranopia",
@@ -181,30 +198,29 @@ export default class AppToolbar extends React.Component {
       return view.id === this.props.mapState;
     });
 
-    return <nav className='maputnik-toolbar'>
+    return (
+      <nav className="maputnik-toolbar">
         <div className="maputnik-toolbar__inner">
-        <div
+          <div className="maputnik-toolbar-logo-container">
-          className="maputnik-toolbar-logo-container"
-        >
             {/* Keyboard accessible quick links */}
             <button
               data-wd-key="root:skip:layer-list"
               className="maputnik-toolbar-skip"
-            onClick={e => this.onSkip("layer-list")}
+              onClick={(e) => this.onSkip("layer-list")}
             >
               Layers list
             </button>
             <button
               data-wd-key="root:skip:layer-editor"
               className="maputnik-toolbar-skip"
-            onClick={e => this.onSkip("layer-editor")}
+              onClick={(e) => this.onSkip("layer-editor")}
             >
               Layer editor
             </button>
             <button
               data-wd-key="root:skip:map-view"
               className="maputnik-toolbar-skip"
-            onClick={e => this.onSkip("map")}
+              onClick={(e) => this.onSkip("map")}
             >
               Map view
             </button>
@@ -214,50 +230,83 @@ export default class AppToolbar extends React.Component {
               rel="noreferrer noopener"
               href="https://github.com/maputnik/editor"
             >
-            <img src="node_modules/maputnik-design/logos/logo-color.svg" />
+              <span dangerouslySetInnerHTML={{ __html: logoImage }} />
               <h1>
                 <span className="maputnik-toolbar-name">{pkgJson.name}</span>
-              <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
+                <span className="maputnik-toolbar-version">
+                  v{pkgJson.version}
+                </span>
               </h1>
             </a>
           </div>
-        <div className="maputnik-toolbar__actions" role="navigation" aria-label="Toolbar">
+          <div
-          <ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
+            className="maputnik-toolbar__actions"
+            role="navigation"
+            aria-label="Toolbar"
+          >
+            <ToolbarAction
+              wdKey="nav:open"
+              onClick={this.props.onToggleModal.bind(this, "open")}
+            >
               <MdOpenInBrowser />
               <IconText>Open</IconText>
             </ToolbarAction>
-          <ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
+            <ToolbarAction
+              wdKey="nav:export"
+              onClick={this.props.onToggleModal.bind(this, "export")}
+            >
               <MdFileDownload />
               <IconText>Export</IconText>
             </ToolbarAction>
-          <ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
+            <ToolbarAction
+              wdKey="nav:sources"
+              onClick={this.props.onToggleModal.bind(this, "sources")}
+            >
               <MdLayers />
               <IconText>Data Sources</IconText>
             </ToolbarAction>
-          <ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
+            <ToolbarAction
+              wdKey="nav:settings"
+              onClick={this.props.onToggleModal.bind(this, "settings")}
+            >
               <MdSettings />
               <IconText>Style Settings</IconText>
             </ToolbarAction>
 
             <ToolbarSelect wdKey="nav:inspect">
               <MdFindInPage />
-            <label>View
+              <label>
+                View
                 <select
                   className="maputnik-select"
+                  data-wd-key="maputnik-select"
                   onChange={(e) => this.handleSelection(e.target.value)}
                   value={currentView.id}
                 >
-                {views.filter(v => v.group === "general").map((item) => {
+                  {views
+                    .filter((v) => v.group === "general")
+                    .map((item) => {
                       return (
-                    <option key={item.id} value={item.id} disabled={item.disabled}>
+                        <option
+                          key={item.id}
+                          value={item.id}
+                          disabled={item.disabled}
+                          data-wd-key={item.id}
+                        >
                           {item.title}
                         </option>
                       );
                     })}
                   <optgroup label="Color accessibility">
-                  {views.filter(v => v.group === "color-accessibility").map((item) => {
+                    {views
+                      .filter((v) => v.group === "color-accessibility")
+                      .map((item) => {
                         return (
-                      <option key={item.id} value={item.id} disabled={item.disabled}>
+                          <option
+                            key={item.id}
+                            value={item.id}
+                            disabled={item.disabled}
+                          >
                             {item.title}
                           </option>
                         );
@@ -271,12 +320,15 @@ export default class AppToolbar extends React.Component {
               <MdHelpOutline />
               <IconText>Help</IconText>
             </ToolbarLink>
-          <ToolbarLinkHighlighted href={"https://gregorywolanski.typeform.com/to/cPgaSY"}>
+            <ToolbarLinkHighlighted
+              href={"https://gregorywolanski.typeform.com/to/cPgaSY"}
+            >
               <MdAssignmentTurnedIn />
               <IconText>Take the Maputnik Survey</IconText>
             </ToolbarLinkHighlighted>
           </div>
         </div>
       </nav>
+    );
   }
 }

src/components/LayerEditor.jsx

@@ -1,26 +1,25 @@
-import React from 'react'
+import PropTypes from "prop-types";
-import PropTypes from 'prop-types'
+import React from "react";
-import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
+import { Button, Menu, MenuItem, Wrapper } from "react-aria-menubutton";
 
-import FieldJson from './FieldJson'
+import { Accordion } from "react-accessible-accordion";
-import FilterEditor from './FilterEditor'
+import FieldComment from "./FieldComment";
-import PropertyGroup from './PropertyGroup'
+import FieldId from "./FieldId";
-import LayerEditorGroup from './LayerEditorGroup'
+import FieldJson from "./FieldJson";
-import FieldType from './FieldType'
+import FieldMaxZoom from "./FieldMaxZoom";
-import FieldId from './FieldId'
+import FieldMinZoom from "./FieldMinZoom";
-import FieldMinZoom from './FieldMinZoom'
+import FieldSource from "./FieldSource";
-import FieldMaxZoom from './FieldMaxZoom'
+import FieldSourceLayer from "./FieldSourceLayer";
-import FieldComment from './FieldComment'
+import FieldType from "./FieldType";
-import FieldSource from './FieldSource'
+import FilterEditor from "./FilterEditor";
-import FieldSourceLayer from './FieldSourceLayer'
+import LayerEditorGroup from "./LayerEditorGroup";
-import {Accordion} from 'react-accessible-accordion';
+import PropertyGroup from "./PropertyGroup";
 
-import {MdMoreVert} from 'react-icons/md'
+import { MdMoreVert } from "react-icons/md";
-
-import { changeType, changeProperty } from '../libs/layer'
-import layout from '../config/layout.json'
-import {formatLayerId} from '../util/format';
 
+import layout from "../config/layout.json";
+import { changeProperty, changeType } from "../libs/layer";
+import { formatLayerId } from "../util/format";
 
 function getLayoutForType(type) {
   return layout[type] ? layout[type] : layout.invalid;
@@ -28,20 +27,20 @@ function getLayoutForType (type) {
 
 function layoutGroups(layerType) {
   const layerGroup = {
-    title: 'Layer',
+    title: "Layer",
-    type: 'layer'
+    type: "layer",
-  }
+  };
   const filterGroup = {
-    title: 'Filter',
+    title: "Filter",
-    type: 'filter'
+    type: "filter",
-  }
+  };
   const editorGroup = {
-    title: 'JSON Editor',
+    title: "JSON Editor",
-    type: 'jsoneditor'
+    type: "jsoneditor",
-  }
+  };
   return [layerGroup, filterGroup]
     .concat(getLayoutForType(layerType).groups)
-    .concat([editorGroup])
+    .concat([editorGroup]);
 }
 
 /** Layer editor supporting multiple types of layers. */
@@ -61,41 +60,41 @@ export default class LayerEditor extends React.Component {
     isLastLayer: PropTypes.bool,
     layerIndex: PropTypes.number,
     errors: PropTypes.array,
-  }
+  };
 
   static defaultProps = {
     onLayerChanged: () => {},
     onLayerIdChange: () => {},
     onLayerDestroyed: () => {},
-  }
+  };
 
   static childContextTypes = {
-    reactIconBase: PropTypes.object
+    reactIconBase: PropTypes.object,
-  }
+  };
 
   constructor(props) {
-    super(props)
+    super(props);
 
     //TODO: Clean this up and refactor into function
-    const editorGroups = {}
+    const editorGroups = {};
-    layoutGroups(this.props.layer.type).forEach(group => {
+    layoutGroups(this.props.layer.type).forEach((group) => {
-      editorGroups[group.title] = true
+      editorGroups[group.title] = true;
-    })
+    });
 
-    this.state = { editorGroups }
+    this.state = { editorGroups };
   }
 
   static getDerivedStateFromProps(props, state) {
-    const additionalGroups = { ...state.editorGroups }
+    const additionalGroups = { ...state.editorGroups };
 
-    getLayoutForType(props.layer.type).groups.forEach(group => {
+    getLayoutForType(props.layer.type).groups.forEach((group) => {
       if (!(group.title in additionalGroups)) {
-        additionalGroups[group.title] = true
+        additionalGroups[group.title] = true;
       }
-    })
+    });
 
     return {
-      editorGroups: additionalGroups
+      editorGroups: additionalGroups,
     };
   }
 
@@ -103,47 +102,47 @@ export default class LayerEditor extends React.Component {
     return {
       reactIconBase: {
         size: 14,
-        color: '#8e8e8e',
+        color: "#8e8e8e",
-      }
+      },
-    }
+    };
   }
 
   changeProperty(group, property, newValue) {
     this.props.onLayerChanged(
       this.props.layerIndex,
       changeProperty(this.props.layer, group, property, newValue)
-    )
+    );
   }
 
   onGroupToggle(groupTitle, active) {
     const changedActiveGroups = {
       ...this.state.editorGroups,
       [groupTitle]: active,
-    }
+    };
     this.setState({
-      editorGroups: changedActiveGroups
+      editorGroups: changedActiveGroups,
-    })
+    });
   }
 
   renderGroupType(type, fields) {
-    let comment = ""
+    let comment = "";
     if (this.props.layer.metadata) {
-      comment = this.props.layer.metadata['maputnik:comment']
+      comment = this.props.layer.metadata["maputnik:comment"];
     }
     const { errors, layerIndex } = this.props;
 
     const errorData = {};
-    errors.forEach(error => {
+    errors.forEach((error) => {
       if (
         error.parsed &&
         error.parsed.type === "layer" &&
         error.parsed.data.index == layerIndex
       ) {
         errorData[error.parsed.data.key] = {
-          message: error.parsed.data.message
+          message: error.parsed.data.message,
         };
       }
-    })
+    });
 
     let sourceLayerIds;
     if (this.props.sources.hasOwnProperty(this.props.layer.source)) {
@@ -151,100 +150,129 @@ export default class LayerEditor extends React.Component {
     }
 
     switch (type) {
-      case 'layer': return <div>
+      case "layer":
+        return (
+          <div>
             <FieldId
               value={this.props.layer.id}
               wdKey="layer-editor.layer-id"
               error={errorData.id}
-          onChange={newId => this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
+              onChange={(newId) =>
+                this.props.onLayerIdChange(
+                  this.props.layerIndex,
+                  this.props.layer.id,
+                  newId
+                )
+              }
             />
             <FieldType
               disabled={true}
               error={errorData.type}
               value={this.props.layer.type}
-          onChange={newType => this.props.onLayerChanged(
+              onChange={(newType) =>
+                this.props.onLayerChanged(
                   this.props.layerIndex,
                   changeType(this.props.layer, newType)
-          )}
+                )
+              }
             />
-        {this.props.layer.type !== 'background' && <FieldSource
+            {this.props.layer.type !== "background" && (
+              <FieldSource
                 error={errorData.source}
                 sourceIds={Object.keys(this.props.sources)}
                 value={this.props.layer.source}
-          onChange={v => this.changeProperty(null, 'source', v)}
+                onChange={(v) => this.changeProperty(null, "source", v)}
               />
-        }
+            )}
-        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
+            {["background", "raster", "hillshade", "heatmap"].indexOf(
+              this.props.layer.type
+            ) < 0 && (
               <FieldSourceLayer
-          error={errorData['source-layer']}
+                error={errorData["source-layer"]}
                 sourceLayerIds={sourceLayerIds}
-          value={this.props.layer['source-layer']}
+                value={this.props.layer["source-layer"]}
-          onChange={v => this.changeProperty(null, 'source-layer', v)}
+                onChange={(v) => this.changeProperty(null, "source-layer", v)}
               />
-        }
+            )}
             <FieldMinZoom
               error={errorData.minzoom}
               value={this.props.layer.minzoom}
-          onChange={v => this.changeProperty(null, 'minzoom', v)}
+              onChange={(v) => this.changeProperty(null, "minzoom", v)}
             />
             <FieldMaxZoom
               error={errorData.maxzoom}
               value={this.props.layer.maxzoom}
-          onChange={v => this.changeProperty(null, 'maxzoom', v)}
+              onChange={(v) => this.changeProperty(null, "maxzoom", v)}
             />
             <FieldComment
               error={errorData.comment}
               value={comment}
-          onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == ""  ? undefined : v)}
+              onChange={(v) =>
+                this.changeProperty(
+                  "metadata",
+                  "maputnik:comment",
+                  v == "" ? undefined : v
+                )
+              }
             />
           </div>
-      case 'filter': return <div>
+        );
+      case "filter":
+        return (
+          <div>
             <div className="maputnik-filter-editor-wrapper">
               <FilterEditor
                 errors={errorData}
                 filter={this.props.layer.filter}
-            properties={this.props.vectorLayers[this.props.layer['source-layer']]}
+                properties={
-            onChange={f => this.changeProperty(null, 'filter', f)}
+                  this.props.vectorLayers[this.props.layer["source-layer"]]
+                }
+                onChange={(f) => this.changeProperty(null, "filter", f)}
               />
             </div>
           </div>
-      case 'properties':
+        );
-        return <PropertyGroup
+      case "properties":
+        return (
+          <PropertyGroup
             errors={errorData}
             layer={this.props.layer}
             groupFields={fields}
             spec={this.props.spec}
             onChange={this.changeProperty.bind(this)}
           />
-      case 'jsoneditor':
+        );
-        return <FieldJson
+      case "jsoneditor":
+        return (
+          <FieldJson
             layer={this.props.layer}
             onChange={(layer) => {
-            this.props.onLayerChanged(
+              this.props.onLayerChanged(this.props.layerIndex, layer);
-              this.props.layerIndex,
-              layer
-            );
             }}
           />
+        );
     }
   }
 
   moveLayer(offset) {
     this.props.onMoveLayer({
       oldIndex: this.props.layerIndex,
-      newIndex: this.props.layerIndex+offset
+      newIndex: this.props.layerIndex + offset,
-    })
+    });
   }
 
   render() {
     const groupIds = [];
-    const layerType = this.props.layer.type
+    const layerType = this.props.layer.type;
-    const groups = layoutGroups(layerType).filter(group => {
+    const groups = layoutGroups(layerType)
-      return !(layerType === 'background' && group.type === 'source')
+      .filter((group) => {
-    }).map(group => {
+        return !(layerType === "background" && group.type === "source");
+      })
+      .map((group) => {
         const groupId = group.title.replace(/ /g, "_");
         groupIds.push(groupId);
-      return <LayerEditorGroup
+        return (
+          <LayerEditorGroup
             data-wd-key={group.title}
             id={groupId}
             key={group.title}
@@ -254,43 +282,47 @@ export default class LayerEditor extends React.Component {
           >
             {this.renderGroupType(group.type, group.fields)}
           </LayerEditorGroup>
-    })
+        );
+      });
 
-    const layout = this.props.layer.layout || {}
+    const layout = this.props.layer.layout || {};
 
     const items = {
       delete: {
         text: "Delete",
-        handler: () => this.props.onLayerDestroy(this.props.layerIndex)
+        handler: () => this.props.onLayerDestroy(this.props.layerIndex),
       },
       duplicate: {
         text: "Duplicate",
-        handler: () => this.props.onLayerCopy(this.props.layerIndex)
+        handler: () => this.props.onLayerCopy(this.props.layerIndex),
       },
       hide: {
-        text: (layout.visibility === "none") ? "Show" : "Hide",
+        text: layout.visibility === "none" ? "Show" : "Hide",
-        handler: () => this.props.onLayerVisibilityToggle(this.props.layerIndex)
+        handler: () =>
+          this.props.onLayerVisibilityToggle(this.props.layerIndex),
       },
       moveLayerUp: {
         text: "Move layer up",
         // Not actually used...
         disabled: this.props.isFirstLayer,
-        handler: () => this.moveLayer(-1)
+        handler: () => this.moveLayer(-1),
       },
       moveLayerDown: {
         text: "Move layer down",
         // Not actually used...
         disabled: this.props.isLastLayer,
-        handler: () => this.moveLayer(+1)
+        handler: () => this.moveLayer(+1),
-      }
+      },
-    }
+    };
 
     function handleSelection(id, event) {
       event.stopPropagation;
       items[id].handler();
     }
 
-    return <section className="maputnik-layer-editor"
+    return (
+      <section
+        className="maputnik-layer-editor"
         role="main"
         aria-label="Layer editor"
       >
@@ -301,29 +333,38 @@ export default class LayerEditor extends React.Component {
             </h2>
             <div className="layer-header__info">
               <Wrapper
-              className='more-menu'
+                className="more-menu"
                 onSelection={handleSelection}
                 closeOnSelection={false}
               >
-              <Button id="skip-target-layer-editor" className='more-menu__button' title="Layer options">
+                <Button
+                  data-wd-key="skip-target-layer-editor"
+                  id="skip-target-layer-editor"
+                  className="more-menu__button"
+                  title="Layer options"
+                >
                   <MdMoreVert className="more-menu__button__svg" />
                 </Button>
                 <Menu>
                   <ul className="more-menu__menu">
                     {Object.keys(items).map((id, idx) => {
                       const item = items[id];
-                    return <li key={id}>
+                      return (
-                      <MenuItem value={id} className='more-menu__menu__item'>
+                        <li key={id}>
+                          <MenuItem
+                            value={id}
+                            className="more-menu__menu__item"
+                          >
                             {item.text}
                           </MenuItem>
                         </li>
+                      );
                     })}
                   </ul>
                 </Menu>
               </Wrapper>
             </div>
           </div>
-
         </header>
         <Accordion
           allowMultipleExpanded={true}
@@ -333,5 +374,6 @@ export default class LayerEditor extends React.Component {
           {groups}
         </Accordion>
       </section>
+    );
   }
 }

src/components/LayerList.jsx

@@ -1,13 +1,13 @@
-import React from 'react'
+import classnames from "classnames";
-import PropTypes from 'prop-types'
+import lodash from "lodash";
-import classnames from 'classnames'
+import PropTypes from "prop-types";
-import lodash from 'lodash';
+import React from "react";
 
-import LayerListGroup from './LayerListGroup'
+import LayerListGroup from "./LayerListGroup";
-import LayerListItem from './LayerListItem'
+import LayerListItem from "./LayerListItem";
-import ModalAdd from './ModalAdd'
+import ModalAdd from "./ModalAdd";
 
-import {SortableContainer} from 'react-sortable-hoc';
+import { SortableContainer } from "react-sortable-hoc";
 
 const layerListPropTypes = {
   layers: PropTypes.array.isRequired,
@@ -15,34 +15,34 @@ const layerListPropTypes = {
   onLayersChange: PropTypes.func.isRequired,
   onLayerSelect: PropTypes.func,
   sources: PropTypes.object.isRequired,
-}
+};
 
 function layerPrefix(name) {
-  return name.replace(' ', '-').replace('_', '-').split('-')[0]
+  return name.replace(" ", "-").replace("_", "-").split("-")[0];
 }
 
 function findClosestCommonPrefix(layers, idx) {
-  const currentLayerPrefix = layerPrefix(layers[idx].id)
+  const currentLayerPrefix = layerPrefix(layers[idx].id);
-  let closestIdx = idx
+  let closestIdx = idx;
   for (let i = idx; i > 0; i--) {
-    const previousLayerPrefix = layerPrefix(layers[i-1].id)
+    const previousLayerPrefix = layerPrefix(layers[i - 1].id);
     if (previousLayerPrefix === currentLayerPrefix) {
-      closestIdx = i - 1
+      closestIdx = i - 1;
     } else {
-      return closestIdx
+      return closestIdx;
     }
   }
-  return closestIdx
+  return closestIdx;
 }
 
 let UID = 0;
 
 // List of collapsible layer editors
 class LayerListContainer extends React.Component {
-  static propTypes = {...layerListPropTypes}
+  static propTypes = { ...layerListPropTypes };
   static defaultProps = {
     onLayerSelect: () => {},
-  }
+  };
 
   constructor(props) {
     super(props);
@@ -56,8 +56,8 @@ class LayerListContainer extends React.Component {
       },
       isOpen: {
         add: false,
-      }
+      },
-    }
+    };
   }
 
   toggleModal(modalName) {
@@ -68,76 +68,79 @@ class LayerListContainer extends React.Component {
       },
       isOpen: {
         ...this.state.isOpen,
-        [modalName]: !this.state.isOpen[modalName]
+        [modalName]: !this.state.isOpen[modalName],
-      }
+      },
-    })
+    });
   }
 
   toggleLayers = () => {
-    let idx=0
+    let idx = 0;
 
-    let newGroups=[]
+    let newGroups = [];
-
-    this.groupedLayers().forEach(layers => {
-      const groupPrefix = layerPrefix(layers[0].id)
-      const lookupKey = [groupPrefix, idx].join('-')
 
+    this.groupedLayers().forEach((layers) => {
+      const groupPrefix = layerPrefix(layers[0].id);
+      const lookupKey = [groupPrefix, idx].join("-");
 
       if (layers.length > 1) {
-        newGroups[lookupKey] = this.state.areAllGroupsExpanded
+        newGroups[lookupKey] = this.state.areAllGroupsExpanded;
       }
 
       layers.forEach((layer) => {
-        idx += 1
+        idx += 1;
-      })
+      });
     });
 
     this.setState({
       collapsedGroups: newGroups,
-      areAllGroupsExpanded: !this.state.areAllGroupsExpanded
+      areAllGroupsExpanded: !this.state.areAllGroupsExpanded,
-    })
+    });
-  }
+  };
 
   groupedLayers() {
-    const groups = []
+    const groups = [];
     const layerIdCount = new Map();
 
     for (let i = 0; i < this.props.layers.length; i++) {
       const origLayer = this.props.layers[i];
-      const previousLayer = this.props.layers[i-1]
+      const previousLayer = this.props.layers[i - 1];
-      layerIdCount.set(origLayer.id,
+      layerIdCount.set(
+        origLayer.id,
         layerIdCount.has(origLayer.id) ? layerIdCount.get(origLayer.id) + 1 : 0
       );
       const layer = {
         ...origLayer,
         key: `layers-list-${origLayer.id}-${layerIdCount.get(origLayer.id)}`,
-      }
+      };
-      if(previousLayer && layerPrefix(previousLayer.id) == layerPrefix(layer.id)) {
+      if (
-        const lastGroup = groups[groups.length - 1]
+        previousLayer &&
-        lastGroup.push(layer)
+        layerPrefix(previousLayer.id) == layerPrefix(layer.id)
+      ) {
+        const lastGroup = groups[groups.length - 1];
+        lastGroup.push(layer);
       } else {
-        groups.push([layer])
+        groups.push([layer]);
       }
     }
-    return groups
+    return groups;
   }
 
   toggleLayerGroup(groupPrefix, idx) {
-    const lookupKey = [groupPrefix, idx].join('-')
+    const lookupKey = [groupPrefix, idx].join("-");
-    const newGroups = { ...this.state.collapsedGroups }
+    const newGroups = { ...this.state.collapsedGroups };
     if (lookupKey in this.state.collapsedGroups) {
-      newGroups[lookupKey] = !this.state.collapsedGroups[lookupKey]
+      newGroups[lookupKey] = !this.state.collapsedGroups[lookupKey];
     } else {
-      newGroups[lookupKey] = false
+      newGroups[lookupKey] = false;
     }
     this.setState({
-      collapsedGroups: newGroups
+      collapsedGroups: newGroups,
-    })
+    });
   }
 
   isCollapsed(groupPrefix, idx) {
-    const collapsed = this.state.collapsedGroups[[groupPrefix, idx].join('-')]
+    const collapsed = this.state.collapsedGroups[[groupPrefix, idx].join("-")];
-    return collapsed === undefined ? true : collapsed
+    return collapsed === undefined ? true : collapsed;
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -155,21 +158,21 @@ class LayerListContainer extends React.Component {
 
       if (layer.layout) {
         out.layout = {
-          visibility: layer.layout.visibility
+          visibility: layer.layout.visibility,
         };
       }
       return out;
     }
     const layersEqual = lodash.isEqual(
       nextProps.layers.map(getRequiredProps),
-      this.props.layers.map(getRequiredProps),
+      this.props.layers.map(getRequiredProps)
     );
 
     function withoutLayers(props) {
       const out = {
-        ...props
+        ...props,
       };
-      delete out['layers'];
+      delete out["layers"];
       return out;
     }
 
@@ -191,9 +194,9 @@ class LayerListContainer extends React.Component {
         const target = selectedItemNode.node;
         const options = {
           root: this.scrollContainerRef.current,
-          threshold: 1.0
+          threshold: 1.0,
-        }
+        };
-        const observer = new IntersectionObserver(entries => {
+        const observer = new IntersectionObserver((entries) => {
           observer.unobserve(target);
           if (entries.length > 0 && entries[0].intersectionRatio < 1) {
             target.scrollIntoView();
@@ -206,28 +209,32 @@ class LayerListContainer extends React.Component {
   }
 
   render() {
-
+    const listItems = [];
-    const listItems = []
+    let idx = 0;
-    let idx = 0
     const layersByGroup = this.groupedLayers();
-    layersByGroup.forEach(layers => {
+    layersByGroup.forEach((layers) => {
-      const groupPrefix = layerPrefix(layers[0].id)
+      const groupPrefix = layerPrefix(layers[0].id);
       if (layers.length > 1) {
-        const grp = <LayerListGroup
+        const grp = (
-          data-wd-key={[groupPrefix, idx].join('-')}
+          <LayerListGroup
-          aria-controls={layers.map(l => l.key).join(" ")}
+            data-wd-key={[groupPrefix, idx].join("-")}
+            aria-controls={layers.map((l) => l.key).join(" ")}
             key={`group-${groupPrefix}-${idx}`}
             title={groupPrefix}
-          isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
+            isActive={
+              !this.isCollapsed(groupPrefix, idx) ||
+              idx === this.props.selectedLayerIndex
+            }
             onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}
           />
-        listItems.push(grp)
+        );
+        listItems.push(grp);
       }
 
       layers.forEach((layer, idxInGroup) => {
-        const groupIdx = findClosestCommonPrefix(this.props.layers, idx)
+        const groupIdx = findClosestCommonPrefix(this.props.layers, idx);
 
-        const layerError = this.props.errors.find(error => {
+        const layerError = this.props.errors.find((error) => {
           return (
             error.parsed &&
             error.parsed.type === "layer" &&
@@ -240,11 +247,16 @@ class LayerListContainer extends React.Component {
           additionalProps.ref = this.selectedItemRef;
         }
 
-        const listItem = <LayerListItem
+        const listItem = (
+          <LayerListItem
             className={classnames({
-            'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
+              "maputnik-layer-list-item-collapsed":
-            'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1,
+                layers.length > 1 &&
-            'maputnik-layer-list-item--error': !!layerError
+                this.isCollapsed(groupPrefix, groupIdx) &&
+                idx !== this.props.selectedLayerIndex,
+              "maputnik-layer-list-item-group-last":
+                idxInGroup == layers.length - 1 && layers.length > 1,
+              "maputnik-layer-list-item--error": !!layerError,
             })}
             index={idx}
             key={layer.key}
@@ -257,15 +269,19 @@ class LayerListContainer extends React.Component {
             onLayerSelect={this.props.onLayerSelect}
             onLayerDestroy={this.props.onLayerDestroy.bind(this)}
             onLayerCopy={this.props.onLayerCopy.bind(this)}
-          onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
+            onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(
+              this
+            )}
             {...additionalProps}
           />
-        listItems.push(listItem)
+        );
-        idx += 1
+        listItems.push(listItem);
-      })
+        idx += 1;
-    })
+      });
+    });
 
-    return <section
+    return (
+      <section
         className="maputnik-layer-list"
         role="complementary"
         aria-label="Layers list"
@@ -276,7 +292,7 @@ class LayerListContainer extends React.Component {
           layers={this.props.layers}
           sources={this.props.sources}
           isOpen={this.state.isOpen.add}
-          onOpenToggle={this.toggleModal.bind(this, 'add')}
+          onOpenToggle={this.toggleModal.bind(this, "add")}
           onLayersChange={this.props.onLayersChange}
         />
         <header className="maputnik-layer-list-header">
@@ -286,47 +302,52 @@ class LayerListContainer extends React.Component {
             <div className="maputnik-multibutton">
               <button
                 id="skip-target-layer-list"
+                data-wd-key="skip-target-layer-list"
                 onClick={this.toggleLayers}
-              className="maputnik-button">
+                className="maputnik-button"
-              {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
+              >
+                {this.state.areAllGroupsExpanded === true
+                  ? "Collapse"
+                  : "Expand"}
               </button>
             </div>
           </div>
           <div className="maputnik-default-property">
             <div className="maputnik-multibutton">
               <button
-              onClick={this.toggleModal.bind(this, 'add')}
+                onClick={this.toggleModal.bind(this, "add")}
                 data-wd-key="layer-list:add-layer"
-              className="maputnik-button maputnik-button-selected">
+                className="maputnik-button maputnik-button-selected"
+              >
                 Add Layer
               </button>
             </div>
           </div>
         </header>
-      <div
+        <div role="navigation" aria-label="Layers list">
-        role="navigation"
+          <ul className="maputnik-layer-list-container">{listItems}</ul>
-        aria-label="Layers list"
-      >
-        <ul className="maputnik-layer-list-container">
-          {listItems}
-        </ul>
         </div>
       </section>
+    );
   }
 }
 
-const LayerListContainerSortable = SortableContainer((props) => <LayerListContainer {...props} />)
+const LayerListContainerSortable = SortableContainer((props) => (
+  <LayerListContainer {...props} />
+));
 
 export default class LayerList extends React.Component {
-  static propTypes = {...layerListPropTypes}
+  static propTypes = { ...layerListPropTypes };
 
   render() {
-    return <LayerListContainerSortable
+    return (
+      <LayerListContainerSortable
         {...this.props}
-      helperClass='sortableHelper'
+        helperClass="sortableHelper"
         onSortEnd={this.props.onMoveLayer.bind(this)}
         useDragHandle={true}
         shouldCancelStart={() => false}
       />
+    );
   }
 }

src/components/MapMaplibreGl.jsx

@@ -1,19 +1,17 @@
-import React from 'react'
+import Color from "color";
-import PropTypes from 'prop-types'
+import MapboxInspect from "mapbox-gl-inspect";
-import ReactDOM from 'react-dom'
+import colors from "mapbox-gl-inspect/lib/colors";
-import MapLibreGl from 'maplibre-gl'
+import MapLibreGl from "maplibre-gl";
-import MapboxInspect from 'mapbox-gl-inspect'
+import "maplibre-gl/dist/maplibre-gl.css";
-import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup'
+import PropTypes from "prop-types";
-import MapMaplibreGlFeaturePropertyPopup from './MapMaplibreGlFeaturePropertyPopup'
+import React from "react";
-import tokens from '../config/tokens.json'
+import ReactDOM from "react-dom";
-import colors from 'mapbox-gl-inspect/lib/colors'
+import { colorHighlightedLayer } from "../libs/highlight";
-import Color from 'color'
+import "../libs/maplibre-rtl";
-import ZoomControl from '../libs/zoomcontrol'
+import ZoomControl from "../libs/zoomcontrol";
-import { colorHighlightedLayer } from '../libs/highlight'
+import "../maplibregl.css";
-import 'maplibre-gl/dist/maplibre-gl.css'
+import MapMaplibreGlFeaturePropertyPopup from "./MapMaplibreGlFeaturePropertyPopup";
-import '../maplibregl.css'
+import MapMaplibreGlLayerPopup from "./MapMaplibreGlLayerPopup";
-import '../libs/maplibre-rtl'
-
 
 const IS_SUPPORTED = MapLibreGl.supported();
 
@@ -24,32 +22,32 @@ function renderPopup(popup, mountNode) {
 
 function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
   const backgroundLayer = {
-    "id": "background",
+    id: "background",
-    "type": "background",
+    type: "background",
-    "paint": {
+    paint: {
-      "background-color": '#1c1f24',
+      "background-color": "#1c1f24",
-    }
+    },
-  }
+  };
 
-  const layer = colorHighlightedLayer(highlightedLayer)
+  const layer = colorHighlightedLayer(highlightedLayer);
   if (layer) {
-    coloredLayers.push(layer)
+    coloredLayers.push(layer);
   }
 
-  const sources = {}
+  const sources = {};
-  Object.keys(originalMapStyle.sources).forEach(sourceId => {
+  Object.keys(originalMapStyle.sources).forEach((sourceId) => {
-    const source = originalMapStyle.sources[sourceId]
+    const source = originalMapStyle.sources[sourceId];
-    if(source.type !== 'raster' && source.type !== 'raster-dem') {
+    if (source.type !== "raster" && source.type !== "raster-dem") {
-      sources[sourceId] = source
+      sources[sourceId] = source;
     }
-  })
+  });
 
   const inspectStyle = {
     ...originalMapStyle,
     sources: sources,
-    layers: [backgroundLayer].concat(coloredLayers)
+    layers: [backgroundLayer].concat(coloredLayers),
-  }
+  };
-  return inspectStyle
+  return inspectStyle;
 }
 
 export default class MapMaplibreGl extends React.Component {
@@ -62,7 +60,7 @@ export default class MapMaplibreGl extends React.Component {
     options: PropTypes.object,
     replaceAccessTokens: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
-  }
+  };
 
   static defaultProps = {
     onMapLoaded: () => {},
@@ -70,33 +68,34 @@ export default class MapMaplibreGl extends React.Component {
     onLayerSelect: () => {},
     onChange: () => {},
     options: {},
-  }
+  };
 
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {
       map: null,
       inspect: null,
-    }
+    };
   }
 
   updateMapFromProps(props) {
     if (!IS_SUPPORTED) return;
 
-    if(!this.state.map) return
+    if (!this.state.map) return;
 
     //Maplibre GL now does diffing natively so we don't need to calculate
     //the necessary operations ourselves!
-    this.state.map.setStyle(
+    this.state.map.setStyle(this.props.replaceAccessTokens(props.mapStyle), {
-      this.props.replaceAccessTokens(props.mapStyle),
+      diff: true,
-      {diff: true}
+    });
-    )
   }
 
   shouldComponentUpdate(nextProps, nextState) {
     let should = false;
     try {
-      should = JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
+      should =
+        JSON.stringify(this.props) !== JSON.stringify(nextProps) ||
+        JSON.stringify(this.state) !== JSON.stringify(nextState);
     } catch (e) {
       // no biggie, carry on
     }
@@ -110,11 +109,14 @@ export default class MapMaplibreGl extends React.Component {
 
     this.updateMapFromProps(this.props);
 
-    if(this.state.inspect && this.props.inspectModeEnabled !== this.state.inspect._showInspectMap) {
+    if (
+      this.state.inspect &&
+      this.props.inspectModeEnabled !== this.state.inspect._showInspectMap
+    ) {
       // HACK: Fix for <https://github.com/maputnik/editor/issues/576>, while we wait for a proper fix.
       // eslint-disable-next-line
       this.state.inspect._popupBlocked = false;
-      this.state.inspect.toggleInspector()
+      this.state.inspect.toggleInspector();
     }
     if (map) {
       if (this.props.inspectModeEnabled) {
@@ -142,8 +144,8 @@ export default class MapMaplibreGl extends React.Component {
       container: this.container,
       style: this.props.mapStyle,
       hash: true,
-      maxZoom: 24
+      maxZoom: 24,
-    }
+    };
 
     const map = new MapLibreGl.Map(mapOpts);
 
@@ -151,24 +153,24 @@ export default class MapMaplibreGl extends React.Component {
       const center = map.getCenter();
       const zoom = map.getZoom();
       this.props.onChange({ center, zoom });
-    }
+    };
     mapViewChange();
 
     map.showTileBoundaries = mapOpts.showTileBoundaries;
     map.showCollisionBoxes = mapOpts.showCollisionBoxes;
     map.showOverdrawInspector = mapOpts.showOverdrawInspector;
 
-    const zoomControl = new ZoomControl;
+    const zoomControl = new ZoomControl();
-    map.addControl(zoomControl, 'top-right');
+    map.addControl(zoomControl, "top-right");
 
     const nav = new MapLibreGl.NavigationControl({ visualizePitch: true });
-    map.addControl(nav, 'top-right');
+    map.addControl(nav, "top-right");
 
-    const tmpNode = document.createElement('div');
+    const tmpNode = document.createElement("div");
 
     const inspect = new MapboxInspect({
       popup: new MapLibreGl.Popup({
-        closeOnClick: false
+        closeOnClick: false,
       }),
       showMapPopup: true,
       showMapPopupOnHover: false,
@@ -176,41 +178,58 @@ export default class MapMaplibreGl extends React.Component {
       showInspectButton: false,
       blockHoverPopupOnClick: true,
       assignLayerColor: (layerId, alpha) => {
-        return Color(colors.brightColor(layerId, alpha)).desaturate(0.5).string()
+        return Color(colors.brightColor(layerId, alpha))
+          .desaturate(0.5)
+          .string();
       },
-      buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
+      buildInspectStyle: (originalMapStyle, coloredLayers) =>
-      renderPopup: features => {
+        buildInspectStyle(
+          originalMapStyle,
+          coloredLayers,
+          this.props.highlightedLayer
+        ),
+      renderPopup: (features) => {
         if (this.props.inspectModeEnabled) {
-          return renderPopup(<MapMaplibreGlFeaturePropertyPopup features={features} />, tmpNode);
+          return renderPopup(
+            <MapMaplibreGlFeaturePropertyPopup features={features} />,
+            tmpNode
+          );
         } else {
-          return renderPopup(<MapMaplibreGlLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
+          return renderPopup(
+            <MapMaplibreGlLayerPopup
+              features={features}
+              onLayerSelect={this.onLayerSelectById}
+              zoom={this.state.zoom}
+            />,
+            tmpNode
+          );
         }
-      }
+      },
-    })
+    });
-    map.addControl(inspect)
+    map.addControl(inspect);
 
     map.on("style.load", () => {
       this.setState({
         map,
         inspect,
-        zoom: map.getZoom()
+        zoom: map.getZoom(),
+      });
     });
-    })
 
-    map.on("data", e => {
+    map.on("data", (e) => {
-      if(e.dataType !== 'tile') return
+      if (e.dataType !== "tile") return;
       this.props.onDataChange({
-        map: this.state.map
+        map: this.state.map,
-      })
+      });
-    })
+    });
 
-    map.on("error", e => {
+    map.on("error", (e) => {
       console.log("ERROR", e);
-    })
+    });
 
-    map.on("zoom", e => {
+    map.on("zoom", (e) => {
       this.setState({
-        zoom: map.getZoom()
+        zoom: map.getZoom(),
       });
     });
 
@@ -219,28 +238,32 @@ export default class MapMaplibreGl extends React.Component {
   }
 
   onLayerSelectById = (id) => {
-    const index = this.props.mapStyle.layers.findIndex(layer => layer.id === id);
+    const index = this.props.mapStyle.layers.findIndex(
+      (layer) => layer.id === id
+    );
     this.props.onLayerSelect(index);
-  }
+  };
 
   render() {
     if (IS_SUPPORTED) {
-      return <div
+      return (
+        <div
           className="maputnik-map__map"
           role="region"
           aria-label="Map view"
-        ref={x => this.container = x}
+          ref={(x) => (this.container = x)}
+          data-wd-key="maplibre:map"
         ></div>
-    }
+      );
-    else {
+    } else {
-      return <div
+      return (
-        className="maputnik-map maputnik-map--error"
+        <div className="maputnik-map maputnik-map--error">
-      >
           <div className="maputnik-map__error-message">
-          Error: Cannot load MaplibreGL, WebGL is either unsupported or disabled
+            Error: Cannot load MaplibreGL, WebGL is either unsupported or
+            disabled
           </div>
         </div>
+      );
     }
   }
 }
-

src/libs/zoomcontrol.js

@@ -1,8 +1,10 @@
 export default class ZoomControl {
   onAdd(map) {
     this._map = map;
-    this._container = document.createElement('div');
+    this._container = document.createElement("div");
-    this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom';
+    this._container.className =
+      "maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom";
+    this._container.setAttribute("data-wd-key", "maplibre:ctrl-zoom");
     this._container.innerHTML = `
       Zoom: <span></span>
     `;
@@ -18,9 +20,9 @@ export default class ZoomControl {
   }
 
   addEventListeners() {
-    this._map.on('render', this.updateZoomLevel.bind(this) );
+    this._map.on("render", this.updateZoomLevel.bind(this));
-    this._map.on('zoomIn', this.updateZoomLevel.bind(this) );
+    this._map.on("zoomIn", this.updateZoomLevel.bind(this));
-    this._map.on('zoomOut', this.updateZoomLevel.bind(this) );
+    this._map.on("zoomOut", this.updateZoomLevel.bind(this));
   }
 
   onRemove() {