Fix and slipt tests, remove as any.

cypress/e2e/layer-editor.cy.ts

@@ -0,0 +1,260 @@
+import { MaputnikDriver } from "./maputnik-driver";
+import { v1 as uuid } from "uuid";
+
+describe("layer editor", () => {
+  const { beforeAndAfter, get, when, then } = new MaputnikDriver();
+  beforeAndAfter();
+  beforeEach(() => {
+    when.setStyle("both");
+    when.modal.open();
+  });
+
+  function createBackground() {
+    const id = uuid();
+
+    when.selectWithin("add-layer.layer-type", "background");
+    when.setValue("add-layer.layer-id.input", "background:" + id);
+
+    when.click("add-layer");
+
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
+        {
+          id: "background:" + id,
+          type: "background",
+        },
+      ],
+    });
+    return id;
+  }
+
+  it("expand/collapse");
+  it("id", () => {
+    const bgId = createBackground();
+
+    when.click("layer-list-item:background:" + bgId);
+
+    const id = uuid();
+    when.setValue("layer-editor.layer-id.input", "foobar:" + id);
+    when.click("min-zoom");
+
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
+        {
+          id: "foobar:" + id,
+          type: "background",
+        },
+      ],
+    });
+  });
+
+  describe("source", () => {
+    it("should show error when the source is invalid", () => {
+      when.modal.fillLayers({
+        type: "circle",
+        layer: "invalid",
+      });
+      then(get.element(".maputnik-input-block--error .maputnik-input-block-label")).shouldHaveCss("color", "rgb(207, 74, 74)");
+    });
+  });
+
+  describe("min-zoom", () => {
+    let bgId: string;
+
+    beforeEach(() => {
+      bgId = createBackground();
+      when.click("layer-list-item:background:" + bgId);
+      when.setValue("min-zoom.input-text", "1");
+      when.click("layer-editor.layer-id");
+    });
+
+    it("should update min-zoom in local storage", () => {
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: "background:" + bgId,
+            type: "background",
+            minzoom: 1,
+          },
+        ],
+      });
+    });
+
+    it("when clicking next layer should update style on local storage", () => {
+      when.type("min-zoom.input-text", "{backspace}");
+      when.click("max-zoom.input-text");
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: "background:" + bgId,
+            type: "background",
+            minzoom: 1,
+          },
+        ],
+      });
+    });
+  });
+
+  describe("max-zoom", () => {
+    let bgId: string;
+
+    beforeEach(() => {
+      bgId = createBackground();
+      when.click("layer-list-item:background:" + bgId);
+      when.setValue("max-zoom.input-text", "1");
+      when.click("layer-editor.layer-id");
+    });
+
+    it("should update style in local storage", () => {
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: "background:" + bgId,
+            type: "background",
+            maxzoom: 1,
+          },
+        ],
+      });
+    });
+  });
+
+  describe("comments", () => {
+    let bgId: string;
+    const comment = "42";
+
+    beforeEach(() => {
+      bgId = createBackground();
+      when.click("layer-list-item:background:" + bgId);
+      when.setValue("layer-comment.input", comment);
+      when.click("layer-editor.layer-id");
+    });
+
+    it("should update style in local storage", () => {
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: "background:" + bgId,
+            type: "background",
+            metadata: {
+              "maputnik:comment": comment,
+            },
+          },
+        ],
+      });
+    });
+
+    describe("when unsetting", () => {
+      beforeEach(() => {
+        when.clear("layer-comment.input");
+        when.click("min-zoom.input-text");
+      });
+
+      it("should update style in local storage", () => {
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [
+            {
+              id: "background:" + bgId,
+              type: "background",
+            },
+          ],
+        });
+      });
+    });
+  });
+
+  describe("color", () => {
+    let bgId: string;
+    beforeEach(() => {
+      bgId = createBackground();
+      when.click("layer-list-item:background:" + bgId);
+      when.click("spec-field:background-color");
+    });
+
+    it("should update style in local storage", () => {
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: "background:" + bgId,
+            type: "background",
+          },
+        ],
+      });
+    });
+  });
+
+  describe("opacity", () => {
+    let bgId: string;
+    beforeEach(() => {
+      bgId = createBackground();
+      when.click("layer-list-item:background:" + bgId);
+      when.type("spec-field-input:background-opacity", "0.");
+    });
+
+    it("should keep '.' in the input field", () => {
+      then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0.");
+    });
+
+    it("should revert to a valid value when focus out", () => {
+      when.click("layer-list-item:background:" + bgId);
+      then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0");
+    });
+  });
+
+      
+
+  describe("filter", () => {
+    it("expand/collapse");
+    it("compound filter");
+  });
+
+  describe("paint", () => {
+    it("expand/collapse");
+    it("color");
+    it("pattern");
+    it("opacity");
+  });
+
+  describe("json-editor", () => {
+    it("add", () => {
+      const id = when.modal.fillLayers({
+        type: "circle",
+        layer: "example",
+      });
+
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        layers: [
+          {
+            id: id,
+            type: "circle",
+            source: "example",
+          },
+        ],
+      });
+
+      const sourceText = get.elementByText('"source"');
+
+      sourceText.click();
+      sourceText.type("\"");
+
+      then(get.element(".cm-lint-marker-error")).shouldExist();
+    });
+
+
+    it("expand/collapse");
+    it("modify");
+
+    it("parse error", () => {
+      const bgId = createBackground();
+
+      when.click("layer-list-item:background:" + bgId);
+      when.collapseGroupInLayerEditor();
+      when.collapseGroupInLayerEditor(1);
+      then(get.element(".cm-lint-marker-error")).shouldNotExist();
+
+      when.appendTextInJsonEditor(
+        "\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
+      );
+      then(get.element(".cm-lint-marker-error")).shouldExist();
+    });
+  });
+});

