Improve drivers (#856)

Co-authored-by: shelly_goldblit <[email protected]>
Co-authored-by: HarelM <[email protected]>

.github/workflows/ci.yml

@@ -34,12 +34,6 @@ jobs:
     - uses: actions/setup-node@v4
       with:
         node-version-file: '.nvmrc'
-    - uses: actions/cache@v1
-      with:
-        path: ~/.npm
-        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-        restore-keys: |
-          ${{ runner.os }}-node-
     - run: npm ci
     - run: npm run build
     - run: npm run lint
@@ -57,12 +51,6 @@ jobs:
     - uses: actions/setup-node@v4
       with:
         node-version-file: '.nvmrc'
-    - uses: actions/cache@v1
-      with:
-        path: ~/.npm
-        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-        restore-keys: |
-          ${{ runner.os }}-node-
     - run: npm ci
     - run: npm run build
     - run: npm run build-storybook

cypress/e2e/accessibility.cy.ts

@@ -1,7 +1,7 @@
-import MaputnikDriver from "./maputnik-driver";
+import { MaputnikDriver } from "./maputnik-driver";
 
 describe("accessibility", () => {
-  let { beforeAndAfter, when, should } = new MaputnikDriver();
+  let { beforeAndAfter, get, when, then } = new MaputnikDriver();
   beforeAndAfter();
 
   describe("skip links", () => {
@@ -11,30 +11,30 @@ describe("accessibility", () => {
 
     it("skip link to layer list", () => {
       const selector = "root:skip:layer-list";
-      should.exist(selector);
+      then(get.elementByTestId(selector)).shouldExist();
       when.tab();
-      should.beFocused(selector);
+      then(get.elementByTestId(selector)).shouldBeFocused();
       when.click(selector);
-      should.beFocused("skip-target-layer-list");
+      then(get.skipTargetLayerList()).shouldBeFocused();
     });
 
     // This fails for some reason only in Chrome, but passes in firefox. Adding a skip here to allow merge and later on we'll decide if we want to fix this or not.
     it.skip("skip link to layer editor", () => {
       const selector = "root:skip:layer-editor";
-      should.exist(selector);
+      then(get.elementByTestId(selector)).shouldExist();
       when.tab().tab();
-      should.beFocused(selector);
+      then(get.elementByTestId(selector)).shouldBeFocused();
       when.click(selector);
-      should.beFocused("skip-target-layer-editor");
+      then(get.skipTargetLayerEditor()).shouldBeFocused();
     });
 
     it("skip link to map view", () => {
       const selector = "root:skip:map-view";
-      should.exist(selector);
+      then(get.elementByTestId(selector)).shouldExist();
       when.tab().tab().tab();
-      should.beFocused(selector);
+      then(get.elementByTestId(selector)).shouldBeFocused();
       when.click(selector);
-      should.canvasBeFocused();
+      then(get.canvas()).shouldBeFocused();
     });
   });
 });

cypress/e2e/history.cy.ts

@@ -1,7 +1,7 @@
-import MaputnikDriver from "./maputnik-driver";
+import { MaputnikDriver } from "./maputnik-driver";
 
 describe("history", () => {
-  let { beforeAndAfter, when, get, should } = new MaputnikDriver();
+  let { beforeAndAfter, when, get, then } = new MaputnikDriver();
   beforeAndAfter();
 
   let undoKeyCombo: string;
@@ -16,33 +16,29 @@ describe("history", () => {
   it("undo/redo", () => {
     when.setStyle("geojson");
     when.modal.open();
-
-    should.equalStyleStore((a: any) => a.layers, []);
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
 
     when.modal.fillLayers({
       id: "step 1",
       type: "background",
     });
-
-    should.equalStyleStore(
-      (a: any) => a.layers,
-      [
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
         {
           id: "step 1",
           type: "background",
         },
-      ]
-    );
+      ],
+    });
 
     when.modal.open();
     when.modal.fillLayers({
       id: "step 2",
       type: "background",
     });
 
-    should.equalStyleStore(
-      (a: any) => a.layers,
-      [
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
         {
           id: "step 1",
           type: "background",
@@ -51,38 +47,35 @@ describe("history", () => {
           id: "step 2",
           type: "background",
         },
-      ]
-    );
+      ],
+    });
 
     when.typeKeys(undoKeyCombo);
-    should.equalStyleStore(
-      (a: any) => a.layers,
-      [
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
         {
           id: "step 1",
           type: "background",
         },
-      ]
-    );
+      ],
+    });
 
     when.typeKeys(undoKeyCombo);
-    should.equalStyleStore((a: any) => a.layers, []);
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
 
     when.typeKeys(redoKeyCombo);
-    should.equalStyleStore(
-      (a: any) => a.layers,
-      [
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
         {
           id: "step 1",
           type: "background",
         },
-      ]
-    );
+      ],
+    });
 
     when.typeKeys(redoKeyCombo);
