Refactor driver for E2E (#843)

This is basically the content of #841 with the code review changes and
relevant fixes to tests/driver code to pass the tests.
CC: @ShellyDCMS

After this we should lint the project and add the lint to the CI to make
sure it doesn't break.

---------

Co-authored-by: ShellyDCMS <60476837+ShellyDCMS@users.noreply.github.com>
Co-authored-by: shelly_goldblit <shelly_goldblit@dell.com>

src/components/App.jsx

@@ -682,7 +682,7 @@ export default class App extends React.Component {
       elementStyle.filter = `url('#${filterName}')`;
     }
 
-    return <div style={elementStyle} className="maputnik-map__container">
+    return <div style={elementStyle} className="maputnik-map__container" data-wd-key="maplibre:container">
       {mapElement}
     </div>
   }

src/components/AppToolbar.jsx

@@ -244,12 +244,13 @@ export default class AppToolbar extends React.Component {
             <label>View
               <select
                 className="maputnik-select"
+                data-wd-key="maputnik-select"
                 onChange={(e) => this.handleSelection(e.target.value)}
                 value={currentView.id}
               >
                 {views.filter(v => v.group === "general").map((item) => {
                   return (
-                    <option key={item.id} value={item.id} disabled={item.disabled}>
+                    <option key={item.id} value={item.id} disabled={item.disabled} data-wd-key={item.id}>
                       {item.title}
                     </option>
                   );

src/components/LayerEditor.jsx

@@ -305,7 +305,7 @@ export default class LayerEditor extends React.Component {
               onSelection={handleSelection}
               closeOnSelection={false}
             >
-              <Button id="skip-target-layer-editor" className='more-menu__button' title="Layer options">
+              <Button id="skip-target-layer-editor" data-wd-key="skip-target-layer-editor" className='more-menu__button' title="Layer options">
                 <MdMoreVert className="more-menu__button__svg" />
               </Button>
               <Menu>

src/components/LayerList.jsx

@@ -286,6 +286,7 @@ class LayerListContainer extends React.Component {
           <div className="maputnik-multibutton">
             <button
               id="skip-target-layer-list"
+              data-wd-key="skip-target-layer-list"
               onClick={this.toggleLayers}
               className="maputnik-button">
               {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}

src/components/MapMaplibreGl.jsx

@@ -230,6 +230,7 @@ export default class MapMaplibreGl extends React.Component {
         role="region"
         aria-label="Map view"
         ref={x => this.container = x}
+        data-wd-key="maplibre:map"
       ></div>
     }
     else {

src/libs/debug.ts

@@ -1,12 +1,16 @@
-import querystring from 'querystring'
+interface DebugStore {
+  [namespace: string]: {
+    [key: string]: any
+  }
+}
 
-
-const debugStore = {};
+const debugStore: DebugStore = {};
 
 function enabled() {
-  const qs = querystring.parse(window.location.search.slice(1));
-  if(qs.hasOwnProperty("debug")) {
-    return !!qs.debug.match(/^(|1|true)$/);
+  const qs = new URL(window.location.href).searchParams;
+  const debugQs = qs.get("debug");
+  if(debugQs) {
+    return !!debugQs.match(/^(|1|true)$/);
   }
   else {
     return false;
@@ -17,7 +21,7 @@ function genErr() {
   return new Error("Debug not enabled, enable by appending '?debug' to your query string");
 }
 
-function set(namespace, key, value) {
+function set(namespace: keyof DebugStore, key: string, value: any) {
   if(!enabled()) {
     throw genErr();
   }
@@ -25,7 +29,7 @@ function set(namespace, key, value) {
   debugStore[namespace][key] = value;
 }
 
-function get(namespace, key) {
+function get(namespace: keyof DebugStore, key: string) {
   if(!enabled()) {
     throw genErr();
   }
@@ -38,7 +42,7 @@ const mod = {
   enabled,
   get,
   set
-}
+};
 
-window.debug = mod;
+(window as any).debug = mod;
 export default mod;

src/libs/zoomcontrol.js

@@ -3,6 +3,7 @@ export default class ZoomControl {
     this._map = map;
     this._container = document.createElement('div');
     this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom';
+    this._container.setAttribute("data-wd-key", "maplibre:ctrl-zoom");
     this._container.innerHTML = `
       Zoom: <span></span>
     `;