Improve tests

cypress/e2e/driver.ts

@@ -71,7 +71,7 @@ export default class MaputnikDriver {
       if (styleProperties) {
         cy.on("window:confirm", () => true);
       }
-      cy.get(".maputnik-toolbar-link").should("be.visible");
+      this.helper.get.element("toolbar:link").should("be.visible");
     },
     fillLayersModal: (opts: {type: string, layer?: string, id?: string}) => {
       var type = opts.type;
@@ -83,22 +83,24 @@ export default class MaputnikDriver {
         id = `${type}:${uuid()}`;
       }
 
-      cy.get(
-        this.get.dataAttribute("add-layer.layer-type", "select")
-      ).select(type);
-      cy.get(this.get.dataAttribute("add-layer.layer-id", "input")).type(id);
+      this.helper.get.element("add-layer.layer-type.select").select(type);
+      this.helper.get.element("add-layer.layer-id.input").type(id);
       if (layer) {
-        cy.get(
-          this.get.dataAttribute("add-layer.layer-source-block", "input")
-        ).type(layer);
+        this.when.within("add-layer.layer-source-block", () => {
+          cy.get("input").type(layer!);
+        })
       }
       this.when.click("add-layer");
 
       return id;
     },
 
-    typeKeys: (keys: string) => {
-      cy.get("body").type(keys);
+    typeKeys: (keys: string, selector?: string) => {
+      if (selector) {
+        this.helper.get.element(selector).type(keys);
+      } else {
+        cy.get("body").type(keys);
+      }
     },
 
     click: (selector: string) => {
@@ -124,7 +126,7 @@ export default class MaputnikDriver {
     },
 
     setValue: (selector: string, text: string) => {
-      cy.get(selector).clear().type(text, { parseSpecialCharSequences: false });
+      this.helper.get.element(selector).clear().type(text, { parseSpecialCharSequences: false });
     },
 
     closeModal: (key: string) => {
@@ -135,8 +137,8 @@ export default class MaputnikDriver {
     openLayersModal: () => {
       this.helper.when.click("layer-list:add-layer");
 
-      cy.get(this.get.dataAttribute("modal:add-layer")).should("exist");
-      cy.get(this.get.dataAttribute("modal:add-layer")).should("be.visible");
+      this.helper.get.element("modal:add-layer").should("exist");
+      this.helper.get.element("modal:add-layer").should("be.visible");
     },
   };
 
@@ -153,9 +155,6 @@ export default class MaputnikDriver {
     exampleFileUrl: () => {
       return "http://localhost:8888/example-style.json";
     },
-    dataAttribute: (key: string, selector?: string): string => {
-      return `*[data-wd-key='${key}'] ${selector || ""}`;
-    },
   };
 
   public should = {

cypress/e2e/layers.cy.ts

@@ -134,10 +134,7 @@ describe("layers", () => {
         var id = uuid();
 
         when.selectWithin("add-layer.layer-type", "background");
-        when.setValue(
-          get.dataAttribute("add-layer.layer-id", "input"),
-          "background:" + id
-        );
+        when.setValue("add-layer.layer-id.input", "background:" + id);
 
         when.click("add-layer");
 
@@ -162,10 +159,7 @@ describe("layers", () => {
           when.click("layer-list-item:background:" + bgId);
 
           var id = uuid();
-          when.setValue(
-            get.dataAttribute("layer-editor.layer-id", "input"),
-            "foobar:" + id
-          );
+          when.setValue("layer-editor.layer-id.input", "foobar:" + id);
           when.click("min-zoom");
 
           should.equalStyleStore(
@@ -183,10 +177,7 @@ describe("layers", () => {
           var bgId = createBackground();
 
           when.click("layer-list-item:background:" + bgId);
-          when.setValue(
-            get.dataAttribute("min-zoom", 'input[type="text"]'),
-            "1"
-          );
+          when.setValue("min-zoom.input-text", "1");
 
           when.click("layer-editor.layer-id");
 
@@ -202,25 +193,20 @@ describe("layers", () => {
           );
 
           // AND RESET!
-          // driver.setValue(driver.get.dataAttribute("min-zoom", "input"), "")
-          // driver.click(driver.get.dataAttribute("max-zoom", "input"));
-
-          // driver.isStyleStoreEqual((a: any) => a.layers, [
-          //   {
-          //     "id": 'background:'+bgId,
-          //     "type": 'background'
-          //   }
-          // ]);
+          when.typeKeys("{backspace}", "min-zoom.input-text");
+          when.click("max-zoom.input-text");
+
+          should.equalStyleStore((a: any) => a.layers, [{
+            "id": 'background:'+bgId,
+            "type": 'background'
+          }]);
         });
 
         it("max-zoom", () => {
           var bgId = createBackground();
 
           when.click("layer-list-item:background:" + bgId);
-          when.setValue(
-            get.dataAttribute("max-zoom", 'input[type="text"]'),
-            "1"
-          );
+          when.setValue("max-zoom.input-text", "1");
 
           when.click("layer-editor.layer-id");
 
@@ -238,10 +224,10 @@ describe("layers", () => {
 
         it("comments", () => {
           var bgId = createBackground();
-          var id = uuid();
+          var comment = "42";
 
           when.click("layer-list-item:background:" + bgId);
-          when.setValue(get.dataAttribute("layer-comment", "textarea"), id);
+          when.setValue("layer-comment.input", comment);
 
           when.click("layer-editor.layer-id");
 
@@ -252,23 +238,20 @@ describe("layers", () => {
                 id: "background:" + bgId,
                 type: "background",
                 metadata: {
-                  "maputnik:comment": id,
+                  "maputnik:comment": comment,
                 },
               },
             ]
           );
 
           // Unset it again.
-          // TODO: This fails
-          // driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), "");
-          // driver.click(driver.getDataAttribute("min-zoom", "input"));
-
-          // driver.isStyleStoreEqual((a: any) => a.layers, [
-          //   {
-          //     "id": 'background:'+bgId,
-          //     "type": 'background'
-          //   }
-          // ]);
+          when.typeKeys("{backspace}{backspace}", "layer-comment.input");
+          when.click("min-zoom.input-text");
+
+          should.equalStyleStore((a: any) => a.layers, [{
+            "id": 'background:' + bgId,
+            "type": 'background'
+          }]);
         });
 
         it("color", () => {

cypress/e2e/modals.cy.ts

@@ -26,7 +26,7 @@ describe("modals", () => {
     it("load from url", () => {
       var styleFileUrl = get.exampleFileUrl();
 
-      when.setValue(get.dataAttribute("modal:open.url.input"), styleFileUrl);
+      when.setValue("modal:open.url.input", styleFileUrl);
       when.click("modal:open.url.button");
       when.waitForExampleFileRequset();
 
@@ -83,30 +83,27 @@ describe("modals", () => {
     });
 
     it("show name specifications", () => {
-      when.setValue(get.dataAttribute("modal:settings.name"), "foobar");
+      when.setValue("modal:settings.name", "foobar");
       when.click("modal:settings.owner");
 
       should.equalStyleStore((obj) => obj.name, "foobar");
     });
 
     it("owner", () => {
-      when.setValue(get.dataAttribute("modal:settings.owner"), "foobar");
+      when.setValue("modal:settings.owner", "foobar");
       when.click("modal:settings.name");
 
       should.equalStyleStore((obj) => obj.owner, "foobar");
     });
     it("sprite url", () => {
-      when.setValue(
-        get.dataAttribute("modal:settings.sprite"),
-        "http://example.com"
-      );
+      when.setValue("modal:settings.sprite", "http://example.com");
       when.click("modal:settings.name");
 
       should.equalStyleStore((obj) => obj.sprite, "http://example.com");
     });
     it("glyphs url", () => {
       var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
-      when.setValue(get.dataAttribute("modal:settings.glyphs"), glyphsUrl);
+      when.setValue("modal:settings.glyphs", glyphsUrl);
       when.click("modal:settings.name");
 
       should.equalStyleStore((obj) => obj.glyphs, glyphsUrl);
@@ -115,9 +112,7 @@ describe("modals", () => {
     it("maptiler access token", () => {
       var apiKey = "testing123";
       when.setValue(
-        get.dataAttribute(
-          "modal:settings.maputnik:openmaptiles_access_token"
-        ),
+        "modal:settings.maputnik:openmaptiles_access_token",
         apiKey
       );
       when.click("modal:settings.name");
@@ -130,12 +125,7 @@ describe("modals", () => {
 
     it("thunderforest access token", () => {
       var apiKey = "testing123";
-      when.setValue(
-        get.dataAttribute(
-          "modal:settings.maputnik:thunderforest_access_token"
-        ),
-        apiKey
-      );
+      when.setValue("modal:settings.maputnik:thunderforest_access_token", apiKey);
       when.click("modal:settings.name");
 
       should.equalStyleStore(

src/components/AppMessagePanel.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {formatLayerId} from '../util/format';
+import {formatLayerId} from '../libs/format';
 import {LayerSpecification, StyleSpecification} from 'maplibre-gl';
 
 type AppMessagePanelProps = {

src/components/AppToolbar.tsx

@@ -36,6 +36,7 @@ class ToolbarLink extends React.Component<ToolbarLinkProps> {
       href={this.props.href}
       rel="noopener noreferrer"
       target="_blank"
+      data-wd-key="toolbar:link"
     >
       {this.props.children}
     </a>
@@ -56,6 +57,7 @@ class ToolbarLinkHighlighted extends React.Component<ToolbarLinkHighlightedProps
       href={this.props.href}
       rel="noopener noreferrer"
       target="_blank"
+      data-wd-key="toolbar:link-highlighted"
     >
       <span className="maputnik-toolbar-link-wrapper">
         {this.props.children}

src/components/FieldComment.tsx

@@ -26,6 +26,7 @@ export default class FieldComment extends React.Component<FieldCommentProps> {
         value={this.props.value}
         onChange={this.props.onChange}
         default="Comment..."
+        data-wd-key="layer-comment.input"
       />
     </Block>
   }

src/components/FieldFunction.tsx

@@ -5,7 +5,7 @@ import DataProperty, { Stop } from './_DataProperty'
 import ZoomProperty from './_ZoomProperty'
 import ExpressionProperty from './_ExpressionProperty'
 import {function as styleFunction} from '@maplibre/maplibre-gl-style-spec';
-import {findDefaultFromSpec} from '../util/spec-helper';
+import {findDefaultFromSpec} from '../libs/spec-helper';
 
 
 function isLiteralExpression(value: any) {

src/components/FieldId.tsx

@@ -20,6 +20,7 @@ export default class FieldId extends React.Component<FieldIdProps> {
       <InputString
         value={this.props.value}
         onInput={this.props.onChange}
+        data-wd-key={this.props.wdKey + ".input"}
       />
     </Block>
   }

src/components/FieldMaxZoom.tsx

@@ -23,6 +23,7 @@ export default class FieldMaxZoom extends React.Component<FieldMaxZoomProps> {
         min={latest.layer.maxzoom.minimum}
         max={latest.layer.maxzoom.maximum}
         default={latest.layer.maxzoom.maximum}
+        data-wd-key="max-zoom.input"
       />
     </Block>
   }

src/components/FieldMinZoom.tsx

@@ -23,6 +23,7 @@ export default class FieldMinZoom extends React.Component<FieldMinZoomProps> {
         min={latest.layer.minzoom.minimum}
         max={latest.layer.minzoom.maximum}
         default={latest.layer.minzoom.minimum}
+        data-wd-key='min-zoom.input'
       />
     </Block>
   }

src/components/FieldType.tsx

@@ -44,6 +44,7 @@ export default class FieldType extends React.Component<FieldTypeProps> {
           ]}
           onChange={this.props.onChange}
           value={this.props.value}
+          data-wd-key={this.props.wdKey + ".select"}
         />
       }
     </Block>

src/components/InputJson.tsx

@@ -8,7 +8,7 @@ import 'codemirror/addon/edit/matchbrackets'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/addon/lint/lint.css'
 import stringifyPretty from 'json-stringify-pretty-compact'
-import '../util/codemirror-mgl';
+import '../libs/codemirror-mgl';
 
 
 export type InputJsonProps = {

src/components/InputNumber.tsx

@@ -9,7 +9,7 @@ export type InputNumberProps = {
   onChange?(value: number | undefined): unknown
   allowRange?: boolean
   rangeStep?: number
-  wdKey?: string
+  "data-wd-key"?: string
   required?: boolean
   "aria-label"?: string
 };
@@ -197,6 +197,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
               dirtyValue: this.state.value,
             });
           }}
+          data-wd-key={this.props["data-wd-key"] + "-range"}
         />
         <input
           key="text"
@@ -215,6 +216,8 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
             this.setState({editing: false});
             this.resetValue()
           }}
+          data-wd-key={this.props["data-wd-key"] + "-text"}
+
         />
       </div>
     }
@@ -233,6 +236,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
         }}
         onBlur={this.resetValue}
         required={this.props.required}
+        data-wd-key={this.props["data-wd-key"]}
       />
     }
   }

src/components/LayerEditor.tsx

@@ -18,7 +18,7 @@ import FieldSource from './FieldSource'
 import FieldSourceLayer from './FieldSourceLayer'
 import { changeType, changeProperty } from '../libs/layer'
 import layout from '../config/layout.json'
-import {formatLayerId} from '../util/format';
+import {formatLayerId} from '../libs/format';
 
 
 function getLayoutForType(type: LayerSpecification["type"]) {

src/components/_DataProperty.tsx

@@ -10,9 +10,9 @@ import InputSelect from './InputSelect'
 import Block from './Block'
 import docUid from '../libs/document-uid'
 import sortNumerically from '../libs/sort-numerically'
-import {findDefaultFromSpec} from '../util/spec-helper';
+import {findDefaultFromSpec} from '../libs/spec-helper';
 
-import labelFromFieldName from './_labelFromFieldName'
+import labelFromFieldName from '../libs/label-from-field-name'
 import DeleteStopButton from './_DeleteStopButton'