Add dependabot (#826)

It has a low limit on how many PRs it's allowed to open at a time, so it
should not flood the repo.

.github/dependabot.yml

@@ -0,0 +1,14 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    open-pull-requests-limit: 2
+    versioning-strategy: increase
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    open-pull-requests-limit: 2
+    versioning-strategy: increase

.github/workflows/ci.yml

@@ -34,7 +34,7 @@ jobs:
         os: [ubuntu-latest]
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - run: docker build -t docker.pkg.github.com/maputnik/editor/editor:master .
 
   # build the editor
@@ -48,10 +48,10 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        node-version: [16.x]
+        node-version: [18.x]
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
@@ -74,10 +74,10 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest]
-        node-version: [16.x]
+        node-version: [18.x]
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
@@ -115,7 +115,7 @@ jobs:
       id: go
 
     - name: Check out code into the Go module directory
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
       with:
         repository: maputnik/desktop
         ref: master
@@ -153,7 +153,7 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest]
-        node-version: [16]
+        node-version: [18]
         browser: [chrome, firefox]
 
     container:
@@ -162,14 +162,13 @@ jobs:
 
     services:
       selenium:
-        # geckodriver-0.31 seems to have problems as of 2022 May 1
-        image: selenium/standalone-${{ matrix.browser == 'firefox' && 'firefox:99.0-geckodriver-0.30-20220427' || matrix.browser }}
+        image: selenium/standalone-${{ matrix.browser }}
         ports:
         - 4444:4444
         options: --shm-size=2gb
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - uses: actions/cache@v1
       with:
         path: ~/.npm

.github/workflows/deploy.yml

@@ -8,7 +8,7 @@ on:
       - 'v*'
 
 jobs:
-  # publish docker to github registry
+  # publish docker to GitHub registry
   deploy-docker:
     name: deploy/docker
     runs-on: ${{ matrix.os }}
@@ -21,8 +21,7 @@ jobs:
         os: [ubuntu-latest]
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login docker.pkg.github.com -u orangemug --password-stdin
     - run: docker build -t docker.pkg.github.com/maputnik/editor/editor:master .
     - run: docker push docker.pkg.github.com/maputnik/editor/editor:master
-

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10 as builder
+FROM node:18 as builder
 WORKDIR /maputnik
 
 # Only copy package.json to prevent npm install from running on every build

README.md

@@ -7,7 +7,7 @@
 [github-action-ci]: https://github.com/maputnik/editor/actions?query=workflow%3Aci
 [license]:          https://tldrlegal.com/license/mit-license
 
