Alot of the cypress code and tests

2026-02-06 04:30:01 +00:00 · 2023-12-15 22:42:40 +02:00
parent 73f7798a1d
commit 865ea72863
20 changed files with 3041 additions and 127 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,4 @@ public
 /errorShots
 /old
 /build
+/cypress/screenshots
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
--- a/cypress/e2e/accessibility.cy.ts
+++ b/cypress/e2e/accessibility.cy.ts
@@ -0,0 +1,41 @@
+import driver from "./driver";
+
+describe("accessibility", () => {
+    // skipped due to the following issue with cypress: https://github.com/cypress-io/cypress/issues/299
+  describe.skip("skip links", () => {
+    beforeEach(() => {
+        driver.beforeEach();
+        driver.setStyle("layer");
+    });
+  
+    it("skip link to layer list", () => {
+      const selector = driver.getDataAttribute("root:skip:layer-list");
+      driver.isExists(selector);
+      driver.typeKeys('{tab}');
+      driver.isFocused(selector);
+      driver.click(selector);
+  
+      driver.isFocused("#skip-target-layer-list");
+    });
+  
+    it("skip link to layer editor", () => {
+      const selector = driver.getDataAttribute("root:skip:layer-editor");
+      driver.isExists(selector);
+      driver.typeKeys('{tab}{tab}');
+      driver.isFocused(selector);
+      driver.click(selector);
+  
+      driver.isFocused("#skip-target-layer-editor");
+    });
+  
+    it("skip link to map view", () => {
+      const selector = driver.getDataAttribute("root:skip:map-view");
+      driver.isExists(selector);
+      driver.typeKeys('{tab}{tab}{tab}');
+      driver.isFocused(selector);
+      driver.click(selector);
+  
+      driver.isFocused(".maplibregl-canvas");
+    });
+  });  
+})
--- a/cypress/e2e/driver.ts
+++ b/cypress/e2e/driver.ts
@@ -0,0 +1,159 @@
+import {v1 as uuid} from "uuid";
+
+export default {
+    isMac() {
+        return Cypress.platform === "darwin";
+    },
+
+    beforeEach() {
+      this.setupInterception();
+      this.setStyle('both');
+    },
+
+    setupInterception() {
+      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' });
+    },
+
+    setStyle(styleProperties: 'geojson' | 'raster' | 'both' | 'layer' | '', zoom? : number) {
+        let url = "?debug";
+        switch (styleProperties) {
+          case "geojson":
+            url += "&style=http://localhost:8888/geojson-style.json";
+            break;
+          case "raster":
+            url += "&style=http://localhost:8888/raster-style.json";
+            break;
+          case "both":
+            url += "&style=http://localhost:8888/geojson-raster-style.json";
+            break;
+          case "layer":
+            url += "&style=http://localhost:8888/example-layer-style.json";
+            break;
+        }
+        if (zoom) {
+          url += "#" + zoom + "/41.3805/2.1635";
+        }
+        cy.visit("http://localhost:8888/" + url);
+        if (styleProperties) {
+            cy.on('window:confirm', () => true)
+        }
+        cy.get(".maputnik-toolbar-link").should("be.visible");
+      },
+
+      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');
+      },
+
+      async getStyleStore(): Promise<any> {
+        return new Promise((resolve) => {
+            cy.window().then((win: any) => {
+                return win.debug.get("maputnik", "styleStore").latestStyle(resolve);
+            });
+        });
+      },
+
+      fillLayersModal(opts: any) {
+        var type = opts.type;
+        var layer = opts.layer;
+        var id;
+        if(opts.id) {
+          id = opts.id
+        }
+        else {
+          id = `${type}:${uuid()}`;
+        }
+  
+        cy.get(this.getDataAttribute('add-layer.layer-type', "select")).select(type);
+        cy.get(this.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.getDataAttribute("add-layer")).click();
+
+        return id;
+      },
+
+      typeKeys(keys: string) {
+        cy.get('body').type(keys);
+      },
+
+      click(selector: string) {
+        cy.get(selector).click();
+      },
+
+      select(selector: string, value: string) {
+        cy.get(selector).select(value);
+      },
+
+      isSelected(selector: string, value: string) {
+        cy.get(selector).find(`option[value="${value}"]`).should("be.selected");
+      },
+
+
+      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) {
+        cy.get(selector).should('exist');
+      },
+
+      doesNotExists(selector: string) {
+        cy.get(selector).should('not.exist');
+      },
+
+      chooseExampleFile() {
+        cy.get("input[type='file']").selectFile('cypress/fixtures/example-style.json', {force: true});
+      },
+
+      isEqualToExampleFileData(styleObject: any) {
+        return cy.fixture('example-style.json').should('deep.equal', styleObject);
+      },
+
+      getExampleFileUrl() {
+        return "http://localhost:8888/example-style.json";
+      },
+
+      waitForExampleFileRequset() {
+        cy.wait('@example-style.json');
+      }
+
+
+}
--- a/cypress/e2e/history.cy.ts
+++ b/cypress/e2e/history.cy.ts
@@ -0,0 +1,92 @@
+import driver from "./driver";
+
+describe("history", () => {
+  let undoKeyCombo: string;
+  let redoKeyCombo: string;
+
+  before(() => {
+    const isMac = driver.isMac();
+    undoKeyCombo = '{meta}z';
+    redoKeyCombo = isMac ? '{meta}{shift}z' : '{meta}y';
+    driver.beforeEach();
+  });
+
+  it("undo/redo", async () => {
+    var styleObj;
+
+    driver.setStyle('geojson');
+    driver.openLayersModal();
+
+    styleObj = await driver.getStyleStore();
+    assert.deepEqual(styleObj.layers, []);
+
+    driver.fillLayersModal({
+      id: "step 1",
+      type: "background"
+    })
+
+    styleObj = await driver.getStyleStore();
+    assert.deepEqual(styleObj.layers, [
+      {
+        "id": "step 1",
+        "type": 'background'
+      }
+    ]);
+
+    driver.openLayersModal();
+    driver.fillLayersModal({
+      id: "step 2",
+      type: "background"
+    })
+
+    styleObj = await driver.getStyleStore();
+    assert.deepEqual(styleObj.layers, [
+      {
+        "id": "step 1",
+        "type": 'background'
+      },
+      {
+        "id": "step 2",
+        "type": 'background'
+      }
+    ]);
+
+    driver.typeKeys(undoKeyCombo);
+    styleObj = await driver.getStyleStore();
+    assert.deepEqual(styleObj.layers, [
+      {
+        "id": "step 1",
+        "type": 'background'
+      }
+    ]);
+
+    driver.typeKeys(undoKeyCombo)
+    styleObj = await driver.getStyleStore();
+    assert.deepEqual(styleObj.layers, [
+    ]);
+
+    driver.typeKeys(redoKeyCombo)
+    styleObj = await driver.getStyleStore();
+    assert.deepEqual(styleObj.layers, [
+      {
+        "id": "step 1",
+        "type": 'background'
+      }
+    ]);
+
+    driver.typeKeys(redoKeyCombo)
+    styleObj = await driver.getStyleStore();
+    assert.deepEqual(styleObj.layers, [
+      {
+        "id": "step 1",
+        "type": 'background'
+      },
+      {
+        "id": "step 2",
+        "type": 'background'
+      }
+    ]);
+
+  });
+
+})
--- a/cypress/e2e/keyboard.cy.ts
+++ b/cypress/e2e/keyboard.cy.ts
@@ -0,0 +1,60 @@
+import driver from "./driver";
+
+describe("keyboard", () => {
+  describe("shortcuts", () => {
+    beforeEach(() => {
+        driver.setupInterception();
+        driver.setStyle('');
+    })
+
+    it("ESC should unfocus", () => {
+      const targetSelector = driver.getDataAttribute("nav:inspect") + " select";
+      driver.focus(targetSelector);
+      driver.isFocused(targetSelector);
+
+      //driver.typeKeys("{esc}");
+      //driver.isFocused('body');
+    });
+
+    it("'?' should show shortcuts modal", () => {
+      driver.typeKeys("?");
+      driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts"));
+    });
+
+    it("'o' should show open modal", () => {
+      driver.typeKeys("o");
+      driver.isDisplayedInViewport(driver.getDataAttribute("modal:open"));
+    });
+
+    it("'e' should show export modal", () => {
+      driver.typeKeys("e");
+      driver.isDisplayedInViewport(driver.getDataAttribute("modal:export"));
+    });
+
+    it("'d' should show sources modal", () => {
+      driver.typeKeys("d");
+      driver.isDisplayedInViewport(driver.getDataAttribute("modal:sources"));
+    });
+
+    it("'s' should show settings modal", () => {
+      driver.typeKeys("s");
+      driver.isDisplayedInViewport(driver.getDataAttribute("modal:settings"));
+    });
+
+    it("'i' should change map to inspect mode", () => {
+      driver.typeKeys("i");
+      driver.isSelected(driver.getDataAttribute("nav:inspect"), "inspect");
+    });
+
+    it("'m' should focus map", () => {
+      driver.typeKeys("m");
+      driver.isFocused(".maplibregl-canvas");
+    });
+
+    it("'!' should show debug modal", () => {
+      driver.typeKeys("!");
+      driver.isDisplayedInViewport(driver.getDataAttribute("modal:debug"));
+    });
+  });
+
+});
--- a/cypress/e2e/layers.cy.ts
+++ b/cypress/e2e/layers.cy.ts
@@ -0,0 +1,452 @@
+var assert = require("assert");
+import driver from "./driver";
+import { v1 as uuid } from 'uuid';
+
+describe("layers", () => {
+  beforeEach(() => {
+    driver.beforeEach();
+    driver.setStyle('both');
+    driver.openLayersModal();
+  });
+
+  describe("ops", () => {
+    it("delete", async () => {
+      var styleObj;
+      var id = driver.fillLayersModal({
+        type: "background"
+      })
+
+      styleObj = await driver.getStyleStore();
+      assert.deepEqual(styleObj.layers, [
+        {
+          "id": id,
+          "type": 'background'
+        },
+      ]);
+
+      driver.click(driver.getDataAttribute("layer-list-item:"+id+":delete", ""))
+
+      styleObj = await driver.getStyleStore();
+      assert.deepEqual(styleObj.layers, []);
+    });
+
+    it("duplicate", async () => {
+      var styleObj;
+      var id = driver.fillLayersModal({
+        type: "background"
+      })
+
+      styleObj = await driver.getStyleStore();
+      assert.deepEqual(styleObj.layers, [
+        {
+          "id": id,
+          "type": 'background'
+        },
+      ]);
+
+      driver.click(driver.getDataAttribute("layer-list-item:"+id+":copy", ""));
+
+      styleObj = await driver.getStyleStore();
+      assert.deepEqual(styleObj.layers, [
+        {
+          "id": id+"-copy",
+          "type": "background"
+        },
+        {
+          "id": id,
+          "type": "background"
+        },
+      ]);
+    });
+
+    it("hide", async () => {
+      var styleObj;
+      var id = driver.fillLayersModal({
+        type: "background"
+      })
+
+      styleObj = await driver.getStyleStore();
+      assert.deepEqual(styleObj.layers, [
+        {
+          "id": id,
+          "type": 'background'
+        },
+      ]);
+
+      driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
+
+      styleObj = await driver.getStyleStore();
+      assert.deepEqual(styleObj.layers, [
+        {
+          "id": id,
+          "type": "background",
+          "layout": {
+            "visibility": "none"
+          }
+        },
+      ]);
+
+      await driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
+
+      styleObj = await driver.getStyleStore();
+      assert.deepEqual(styleObj.layers, [
+        {
+          "id": id,
+          "type": "background",
+          "layout": {
+            "visibility": "visible"
+          }
+        },
+      ]);
+    })
+  })
+
+
+  describe('background', function () {
+
+    it("add", async () => {
+      var id = driver.fillLayersModal({
+        type: "background"
+      })
+
+      var styleObj = await driver.getStyleStore();
+      assert.deepEqual(styleObj.layers, [
+        {
+          "id": id,
+          "type": 'background'
+        }
+      ]);
+    });
+
+    describe("modify", () => {
+      async function createBackground() {
+        // Setup
+        var id = uuid();
+
+        driver.select(driver.getDataAttribute("add-layer.layer-type", "select"), "background");
+        driver.setValue(driver.getDataAttribute("add-layer.layer-id", "input"), "background:"+id);
+
+        driver.click(driver.getDataAttribute("add-layer"));
+
+        var styleObj = await driver.getStyleStore();
+        assert.deepEqual(styleObj.layers, [
+          {
+            "id": 'background:'+id,
+            "type": 'background'
+          }
+        ]);
+        return id;
+      }
+
+      // ====> THESE SHOULD BE FROM THE SPEC
+      describe("layer", () => {
+        it("expand/collapse");
+        it("id", async () => {
+          var bgId = await createBackground();
+
+          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+
+          var id = uuid();
+          driver.setValue(driver.getDataAttribute("layer-editor.layer-id", "input"), "foobar:"+id)
+          driver.click(driver.getDataAttribute("min-zoom"));
+
+          var styleObj = await driver.getStyleStore();
+          assert.deepEqual(styleObj.layers, [
+            {
+              "id": 'foobar:'+id,
+              "type": 'background'
+            }
+          ]);
+        });
+
+        it("min-zoom", async () => {
+          var bgId = await createBackground();
+
+          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          driver.setValue(driver.getDataAttribute("min-zoom", 'input[type="text"]'), "1");
+
+          driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
+
+          var styleObj = await driver.getStyleStore();
+          assert.deepEqual(styleObj.layers, [
+            {
+              "id": 'background:'+bgId,
+              "type": 'background',
+              "minzoom": 1
+            }
+          ]);
+
+          // AND RESET!
+          // await driver.setValue(driver.getDataAttribute("min-zoom", "input"), "")
+          // await driver.click(driver.getDataAttribute("max-zoom", "input"));
+
+          // var styleObj = await driver.getStyleStore();
+
+          // assert.deepEqual(styleObj.layers, [
+          //   {
+          //     "id": 'background:'+bgId,
+          //     "type": 'background'
+          //   }
+          // ]);
+        });
+
+        it("max-zoom", async () => {
+          var bgId = await createBackground();
+
+          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          driver.setValue(driver.getDataAttribute("max-zoom", 'input[type="text"]'), "1")
+
+          driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
+
+          var styleObj = await driver.getStyleStore();
+          assert.deepEqual(styleObj.layers, [
+            {
+              "id": 'background:'+bgId,
+              "type": 'background',
+              "maxzoom": 1
+            }
+          ]);
+        });
+
+        it("comments", async () => {
+          var bgId = await createBackground();
+          var id = uuid();
+
+          await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          await driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), id);
+
+          await driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
+
+          var styleObj = await driver.getStyleStore();
+          assert.deepEqual(styleObj.layers, [
+            {
+              "id": 'background:'+bgId,
+              "type": 'background',
+              metadata: {
+                'maputnik:comment': id
+              }
+            }
+          ]);
+
+          // Unset it again.
+          // TODO: This fails
+          // await driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), "");
+          // await driver.click(driver.getDataAttribute("min-zoom", "input"));
+          // await driver.zeroTimeout();
+
+          // var styleObj = await driver.getStyleStore();
+          // assert.deepEqual(styleObj.layers, [
+          //   {
+          //     "id": 'background:'+bgId,
+          //     "type": 'background'
+          //   }
+          // ]);
+        });
+
+        it("color", async () => {
+          var bgId = await createBackground();
+
+          await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+
+          await driver.click(driver.getDataAttribute("spec-field:background-color", "input"));
+
+          var styleObj = await driver.getStyleStore();
+          assert.deepEqual(styleObj.layers, [
+            {
+              "id": 'background:'+bgId,
+              "type": 'background'
+            }
+          ]);
+
+        })
+      })
+
+      describe("filter", () => {
+        it("expand/collapse");
+        it("compound filter");
+      })
+
+      describe("paint", () => {
+        it("expand/collapse");
+        it("color");
+        it("pattern");
+        it("opacity");
+      })
+      // <=====
+
+      describe("json-editor", () => {
+        it("expand/collapse");
+        it("modify");
+
+        // TODO
+        it.skip("parse error", async () => {
+          var bgId = await createBackground();
+
+          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+
+          var errorSelector = ".CodeMirror-lint-marker-error";
+          driver.doesNotExists(errorSelector);
+
+          driver.click(".CodeMirror");
+          driver.typeKeys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {");
+          driver.isExists(errorSelector);
+
+          driver.click(driver.getDataAttribute("layer-editor.layer-id"));
+        });
+      });
+    })
+  });
+
+  describe('fill', () => {
+    it("add", async () => {
+
+      var id = driver.fillLayersModal({
+        type: "fill",
+        layer: "example"
+      });
+
+      var styleObj = await driver.getStyleStore();
+      assert.deepEqual(styleObj.layers, [
+        {
+          "id": id,
+          "type": 'fill',
+          "source": "example"
+        }
+      ]);
+    })
+
+    // TODO: Change source
+    it("change source")
+  });
+
+  describe('line', () => {
+    it("add", async () => {
+      var id = driver.fillLayersModal({
+        type: "line",
+        layer: "example"
+      });
+
+      var styleObj = await driver.getStyleStore();
+      assert.deepEqual(styleObj.layers, [
+        {
+          "id": id,
+          "type": "line",
+          "source": "example",
+        }
+      ]);
+    });
+
+    it("groups", () => {
+      // TODO
+      // Click each of the layer groups.
+    })
+  });
+
+  describe('symbol', () => {
+    it("add", async () => {
+      var id = driver.fillLayersModal({
+        type: "symbol",
+        layer: "example"
+      });
+
+      var styleObj = await driver.getStyleStore();
+      assert.deepEqual(styleObj.layers, [
+        {
+          "id": id,
+          "type": "symbol",
+          "source": "example",
+        }
+      ]);
+    });
+  });
+
+  describe('raster', () => {
+    it("add", async () => {
+      var id = driver.fillLayersModal({
+        type: "raster",
+        layer: "raster"
+      });
+
+      var styleObj = await driver.getStyleStore();
+      assert.deepEqual(styleObj.layers, [
+        {
+          "id": id,
+          "type": "raster",
+          "source": "raster",
+        }
+      ]);
+    });
+  });
+
+  describe('circle', () => {
+    it("add", async () => {
+      var id = driver.fillLayersModal({
+        type: "circle",
+        layer: "example"
+      });
+
+      var styleObj = await driver.getStyleStore();
+      assert.deepEqual(styleObj.layers, [
+        {
+          "id": id,
+          "type": "circle",
+          "source": "example",
+        }
+      ]);
+    });
+
+  });
+
+  describe('fill extrusion', () => {
+    it("add", async () => {
+      var id = driver.fillLayersModal({
+        type: "fill-extrusion",
+        layer: "example"
+      });
+
+      var styleObj = await driver.getStyleStore();
+      assert.deepEqual(styleObj.layers, [
+        {
+          "id": id,
+          "type": 'fill-extrusion',
+          "source": "example"
+        }
+      ]);
+    });
+  });
+
+
+  describe("groups", () => {
+    it("simple", async () => {
+      driver.setStyle("geojson");
+
+      driver.openLayersModal();
+      driver.fillLayersModal({
+        id: "foo",
+        type: "background"
+      })
+
+      driver.openLayersModal();
+      driver.fillLayersModal({
+        id: "foo_bar",
+        type: "background"
+      })
+
+      driver.openLayersModal();
+      driver.fillLayersModal({
+        id: "foo_bar_baz",
+        type: "background"
+      })
+
+      driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo"));
+      driver.isNotDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar"));
+      driver.isNotDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz"));
+
+      driver.click(driver.getDataAttribute("layer-list-group:foo-0"));
+
+      driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo"));
+      driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar"));
+      driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz"));
+    })
+  })
+});
--- a/cypress/e2e/modals.cy.ts
+++ b/cypress/e2e/modals.cy.ts
@@ -0,0 +1,142 @@
+import driver from "./driver";
+
+describe("modals", () => {
+    beforeEach(() => {
+        driver.beforeEach();
+        driver.setStyle('');
+    });
+  describe("open", () => {
+    beforeEach(() => {
+        driver.click(driver.getDataAttribute("nav:open"));
+    });
+
+    it("close", () => {
+      driver.closeModal("modal:open");
+    });
+
+    it("upload", async () => {
+      driver.chooseExampleFile();
+
+      var styleObj = await driver.getStyleStore();
+      driver.isEqualToExampleFileData(styleObj);
+    });
+
+    it("load from url", async () => {
+      var styleFileUrl = driver.getExampleFileUrl();
+
+      driver.setValue(driver.getDataAttribute("modal:open.url.input"), styleFileUrl);
+      driver.click(driver.getDataAttribute("modal:open.url.button"))
+      driver.waitForExampleFileRequset();
+
+      var styleObj = await driver.getStyleStore();
+      driver.isEqualToExampleFileData(styleObj);
+    });
+  })
+
+  describe("shortcuts", () => {
+    it("open/close", async () => {
+      driver.setStyle('');
+
+      driver.typeKeys("?");
+
+      driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts"));
+
+      driver.closeModal("modal:shortcuts");
+    });
+
+  });
+
+  describe("export", () => {
+    beforeEach(() => {
+      driver.click(driver.getDataAttribute("nav:export"));
+    });
+
+    it("close", () => {
+      driver.closeModal("modal:export");
+    });
+
+    // TODO: Work out how to download a file and check the contents
+    it("download")
+
+  })
+
+  describe("sources", () => {
+    it("active sources")
+    it("public source")
+    it("add new source")
+  })
+
+  describe("inspect", () => {
+    it("toggle", async () => {
+      driver.setStyle('geojson');
+
+      driver.select(driver.getDataAttribute("nav:inspect", "select"), "inspect");
+    })
+  })
+
+  describe("style settings", () => {
+    beforeEach(() => {
+      driver.click(driver.getDataAttribute("nav:settings"));
+    });
+
+    it("name", async () => {
+      driver.setValue(driver.getDataAttribute("modal:settings.name"), "foobar");
+      driver.click(driver.getDataAttribute("modal:settings.owner"));
+
+      var styleObj = await driver.getStyleStore();
+      assert.equal(styleObj.name, "foobar");
+    })
+    it("owner", async () => {
+      driver.setValue(driver.getDataAttribute("modal:settings.owner"), "foobar")
+      driver.click(driver.getDataAttribute("modal:settings.name"));
+
+      var styleObj = await driver.getStyleStore();
+      assert.equal(styleObj.owner, "foobar");
+    })
+    it("sprite url", async () => {
+      driver.setValue(driver.getDataAttribute("modal:settings.sprite"), "http://example.com")
+      driver.click(driver.getDataAttribute("modal:settings.name"));
+
+      var styleObj = await driver.getStyleStore();
+      assert.equal(styleObj.sprite, "http://example.com");
+    })
+    it("glyphs url", async () => {
+      var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"
+      driver.setValue(driver.getDataAttribute("modal:settings.glyphs"), glyphsUrl);
+      driver.click(driver.getDataAttribute("modal:settings.name"));
+
+      var styleObj = await driver.getStyleStore();
+      assert.equal(styleObj.glyphs, glyphsUrl);
+    })
+
+    it("maptiler access token", async () => {
+      var apiKey = "testing123";
+      driver.setValue(driver.getDataAttribute("modal:settings.maputnik:openmaptiles_access_token"), apiKey);
+      driver.click(driver.getDataAttribute("modal:settings.name"));
+
+      var styleObj = await driver.getStyleStore();
+      assert.equal(styleObj.metadata["maputnik:openmaptiles_access_token"], apiKey);
+    })
+
+    it("thunderforest access token", async () => {
+      var apiKey = "testing123";
+      driver.setValue(driver.getDataAttribute("modal:settings.maputnik:thunderforest_access_token"), apiKey);
+      driver.click(driver.getDataAttribute("modal:settings.name"));
+
+      var styleObj = await driver.getStyleStore();
+      assert.equal(styleObj.metadata["maputnik:thunderforest_access_token"], apiKey);
+    })
+
+    it("style renderer", async () => {
+      driver.select(driver.getDataAttribute("modal:settings.maputnik:renderer"), "ol");
+      driver.click(driver.getDataAttribute("modal:settings.name"));
+
+      var styleObj = await driver.getStyleStore();
+      assert.equal(styleObj.metadata["maputnik:renderer"], "ol");
+    })
+  })
+
+  describe("sources", () => {
+    it("toggle")
+  })
+})
--- a/cypress/fixtures/example-layer-style.json
+++ b/cypress/fixtures/example-layer-style.json
@@ -0,0 +1,18 @@
+{
+  "id": "test-style",
+  "version": 8,
+  "name": "Test Style",
+  "metadata": {
+    "maputnik:renderer": "mlgljs"
+  },
+  "sources": {},
+  "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
+  "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "background",
+      "type": "background"
+    }
+  ]
+}
+
--- a/cypress/fixtures/example-style.json
+++ b/cypress/fixtures/example-style.json
@@ -0,0 +1,12 @@
+{
+  "id": "test-style",
+  "version": 8,
+  "name": "Test Style",
+  "metadata": {
+    "maputnik:renderer": "mlgljs"
+  },
+  "sources": {},
+  "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
+  "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
+  "layers": []
+}
--- a/cypress/fixtures/geojson-raster-style.json
+++ b/cypress/fixtures/geojson-raster-style.json
@@ -0,0 +1,34 @@
+{
+    "id": "test-style",
+    "version": 8,
+    "name": "Test Style",
+    "metadata": {
+        "maputnik:renderer": "mlgljs"
+    },
+    "sources": {
+        "example": {
+            "type": "vector",
+            "data": {
+                "type": "FeatureCollection",
+                "features":[{
+                    "type": "Feature",
+                    "properties": {
+                        "name": "Dinagat Islands"
+                    },
+                    "geometry":{
+                        "type": "Point",
+                        "coordinates": [125.6, 10.1]
+                    }
+                }]
+            }
+        },
+        "raster": {
+            "tileSize": 256,
+            "tiles": ["http://localhost/example/{x}/{y}/{z}"],
+            "type": "raster"
+        }
+    },
+    "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "layers": []
+  }
--- a/cypress/fixtures/geojson-style.json
+++ b/cypress/fixtures/geojson-style.json
@@ -0,0 +1,29 @@
+{
+    "id": "test-style",
+    "version": 8,
+    "name": "Test Style",
+    "metadata": {
+        "maputnik:renderer": "mlgljs"
+    },
+    "sources": {
+        "example": {
+            "type": "vector",
+            "data": {
+                "type": "FeatureCollection",
+                "features":[{
+                    "type": "Feature",
+                    "properties": {
+                        "name": "Dinagat Islands"
+                    },
+                    "geometry":{
+                        "type": "Point",
+                        "coordinates": [125.6, 10.1]
+                    }
+                }]
+            }
+        }
+    },
+    "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "layers": []
+  }
--- a/cypress/fixtures/raster-style.json
+++ b/cypress/fixtures/raster-style.json
@@ -0,0 +1,18 @@
+{
+    "id": "test-style",
+    "version": 8,
+    "name": "Test Style",
+    "metadata": {
+      "maputnik:renderer": "mlgljs"
+    },
+    "sources": {
+        "raster": {
+            "tileSize": 256,
+            "tiles": ["http://localhost/example/{x}/{y}/{z}"],
+            "type": "raster"
+        }
+      },
+    "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "layers": []
+  }
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
--- a/cypress/support/e2e.ts
+++ b/cypress/support/e2e.ts
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -133,6 +133,8 @@
    "@storybook/addons": "^6.4.20",
    "@storybook/react": "^6.4.20",
    "@storybook/theming": "^6.4.20",
