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

cypress.config.ts

@@ -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/e2e/local-file.cy.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/support/e2e.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')

package.json

@@ -11,6 +11,7 @@
     "i18n:refresh": "i18next 'src/**/*.{ts,tsx,js,jsx}'",
     "lint": "eslint",
     "test": "cypress run",
+    "test1": "cypress run --spec cypress/e2e/local-file.cy.ts",
     "cy:open": "cypress open",
     "lint-css": "stylelint \"src/styles/*.scss\"",
     "sort-styles": "jq 'sort_by(.id)' src/config/styles.json > tmp.json && mv tmp.json src/config/styles.json"
@@ -127,6 +128,9 @@
     "@vitejs/plugin-react": "^4.3.4",
     "cors": "^2.8.5",
     "cypress": "^14.0.0",
+    "cypress-image-diff-html-report": "^2.2.0",
+    "cypress-image-diff-js": "^2.3.0",
+    "cypress-image-snapshot": "^4.0.1",
     "cypress-plugin-tab": "^1.0.5",
     "eslint": "^9.18.0",
     "eslint-plugin-react": "^7.37.4",

src/components/FieldDynamicArray.tsx

@@ -3,12 +3,16 @@ import InputDynamicArray, {FieldDynamicArrayProps as InputDynamicArrayProps} fro
 import Fieldset from './Fieldset'
 
 type FieldDynamicArrayProps = InputDynamicArrayProps & {
-  name?: string
+  name?: string,
+  "data-wd-key"?: string,
 };
 
 export default class FieldDynamicArray extends React.Component<FieldDynamicArrayProps> {
   render() {
-    return <Fieldset label={this.props.label}>
+    return <Fieldset
+      label={this.props.label}
+      data-wd-key={this.props["data-wd-key"]}
+    >
       <InputDynamicArray {...this.props} />
     </Fieldset>
   }

src/components/Fieldset.tsx

@@ -7,6 +7,7 @@ type FieldsetProps = PropsWithChildren & {
   label?: string,
   fieldSpec?: { doc?: string },
   action?: ReactElement,
+  "data-wd-key"?: string,
 };
 
 type FieldsetState = {
@@ -31,7 +32,12 @@ export default class Fieldset extends React.Component<FieldsetProps, FieldsetSta
   }
 
   render () {
-    return <div className="maputnik-input-block" role="group" aria-labelledby={this._labelId}>
+    return <div
+      className="maputnik-input-block"
+      role="group"
+      aria-labelledby={this._labelId}
+      data-wd-key={this.props["data-wd-key"]}
+    >
       {this.props.fieldSpec &&
         <div className="maputnik-input-block-label">
           <FieldDocLabel

src/components/InputDynamicArray.tsx

@@ -107,6 +107,7 @@ class FieldDynamicArrayInternal extends React.Component<FieldDynamicArrayInterna
         style={this.props.style}
         key={i}
         className="maputnik-array-block"
+        data-wd-key="test123-array-block"
       >
         <div className="maputnik-array-block-action">
           {deleteValueBtn}

src/components/ModalSourcesTypeEditor.tsx

@@ -67,6 +67,7 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
       type="url"
       value={tiles}
       onChange={this.changeTileUrls.bind(this)}
+      data-wd-key="modal:sources.add.tile_url"
     />
   }
 
@@ -105,6 +106,7 @@ class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
           ...this.props.source,
           maxzoom: maxzoom
         })}
+        data-wd-key="modal:sources.add.maxzoom"
       />
       {this.props.children}
     </div>