editor/cypress/e2e/local-file.cy.ts

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 }
          }
        });
    });
  });
});