cypress/e2e/layers-list.cy.ts

@@ -1,7 +1,6 @@
-import { v1 as uuid } from "uuid";
 import { MaputnikDriver } from "./maputnik-driver";
 
-describe("layers", () => {
+describe("layers list", () => {
   const { beforeAndAfter, get, when, then } = new MaputnikDriver();
   beforeAndAfter();
   beforeEach(() => {
@@ -132,227 +131,7 @@ describe("layers", () => {
       });
     });
 
-    describe("modify", () => {
+    describe("modify", () => {});
-      function createBackground() {
-        // Setup
-        const id = uuid();
-
-        when.selectWithin("add-layer.layer-type", "background");
-        when.setValue("add-layer.layer-id.input", "background:" + id);
-
-        when.click("add-layer");
-
-        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          layers: [
-            {
-              id: "background:" + id,
-              type: "background",
-            },
-          ],
-        });
-        return id;
-      }
-
-      // ====> THESE SHOULD BE FROM THE SPEC
-      describe("layer", () => {
-        it("expand/collapse");
-        it("id", () => {
-          const bgId = createBackground();
-
-          when.click("layer-list-item:background:" + bgId);
-
-          const id = uuid();
-          when.setValue("layer-editor.layer-id.input", "foobar:" + id);
-          when.click("min-zoom");
-
-          then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-            layers: [
-              {
-                id: "foobar:" + id,
-                type: "background",
-              },
-            ],
-          });
-        });
-
-        describe("min-zoom", () => {
-          let bgId: string;
-
-          beforeEach(() => {
-            bgId = createBackground();
-            when.click("layer-list-item:background:" + bgId);
-            when.setValue("min-zoom.input-text", "1");
-            when.click("layer-editor.layer-id");
-          });
-
-          it("should update min-zoom in local storage", () => {
-            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-              layers: [
-                {
-                  id: "background:" + bgId,
-                  type: "background",
-                  minzoom: 1,
-                },
-              ],
-            });
-          });
-
-          it("when clicking next layer should update style on local storage", () => {
-            when.type("min-zoom.input-text", "{backspace}");
-            when.click("max-zoom.input-text");
-            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-              layers: [
-                {
-                  id: "background:" + bgId,
-                  type: "background",
-                  minzoom: 1,
-                },
-              ],
-            });
-          });
-        });
-
-        describe("max-zoom", () => {
-          let bgId: string;
-
-          beforeEach(() => {
-            bgId = createBackground();
-            when.click("layer-list-item:background:" + bgId);
-            when.setValue("max-zoom.input-text", "1");
-            when.click("layer-editor.layer-id");
-          });
-
-          it("should update style in local storage", () => {
-            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-              layers: [
-                {
-                  id: "background:" + bgId,
-                  type: "background",
-                  maxzoom: 1,
-                },
-              ],
-            });
-          });
-        });
-
-        describe("comments", () => {
-          let bgId: string;
-          const comment = "42";
-
-          beforeEach(() => {
-            bgId = createBackground();
-            when.click("layer-list-item:background:" + bgId);
-            when.setValue("layer-comment.input", comment);
-            when.click("layer-editor.layer-id");
-          });
-
-          it("should update style in local storage", () => {
-            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-              layers: [
-                {
-                  id: "background:" + bgId,
-                  type: "background",
-                  metadata: {
-                    "maputnik:comment": comment,
-                  },
-                },
-              ],
-            });
-          });
-
-          describe("when unsetting", () => {
-            beforeEach(() => {
-              when.clear("layer-comment.input");
-              when.click("min-zoom.input-text");
-            });
-
-            it("should update style in local storage", () => {
-              then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-                layers: [
-                  {
-                    id: "background:" + bgId,
-                    type: "background",
-                  },
-                ],
-              });
-            });
-          });
-        });
-
-        describe("color", () => {
-          let bgId: string;
-          beforeEach(() => {
-            bgId = createBackground();
-            when.click("layer-list-item:background:" + bgId);
-            when.click("spec-field:background-color");
-          });
-
-          it("should update style in local storage", () => {
-            then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-              layers: [
-                {
-                  id: "background:" + bgId,
-                  type: "background",
-                },
-              ],
-            });
-          });
-        });
-
-        describe("opacity", () => {
-          let bgId: string;
-          beforeEach(() => {
-            bgId = createBackground();
-            when.click("layer-list-item:background:" + bgId);
-            when.type("spec-field-input:background-opacity", "0.");
-          });
-
-          it("should keep '.' in the input field", () => {
-            then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0.");
-          });
-
-          it("should revert to a valid value when focus out", () => {
-            when.click("layer-list-item:background:" + bgId);
-            then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0");
-          });
-        });
-
-      });
-
-      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", () => {
-          const bgId = createBackground();
-
-          when.click("layer-list-item:background:" + bgId);
-
-          const errorSelector = ".CodeMirror-lint-marker-error";
-          then(get.elementByTestId(errorSelector)).shouldNotExist();
-
-          when.click(".CodeMirror");
-          when.typeKeys(
-            "\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
-          );
-          then(get.elementByTestId(errorSelector)).shouldExist();
-        });
-      });
-    });
   });
 
   describe("fill", () => {
@@ -658,7 +437,7 @@ describe("layers", () => {
       });
       when.collapseGroupInLayerEditor();
       when.click("make-elevation-function");
-      then(get.element("[data-wd-key='spec-field-container:color-relief-color'] .CodeMirror-line")).shouldBeVisible();
+      then(get.element("[data-wd-key='spec-field-container:color-relief-color'] .cm-line")).shouldBeVisible();
     });
   });
 