-    should.equalStyleStore(
-      (a: any) => a.layers,
-      [
+    then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+      layers: [
         {
           id: "step 1",
           type: "background",
@@ -91,7 +84,7 @@ describe("history", () => {
           id: "step 2",
           type: "background",
         },
-      ]
-    );
+      ],
+    });
   });
 });

cypress/e2e/keyboard.cy.ts

@@ -1,61 +1,60 @@
-import MaputnikDriver from "./maputnik-driver";
+import { MaputnikDriver } from "./maputnik-driver";
 
 describe("keyboard", () => {
-  let { beforeAndAfter, given, when, should } = new MaputnikDriver();
+  let { beforeAndAfter, given, when, get, then } = new MaputnikDriver();
   beforeAndAfter();
   describe("shortcuts", () => {
     beforeEach(() => {
-      given.setupInterception();
+      given.setupMockBackedResponses();
       when.setStyle("");
     });
 
     it("ESC should unfocus", () => {
       const targetSelector = "maputnik-select";
       when.focus(targetSelector);
-      should.beFocused(targetSelector);
-
+      then(get.elementByTestId(targetSelector)).shouldBeFocused();
       when.typeKeys("{esc}");
-      expect(should.notBeFocused(targetSelector));
+      then(get.elementByTestId(targetSelector)).shouldNotBeFocused();
     });
 
     it("'?' should show shortcuts modal", () => {
       when.typeKeys("?");
-      should.beVisible("modal:shortcuts");
+      then(get.elementByTestId("modal:shortcuts")).shouldBeVisible();
     });
 
     it("'o' should show open modal", () => {
       when.typeKeys("o");
-      should.beVisible("modal:open");
+      then(get.elementByTestId("modal:open")).shouldBeVisible();
     });
 
     it("'e' should show export modal", () => {
       when.typeKeys("e");
-      should.beVisible("modal:export");
+      then(get.elementByTestId("modal:export")).shouldBeVisible();
     });
 
     it("'d' should show sources modal", () => {
       when.typeKeys("d");
-      should.beVisible("modal:sources");
+      then(get.elementByTestId("modal:sources")).shouldBeVisible();
     });
 
     it("'s' should show settings modal", () => {
       when.typeKeys("s");
-      should.beVisible("modal:settings");
+      then(get.elementByTestId("modal:settings")).shouldBeVisible();
     });
 
     it("'i' should change map to inspect mode", () => {
       when.typeKeys("i");
-      should.beSelected("nav:inspect", "inspect");
+      then(get.inputValue("maputnik-select")).shouldEqual("inspect");
     });
 
     it("'m' should focus map", () => {
       when.typeKeys("m");
-      should.canvasBeFocused();
+      then(get.canvas()).shouldBeFocused();
     });
 
     it("'!' should show debug modal", () => {
       when.typeKeys("!");
-      should.beVisible("modal:debug");
+      then(get.elementByTestId("modal:debug")).shouldBeVisible();
     });
   });
 });