Use node 16.x

It required converting mocha tests code into async since [@wdio/sync is
deprecated](https://webdriver.io/docs/sync-vs-async/) starting with
node v16.
It removed the dependency on fibers and on [node-gyp + python](https://
webdriver.io/docs/sync-vs-async/#common-issues-in-sync-mode) indirectly
though which is a great thing.

Also moved away from node-sass to sass since [node-sass is deprecated]
(https://sass-lang.com/blog/libsass-is-deprecated).

test/functional/modals/index.js

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