-A free and open visual editor for the [Mapbox GL styles](https://www.mapbox.com/mapbox-gl-style-spec/)
+A free and open visual editor for the [MapLibre GL styles](https://maplibre.org/maplibre-style-spec/)
 targeted at developers and map designers.
 
 
@@ -36,7 +36,7 @@ The documentation can be found in the [Wiki](https://github.com/maputnik/editor/
 
 ## Develop
 
-Maputnik is written in ES6 and is using [React](https://github.com/facebook/react) and [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/).
+Maputnik is written in ES6 and is using [React](https://github.com/facebook/react) and [MapLibre GL JS](https://maplibre.org/projects/maplibre-gl-js/).
 
 We ensure building and developing Maputnik works with the [current active LTS Node.js version and above](https://github.com/nodejs/Release#release-schedule).
 

config/wdio.conf.js

@@ -11,6 +11,7 @@ var SCREENSHOT_PATH = artifacts.pathSync("screenshots");
 exports.config = {
   runner: 'local',
   path: '/wd/hub',
+
   specs: [
     './test/functional/index.js'
   ],
@@ -19,11 +20,14 @@ exports.config = {
     {
       maxInstances: 5,
       browserName: (process.env.BROWSER || 'chrome'),
+      'goog:chromeOptions': {
+        args: ['headless=new']
+      }
     }
   ],
   // geckodriver-0.31 seems to have problems as of 2022 May 1
-  services: process.env.DOCKER_HOST ? [] : [ ['selenium-standalone', { drivers: { firefox: '0.30.0', chrome: 'latest' } } ] ],
-  logLevel: 'info',
+  services: process.env.DOCKER_HOST ? [] : [ ['selenium-standalone', { drivers: { firefox: 'latest', chrome: 'latest' } } ] ],
+  logLevel: 'warn',
   bail: 0,
   screenshotPath: SCREENSHOT_PATH,
   hostname: process.env.DOCKER_HOST || "0.0.0.0",

config/webpack.config.js

@@ -25,9 +25,6 @@ module.exports = {
     extensions: ['.js', '.jsx']
   },
   module: {
-    noParse: [
-      /mapbox-gl\/dist\/mapbox-gl.js/
-    ],
     rules: rules
   },
   node: {

config/webpack.production.config.js

@@ -23,9 +23,6 @@ module.exports = {
     extensions: ['.js', '.jsx']
   },
   module: {
-    noParse: [
-      /mapbox-gl\/dist\/mapbox-gl.js/
-    ],
     rules: rules
   },
   node: {

package.json

@@ -4,19 +4,19 @@
   "description": "A MapLibre GL visual style editor",
   "main": "''",
   "scripts": {
-    "stats": "webpack --config config/webpack.production.config.js --progress=profile --json > stats.json",
-    "build": "webpack --config config/webpack.production.config.js --progress=profile --color",
-    "profiling-build": "webpack --config config/webpack.profiling.config.js --progress=profile --color",
-    "test": "cross-env NODE_ENV=test wdio config/wdio.conf.js",
-    "test-watch": "cross-env NODE_ENV=test wdio config/wdio.conf.js --watch",
-    "start": "webpack-dev-server --progress=profile --color --config config/webpack.config.js",
-    "start-prod": "webpack-dev-server --progress=profile --color --config config/webpack.production.config.js",
-    "start-sandbox": "webpack-dev-server --disable-host-check --host 0.0.0.0 --progress=profile --color --config config/webpack.production.config.js",
+    "stats": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config config/webpack.production.config.js --progress=profile --json > stats.json",
+    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config config/webpack.production.config.js --progress=profile --color",
+    "profiling-build": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config config/webpack.profiling.config.js --progress=profile --color",
+    "test": "cross-env NODE_OPTIONS=--openssl-legacy-provider cross-env NODE_ENV=test wdio config/wdio.conf.js",
+    "test-watch": "cross-env NODE_OPTIONS=--openssl-legacy-provider cross-env NODE_ENV=test wdio config/wdio.conf.js --watch",
+    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --progress=profile --color --config config/webpack.config.js",
+    "start-prod": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --progress=profile --color --config config/webpack.production.config.js",
+    "start-sandbox": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --disable-host-check --host 0.0.0.0 --progress=profile --color --config config/webpack.production.config.js",
     "lint-js": "eslint --ext js --ext jsx src test",
     "lint-css": "stylelint \"src/styles/*.scss\"",
     "lint": "npm run lint-js && npm run lint-css",
-    "storybook": "start-storybook -h 0.0.0.0 -p 6006",
-    "build-storybook": "build-storybook -o build/storybook"
+    "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -h 0.0.0.0 -p 6006",
+    "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook -o build/storybook"
   },
   "repository": {
     "type": "git",

src/components/App.jsx

@@ -9,7 +9,7 @@ import {arrayMoveMutable} from 'array-move'
 import url from 'url'
 import hash from "string-hash";
 
-import MapMapboxGl from './MapMapboxGl'
+import MapMaplibreGl from './MapMaplibreGl'
 import MapOpenLayers from './MapOpenLayers'
 import LayerList from './LayerList'
 import LayerEditor from './LayerEditor'
@@ -136,7 +136,7 @@ export default class App extends React.Component {
       {
         key: "m",
         handler: () => {
-          document.querySelector(".mapboxgl-canvas").focus();
+          document.querySelector(".maplibregl-canvas").focus();
         }
       },
       {
@@ -220,7 +220,7 @@ export default class App extends React.Component {
         survey: false,
         debug: false,
       },
-      mapboxGlDebugOptions: {
+      maplibreGlDebugOptions: {
         showTileBoundaries: false,
         showCollisionBoxes: false,
         showOverdrawInspector: false,
@@ -290,7 +290,7 @@ export default class App extends React.Component {
     // If we're changing renderer reset the map state.
     if (
       property === 'maputnik:renderer' &&
-      value !== get(this.state.mapStyle, ['metadata', 'maputnik:renderer'], 'mbgljs')
+      value !== get(this.state.mapStyle, ['metadata', 'maputnik:renderer'], 'mlgljs')
     ) {
       this.setState({
         mapState: 'map'
@@ -547,7 +547,7 @@ export default class App extends React.Component {
         ...styleObj,
         metadata: {
           ...styleObj.metadata,
-          'maputnik:renderer': 'mbgljs'
+          'maputnik:renderer': 'mlgljs'
         }
       }
       return changedStyle
@@ -626,7 +626,7 @@ export default class App extends React.Component {
 
   _getRenderer () {
     const metadata = this.state.mapStyle.metadata || {};
-    return metadata['maputnik:renderer'] || 'mbgljs';
+    return metadata['maputnik:renderer'] || 'mlgljs';
   }
 
   onMapChange = (mapView) => {
@@ -665,9 +665,9 @@ export default class App extends React.Component {
         onLayerSelect={this.onLayerSelect}
       />
     } else {
-      mapElement = <MapMapboxGl {...mapProps}
+      mapElement = <MapMaplibreGl {...mapProps}
         onChange={this.onMapChange}
-        options={this.state.mapboxGlDebugOptions}
+        options={this.state.maplibreGlDebugOptions}
         inspectModeEnabled={this.state.mapState === "inspect"}
         highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
         onLayerSelect={this.onLayerSelect} />
@@ -800,10 +800,10 @@ export default class App extends React.Component {
     });
   }
 
-  onChangeMaboxGlDebug = (key, value) => {
+  onChangeMaplibreGlDebug = (key, value) => {
     this.setState({
-      mapboxGlDebugOptions: {
-        ...this.state.mapboxGlDebugOptions,
+      maplibreGlDebugOptions: {
+        ...this.state.maplibreGlDebugOptions,
         [key]: value,
       }
     });
@@ -870,9 +870,9 @@ export default class App extends React.Component {
     const modals = <div>
       <ModalDebug
         renderer={this._getRenderer()}
-        mapboxGlDebugOptions={this.state.mapboxGlDebugOptions}
+        maplibreGlDebugOptions={this.state.maplibreGlDebugOptions}
         openlayersDebugOptions={this.state.openlayersDebugOptions}
-        onChangeMaboxGlDebug={this.onChangeMaboxGlDebug}
+        onChangeMaplibreGlDebug={this.onChangeMaplibreGlDebug}
         onChangeOpenlayersDebug={this.onChangeOpenlayersDebug}
         isOpen={this.state.isOpen.debug}
         onOpenToggle={this.toggleModal.bind(this, 'debug')}

src/components/AppToolbar.jsx

@@ -133,7 +133,7 @@ export default class AppToolbar extends React.Component {
 
   onSkip = (target) => {
     if (target === "map") {
-      document.querySelector(".mapboxgl-canvas").focus();
+      document.querySelector(".maplibregl-canvas").focus();
     }
     else {
       const el = document.querySelector("#skip-target-"+target);
@@ -152,7 +152,7 @@ export default class AppToolbar extends React.Component {
         id: "inspect",
         group: "general",
         title: "Inspect",
-        disabled: this.props.renderer !== 'mbgljs',
+        disabled: this.props.renderer === 'ol',
       },
       {
         id: "filter-deuteranopia",

src/components/FilterEditor.jsx

@@ -42,7 +42,7 @@ function createStyleFromFilter (filter) {
     "id": "tmp",
     "version": 8,
     "name": "Empty Style",
-    "metadata": {"maputnik:renderer": "mbgljs"},
+    "metadata": {"maputnik:renderer": "mlgljs"},
     "sources": {
       "tmp": {
         "type": "geojson",

src/components/InputSpec.jsx

@@ -32,7 +32,7 @@ function optionsLabelLength(options) {
   return sum
 }
 
-/** Display any field from the Mapbox GL style spec and
+/** Display any field from the Maplibre GL style spec and
  * choose the correct field component based on the @{fieldSpec}
  * to display @{value}. */
 export default class SpecField extends React.Component {

src/components/MapMaplibreGl.jsx

@@ -3,16 +3,16 @@ import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
 import MapLibreGl from 'maplibre-gl'
 import MapboxInspect from 'mapbox-gl-inspect'
-import MapMapboxGlLayerPopup from './MapMapboxGlLayerPopup'
-import MapMapboxGlFeaturePropertyPopup from './MapMapboxGlFeaturePropertyPopup'
+import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup'
+import MapMaplibreGlFeaturePropertyPopup from './MapMaplibreGlFeaturePropertyPopup'
 import tokens from '../config/tokens.json'
 import colors from 'mapbox-gl-inspect/lib/colors'
 import Color from 'color'
 import ZoomControl from '../libs/zoomcontrol'
 import { colorHighlightedLayer } from '../libs/highlight'
 import 'maplibre-gl/dist/maplibre-gl.css'
-import '../mapboxgl.css'
-import '../libs/mapbox-rtl'
+import '../maplibregl.css'
+import '../libs/maplibre-rtl'
 
 
 const IS_SUPPORTED = MapLibreGl.supported();
@@ -52,7 +52,7 @@ function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
   return inspectStyle
 }
 
-export default class MapMapboxGl extends React.Component {
+export default class MapMaplibreGl extends React.Component {
   static propTypes = {
     onDataChange: PropTypes.func,
     onLayerSelect: PropTypes.func.isRequired,
@@ -69,7 +69,6 @@ export default class MapMapboxGl extends React.Component {
     onDataChange: () => {},
     onLayerSelect: () => {},
     onChange: () => {},
-    mapboxAccessToken: tokens.mapbox,
     options: {},
   }
 
@@ -86,7 +85,7 @@ export default class MapMapboxGl extends React.Component {
 
     if(!this.state.map) return
 
-    //Mapbox GL now does diffing natively so we don't need to calculate
+    //Maplibre GL now does diffing natively so we don't need to calculate
     //the necessary operations ourselves!
     this.state.map.setStyle(
       this.props.replaceAccessTokens(props.mapStyle),
@@ -120,7 +119,7 @@ export default class MapMapboxGl extends React.Component {
     if (map) {
       if (this.props.inspectModeEnabled) {
         // HACK: We need to work out why we need to do this and what's causing
-        // this error. I'm assuming an issue with mapbox-gl update and
+        // this error. I'm assuming an issue with maplibre-gl update and
         // mapbox-gl-inspect.
         try {
           this.state.inspect.render();
@@ -182,9 +181,9 @@ export default class MapMapboxGl extends React.Component {
       buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
       renderPopup: features => {
         if(this.props.inspectModeEnabled) {
-          return renderPopup(<MapMapboxGlFeaturePropertyPopup features={features} />, tmpNode);
+          return renderPopup(<MapMaplibreGlFeaturePropertyPopup features={features} />, tmpNode);
         } else {
-          return renderPopup(<MapMapboxGlLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
+          return renderPopup(<MapMaplibreGlLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
         }
       }
     })
@@ -238,7 +237,7 @@ export default class MapMapboxGl extends React.Component {
         className="maputnik-map maputnik-map--error"
       >
         <div className="maputnik-map__error-message">
-          Error: Cannot load MapboxGL, WebGL is either unsupported or disabled
+          Error: Cannot load MaplibreGL, WebGL is either unsupported or disabled
         </div>
       </div>
     }

src/components/MapOpenLayers.jsx

@@ -3,7 +3,7 @@ import {throttle} from 'lodash';
 import PropTypes from 'prop-types'
 import { loadJSON } from '../libs/urlopen'
 
-import MapMapboxGlLayerPopup from './MapMapboxGlLayerPopup';
+import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup';
 
 import 'ol/ol.css'
 import {apply} from 'ol-mapbox-style';
@@ -146,13 +146,13 @@ export default class MapOpenLayers extends React.Component {
         className="maputnik-popup"
       >
         <button
-          className="mapboxgl-popup-close-button"
+          className="maplibregl-popup-close-button"
           onClick={this.closeOverlay}
           aria-label="Close popup"
         >
           ×
         </button>
-        <MapMapboxGlLayerPopup
+        <MapMaplibreGlLayerPopup
           features={this.state.selectedFeatures || []}
           onLayerSelect={this.props.onLayerSelect}
         />

src/components/ModalDebug.jsx

@@ -11,7 +11,7 @@ export default class ModalDebug extends React.Component {
     onChangeMaboxGlDebug: PropTypes.func.isRequired,
     onChangeOpenlayersDebug: PropTypes.func.isRequired,
     onOpenToggle: PropTypes.func.isRequired,
-    mapboxGlDebugOptions: PropTypes.object,
+    maplibreGlDebugOptions: PropTypes.object,
     openlayersDebugOptions: PropTypes.object,
     mapView: PropTypes.object,
   }
@@ -31,9 +31,9 @@ export default class ModalDebug extends React.Component {
     >
       <section className="maputnik-modal-section maputnik-modal-shortcuts">
         <h1>Options</h1>
-        {this.props.renderer === 'mbgljs' &&
+        {this.props.renderer === 'mlgljs' &&
           <ul>
-            {Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => {
+            {Object.entries(this.props.maplibreGlDebugOptions).map(([key, val]) => {
               return <li key={key}>
                 <label>
                   <input type="checkbox" checked={val} onClick={(e) => this.props.onChangeMaboxGlDebug(key, e.target.checked)} /> {key}

src/components/ModalExport.jsx

@@ -14,7 +14,7 @@ import style from '../libs/style'
 import fieldSpecAdditional from '../libs/field-spec-additional'
 
 
-const MAPBOX_GL_VERSION = pkgLockJson.dependencies["mapbox-gl"].version;
+const MAPLIBRE_GL_VERSION = pkgLockJson.dependencies["maplibre-gl"].version;
 
 
 export default class ModalExport extends React.Component {
@@ -58,8 +58,8 @@ export default class ModalExport extends React.Component {
   <meta charset="utf-8" />
   <title>${htmlTitle}</title>
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
-  <script src="https://api.mapbox.com/mapbox-gl-js/v${MAPBOX_GL_VERSION}/mapbox-gl.js"></script>
-  <link href="https://api.mapbox.com/mapbox-gl-js/v${MAPBOX_GL_VERSION}/mapbox-gl.css" rel="stylesheet" />
+  <script src="https://unpkg.com/maplibre-gl@${MAPLIBRE_GL_VERSION}/dist/maplibre-gl.js"></script>
+  <link href="https://unpkg.com/maplibre-gl@${MAPLIBRE_GL_VERSION}/dist/maplibre-gl.css" rel="stylesheet" />
   <style>
     body { margin: 0; padding: 0; }
     #map { position: absolute; top: 0; bottom: 0; width: 100%; }
@@ -68,12 +68,11 @@ export default class ModalExport extends React.Component {
 <body>
   <div id="map"></div>
   <script>
-      mapboxgl.accessToken = 'access_token';
-      const map = new mapboxgl.Map({
+      const map = new maplibregl.Map({
          container: 'map',
          style: ${tokenStyle},
       });
-      map.addControl(new mapboxgl.NavigationControl());
+      map.addControl(new maplibregl.NavigationControl());
   </script>
 </body>
 </html>
@@ -119,12 +118,6 @@ export default class ModalExport extends React.Component {
         </p>
 
         <div>
-          <FieldString
-            label={fieldSpecAdditional.maputnik.mapbox_access_token.label}
-            fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
-            value={(this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token']}
-            onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
-          />
           <FieldString
             label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
             fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}

src/components/ModalSettings.jsx

@@ -117,14 +117,6 @@ export default class ModalSettings extends React.Component {
           onChange={this.changeStyleProperty.bind(this, "glyphs")}
         />
 
-        <FieldString {...inputProps}
-          label={fieldSpecAdditional.maputnik.mapbox_access_token.label}
-          fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
-          data-wd-key="modal:settings.maputnik:mapbox_access_token"
-          value={metadata['maputnik:mapbox_access_token']}
-          onChange={onChangeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
-        />
-
         <FieldString {...inputProps}
           label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
           fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
@@ -241,10 +233,10 @@ export default class ModalSettings extends React.Component {
           fieldSpec={fieldSpecAdditional.maputnik.style_renderer}
           data-wd-key="modal:settings.maputnik:renderer"
           options={[
-            ['mbgljs', 'MapboxGL JS'],
+            ['mlgljs', 'MapLibreGL JS'],
             ['ol', 'Open Layers (experimental)'],
           ]}
-          value={metadata['maputnik:renderer'] || 'mbgljs'}
+          value={metadata['maputnik:renderer'] || 'mlgljs'}
           onChange={onChangeMetadataProperty.bind(this, 'maputnik:renderer')}
         />
       </div>

src/components/ModalSources.jsx

@@ -128,6 +128,7 @@ class AddSource extends React.Component {
       }
       case 'geojson_json': return {
         type: 'geojson',
+        cluster: source.cluster || false,
         data: {}
       }
       case 'tilejson_vector': return {

src/components/ModalSourcesTypeEditor.jsx

@@ -8,6 +8,7 @@ import FieldSelect from './FieldSelect'
 import FieldDynamicArray from './FieldDynamicArray'
 import FieldArray from './FieldArray'
 import FieldJson from './FieldJson'
+import FieldCheckbox from './FieldCheckbox'
 
 
 class TileJSONSourceEditor extends React.Component {
@@ -80,7 +81,7 @@ class TileURLSourceEditor extends React.Component {
         })}
       />
       {this.props.children}
-  </div>
+    </div>
 
   }
 }
@@ -205,23 +206,35 @@ class GeoJSONSourceFieldJsonEditor extends React.Component {
   }
 
   render() {
-    return <Block label={"GeoJSON"} fieldSpec={latest.source_geojson.data}>
-      <FieldJson
-        layer={this.props.source.data}
-        maxHeight={200}
-        mode={{
-          name: "javascript",
-          json: true
-        }}
-        lint={true}
-        onChange={data => {
+    return <div>
+      <Block label={"GeoJSON"} fieldSpec={latest.source_geojson.data}>
+        <FieldJson
+          layer={this.props.source.data}
+          maxHeight={200}
+          mode={{
+            name: "javascript",
+            json: true
+          }}
+          lint={true}
+          onChange={data => {
+            this.props.onChange({
+              ...this.props.source,
+              data,
+            })
+          }}
+        />
+      </Block>
+      <FieldCheckbox
+        label={'Cluster'}
+        value={this.props.source.cluster}
+        onChange={cluster => {
           this.props.onChange({
             ...this.props.source,
-            data,
+            cluster: cluster,
           })
         }}
       />
-    </Block>
+    </div>
   }
 }
 

src/config/tokens.json

@@ -1,5 +1,4 @@
 {
-  "mapbox": "pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6ImNpeHJmNXNmZTAwNHIycXBid2NqdTJibjMifQ.Dv1-GDpTWi0NP6xW9Fct1w",
   "openmaptiles": "KDhMfHvorAFkFe64wlZb",
   "thunderforest": "b71f7f0ba4064f5eb9e903859a9cf5c6"
 }

src/libs/field-spec-additional.js

@@ -1,9 +1,5 @@
 const spec = {
   maputnik: {
-    mapbox_access_token: {
-      label: "Mapbox Access Token",
-      doc: "Public access token for Mapbox services."
-    },
     maptiler_access_token: {
       label: "MapTiler Access Token",
       doc: "Public access token for MapTiler Cloud."

src/libs/layer.js

@@ -32,7 +32,7 @@ export function changeProperty(layer, group, property, newValue) {
     if(group) {
       const newLayer = {
         ...layer,
-        // Change object so the diff works in ./src/components/map/MapboxGlMap.jsx
+        // Change object so the diff works in ./src/components/map/MaplibreGlMap.jsx
         [group]: {
           ...layer[group]
         }

src/libs/layerwatcher.js

@@ -21,8 +21,8 @@ export default class LayerWatcher {
     const previousSources = { ...this._sources }
 
     Object.keys(map.style.sourceCaches).forEach(sourceId => {
-      //NOTE: This heavily depends on the internal API of Mapbox GL
-      //so this breaks between Mapbox GL JS releases
+      //NOTE: This heavily depends on the internal API of Maplibre GL
+      //so this breaks between Maplibre GL JS releases
       this._sources[sourceId] = map.style.sourceCaches[sourceId]._source.vectorLayerIds
     })
 

src/libs/style.js

@@ -116,7 +116,6 @@ function stripAccessTokens(mapStyle) {
   const changedMetadata = {
     ...mapStyle.metadata
   };
-  delete changedMetadata['maputnik:mapbox_access_token'];
   delete changedMetadata['maputnik:openmaptiles_access_token'];
   return {
     ...mapStyle,

src/libs/zoomcontrol.js

@@ -2,7 +2,7 @@ export default class ZoomControl {
   onAdd(map) {
     this._map = map;
     this._container = document.createElement('div');
-    this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapboxgl-ctrl-zoom';
+    this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom';
     this._container.innerHTML = `
       Zoom: <span></span>
     `;

src/maplibregl.css

@@ -1,93 +1,91 @@
-/* TODO */
-
-.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-top .maplibregl-popup-tip {
  border-bottom-color: rgb(28, 31, 36);
 }
 
-.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-left .maplibregl-popup-tip {
   border-right-color: rgb(28, 31, 36);
 }
 
-.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-right .maplibregl-popup-tip {
   border-left-color: rgb(28, 31, 36);
 }
 
-.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
   border-top-color: rgb(28, 31, 36);
 }
 
-.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
  border-bottom-color: rgb(28, 31, 36);
 }
 
-.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
   border-bottom-color: rgb(28, 31, 36);
 }
 
-.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {
   border-top-color: rgb(28, 31, 36);
 }
 
-.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
   border-top-color: rgb(28, 31, 36);
 }
 
-.mapboxgl-popup-content {
+.maplibregl-popup-content {
   background-color: rgb(28, 31, 36);
   box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 5px 0px;
   padding: 0px;
 }
 
-.mapboxgl-popup-close-button {
+.maplibregl-popup-close-button {
   color: white;
 }
 
-.mapboxgl-ctrl-zoom {
+.maplibregl-ctrl-zoom {
   color: #a4a4a4;
   font-weight: bold;
   padding: 4px 8px;
   user-select: none;
 }
 
-.mapboxgl-ctrl-group {
+.maplibregl-ctrl-group {
   background: rgb(28, 31, 36);
 }
 
-.mapboxgl-ctrl-group > button {
+.maplibregl-ctrl-group > button {
   background-color: rgb(28, 31, 36);
   border-color: rgb(28, 31, 36);
 }
 
-.mapboxgl-ctrl button:not(:disabled):hover {
+.maplibregl-ctrl button:not(:disabled):hover {
   background-color: rgb(86, 83, 83);
 }
 
-.mapboxgl-ctrl-zoom-in {
+.maplibregl-ctrl-zoom-in {
   border-radius: 4px 4px 0 0;
 }
 
-.mapboxgl-ctrl-compass {
+.maplibregl-ctrl-compass {
   border-radius: 0 0 4px 4px;
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23a4a4a4%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23a4a4a4%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%23a4a4a4%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23545454%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E");
     background-size: 18px;
 }
 
-.mapboxgl-ctrl-inspect {
+.maplibregl-ctrl-inspect {
   background-image: url('data:image/svg+xml;charset=utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="#8e8e8e%22%20preserveAspectRatio=%22xMidYMid%20meet%22%20viewBox=%22-10%20-10%2060%2060%22%3E%3Cg%3E%3Cpath%20d=%22m15%2021.6q0-2%201.5-3.5t3.5-1.5%203.5%201.5%201.5%203.5-1.5%203.6-3.5%201.4-3.5-1.4-1.5-3.6z%20m18.4%2011.1l-6.4-6.5q1.4-2.1%201.4-4.6%200-3.4-2.5-5.8t-5.9-2.4-5.9%202.4-2.5%205.8%202.5%205.9%205.9%202.5q2.4%200%204.6-1.4l7.4%207.4q-0.9%200.6-2%200.6h-20q-1.3%200-2.3-0.9t-1.1-2.3l0.1-26.8q0-1.3%201-2.3t2.3-0.9h13.4l10%2010v19.3z%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
 }
 
-.mapboxgl-ctrl-map {
+.maplibregl-ctrl-map {
   background-image: url('data:image/svg+xml;charset=utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="#8e8e8e%22%20viewBox=%22-10%20-10%2060%2060%22%20preserveAspectRatio=%22xMidYMid%20meet%22%3E%3Cg%3E%3Cpath%20d=%22m25%2031.640000000000004v-19.766666666666673l-10-3.511666666666663v19.766666666666666z%20m9.140000000000008-26.640000000000004q0.8599999999999923%200%200.8599999999999923%200.8600000000000003v25.156666666666666q0%200.625-0.625%200.783333333333335l-9.375%203.1999999999999993-10-3.5133333333333354-8.906666666666668%203.4383333333333326-0.2333333333333334%200.07833333333333314q-0.8616666666666664%200-0.8616666666666664-0.8599999999999994v-25.156666666666663q0-0.625%200.6233333333333331-0.7833333333333332l9.378333333333334-3.198333333333334%2010%203.5133333333333336%208.905000000000001-3.4383333333333344z%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
 }
 

stories/MapMaplibreGl.stories.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import MapMapboxGl from '../src/components/MapMapboxGl';
+import MapMaplibreGl from '../src/components/MapMaplibreGl';
 import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
 import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
-  title: 'MapMapboxGl',
-  component: MapMapboxGl,
+  title: 'MapMaplibreGl',
+  component: MapMaplibreGl,
   decorators: [withA11y],
 };
 
@@ -98,7 +98,7 @@ const mapStyle = {
 
 export const Basic = () => {
   return <div style={{height: "100vh", width: "100vw"}}>
-    <MapMapboxGl
+    <MapMaplibreGl
       mapStyle={mapStyle}
       inspectModeEnabled={false}
       replaceAccessTokens={(s) => s}

stories/ModalDebug.stories.js

@@ -16,8 +16,8 @@ export const Basic = () => (
     <div style={{maxHeight: "200px"}}>
       <ModalDebug
         isOpen={true}
-        renderer="mbgljs"
-        mapboxGlDebugOptions={{}}
+        renderer="mlgljs"
+        maplibreGlDebugOptions={{}}
         mapView={{zoom: 1, center: {lat: 0, lng: 0}}}
       />
     </div>

test/config/specs.js

@@ -1,6 +1,11 @@
-var config = {};
-config.testNetwork = process.env.TEST_NETWORK || "localhost";
-config.port = 9001;
-config.baseUrl = "http://"+config.testNetwork+":"+config.port;
+
+const testNetwork = process.env.TEST_NETWORK || "localhost";
+const port = 9001;
+const baseUrl = `http://${testNetwork}:${port}`;
+const config = {
+    testNetwork,
+    port,
+    baseUrl
+};
 
 module.exports = config;

test/example-layer-style.json

@@ -3,7 +3,7 @@
   "version": 8,
   "name": "Test Style",
   "metadata": {
-    "maputnik:renderer": "mbgljs"
+    "maputnik:renderer": "mlgljs"
   },
   "sources": {},
   "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",

test/example-style.json

@@ -3,7 +3,7 @@
   "version": 8,
   "name": "Test Style",
   "metadata": {
-    "maputnik:renderer": "mbgljs"
+    "maputnik:renderer": "mlgljs"
   },
   "sources": {},
   "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",

test/functional/accessibility/index.js

@@ -1,3 +1,43 @@
+var assert = require("assert");
+var driver = require("../driver");
+
 describe("accessibility", function () {
-  require("./skip-links");
+  describe("skip links", function() {
+    beforeEach(async function () {
+      await driver.setStyle("example-layer-style.json");
+    });
+  
+    it("skip link to layer list", async function() {
+      const selector = driver.getDataAttribute("root:skip:layer-list")
+      assert(await driver.isExisting(selector));
+      await driver.typeKeys(['Tab']);
+      assert(await driver.isFocused(selector));
+      await driver.click(selector);
+  
+      assert(await driver.isFocused("#skip-target-layer-list"));
+    });
+  
+    it("skip link to layer editor", async function() {
+      const selector = driver.getDataAttribute("root:skip:layer-editor")
+      assert(await driver.isExisting(selector));
+      await driver.typeKeys(['Tab']);
+      await driver.typeKeys(['Tab']);
+      assert(await driver.isFocused(selector));
+      await driver.click(selector);
+  
+      assert(await driver.isFocused("#skip-target-layer-editor"));
+    });
+  
+    it("skip link to map view", async function() {
+      const selector = driver.getDataAttribute("root:skip:map-view")
+      assert(await driver.isExisting(selector));
+      await driver.typeKeys(['Tab']);
+      await driver.typeKeys(['Tab']);
+      await driver.typeKeys(['Tab']);
+      assert(await driver.isFocused(selector));
+      await driver.click(selector);
+  
+      assert(await driver.isFocused(".maplibregl-canvas"));
+    });
+  });  
 })

test/functional/accessibility/skip-links.js

@@ -1,51 +0,0 @@
-var assert = require("assert");
-var config = require("../../config/specs");
-var helper = require("../helper");
-var wd     = require("../../wd-helper");
-
-
-describe("skip links", function() {
-  beforeEach(async function () {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getGeoServerUrl("example-layer-style.json"));
-    await browser.acceptAlert();
-  });
-
-  it("skip link to layer list", async function() {
-    const selector = wd.$("root:skip:layer-list")
-    const elem = await $(selector);
-    assert(await elem.isExisting());
-    await browser.keys(['Tab']);
-    assert(await elem.isFocused());
-    await elem.click();
-
-    const targetEl = await $("#skip-target-layer-list");
-    assert(await targetEl.isFocused());
-  });
-
-  it("skip link to layer editor", async function() {
-    const selector = wd.$("root:skip:layer-editor")
-    const elem = await $(selector);
-    assert(await elem.isExisting());
-    await browser.keys(['Tab']);
-    await browser.keys(['Tab']);
-    assert(await elem.isFocused());
-    await elem.click();
-
-    const targetEl = await $("#skip-target-layer-editor");
-    assert(await targetEl.isFocused());
-  });
-
-  it("skip link to map view", async function() {
-    const selector = wd.$("root:skip:map-view")
-    const elem = await $(selector);
-    assert(await elem.isExisting());
-    await browser.keys(['Tab']);
-    await browser.keys(['Tab']);
-    await browser.keys(['Tab']);
-    assert(await elem.isFocused());
-    await elem.click();
-
-    const targetEl = await $(".mapboxgl-canvas");
-    assert(await targetEl.isFocused());
-  });
-});

test/functional/driver.js

@@ -0,0 +1,218 @@
+var {v1: uuid} = require('uuid');
+var fs = require("fs");
+var path = require("path");
+var config = require("../config/specs");
+var geoServer = require("../geojson-server");
+var artifacts = require("../artifacts");
+
+var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots");
+
+var testNetwork = process.env.TEST_NETWORK || "localhost";
+var geoserver;
+
+
+const driver = {
+    geoserver: {
+      start(done) {
+        geoserver = geoServer.listen(9002, "0.0.0.0", done);
+      },
+      stop(done) {
+        geoserver.close(done);
+        geoserver = undefined;
+      },
+    },
+    getStyleUrl(styles) {
+      var port = geoserver.address().port;
+      return "http://"+testNetwork+":"+port+"/styles/empty/"+styles.join(",");
+    },
+    getGeoServerUrl(urlPath) {
+      var port = geoserver.address().port;
+      return "http://"+testNetwork+":"+port+"/"+urlPath;
+    },
+
+    async setStyle(styleProperties, zoom) {
+      let url = config.baseUrl + "?debug";
+      if (styleProperties && Array.isArray(styleProperties)) {
+        url += "&style=" + this.getStyleUrl(styleProperties);
+      } else if (styleProperties && typeof styleProperties === "string") {
+        url += "&style=" + this.getGeoServerUrl(styleProperties);
+      }
+      if (zoom) {
+        url += "#" + zoom + "/41.3805/2.1635";
+      }
+      await browser.url(url);
+      if (styleProperties) {
+        await browser.acceptAlert();
+      }
+      await this.waitForExist(".maputnik-toolbar-link");
+      await this.zeroTimeout();
+    },
+    async getStyleStore() {
+      return await browser.executeAsync(function(done) {
+        window.debug.get("maputnik", "styleStore").latestStyle(done);
+      });
+    },
+    async setSurvey() {
+      await browser.execute(function() {
+        localStorage.setItem("survey", true);
+      });
+    },
+    async isMac() {
+      return await browser.execute(function() {
+        return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+      });
+    },
+    async typeKeys(keys) {
+      await browser.keys(keys)
+    },
+    async click(selector) {
+      const elem = await $(selector);
+      await elem.click();
+    },
+    async selectFromDropdown(selector, value) {
+      const selectBox = await $(selector);
+      await selectBox.selectByAttribute('value', value);
+      await this.zeroTimeout();
+    },
+    async isDisplayedInViewport(selector) {
+      const elem = await $(selector);
+      return elem.isDisplayedInViewport();
+    },
+    async isFocused(selector) {
+      const elem = await $(selector);
+      return elem.isFocused();
+    },
+    /**
+     * Sometimes chrome driver can result in the wrong text.
+     *
+     * See <https://github.com/webdriverio/webdriverio/issues/1886>
+     */
+    async setValue(selector, text) {
+      for (var i = 0; i < 10; i++) {
+        const elem = await $(selector);
+        await elem.waitForDisplayed(500);
+
+        var elements = await browser.findElements("css selector", selector);
+        if (elements.length > 1) {
+          throw "Too many elements found";
+        }
+
+        const elem2 = await $(selector);
+        await elem2.setValue(text);
+
+        var browserText = await elem2.getValue();
+
+        if (browserText == text) {
+          return;
+        }
+        else {
+          console.error("Warning: setValue failed, trying again");
+        }
+      }
+
+      // Wait for change events to fire and state updated
+      await this.zeroTimeout();
+    },
+    getExampleFilePath() {
+      return __dirname + "/../example-style.json";
+    },
+    async getExampleFileData() {
+      var styleFilePath = this.getExampleFilePath();
+      return JSON.parse(fs.readFileSync(styleFilePath));
+    },
+    async chooseExampleFile() {
+      const elem = await $("*[type='file']");
+      await elem.waitForExist();
+      await browser.chooseFile("*[type='file']", this.getExampleFilePath());
+    },
+    async zeroTimeout() {
+      await browser.executeAsync(function (done) {
+        // For any events to propagate
+        setTimeout(function () {
+          // For the DOM to be updated.
+          setTimeout(done, 0);
+        }, 0)
+      })
+    },
+    async sleep(milliseconds) {
+      await browser.pause(milliseconds);
+    },
+    async isExisting(selector) {
+      const elem = await $(selector);
+      return elem.isExisting();
+    },
+    async waitForExist(selector) {
+      const elem = await $(selector);
+      await elem.waitForExist();
+    },
+    async setWindowSize(height, width) {
+      await browser.setWindowSize(height, width);
+    },
+    async takeScreenShot(filepath) {
+      var savepath = path.join(SCREENSHOTS_PATH, filepath);
+      await browser.saveScreenshot(savepath);
+    },
+    getDataAttribute(key, selector) {
+      selector = selector || "";
+      return "*[data-wd-key='"+key+"'] "+selector;
+    },
+    async openLayersModal() {
+      const selector = await $(this.getDataAttribute('layer-list:add-layer'));
+      await selector.click();
+
+      // Wait for events
+      await this.zeroTimeout();
+
+      const elem = await $(this.getDataAttribute('modal:add-layer'));
+      await elem.waitForExist();
+      await elem.isDisplayed();
+      await elem.isDisplayedInViewport();
+
+      // Wait for events
+      await this.zeroTimeout();
+    },
+    async fillLayersModal(opts) {
+      var type = opts.type;
+      var layer = opts.layer;
+      var id;
+      if(opts.id) {
+        id = opts.id
+      }
+      else {
+        id = type+":"+uuid();
+      }
+
+      const selectBox = await $(this.getDataAttribute("add-layer.layer-type", "select"));
+      await selectBox.selectByAttribute('value', type);
+      await this.zeroTimeout();
+
+      await this.setValue(this.getDataAttribute("add-layer.layer-id", "input"), id);
+      if(layer) {
+        await this.setValue(this.getDataAttribute("add-layer.layer-source-block", "input"), layer);
+      }
+
+      await this.zeroTimeout();
+      const elem_addLayer = await $(this.getDataAttribute("add-layer"));
+      await elem_addLayer.click();
+
+      return id;
+    },
+
+    async closeModal(wdKey) {
+      const selector = this.getDataAttribute(wdKey);
+    
+      await browser.waitUntil(async function() {
+        const elem = await $(selector);
+        return await elem.isDisplayedInViewport();
+      });
+    
+      await this.click(this.getDataAttribute(wdKey+".close-modal"));
+    
+      await browser.waitUntil(async function() {
+        return await browser.execute((selector) => {
+          return !document.querySelector(selector);
+        }, selector);
+      });
+    }
+}
+module.exports = driver;

test/functional/helper.js

@@ -1,86 +0,0 @@
-var wd = require("../wd-helper");
-var {v1: uuid} = require('uuid');
-var geoServer = require("../geojson-server");
-
-var testNetwork = process.env.TEST_NETWORK || "localhost";
-var geoserver;
-
-module.exports = {
-  startGeoserver: function(done) {
-    geoserver = geoServer.listen(9002, "0.0.0.0", done);
-  },
-  stopGeoserver: function(done) {
-    geoserver.close(done);
-    geoserver = undefined;
-  },
-  getStyleUrl: function(styles) {
-    var port = geoserver.address().port;
-    return "http://"+testNetwork+":"+port+"/styles/empty/"+styles.join(",");
-  },
-  getGeoServerUrl: function(urlPath) {
-    var port = geoserver.address().port;
-    return "http://"+testNetwork+":"+port+"/"+urlPath;
-  },
-  getStyleStore: async function(browser) {
-    return await browser.executeAsync(function(done) {
-      window.debug.get("maputnik", "styleStore").latestStyle(done);
-    });
-  },
-  getRevisionStore: async function(browser) {
-    var result = await browser.execute(function() {
-      var rs = window.debug.get("maputnik", "revisionStore")
-
-      return {
-        currentIdx: rs.currentIdx,
-        revisions: rs.revisions
-      };
-    })
-    return result.value;
-  },
-  modal: {
-    addLayer: {
-      open: async function() {
-        const selector = await $(wd.$('layer-list:add-layer'));
-        await selector.click();
-
-        // Wait for events
-        await browser.flushReactUpdates();
-
-        const elem = await $(wd.$('modal:add-layer'));
-        await elem.waitForExist();
-        await elem.isDisplayed();
-        await elem.isDisplayedInViewport();
-
-        // Wait for events
-        await browser.flushReactUpdates();
-      },
-      fill: async function(opts) {
-        var type = opts.type;
-        var layer = opts.layer;
-        var id;
-        if(opts.id) {
-          id = opts.id
-        }
-        else {
-          id = type+":"+uuid();
-        }
-
-        const selectBox = await $(wd.$("add-layer.layer-type", "select"));
-        await selectBox.selectByAttribute('value', type);
-        await browser.flushReactUpdates();
-
-        await browser.setValueSafe(wd.$("add-layer.layer-id", "input"), id);
-        if(layer) {
-          await browser.setValueSafe(wd.$("add-layer.layer-source-block", "input"), layer);
-        }
-
-        await browser.flushReactUpdates();
-        const elem_addLayer = await $(wd.$("add-layer"));
-        await elem_addLayer.click();
-
-        return id;
-      }
-    }
-  }
-}
-

test/functional/history/index.js

@@ -1,8 +1,5 @@
 var assert = require("assert");
-var config = require("../../config/specs");
-var helper = require("../helper");
-
-
+var driver = require("../driver");
 
 describe("history", function() {
   let undoKeyCombo;
@@ -11,9 +8,7 @@ describe("history", function() {
   let redoKeyComboReset;
 
   before(async function() {
-    const isMac = await browser.execute(function() {
-      return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-    });
+    const isMac = await driver.isMac();
     undoKeyCombo = ['Meta', 'z'];
     undoKeyComboReset = ['Meta'];
     redoKeyCombo = isMac ? ['Meta', 'Shift', 'z'] : ['Meta', 'y'];
@@ -26,22 +21,18 @@ describe("history", function() {
   it.skip("undo/redo", async function() {
     var styleObj;
 
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
-      "geojson:example"
-    ]));
-    await browser.acceptAlert();
+    await driver.setStyle(["geojson:example"])
+    await driver.openLayersModal();
 
-    await helper.modal.addLayer.open();
-
-    styleObj = await helper.getStyleStore(browser);
+    styleObj = await driver.getStyleStore();
     assert.deepEqual(styleObj.layers, []);
 
-    await helper.modal.addLayer.fill({
+    await driver.fillLayersModal({
       id: "step 1",
       type: "background"
     })
 
-    styleObj = await helper.getStyleStore(browser);
+    styleObj = await driver.getStyleStore();
     assert.deepEqual(styleObj.layers, [
       {
         "id": "step 1",
@@ -49,13 +40,13 @@ describe("history", function() {
       }
     ]);
 
-    await helper.modal.addLayer.open();
-    await helper.modal.addLayer.fill({
+    await driver.openLayersModal();
+    await driver.fillLayersModal({
       id: "step 2",
       type: "background"
     })
 
-    styleObj = await helper.getStyleStore(browser);
+    styleObj = await driver.getStyleStore();
     assert.deepEqual(styleObj.layers, [
       {
         "id": "step 1",
@@ -67,9 +58,9 @@ describe("history", function() {
       }
     ]);
 
-    await browser.keys(undoKeyCombo)
-    await browser.keys(undoKeyComboReset);
-    styleObj = await helper.getStyleStore(browser);
+    await driver.typeKeys(undoKeyCombo);
+    await driver.typeKeys(undoKeyComboReset);
+    styleObj = await driver.getStyleStore();
     assert.deepEqual(styleObj.layers, [
       {
         "id": "step 1",
@@ -77,15 +68,15 @@ describe("history", function() {
       }
     ]);
 
-    await browser.keys(undoKeyCombo)
-    await browser.keys(undoKeyComboReset);
-    styleObj = await helper.getStyleStore(browser);
+    await driver.typeKeys(undoKeyCombo)
+    await driver.typeKeys(undoKeyComboReset);
+    styleObj = await driver.getStyleStore();
     assert.deepEqual(styleObj.layers, [
     ]);
 
-    await browser.keys(redoKeyCombo)
-    await browser.keys(redoKeyComboReset);
-    styleObj = await helper.getStyleStore(browser);
+    await driver.typeKeys(redoKeyCombo)
+    await driver.typeKeys(redoKeyComboReset);
+    styleObj = await driver.getStyleStore();
     assert.deepEqual(styleObj.layers, [
       {
         "id": "step 1",
@@ -93,9 +84,9 @@ describe("history", function() {
       }
     ]);
 
-    await browser.keys(redoKeyCombo)
-    await browser.keys(redoKeyComboReset);
-    styleObj = await helper.getStyleStore(browser);
+    await driver.typeKeys(redoKeyCombo)
+    await driver.typeKeys(redoKeyComboReset);
+    styleObj = await driver.getStyleStore();
     assert.deepEqual(styleObj.layers, [
       {
         "id": "step 1",

test/functional/index.js

@@ -1,31 +1,20 @@
-var config      = require("../config/specs");
-var helper      = require("./helper");
-var extendWebdriverIO = require("./util/webdriverio-ext");
-
+var driver      = require("./driver");
 
 describe('maputnik', function() {
 
   before(async function(done) {
-    await extendWebdriverIO();
-    helper.startGeoserver(done);
+    await browser.setTimeout({ 'script': 20 * 1000 });
+    await browser.setTimeout({ 'implicit': 20 * 1000 });
+    driver.geoserver.start(done);
   });
 
   after(function(done) {
-    helper.stopGeoserver(done);
+    driver.geoserver.stop(done);
   });
 
   beforeEach(async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
-      "geojson:example",
-      "raster:raster"
-    ]));
-    await browser.acceptAlert();
-    await browser.execute(function() {
-      localStorage.setItem("survey", true);
-    });
-    const elem = await $(".maputnik-toolbar-link");
-    await elem.waitForExist();
-    await browser.flushReactUpdates();
+    await driver.setStyle(["geojson:example","raster:raster"]);
+    await driver.setSurvey();
   });
 
   // -------- setup --------

test/functional/keyboard/index.js

@@ -1,55 +1,55 @@
 var assert = require("assert");
-var wd     = require("../../wd-helper");
-
+var driver = require("../driver");
 
 describe("keyboard", function() {
   describe("shortcuts", function() {
     it("ESC should unfocus", async function() {
-      const tmpTargetEl = await $(wd.$("nav:inspect") + " select");
-      await tmpTargetEl.click();
-      assert(await tmpTargetEl.isFocused());
+      const targetSelector = driver.getDataAttribute("nav:inspect") + " select";
+      driver.click(targetSelector);
+      assert(await driver.isFocused(targetSelector));
 
-      await browser.keys(["Escape"]);
+      await driver.typeKeys(["Escape"]);
       assert(await (await $("body")).isFocused());
     });
 
     it("'?' should show shortcuts modal", async function() {
-      await browser.keys(["?"]);
-      assert(await (await $(wd.$("modal:shortcuts"))).isDisplayed());
+      await driver.typeKeys(["?"]);
+      assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts")));
     });
 
     it("'o' should show open modal", async function() {
-      await browser.keys(["o"]);
-      assert(await (await $(wd.$("modal:open"))).isDisplayed());
+      await driver.typeKeys(["o"]);
+      assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:open")));
     });
 
     it("'e' should show export modal", async function() {
-      await browser.keys(["e"]);
-      assert(await (await $(wd.$("modal:export"))).isDisplayed());
+      await driver.typeKeys(["e"]);
+      await driver.sleep(100);
+      assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:export")));
     });
 
     it("'d' should show sources modal", async function() {
-      await browser.keys(["d"]);
-      assert(await (await $(wd.$("modal:sources"))).isDisplayed());
+      await driver.typeKeys(["d"]);
+      assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:sources")));
     });
 
     it("'s' should show settings modal", async function() {
-      await browser.keys(["s"]);
-      assert(await (await $(wd.$("modal:settings"))).isDisplayed());
+      await driver.typeKeys(["s"]);
+      assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:settings")));
     });
 
     it.skip("'i' should change map to inspect mode", async function() {
-      // await browser.keys(["i"]);
+      // await driver.typeKeys(["i"]);
     });
 
     it("'m' should focus map", async function() {
-      await browser.keys(["m"]);
-      assert(await (await $(".mapboxgl-canvas")).isFocused());
+      await driver.typeKeys(["m"]);
+      assert(await driver.isFocused(".maplibregl-canvas"));
     });
 
     it("'!' should show debug modal", async function() {
-      await browser.keys(["!"]);
-      assert(await (await $(wd.$("modal:debug"))).isDisplayed());
+      await driver.typeKeys(["!"]);
+      assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:debug")));
     });
   });
 

test/functional/layers/index.js

@@ -1,32 +1,24 @@
 var assert = require("assert");
-var config = require("../../config/specs");
-var helper = require("../helper");
+var driver = require("../driver");
 var {v1: uuid} = require('uuid');
-var wd     = require("../../wd-helper");
-
 
 describe("layers", function() {
   beforeEach(async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
+    driver.setStyle([
       "geojson:example",
       "raster:raster"
-    ]));
-    await browser.acceptAlert();
-    const elem = await $(".maputnik-toolbar-link");
-    await elem.waitForExist();
-    await browser.flushReactUpdates();
-
-    await helper.modal.addLayer.open();
+    ]);
+    await driver.openLayersModal();
   });
 
   describe("ops", function() {
     it("delete", async function() {
       var styleObj;
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "background"
       })
 
-      styleObj = await helper.getStyleStore(browser);
+      styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -34,21 +26,20 @@ describe("layers", function() {
         },
       ]);
 
-      const elem = await $(wd.$("layer-list-item:"+id+":delete", ""));
-      await elem.click();
+      await driver.click(driver.getDataAttribute("layer-list-item:"+id+":delete", ""))
 
-      styleObj = await helper.getStyleStore(browser);
+      styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
       ]);
     });
 
     it("duplicate", async function() {
       var styleObj;
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "background"
       })
 
-      styleObj = await helper.getStyleStore(browser);
+      styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -56,10 +47,9 @@ describe("layers", function() {
         },
       ]);
 
-      const elem = await $(wd.$("layer-list-item:"+id+":copy", ""));
-      await elem.click();
+      await driver.click(driver.getDataAttribute("layer-list-item:"+id+":copy", ""));
 
-      styleObj = await helper.getStyleStore(browser);
+      styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id+"-copy",
@@ -74,11 +64,11 @@ describe("layers", function() {
 
     it("hide", async function() {
       var styleObj;
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "background"
       })
 
-      styleObj = await helper.getStyleStore(browser);
+      styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -86,10 +76,9 @@ describe("layers", function() {
         },
       ]);
 
-      const elem = await $(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
-      await elem.click();
+      await driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
 
-      styleObj = await helper.getStyleStore(browser);
+      styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -100,9 +89,9 @@ describe("layers", function() {
         },
       ]);
 
-      await elem.click();
+      await driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
 
-      styleObj = await helper.getStyleStore(browser);
+      styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -115,21 +104,15 @@ describe("layers", function() {
     })
   })
 
-  describe("tooltips", function() {
-  })
-
-  describe("help", function() {
-  })
-
 
   describe('background', function () {
 
     it("add", async function() {
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "background"
       })
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -143,15 +126,12 @@ describe("layers", function() {
         // Setup
         var id = uuid();
 
-        const selectBox = await $(wd.$("add-layer.layer-type", "select"));
-        await selectBox.selectByAttribute('value', "background");
-        await browser.flushReactUpdates();
-        await browser.setValueSafe(wd.$("add-layer.layer-id", "input"), "background:"+id);
+        await driver.selectFromDropdown(driver.getDataAttribute("add-layer.layer-type", "select"), "background");
+        await driver.setValue(driver.getDataAttribute("add-layer.layer-id", "input"), "background:"+id);
 
-        const elem = await $(wd.$("add-layer"));
-        await elem.click();
+        await driver.click(driver.getDataAttribute("add-layer"));
 
-        var styleObj = await helper.getStyleStore(browser);
+        var styleObj = await driver.getStyleStore();
         assert.deepEqual(styleObj.layers, [
           {
             "id": 'background:'+id,
@@ -167,15 +147,13 @@ describe("layers", function() {
         it("id", async function() {
           var bgId = await createBackground();
 
-          const elem = await $(wd.$("layer-list-item:background:"+bgId));
-          await elem.click();
+          await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
 
           var id = uuid();
-          await browser.setValueSafe(wd.$("layer-editor.layer-id", "input"), "foobar:"+id)
-          const elem2 = await $(wd.$("min-zoom"));
-          await elem2.click();
+          await driver.setValue(driver.getDataAttribute("layer-editor.layer-id", "input"), "foobar:"+id)
+          await driver.click(driver.getDataAttribute("min-zoom"));
 
-          var styleObj = await helper.getStyleStore(browser);
+          var styleObj = await driver.getStyleStore();
           assert.deepEqual(styleObj.layers, [
             {
               "id": 'foobar:'+id,
@@ -187,13 +165,12 @@ describe("layers", function() {
         it("min-zoom", async function() {
           var bgId = await createBackground();
 
-          const elem = await $(wd.$("layer-list-item:background:"+bgId));
-          await elem.click();
-          await browser.setValueSafe(wd.$("min-zoom", 'input[type="text"]'), 1)
-          const elem2 = await $(wd.$("layer-editor.layer-id", "input"));
-          await elem2.click();
+          await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          await driver.setValue(driver.getDataAttribute("min-zoom", 'input[type="text"]'), 1)
 
-          var styleObj = await helper.getStyleStore(browser);
+          await driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
+
+          var styleObj = await driver.getStyleStore();
           assert.deepEqual(styleObj.layers, [
             {
               "id": 'background:'+bgId,
@@ -203,10 +180,10 @@ describe("layers", function() {
           ]);
 
           // AND RESET!
-          // await browser.setValueSafe(wd.$("min-zoom", "input"), "")
-          // await browser.click(wd.$("max-zoom", "input"));
+          // await driver.setValue(driver.getDataAttribute("min-zoom", "input"), "")
+          // await driver.click(driver.getDataAttribute("max-zoom", "input"));
 
-          // var styleObj = await helper.getStyleStore(browser);
+          // var styleObj = await driver.getStyleStore();
 
           // assert.deepEqual(styleObj.layers, [
           //   {
@@ -219,13 +196,12 @@ describe("layers", function() {
         it("max-zoom", async function() {
           var bgId = await createBackground();
 
-          const elem = await $(wd.$("layer-list-item:background:"+bgId));
-          await elem.click();
-          await browser.setValueSafe(wd.$("max-zoom", 'input[type="text"]'), 1)
-          const elem2 = await $(wd.$("layer-editor.layer-id", "input"));
-          await elem2.click();
+          await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          await driver.setValue(driver.getDataAttribute("max-zoom", 'input[type="text"]'), 1)
 
-          var styleObj = await helper.getStyleStore(browser);
+          await driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
+
+          var styleObj = await driver.getStyleStore();
           assert.deepEqual(styleObj.layers, [
             {
               "id": 'background:'+bgId,
@@ -239,13 +215,12 @@ describe("layers", function() {
           var bgId = await createBackground();
           var id = uuid();
 
-          const elem = await $(wd.$("layer-list-item:background:"+bgId));
-          await elem.click();
-          await browser.setValueSafe(wd.$("layer-comment", "textarea"), id);
-          const elem2 = await $(wd.$("layer-editor.layer-id", "input"));
-          await elem2.click();
+          await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          await driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), id);
 
-          var styleObj = await helper.getStyleStore(browser);
+          await driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
+
+          var styleObj = await driver.getStyleStore();
           assert.deepEqual(styleObj.layers, [
             {
               "id": 'background:'+bgId,
@@ -258,11 +233,11 @@ describe("layers", function() {
 
           // Unset it again.
           // TODO: This fails
-          // await browser.setValueSafe(wd.$("layer-comment", "textarea"), "");
-          // await browser.click(wd.$("min-zoom", "input"));
-          // await browser.flushReactUpdates();
+          // await driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), "");
+          // await driver.click(driver.getDataAttribute("min-zoom", "input"));
+          // await driver.zeroTimeout();
 
-          // var styleObj = await helper.getStyleStore(browser);
+          // var styleObj = await driver.getStyleStore();
           // assert.deepEqual(styleObj.layers, [
           //   {
           //     "id": 'background:'+bgId,
@@ -274,12 +249,11 @@ describe("layers", function() {
         it("color", null, async function() {
           var bgId = await createBackground();
 
-          await browser.click(wd.$("layer-list-item:background:"+bgId));
+          await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
 
-          await browser.click(wd.$("spec-field:background-color", "input"))
-          // await browser.debug();
+          await driver.click(driver.getDataAttribute("spec-field:background-color", "input"));
 
-          var styleObj = await helper.getStyleStore(browser);
+          var styleObj = await driver.getStyleStore();
           assert.deepEqual(styleObj.layers, [
             {
               "id": 'background:'+bgId,
@@ -311,16 +285,18 @@ describe("layers", function() {
         it.skip("parse error", async function() {
           var bgId = await createBackground();
 
-          await browser.click(wd.$("layer-list-item:background:"+bgId));
+
+
+          await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
 
           var errorSelector = ".CodeMirror-lint-marker-error";
-          assert.equal(await browser.isExisting(errorSelector), false);
+          assert.equal(await driver.isExisting(errorSelector), false);
 
-          await browser.click(".CodeMirror")
-          await browser.keys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {");
-          await browser.waitForExist(errorSelector)
+          await driver.click(".CodeMirror");
+          await driver.keys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {");
+          await driver.waitForExist(errorSelector);
 
-          await browser.click(wd.$("layer-editor.layer-id"));
+          await driver.click(driver.getDataAttribute("layer-editor.layer-id"));
         });
       });
     })
@@ -328,14 +304,13 @@ describe("layers", function() {
 
   describe('fill', function () {
     it("add", async function() {
-      // await browser.debug();
 
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "fill",
         layer: "example"
       });
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -351,12 +326,12 @@ describe("layers", function() {
 
   describe('line', function () {
     it("add", async function() {
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "line",
         layer: "example"
       });
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -374,12 +349,12 @@ describe("layers", function() {
 
   describe('symbol', function () {
     it("add", async function() {
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "symbol",
         layer: "example"
       });
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -392,12 +367,12 @@ describe("layers", function() {
 
   describe('raster', function () {
     it("add", async function() {
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "raster",
         layer: "raster"
       });
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -410,12 +385,12 @@ describe("layers", function() {
 
   describe('circle', function () {
     it("add", async function() {
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "circle",
         layer: "example"
       });
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -429,12 +404,12 @@ describe("layers", function() {
 
   describe('fill extrusion', function () {
     it("add", async function() {
-      var id = await helper.modal.addLayer.fill({
+      var id = await driver.fillLayersModal({
         type: "fill-extrusion",
         layer: "example"
       });
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.deepEqual(styleObj.layers, [
         {
           "id": id,
@@ -448,41 +423,36 @@ describe("layers", function() {
 
   describe("groups", function() {
     it("simple", async function() {
-      await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
-        "geojson:example"
-      ]));
-      await browser.acceptAlert(); 
+      await driver.setStyle(["geojson:example"]);
 
-      await helper.modal.addLayer.open();
-      await helper.modal.addLayer.fill({
+      await driver.openLayersModal();
+      await driver.fillLayersModal({
         id: "foo",
         type: "background"
       })
 
-      await helper.modal.addLayer.open();
-      await helper.modal.addLayer.fill({
+      await driver.openLayersModal();
+      await driver.fillLayersModal({
         id: "foo_bar",
         type: "background"
       })
 
-      await helper.modal.addLayer.open();
-      await helper.modal.addLayer.fill({
+      await driver.openLayersModal();
+      await driver.fillLayersModal({
         id: "foo_bar_baz",
         type: "background"
       })
 
-      const groupEl = await $(wd.$("layer-list-group:foo-0"));
-      await groupEl.isDisplayed();
+      assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo")), true);
+      assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar")), false);
+      assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz")), false);
 
-      assert.equal(await (await $(wd.$("layer-list-item:foo"))).isDisplayedInViewport(), true);
-      assert.equal(await (await $(wd.$("layer-list-item:foo_bar"))).isDisplayedInViewport(), false);
-      assert.equal(await (await $(wd.$("layer-list-item:foo_bar_baz"))).isDisplayedInViewport(), false);
+      await driver.click(driver.getDataAttribute("layer-list-group:foo-0"));
 
-      await groupEl.click();
+      assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo")), true);
+      assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar")), true);
+      assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz")), true);
 
-      assert.equal(await (await $(wd.$("layer-list-item:foo"))).isDisplayedInViewport(), true);
-      assert.equal(await (await $(wd.$("layer-list-item:foo_bar"))).isDisplayedInViewport(), true);
-      assert.equal(await (await $(wd.$("layer-list-item:foo_bar_baz"))).isDisplayedInViewport(), true);
     })
   })
 });

test/functional/map/index.js

@@ -1,33 +1,24 @@
-var config = require("../../config/specs");
-var helper = require("../helper");
-
+var driver = require("../driver");
 
 describe("map", function() {
   describe.skip("zoom level", function() {
     it("via url", async function() {
-      var zoomLevel = "12.37"
-      await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
-        "geojson:example"
-      ])+"#"+zoomLevel+"/41.3805/2.1635");
-      await browser.alertAccept();
-
+      var zoomLevel = "12.37";
+      await driver.setStyle(["geojson:example"], zoomLevel);
       await browser.waitUntil(async function () {
         return (
-          await browser.isVisible(".mapboxgl-ctrl-zoom")
-          && await browser.getText(".mapboxgl-ctrl-zoom") === "Zoom level: "+(zoomLevel)
+          await browser.isVisible(".maplibregl-ctrl-zoom")
+          && await browser.getText(".maplibregl-ctrl-zoom") === "Zoom level: "+(zoomLevel)
         );
       }, 10*1000)
     })
     it("via map controls", async function() {
       var zoomLevel = 12.37;
-      await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
-        "geojson:example"
-      ])+"#"+zoomLevel+"/41.3805/2.1635");
-      await browser.alertAccept();
+      await driver.setStyle(["geojson:example"], zoomLevel);
 
-      await browser.click(".mapboxgl-ctrl-zoom-in")
+      await driver.click(".maplibregl-ctrl-zoom-in");
       await browser.waitUntil(async function () {
-        var text = await browser.getText(".mapboxgl-ctrl-zoom")
+        var text = await browser.getText(".maplibregl-ctrl-zoom")
         return text === "Zoom level: "+(zoomLevel+1);
       }, 10*1000)
     })

test/functional/modals/index.js

@@ -1,93 +1,53 @@
 var assert = require('assert');
-var fs     = require("fs");
-var wd     = require("../../wd-helper");
-var config = require("../../config/specs");
-var helper = require("../helper");
-
-
-async function closeModal(wdKey) {
-  const selector = wd.$(wdKey);
-
-  await browser.waitUntil(async function() {
-    const elem = await $(selector);
-    return await elem.isDisplayedInViewport();
-  });
-
-  const closeBtnSelector = await $(wd.$(wdKey+".close-modal"));
-  await closeBtnSelector.click();
-
-  await browser.waitUntil(async function() {
-    return await browser.execute((selector) => {
-      return !document.querySelector(selector);
-    }, selector);
-  });
-}
+var driver = require("../driver");
 
 describe("modals", function() {
   describe("open", function() {
-    var styleFilePath = __dirname+"/../../example-style.json";
-    var styleFileData = JSON.parse(fs.readFileSync(styleFilePath));
-
     beforeEach(async function() {
-      await browser.url(config.baseUrl+"?debug");
 
-      const elem = await $(".maputnik-toolbar-link");
-      await elem.waitForExist();
-      await browser.flushReactUpdates();
-
-      const elem2 = await $(wd.$("nav:open"));
-      await elem2.click();
-      await browser.flushReactUpdates();
+      await driver.setStyle();
+      await driver.click(driver.getDataAttribute("nav:open"));
+      await driver.zeroTimeout();
     });
 
     it("close", async function() {
-      await closeModal("modal:open");
+      await driver.closeModal("modal:open");
     });
 
     // "chooseFile" command currently not available for wdio v5 https://github.com/webdriverio/webdriverio/pull/3632
     it.skip("upload", async function() {
-      const elem = await $("*[type='file']");
-      await elem.waitForExist();
-      await browser.chooseFile("*[type='file']", styleFilePath);
+      await driver.chooseExampleFile();
 
-      var styleObj = await helper.getStyleStore(browser);
-      assert.deepEqual(styleFileData, styleObj);
+      var styleObj = await driver.getStyleStore();
+      assert.deepEqual(await driver.getExampleFileData(), styleObj);
     });
 
     it("load from url", async function() {
-      var styleFileUrl  = helper.getGeoServerUrl("example-style.json");
+      var styleFileUrl = driver.getGeoServerUrl("example-style.json");
 
-      await browser.setValueSafe(wd.$("modal:open.url.input"), styleFileUrl);
+      await driver.setValue(driver.getDataAttribute("modal:open.url.input"), styleFileUrl);
 
-      const selector = await $(wd.$("modal:open.url.button"));
-      await selector.click();
+      await driver.click(driver.getDataAttribute("modal:open.url.button"))
 
       // Allow the network request to happen
       // NOTE: Its localhost so this should be fast.
-      await browser.pause(300);
+      await driver.sleep(300);
 
-      var styleObj = await helper.getStyleStore(browser);
-      assert.deepEqual(styleFileData, styleObj);
+      var styleObj = await driver.getStyleStore();
+      assert.deepEqual(await driver.getExampleFileData(), styleObj);
     });
-
-    // TODO: Need to work out how to mock out the end points
-    it("gallery")
   })
 
   describe("shortcuts", function() {
     it("open/close", async function() {
-      await browser.url(config.baseUrl+"?debug");
+      await driver.setStyle();
 
-      const elem = await $(".maputnik-toolbar-link");
-      await elem.waitForExist();
-      await browser.flushReactUpdates();
+      await driver.typeKeys(["?"]);
 
-      await browser.keys(["?"]);
-
-      const modalEl = await $(wd.$("modal:shortcuts"))
+      const modalEl = await $(driver.getDataAttribute("modal:shortcuts"))
       assert(await modalEl.isDisplayed());
 
-      await closeModal("modal:shortcuts");
+      await driver.closeModal("modal:shortcuts");
     });
 
   });
@@ -95,19 +55,13 @@ describe("modals", function() {
   describe("export", function() {
 
     beforeEach(async function() {
-      await browser.url(config.baseUrl+"?debug");
-
-      const elem = await $(".maputnik-toolbar-link");
-      await elem.waitForExist();
-      await browser.flushReactUpdates();
-
-      const elem2 = await $(wd.$("nav:export"));
-      await elem2.click();
-      await browser.flushReactUpdates();
+      await driver.setStyle();
+      await driver.click(driver.getDataAttribute("nav:export"));
+      await driver.zeroTimeout();
     });
 
     it("close", async function() {
-      await closeModal("modal:export");
+      await driver.closeModal("modal:export");
     });
 
     // TODO: Work out how to download a file and check the contents
@@ -123,110 +77,79 @@ describe("modals", function() {
 
   describe("inspect", function() {
     it("toggle", async function() {
-      await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
-        "geojson:example"
-      ]));
-      await browser.acceptAlert();
+      await driver.setStyle(["geojson:example"]);
 
-      const selectBox = await $(wd.$("nav:inspect", "select"));
-      await selectBox.selectByAttribute('value', "inspect");
+      await driver.selectFromDropdown(driver.getDataAttribute("nav:inspect", "select"), "inspect");
     })
   })
 
   describe("style settings", function() {
     beforeEach(async function() {
-      await browser.url(config.baseUrl+"?debug");
-
-      const elem = await $(".maputnik-toolbar-link");
-      await elem.waitForExist();
-      await browser.flushReactUpdates();
-
-      const elem2 = await $(wd.$("nav:settings"));
-      await elem2.click();
-      await browser.flushReactUpdates();
+      await driver.setStyle();
+      await driver.click(driver.getDataAttribute("nav:settings"));
+      await driver.zeroTimeout();
     });
 
     it("name", async function() {
-      await browser.setValueSafe(wd.$("modal:settings.name"), "foobar")
-      const elem = await $(wd.$("modal:settings.owner"));
-      await elem.click();
-      await browser.flushReactUpdates();
+      await driver.setValue(driver.getDataAttribute("modal:settings.name"), "foobar");
+      await driver.click(driver.getDataAttribute("modal:settings.owner"));
+      await driver.zeroTimeout();
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.equal(styleObj.name, "foobar");
     })
     it("owner", async function() {
-      await browser.setValueSafe(wd.$("modal:settings.owner"), "foobar")
-      const elem = await $(wd.$("modal:settings.name"));
-      await elem.click();
-      await browser.flushReactUpdates();
+      await driver.setValue(driver.getDataAttribute("modal:settings.owner"), "foobar")
+      await driver.click(driver.getDataAttribute("modal:settings.name"));
+      await driver.zeroTimeout();
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.equal(styleObj.owner, "foobar");
     })
     it("sprite url", async function() {
-      await browser.setValueSafe(wd.$("modal:settings.sprite"), "http://example.com")
-      const elem = await $(wd.$("modal:settings.name"));
-      await elem.click();
-      await browser.flushReactUpdates();
+      await driver.setValue(driver.getDataAttribute("modal:settings.sprite"), "http://example.com")
+      await driver.click(driver.getDataAttribute("modal:settings.name"));
+      await driver.zeroTimeout();
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.equal(styleObj.sprite, "http://example.com");
     })
     it("glyphs url", async function() {
       var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"
-      await browser.setValueSafe(wd.$("modal:settings.glyphs"), glyphsUrl)
-      const elem = await $(wd.$("modal:settings.name"));
-      await elem.click();
-      await browser.flushReactUpdates();
+      await driver.setValue(driver.getDataAttribute("modal:settings.glyphs"), glyphsUrl);
+      await driver.click(driver.getDataAttribute("modal:settings.name"));
+      await driver.zeroTimeout();
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.equal(styleObj.glyphs, glyphsUrl);
     })
 
-    it("mapbox access token", async function() {
-      var apiKey = "testing123";
-      await browser.setValueSafe(wd.$("modal:settings.maputnik:mapbox_access_token"), apiKey);
-      const elem = await $(wd.$("modal:settings.name"));
-      await elem.click();
-      await browser.flushReactUpdates();
-
-      var styleObj = await helper.getStyleStore(browser);
-      await browser.waitUntil(function() {
-        return styleObj.metadata["maputnik:mapbox_access_token"] == apiKey;
-      })
-    })
-
     it("maptiler access token", async function() {
       var apiKey = "testing123";
-      await browser.setValueSafe(wd.$("modal:settings.maputnik:openmaptiles_access_token"), apiKey);
-      const elem = await $(wd.$("modal:settings.name"));
-      await elem.click();
-      await browser.flushReactUpdates();
+      await driver.setValue(driver.getDataAttribute("modal:settings.maputnik:openmaptiles_access_token"), apiKey);
+      await driver.click(driver.getDataAttribute("modal:settings.name"));
+      await driver.zeroTimeout();
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.equal(styleObj.metadata["maputnik:openmaptiles_access_token"], apiKey);
     })
 
     it("thunderforest access token", async function() {
       var apiKey = "testing123";
-      await browser.setValueSafe(wd.$("modal:settings.maputnik:thunderforest_access_token"), apiKey);
-      const elem = await $(wd.$("modal:settings.name"));
-      await elem.click();
-      await browser.flushReactUpdates();
+      await driver.setValue(driver.getDataAttribute("modal:settings.maputnik:thunderforest_access_token"), apiKey);
+      await driver.click(driver.getDataAttribute("modal:settings.name"));
+      await driver.zeroTimeout();
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.equal(styleObj.metadata["maputnik:thunderforest_access_token"], apiKey);
     })
 
     it("style renderer", async function() {
-      const selector = await $(wd.$("modal:settings.maputnik:renderer"));
-      await selector.selectByAttribute('value', "ol");
-      const elem = await $(wd.$("modal:settings.name"));
-      await elem.click();
-      await browser.flushReactUpdates();
+      await driver.selectFromDropdown(driver.getDataAttribute("modal:settings.maputnik:renderer"), "ol");
+      await driver.click(driver.getDataAttribute("modal:settings.name"));
+      await driver.zeroTimeout();
 
-      var styleObj = await helper.getStyleStore(browser);
+      var styleObj = await driver.getStyleStore();
       assert.equal(styleObj.metadata["maputnik:renderer"], "ol");
     })
   })

test/functional/screenshots/index.js

@@ -1,6 +1,4 @@
-var config    = require("../../config/specs");
-var helper    = require("../helper");
-var wd        = require("../../wd-helper");
+var driver    = require("../driver");
 
 
 // These will get used in the marketing material. They are also useful to do a quick manual check of the styling across browsers
@@ -8,104 +6,57 @@ var wd        = require("../../wd-helper");
 describe('screenshots', function() {
 
   beforeEach(async function() {
-    await browser.setWindowSize(1280, 800)
+    await driver.setWindowSize(1280, 800)
   })
 
   it("front_page", async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
-      "geojson:example"
-    ]));
-    await browser.acceptAlert();
-    const elem = await $(".maputnik-toolbar-link");
-    await elem.waitForExist();  
-    await browser.flushReactUpdates();
+    await driver.setStyle(["geojson:example"]);
 
-    await browser.takeScreenShot("/front_page.png")
+    await driver.takeScreenShot("/front_page.png")
   })
 
   it("open", async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
-      "geojson:example"
-    ]));
-    await browser.acceptAlert();
-    const elem = await $(".maputnik-toolbar-link");
-    await elem.waitForExist();  
-    await browser.flushReactUpdates();
+    await driver.setStyle(["geojson:example"]);
+    await driver.click(driver.getDataAttribute("nav:open"));
+    await driver.zeroTimeout();
 
-    const nav_open = await $(wd.$("nav:open"));
-    await nav_open.click();
-    await nav_open.waitForExist(); 
-    await browser.flushReactUpdates();
-
-    await browser.takeScreenShot("/open.png")
+    await driver.takeScreenShot("/open.png")
   })
 
   it("export", async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
-      "geojson:example"
-    ]));
-    await browser.acceptAlert();
-    const elem = await $(".maputnik-toolbar-link")
-    await elem.waitForExist()  
-    await browser.flushReactUpdates();
+    await driver.setStyle(["geojson:example"]);
 
-    const nav_export = await $(wd.$("nav:export"));
-    await nav_export.click();
-    await nav_export.waitForExist(); 
-    await browser.flushReactUpdates();
+    await driver.click(driver.getDataAttribute("nav:export"));
+    await driver.zeroTimeout();
 
-    await browser.takeScreenShot("/export.png")
+    await driver.takeScreenShot("/export.png")
   })
 
   it("sources", async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
-      "geojson:example"
-    ]));
-    await browser.acceptAlert();
-    const elem = await $(".maputnik-toolbar-link")
-    await elem.waitForExist()  
-    await browser.flushReactUpdates();
+    await driver.setStyle(["geojson:example"]);
 
-    const nav_sources = await $(wd.$("nav:sources"));
-    await nav_sources.click();
-    await nav_sources.waitForExist(); 
-    await browser.flushReactUpdates();
+    await driver.click(driver.getDataAttribute("nav:sources"));
+    await driver.zeroTimeout();
 
-    await browser.takeScreenShot("/sources.png")
+    await driver.takeScreenShot("/sources.png")
   })
 
   it("style settings", async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
-      "geojson:example"
-    ]));
-    await browser.acceptAlert();
-    const elem = await $(".maputnik-toolbar-link")
-    await elem.waitForExist()  
-    await browser.flushReactUpdates();
+    await driver.setStyle(["geojson:example"]);
 
-    const nav_settings = await $(wd.$("nav:settings"));
-    await nav_settings.click();
-    await nav_settings.waitForExist(); 
-    await browser.flushReactUpdates();
+    await driver.click(driver.getDataAttribute("nav:settings"));
+    await driver.zeroTimeout();
 
-    await browser.takeScreenShot("/settings.png")
+    await driver.takeScreenShot("/settings.png")
   })
 
   it("inspect", async function() {
-    await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
-      "geojson:example"
-    ]));
-    await browser.acceptAlert();
-    const elem = await $(".maputnik-toolbar-link")
-    await elem.waitForExist()  
-    await browser.flushReactUpdates();
+    await driver.setStyle(["geojson:example"]);
 
-    const selectBox = await $(wd.$("nav:inspect", "select"));
-    await selectBox.selectByAttribute('value', 'inspect');
+    await driver.selectFromDropdown(driver.getDataAttribute("nav:inspect", "select"), 'inspect');
+    await driver.zeroTimeout();
 
-    await browser.flushReactUpdates();
-
-    await browser.takeScreenShot("/inspect.png")
+    await driver.takeScreenShot("/inspect.png")
   })
 })
 

test/functional/util/webdriverio-ext.js

@@ -1,63 +0,0 @@
-var artifacts = require("../../artifacts");
-var path = require("path");
-
-const extendWebdriverIO = async function() {
-  await browser.setTimeout({ 'script': 20 * 1000 });
-  await browser.setTimeout({ 'implicit': 20 * 1000 });
-
-  var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots");
-
-  /**
-   * Sometimes chrome driver can result in the wrong text.
-   *
-   * See <https://github.com/webdriverio/webdriverio/issues/1886>
-   */
-  try {
-    await browser.addCommand('setValueSafe', async function (selector, text) {
-      for (var i = 0; i < 10; i++) {
-        const elem = await $(selector);
-        await elem.waitForDisplayed(500);
-
-        var elements = await browser.findElements("css selector", selector);
-        if (elements.length > 1) {
-          throw "Too many elements found";
-        }
-
-        const elem2 = await $(selector);
-        await elem2.setValue(text);
-
-        var browserText = await elem2.getValue();
-
-        if (browserText == text) {
-          return;
-        }
-        else {
-          console.error("Warning: setValue failed, trying again");
-        }
-      }
-
-      // Wait for change events to fire and state updated
-      await browser.flushReactUpdates();
-    })
-
-    await browser.addCommand('takeScreenShot', async function (filepath) {
-      var savepath = path.join(SCREENSHOTS_PATH, filepath);
-      await browser.saveScreenshot(savepath);
-    });
-
-    await browser.addCommand('flushReactUpdates', async function () {
-      await browser.executeAsync(function (done) {
-        // For any events to propagate
-        setTimeout(function () {
-          // For the DOM to be updated.
-          setTimeout(done, 0);
-        }, 0)
-      })
-    })
-
-  } catch (err) {
-    console.error(">>> Ignored error: " + err);
-  }
-}
-
-module.exports = extendWebdriverIO;

test/geojson-server.js

@@ -20,7 +20,7 @@ function buildStyle(opts) {
     "version": 8,
     "name": "Test Style",
     "metadata": {
-      "maputnik:renderer": "mbgljs"
+      "maputnik:renderer": "mlgljs"
     },
     "sources": opts.sources,
     "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",

test/wd-helper.js

@@ -1,6 +0,0 @@
-module.exports = {
-  "$": function(key, selector) {
-    selector = selector || "";
-    return "*[data-wd-key='"+key+"'] "+selector;
-  }
-}