ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-08-26 06:57:26 +00:00
Code Issues Projects Releases Wiki Activity

test: instantiate MaputnikDriver once per describe block

Browse Source 
Make the driver page-lazy (it resolves the running test's page on demand via
an auto fixture) so it can be created a single time at describe scope and
reused across the block's tests, matching the pre-migration ergonomics:

  const { given, get, when, then } = new MaputnikDriver();

instead of pulling `driver` out of a fixture and destructuring it in every
test. Coverage collection and dialog handling move into the auto fixture.

Also inject a bare invalid token ("zzz") in the json-editor parse-error test:
CodeMirror auto-closes brackets/quotes, so " {" no longer reliably breaks the
JSON.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
HarelM
2026-07-08 17:48:44 +03:00
parent 7c5e5358cb
commit ac9186e7f8
11 changed files with 302 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/modals.spec.ts
+72 -99
View File
@@ -1,54 +1,54 @@
import { test, expect, setupMaputnik } from "./fixtures";
import { test, expect } from "./fixtures";
import { MaputnikDriver } from "./maputnik-driver";
import tokens from "../src/config/tokens.json" with { type: "json" };
test.describe("modals", () => {
setupMaputnik();
const { given, get, when, then } = new MaputnikDriver();
test.beforeEach(async ({ driver }) => {
await driver.when.setStyle("");
test.beforeEach(async () => {
await given.setupMockBackedResponses();
// Load a style first so it is persisted to localStorage, then reset the URL
// to the root (no style param) — several tests read the stored style.
await when.setStyle("both");
await when.setStyle("");
});
test.describe("open", () => {
test.beforeEach(async ({ driver }) => {
await driver.when.click("nav:open");
test.beforeEach(async () => {
await when.click("nav:open");
});
test("close", async ({ driver }) => {
const { get, when, then } = driver;
test("close", async () => {
await when.modal.close("modal:open");
await then(get.elementByTestId("modal:open")).shouldNotExist();
});
test("upload", async ({ driver }) => {
const { get, when, then } = driver;
test("upload", async () => {
await when.chooseExampleFile();
await then(get.fixture("example-style.json")).shouldEqualToStoredStyle();
});
test("upload via drag and drop", async ({ driver }) => {
const { get, when, then } = driver;
test("upload via drag and drop", async () => {
await when.dropExampleFile();
await then(get.fixture("example-style.json")).shouldEqualToStoredStyle();
});
test.describe("when click open url", () => {
test.beforeEach(async ({ driver }) => {
const { get, when } = driver;
test.beforeEach(async () => {
const styleFileUrl = get.exampleFileUrl();
await when.setValue("modal:open.url.input", styleFileUrl);
await when.click("modal:open.url.button");
await when.wait(200);
});
test("load from url", async ({ driver }) => {
await driver.then(driver.get.responseBody("example-style.json")).shouldEqualToStoredStyle();
test("load from url", async () => {
await then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
});
});
});
test.describe("shortcuts", () => {
test("open/close", async ({ driver }) => {
const { get, when, then } = driver;
test("open/close", async () => {
await when.setStyle("");
await when.typeKeys("?");
await when.modal.close("modal:shortcuts");
@@ -57,12 +57,11 @@ test.describe("modals", () => {
});
test.describe("export", () => {
test.beforeEach(async ({ driver }) => {
await driver.when.click("nav:export");
test.beforeEach(async () => {
await when.click("nav:export");
});
test("close", async ({ driver }) => {
const { get, when, then } = driver;
test("close", async () => {
await when.modal.close("modal:export");
await then(get.elementByTestId("modal:export")).shouldNotExist();
});
@@ -72,16 +71,15 @@ test.describe("modals", () => {
});
test.describe("sources", () => {
test.beforeEach(async ({ driver }) => {
await driver.when.setStyle("layer");
await driver.when.click("nav:sources");
test.beforeEach(async () => {
await when.setStyle("layer");
await when.click("nav:sources");
});
test.skip("active sources", () => {});
test.skip("public source", () => {});
test("add new source", async ({ driver }) => {
const { get, when, then } = driver;
test("add new source", async () => {
const sourceId = "n1z2v3r";
await when.setValue("modal:sources.add.source_id", sourceId);
await when.select("modal:sources.add.source_type", "tile_vector");
@@ -93,8 +91,7 @@ test.describe("modals", () => {
});
});
test("add new pmtiles source", async ({ driver }) => {
const { get, when, then } = driver;
test("add new pmtiles source", async () => {
const sourceId = "pmtilestest";
await when.setValue("modal:sources.add.source_id", sourceId);
await when.select("modal:sources.add.source_type", "pmtiles_vector");
@@ -115,8 +112,7 @@ test.describe("modals", () => {
});
});
test("add new raster source", async ({ driver }) => {
const { get, when, then } = driver;
test("add new raster source", async () => {
const sourceId = "rastertest";
await when.setValue("modal:sources.add.source_id", sourceId);
await when.select("modal:sources.add.source_type", "tile_raster");
@@ -131,59 +127,56 @@ test.describe("modals", () => {
});
test.describe("inspect", () => {
test("toggle", async ({ driver }) => {
test("toggle", async () => {
// There is no assertion in this test
await driver.when.setStyle("geojson");
await driver.when.select("maputnik-select", "inspect");
await when.setStyle("geojson");
await when.select("maputnik-select", "inspect");
});
});
test.describe("style settings", () => {
test.beforeEach(async ({ driver }) => {
await driver.when.click("nav:settings");
test.beforeEach(async () => {
await when.click("nav:settings");
});
test.describe("when click name filed spec information", () => {
test.beforeEach(async ({ driver }) => {
await driver.when.click("field-doc-button-Name");
test.beforeEach(async () => {
await when.click("field-doc-button-Name");
});
test("should show the spec information", async ({ driver }) => {
await driver.then(driver.get.elementsText("spec-field-doc")).shouldInclude("name for the style");
test("should show the spec information", async () => {
await then(get.elementsText("spec-field-doc")).shouldInclude("name for the style");
});
});
test.describe("when set name and click owner", () => {
test.beforeEach(async ({ driver }) => {
const { when } = driver;
test.beforeEach(async () => {
await when.setValue("modal:settings.name", "foobar");
await when.click("modal:settings.owner");
await when.wait(200);
});
test("show name specifications", async ({ driver }) => {
await driver.then(driver.get.styleFromLocalStorage()).shouldDeepNestedInclude({
test("show name specifications", async () => {
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
name: "foobar",
});
});
});
test.describe("when set owner and click name", () => {
test.beforeEach(async ({ driver }) => {
const { when } = driver;
test.beforeEach(async () => {
await when.setValue("modal:settings.owner", "foobar");
await when.click("modal:settings.name");
await when.wait(200);
});
test("should update owner in local storage", async ({ driver }) => {
await driver.then(driver.get.styleFromLocalStorage()).shouldDeepNestedInclude({
test("should update owner in local storage", async () => {
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
owner: "foobar",
});
});
});
test("sprite url", async ({ driver }) => {
const { get, when, then } = driver;
test("sprite url", async () => {
await when.setTextInJsonEditor('"http://example.com"');
await when.click("modal:settings.name");
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
@@ -191,8 +184,7 @@ test.describe("modals", () => {
});
});
test("sprite object", async ({ driver }) => {
const { get, when, then } = driver;
test("sprite object", async () => {
await when.setTextInJsonEditor(JSON.stringify([{ id: "1", url: "2" }]));
await when.click("modal:settings.name");
@@ -201,8 +193,7 @@ test.describe("modals", () => {
});
});
test("glyphs url", async ({ driver }) => {
const { get, when, then } = driver;
test("glyphs url", async () => {
const glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
await when.setValue("modal:settings.glyphs", glyphsUrl);
await when.click("modal:settings.name");
@@ -211,8 +202,7 @@ test.describe("modals", () => {
});
});
test("maptiler access token", async ({ driver }) => {
const { get, when, then } = driver;
test("maptiler access token", async () => {
const apiKey = "testing123";
await when.setValue("modal:settings.maputnik:openmaptiles_access_token", apiKey);
await when.click("modal:settings.name");
@@ -221,8 +211,7 @@ test.describe("modals", () => {
});
});
test("thunderforest access token", async ({ driver }) => {
const { get, when, then } = driver;
test("thunderforest access token", async () => {
const apiKey = "testing123";
await when.setValue("modal:settings.maputnik:thunderforest_access_token", apiKey);
await when.click("modal:settings.name");
@@ -231,8 +220,7 @@ test.describe("modals", () => {
});
});
test("stadia access token", async ({ driver }) => {
const { get, when, then } = driver;
test("stadia access token", async () => {
const apiKey = "testing123";
await when.setValue("modal:settings.maputnik:stadia_access_token", apiKey);
await when.click("modal:settings.name");
@@ -241,8 +229,7 @@ test.describe("modals", () => {
});
});
test("locationiq access token", async ({ driver }) => {
const { get, when, then } = driver;
test("locationiq access token", async () => {
const apiKey = "testing123";
await when.setValue("modal:settings.maputnik:locationiq_access_token", apiKey);
await when.click("modal:settings.name");
@@ -251,32 +238,28 @@ test.describe("modals", () => {
});
});
test("style projection mercator", async ({ driver }) => {
const { get, when, then } = driver;
test("style projection mercator", async () => {
await when.select("modal:settings.projection", "mercator");
await then(get.styleFromLocalStorage().then((style) => style.projection)).shouldInclude({
type: "mercator",
});
});
test("style projection globe", async ({ driver }) => {
const { get, when, then } = driver;
test("style projection globe", async () => {
await when.select("modal:settings.projection", "globe");
await then(get.styleFromLocalStorage().then((style) => style.projection)).shouldInclude({
type: "globe",
});
});
test("style projection vertical-perspective", async ({ driver }) => {
const { get, when, then } = driver;
test("style projection vertical-perspective", async () => {
await when.select("modal:settings.projection", "vertical-perspective");
await then(get.styleFromLocalStorage().then((style) => style.projection)).shouldInclude({
type: "vertical-perspective",
});
});
test("style renderer", async ({ driver }) => {
const { get, when, then } = driver;
test("style renderer", async () => {
await when.select("modal:settings.maputnik:renderer", "ol");
await then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual("ol");
@@ -286,9 +269,7 @@ test.describe("modals", () => {
});
});
test("include API key when change renderer", async ({ driver }) => {
const { get, when, given } = driver;
test("include API key when change renderer", async () => {
await when.click("modal:settings.close-modal");
await when.click("nav:open");
@@ -297,10 +278,10 @@ test.describe("modals", () => {
await when.click("nav:settings");
await when.select("modal:settings.maputnik:renderer", "mlgljs");
await driver.then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual("mlgljs");
await then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual("mlgljs");
await when.select("modal:settings.maputnik:renderer", "ol");
await driver.then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual("ol");
await then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual("ol");
await given.intercept(
"https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=*",
@@ -309,7 +290,7 @@ test.describe("modals", () => {
);
await when.select("modal:settings.maputnik:renderer", "mlgljs");
await driver.then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual("mlgljs");
await then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual("mlgljs");
const request = await when.waitForResponse("tileRequest");
expect(request.url()).toContain(
@@ -319,13 +300,12 @@ test.describe("modals", () => {
});
test.describe("add layer", () => {
test.beforeEach(async ({ driver }) => {
await driver.when.setStyle("layer");
await driver.when.modal.open();
test.beforeEach(async () => {
await when.setStyle("layer");
await when.modal.open();
});
test("shows duplicate id error", async ({ driver }) => {
const { get, when, then } = driver;
test("shows duplicate id error", async () => {
await when.setValue("add-layer.layer-id.input", "background");
await when.click("add-layer");
await then(get.elementByTestId("modal:add-layer")).shouldExist();
@@ -338,12 +318,11 @@ test.describe("modals", () => {
});
test.describe("global state", () => {
test.beforeEach(async ({ driver }) => {
await driver.when.click("nav:global-state");
test.beforeEach(async () => {
await when.click("nav:global-state");
});
test("add variable", async ({ driver }) => {
const { get, when, then } = driver;
test("add variable", async () => {
await when.wait(100);
await when.click("global-state-add-variable");
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
@@ -351,8 +330,7 @@ test.describe("modals", () => {
});
});
test("add multiple variables", async ({ driver }) => {
const { get, when, then } = driver;
test("add multiple variables", async () => {
await when.click("global-state-add-variable");
await when.click("global-state-add-variable");
await when.click("global-state-add-variable");
@@ -362,8 +340,7 @@ test.describe("modals", () => {
});
});
test("remove variable", async ({ driver }) => {
const { get, when, then } = driver;
test("remove variable", async () => {
await when.click("global-state-add-variable");
await when.click("global-state-add-variable");
await when.click("global-state-add-variable");
@@ -374,8 +351,7 @@ test.describe("modals", () => {
});
});
test("edit variable key", async ({ driver }) => {
const { get, when, then } = driver;
test("edit variable key", async () => {
await when.click("global-state-add-variable");
await when.wait(100);
await when.setValue("global-state-variable-key:0", "mykey");
@@ -386,8 +362,7 @@ test.describe("modals", () => {
});
});
test("edit variable value", async ({ driver }) => {
const { get, when, then } = driver;
test("edit variable value", async () => {
await when.click("global-state-add-variable");
await when.wait(100);
await when.setValue("global-state-variable-value:0", "myvalue");
@@ -400,12 +375,11 @@ test.describe("modals", () => {
});
test.describe("error panel", () => {
test("not visible when no errors", async ({ driver }) => {
await driver.then(driver.get.element("maputnik-message-panel-error")).shouldNotExist();
test("not visible when no errors", async () => {
await then(get.element("maputnik-message-panel-error")).shouldNotExist();
});
test("visible on style error", async ({ driver }) => {
const { get, when, then } = driver;
test("visible on style error", async () => {
await when.modal.open();
await when.modal.fillLayers({
type: "circle",
@@ -416,8 +390,7 @@ test.describe("modals", () => {
});
test.describe("Handle localStorage QuotaExceededError", () => {
test("handles quota exceeded error when opening style from URL", async ({ driver, page }) => {
const { get, when, then } = driver;
test("handles quota exceeded error when opening style from URL", async ({ page }) => {
// Clear localStorage to start fresh
await when.clearLocalStorage();