@@ -698,48 +477,6 @@ describe("layers", () => {
     });
   });
 
-  describe("layers editor", () => {
-    describe("property fields", () => {
-      it("should show error", () => {
-        when.modal.fillLayers({
-          type: "circle",
-          layer: "invalid",
-        });
-
-        then(get.element(".maputnik-input-block--error .maputnik-input-block-label")).shouldHaveCss("color", "rgb(207, 74, 74)");
-      });
-    });
-
-    describe("jsonlint should error", ()=>{
-      it("add", () => {
-        const id = when.modal.fillLayers({
-          type: "circle",
-          layer: "example",
-        });
-
-        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-          layers: [
-            {
-              id: id,
-              type: "circle",
-              source: "example",
-            },
-          ],
-        });
-
-        const sourceText = get.elementByText('"source"');
-
-        sourceText.click();
-        sourceText.type("\"");
-
-        const error = get.element(".CodeMirror-lint-marker-error");
-        error.should("exist");
-      });
-    });
-  });
-
-
-
   describe("drag and drop", () => {
     it("move layer should update local storage", () => {
       when.modal.open();

cypress/e2e/maputnik-driver.ts

@@ -195,6 +195,10 @@ export class MaputnikDriver {
 
     collapseGroupInLayerEditor: (index = 0) => {
       this.helper.get.element(".maputnik-layer-editor-group__button").eq(index).realClick();
+    },
+
+    appendTextInJsonEditor: (text: string) => {
+      this.helper.get.element(".cm-line").first().click().type(text, { parseSpecialCharSequences: false });
     }
   };
 

src/components/FilterEditor.tsx

@@ -294,7 +294,6 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
               this.props.onChange(defaultFilter);
             }}
             fieldName="filter"
-            fieldSpec={fieldSpec as any}
             value={filter}
             errors={errors}
             onChange={this.props.onChange}

src/components/InputJson.tsx

@@ -127,7 +127,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
       style.maxHeight = this.props.maxHeight;
     }
 
-    return <div className="JSONEditor" onPointerDown={this.onPointerDown} aria-hidden="true">
+    return <div className="JSONEditor" data-wd-key="json-editor" onPointerDown={this.onPointerDown} aria-hidden="true">
       <div
         className={classnames("codemirror-container", this.props.className)}
         ref={(el) => {this._el = el;}}

src/libs/codemirror-mgl.ts

@@ -137,7 +137,7 @@ function createMaplibreStyleLinter() {
   };
 }
 
-function createMaplibreExpressionLinter(spec: StylePropertySpecification) {
+function createMaplibreExpressionLinter(spec?: StylePropertySpecification) {
   return (view: EditorView) => {
     const text = view.state.doc.toString();
     const parsedJson = JSON.parse(text);
@@ -169,9 +169,6 @@ export function createEditor(props: {
       specificLinter = createMaplibreLayerLinter();
       break;
     case "expression":
-      if (!props.spec) {
-        throw new Error("spec is required for expression mode");
-      }
       specificLinter = createMaplibreExpressionLinter(props.spec);
       break;
     case "json":