added cypress e2e test (using cypress-image-diff)

Author: prusswan

cypress-image-diff-screenshots/baseline/local-file.cy.ts-local-pmtiles-inspect.png

@@ -1,5 +1,6 @@
 import { defineConfig } from "cypress";
 import { createRequire } from "module";
+import getCompareSnapshotsPlugin from 'cypress-image-diff-js/plugin';
 const require = createRequire(import.meta.url);
 
 export default defineConfig({
@@ -12,7 +13,7 @@ export default defineConfig({
     setupNodeEvents(on, config) {
       // implement node event listeners here
       require("@cypress/code-coverage/task")(on, config);
-      return config;
+      return getCompareSnapshotsPlugin(on, config);
     },
     baseUrl: "http://localhost:8888",
     retries: {

cypress.config.ts

@@ -0,0 +1,47 @@
+import { MaputnikDriver } from "./maputnik-driver";
+
+describe("local file", () => {
+  const { when, get } = new MaputnikDriver();
+
+  beforeEach(() => {
+    when.setStyle("");
+  });
+
+  describe("PMTiles", () => {
+    it("loads local file for tile inspect", () => {
+      const sourceId = "source";
+      const fileName = "polygon-z0.pmtiles" // a small polygon located at Null Island
+      const baseUrl = "http://localhost:8888/";
+      const zoomTarget = "#14/0.5/0.5";
+
+      when.visit(`${baseUrl}${zoomTarget}`);
+
+      get
+        .bySelector("file", "type")
+        .selectFile(`cypress/fixtures/${fileName}`, { force: true });
+
+      when.click("nav:sources");
+      when.setValue("modal:sources.add.source_id", sourceId);
+      when.select("modal:sources.add.source_type", "tile_vector");
+      get.elementByTestId("modal:sources.add.tile_url").find('.maputnik-string')
+        .clear()
+        .type(`pmtiles://${fileName}/{z}/{x}/{y}`, { parseSpecialCharSequences: false });
+      when.select("modal:sources.add.scheme_type", "xyz");
+      when.setValue("modal:sources.add.maxzoom", "0");
+      when.click("modal:sources.add.add_source");
+      when.click("modal:sources.close-modal");
+      when.wait(200);
+
+      when.select("maputnik-select", "inspect");
+
+      get.element(".maplibregl-map").trigger("mouseover", { force: true, waitForAnimations: true }).wait(2000)
+        // @ts-ignore
+        .compareSnapshot({
+          name: 'local-pmtiles-inspect',
+          cypressScreenshotOptions: {
+            clip: { x: 100, y: 100, width: 10, height: 10 }
+          }
+        });
+    });
+  });
+});

cypress/e2e/local-file.cy.ts

@@ -18,5 +18,8 @@ import "@cypress/code-coverage/support";
 import "cypress-plugin-tab";
 import "./commands";
 
+import compareSnapshotCommand from 'cypress-image-diff-js/command';
+compareSnapshotCommand();
+
 // Alternatively you can use CommonJS syntax:
 // require('./commands')