+    "@types/cors": "^2.8.17",
+    "@types/uuid": "^9.0.7",
    "@wdio/cli": "^7.19.3",
    "@wdio/local-runner": "^7.19.3",
    "@wdio/mocha-framework": "^7.19.3",
@@ -145,6 +147,7 @@
    "cors": "^2.8.5",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.7",
+    "cypress": "^13.6.1",
    "eslint": "^8.12.0",
    "eslint-plugin-react": "^7.29.4",
    "express": "^4.17.3",
@@ -163,7 +166,7 @@
    "stylelint-scss": "^4.2.0",
    "svg-inline-loader": "^0.8.2",
    "transform-loader": "^0.2.4",
-    "typescript": "^4.6.3",
+    "typescript": "^4.9.5",
    "uuid": "^8.3.2",
    "webdriverio": "^7.19.3",
    "webpack": "^4.46.0",
--- a/test/geojson-server.js
+++ b/test/geojson-server.js
@@ -1,98 +0,0 @@
-const cors       = require("cors");
-const express    = require("express");
-const fs         = require("fs");
-const sourceData = require("./sources");
-
-
-var app = express();
-
-app.use(cors());
-
-
-function buildStyle(opts) {
-  opts = opts || {};
-  opts = Object.assign({
-    sources: {}
-  }, opts);
-
-  return {
-    "id": "test-style",
-    "version": 8,
-    "name": "Test Style",
-    "metadata": {
-      "maputnik:renderer": "mlgljs"
-    },
-    "sources": opts.sources,
-    "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
-    "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
-    "layers": []
-  }
-}
-
-function buildGeoJSONSource(data) {
-  return {
-    type: "vector",
-    data: data
-  };
-}
-
-function buildResterSource(req, key) {
-  return {
-    "tileSize": 256,
-    "tiles": [
-      req.protocol + '://' + req.get('host') + "/" + key + "/{x}/{y}/{z}"
-    ],
-    "type": "raster"
-  };
-}
-
-
-app.get("/sources/raster/{x}/{y}/{z}", function(req, res) {
-  res.status(404).end();
-})
-
-app.get("/styles/empty/:sources", function(req, res) {
-  var reqSources = req.params.sources.split(",");
-
-  var sources = {};
-  reqSources.forEach(function(key) {
-    var parts = key.split(":");
-    var type = parts[0];
-    var key = parts[1];
-
-    if(type === "geojson") {
-      sources[key] = buildGeoJSONSource(sourceData[key]);
-    }
-    else if(type === "raster") {
-      sources[key] = buildResterSource(req, key);
-    }
-    else {
-      console.error("ERR: Invalid type: %s", type);
-      throw "Invalid type"
-    }
-  });
-
-  var json = buildStyle({
-    sources: sources
-  });
-  res.send(json);
-})
-
-app.get("/example-layer-style.json", function(req, res) {
-  res.json(
-    JSON.parse(
-      fs.readFileSync(__dirname+"/example-layer-style.json").toString()
-    )
-  );
-})
-
-app.get("/example-style.json", function(req, res) {
-  res.json(
-    JSON.parse(
-      fs.readFileSync(__dirname+"/example-style.json").toString()
-    )
-  );
-})
-
-
-module.exports = app;
--- a/test/sources/example.json
+++ b/test/sources/example.json
@@ -1,15 +0,0 @@
-{
-  "type":"FeatureCollection",
-  "features":[
-    {
-      "type":"Feature",
-      "properties": {
-        "name": "Dinagat Islands"
-      },
-      "geometry":{
-        "type": "Point",
-        "coordinates": [125.6, 10.1]
-      }
-    }
-  ]
-}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,103 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "commonjs",                                /* Specify what module code is generated. */
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+
+    /* Type Checking */
+    "strict": true,                                      /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+  }
+}