diff --git a/e2e/accessibility.spec.ts b/e2e/accessibility.spec.ts index 58855dfc..e1c91b5f 100644 --- a/e2e/accessibility.spec.ts +++ b/e2e/accessibility.spec.ts @@ -1,16 +1,16 @@ -import { test } from "./fixtures"; +import { test, describe, beforeEach } from "./fixtures"; import { MaputnikDriver } from "./maputnik-driver"; -test.describe("accessibility", () => { +describe("accessibility", () => { const { given, get, when, then } = new MaputnikDriver(); - test.beforeEach(async () => { + beforeEach(async () => { await given.setupMockBackedResponses(); await when.setStyle("both"); }); - test.describe("skip links", () => { - test.beforeEach(async () => { + describe("skip links", () => { + beforeEach(async () => { await when.setStyle("layer"); }); diff --git a/e2e/code-editor.spec.ts b/e2e/code-editor.spec.ts index 9d793fcf..0b7c284c 100644 --- a/e2e/code-editor.spec.ts +++ b/e2e/code-editor.spec.ts @@ -1,10 +1,10 @@ -import { test } from "./fixtures"; +import { beforeEach, describe, test } from "./fixtures"; import { MaputnikDriver } from "./maputnik-driver"; -test.describe("code editor", () => { +describe("code editor", () => { const { given, get, when, then } = new MaputnikDriver(); - test.beforeEach(async () => { + beforeEach(async () => { await given.setupMockBackedResponses(); await when.setStyle("both"); }); diff --git a/e2e/fixtures.ts b/e2e/fixtures.ts index a8631de5..72e96791 100644 --- a/e2e/fixtures.ts +++ b/e2e/fixtures.ts @@ -1,4 +1,4 @@ -import { test as base, expect, type Page } from "@playwright/test"; +import { test, expect, type Page } from "@playwright/test"; import { readCoverage, writeCoverage } from "./coverage"; let activePage: Page | undefined; @@ -22,7 +22,7 @@ export function recordCoverageChunk(chunk: unknown): void { * MaputnikDriver, auto-accepts confirm dialogs, and writes the istanbul * coverage collected during the test to `.nyc_output`. */ -export const test = base.extend<{ maputnikPage: void }>({ +const extendedTest = test.extend<{ maputnikPage: void }>({ maputnikPage: [ async ({ page }, use, testInfo) => { activePage = page; @@ -43,4 +43,11 @@ export const test = base.extend<{ maputnikPage: void }>({ ], }); -export { expect }; +const describe = extendedTest.describe; +const beforeEach = extendedTest.beforeEach; +export { + expect, + describe, + extendedTest as test, + beforeEach, +}; diff --git a/e2e/history.spec.ts b/e2e/history.spec.ts index 94c6b8e5..97f1016d 100644 --- a/e2e/history.spec.ts +++ b/e2e/history.spec.ts @@ -1,13 +1,13 @@ -import { test } from "./fixtures"; +import { beforeEach, describe, test } from "./fixtures"; import { MaputnikDriver } from "./maputnik-driver"; -test.describe("history", () => { +describe("history", () => { const { given, get, when, then } = new MaputnikDriver(); const undoKeyCombo = process.platform === "darwin" ? "{meta}z" : "{ctrl}z"; const redoKeyCombo = process.platform === "darwin" ? "{meta}{shift}z" : "{ctrl}y"; - test.beforeEach(async () => { + beforeEach(async () => { await given.setupMockBackedResponses(); await when.setStyle("both"); }); diff --git a/e2e/i18n.spec.ts b/e2e/i18n.spec.ts index c9664fb5..96269067 100644 --- a/e2e/i18n.spec.ts +++ b/e2e/i18n.spec.ts @@ -1,15 +1,15 @@ -import { test } from "./fixtures"; +import { beforeEach, describe, test } from "./fixtures"; import { MaputnikDriver } from "./maputnik-driver"; -test.describe("i18n", () => { +describe("i18n", () => { const { given, get, when, then } = new MaputnikDriver(); - test.beforeEach(async () => { + beforeEach(async () => { await given.setupMockBackedResponses(); await when.setStyle("both"); }); - test.describe("language detector", () => { + describe("language detector", () => { test("English", async () => { await when.visit("?lng=en"); await then(get.elementByTestId("maputnik-lang-select")).shouldHaveValue("en"); @@ -21,8 +21,8 @@ test.describe("i18n", () => { }); }); - test.describe("language switcher", () => { - test.beforeEach(async () => { + describe("language switcher", () => { + beforeEach(async () => { await when.setStyle("layer"); }); diff --git a/e2e/keyboard.spec.ts b/e2e/keyboard.spec.ts index 5a72b6e9..d367e396 100644 --- a/e2e/keyboard.spec.ts +++ b/e2e/keyboard.spec.ts @@ -1,16 +1,16 @@ -import { test } from "./fixtures"; +import { beforeEach, describe, test } from "./fixtures"; import { MaputnikDriver } from "./maputnik-driver"; -test.describe("keyboard", () => { +describe("keyboard", () => { const { given, get, when, then } = new MaputnikDriver(); - test.beforeEach(async () => { + beforeEach(async () => { await given.setupMockBackedResponses(); await when.setStyle("both"); }); - test.describe("shortcuts", () => { - test.beforeEach(async () => { + describe("shortcuts", () => { + beforeEach(async () => { await given.setupMockBackedResponses(); await when.setStyle(""); }); diff --git a/e2e/layer-editor.spec.ts b/e2e/layer-editor.spec.ts index 1745f2f1..22a3f579 100644 --- a/e2e/layer-editor.spec.ts +++ b/e2e/layer-editor.spec.ts @@ -1,11 +1,11 @@ import { v1 as uuid } from "uuid"; -import { test } from "./fixtures"; +import { beforeEach, describe, test } from "./fixtures"; import { MaputnikDriver } from "./maputnik-driver"; -test.describe("layer editor", () => { +describe("layer editor", () => { const { given, get, when, then } = new MaputnikDriver(); - test.beforeEach(async () => { + beforeEach(async () => { await given.setupMockBackedResponses(); await when.setStyle("both"); await when.modal.open(); @@ -41,7 +41,7 @@ test.describe("layer editor", () => { }); }); - test.describe("source", () => { + describe("source", () => { test("should show error when the source is invalid", async () => { await when.modal.fillLayers({ type: "circle", @@ -53,10 +53,10 @@ test.describe("layer editor", () => { }); }); - test.describe("min-zoom", () => { + describe("min-zoom", () => { let bgId: string; - test.beforeEach(async () => { + beforeEach(async () => { bgId = await createBackground(); await when.click("layer-list-item:background:" + bgId); await when.setValue("min-zoom.input-text", "1"); @@ -78,10 +78,10 @@ test.describe("layer editor", () => { }); }); - test.describe("max-zoom", () => { + describe("max-zoom", () => { let bgId: string; - test.beforeEach(async () => { + beforeEach(async () => { bgId = await createBackground(); await when.click("layer-list-item:background:" + bgId); await when.setValue("max-zoom.input-text", "1"); @@ -95,11 +95,11 @@ test.describe("layer editor", () => { }); }); - test.describe("comments", () => { + describe("comments", () => { let bgId: string; const comment = "42"; - test.beforeEach(async () => { + beforeEach(async () => { bgId = await createBackground(); await when.click("layer-list-item:background:" + bgId); await when.setValue("layer-comment.input", comment); @@ -118,8 +118,8 @@ test.describe("layer editor", () => { }); }); - test.describe("when unsetting", () => { - test.beforeEach(async () => { + describe("when unsetting", () => { + beforeEach(async () => { await when.clear("layer-comment.input"); await when.click("min-zoom.input-text"); }); @@ -132,9 +132,9 @@ test.describe("layer editor", () => { }); }); - test.describe("color", () => { + describe("color", () => { let bgId: string; - test.beforeEach(async () => { + beforeEach(async () => { bgId = await createBackground(); await when.click("layer-list-item:background:" + bgId); await when.click("spec-field:background-color"); @@ -147,9 +147,9 @@ test.describe("layer editor", () => { }); }); - test.describe("opacity", () => { + describe("opacity", () => { let bgId: string; - test.beforeEach(async () => { + beforeEach(async () => { bgId = await createBackground(); await when.click("layer-list-item:background:" + bgId); await when.type("spec-field-input:background-opacity", "0."); @@ -165,12 +165,12 @@ test.describe("layer editor", () => { }); }); - test.describe("filter", () => { + describe("filter", () => { test.skip("expand/collapse", () => {}); test.skip("compound filter", () => {}); }); - test.describe("layout", () => { + describe("layout", () => { test("text-font", async () => { await when.setStyle("font"); await when.collapseGroupInLayerEditor(); @@ -184,14 +184,14 @@ test.describe("layer editor", () => { }); }); - test.describe("paint", () => { + describe("paint", () => { test.skip("expand/collapse", () => {}); test.skip("color", () => {}); test.skip("pattern", () => {}); test.skip("opacity", () => {}); }); - test.describe("json-editor", () => { + describe("json-editor", () => { test("add", async () => { const id = await when.modal.fillLayers({ type: "circle", @@ -227,7 +227,7 @@ test.describe("layer editor", () => { }); }); - test.describe("sticky header", () => { + describe("sticky header", () => { test("should keep layer header visible when scrolling properties", async () => { // Setup: Create a layer with many properties (e.g. symbol layer) await when.modal.fillLayers({ diff --git a/e2e/layers-list.spec.ts b/e2e/layers-list.spec.ts index 95378a57..6b6add67 100644 --- a/e2e/layers-list.spec.ts +++ b/e2e/layers-list.spec.ts @@ -1,18 +1,18 @@ -import { test } from "./fixtures"; +import { beforeEach, describe, test } from "./fixtures"; import { MaputnikDriver } from "./maputnik-driver"; -test.describe("layers list", () => { +describe("layers list", () => { const { given, get, when, then } = new MaputnikDriver(); - test.beforeEach(async () => { + beforeEach(async () => { await given.setupMockBackedResponses(); await when.setStyle("both"); await when.modal.open(); }); - test.describe("ops", () => { + describe("ops", () => { let id: string; - test.beforeEach(async () => { + beforeEach(async () => { id = await when.modal.fillLayers({ type: "background" }); }); @@ -22,8 +22,8 @@ test.describe("layers list", () => { }); }); - test.describe("when clicking delete", () => { - test.beforeEach(async () => { + describe("when clicking delete", () => { + beforeEach(async () => { await when.click("layer-list-item:" + id + ":delete"); }); test("should empty layers in local storage", async () => { @@ -33,8 +33,8 @@ test.describe("layers list", () => { }); }); - test.describe("when clicking duplicate", () => { - test.beforeEach(async () => { + describe("when clicking duplicate", () => { + beforeEach(async () => { await when.click("layer-list-item:" + id + ":copy"); }); test("should add copy layer in local storage", async () => { @@ -47,8 +47,8 @@ test.describe("layers list", () => { }); }); - test.describe("when clicking hide", () => { - test.beforeEach(async () => { + describe("when clicking hide", () => { + beforeEach(async () => { await when.click("layer-list-item:" + id + ":toggle-visibility"); }); @@ -58,8 +58,8 @@ test.describe("layers list", () => { }); }); - test.describe("when clicking show", () => { - test.beforeEach(async () => { + describe("when clicking show", () => { + beforeEach(async () => { await when.click("layer-list-item:" + id + ":toggle-visibility"); }); @@ -70,9 +70,9 @@ test.describe("layers list", () => { }); }); - test.describe("when selecting a layer", () => { + describe("when selecting a layer", () => { let secondId: string; - test.beforeEach(async () => { + beforeEach(async () => { await when.modal.open(); secondId = await when.modal.fillLayers({ id: "second-layer", @@ -89,7 +89,7 @@ test.describe("layers list", () => { }); }); - test.describe("background", () => { + describe("background", () => { test("add", async () => { const id = await when.modal.fillLayers({ type: "background" }); await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ @@ -100,7 +100,7 @@ test.describe("layers list", () => { test.skip("modify", () => {}); }); - test.describe("fill", () => { + describe("fill", () => { test("add", async () => { const id = await when.modal.fillLayers({ type: "fill", layer: "example" }); await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ @@ -112,7 +112,7 @@ test.describe("layers list", () => { test.skip("change source", () => {}); }); - test.describe("line", () => { + describe("line", () => { test("add", async () => { const id = await when.modal.fillLayers({ type: "line", layer: "example" }); await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ @@ -151,7 +151,7 @@ test.describe("layers list", () => { }); }); - test.describe("symbol", () => { + describe("symbol", () => { test("add", async () => { const id = await when.modal.fillLayers({ type: "symbol", layer: "example" }); await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ @@ -189,7 +189,7 @@ test.describe("layers list", () => { }); }); - test.describe("raster", () => { + describe("raster", () => { test("add", async () => { const id = await when.modal.fillLayers({ type: "raster", layer: "raster" }); await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ @@ -198,7 +198,7 @@ test.describe("layers list", () => { }); }); - test.describe("circle", () => { + describe("circle", () => { test("add", async () => { const id = await when.modal.fillLayers({ type: "circle", layer: "example" }); await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ @@ -207,7 +207,7 @@ test.describe("layers list", () => { }); }); - test.describe("fill extrusion", () => { + describe("fill extrusion", () => { test("add", async () => { const id = await when.modal.fillLayers({ type: "fill-extrusion", layer: "example" }); await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ @@ -216,7 +216,7 @@ test.describe("layers list", () => { }); }); - test.describe("hillshade", () => { + describe("hillshade", () => { test("add", async () => { const id = await when.modal.fillLayers({ type: "hillshade", layer: "example" }); await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ @@ -267,7 +267,7 @@ test.describe("layers list", () => { }); }); - test.describe("color-relief", () => { + describe("color-relief", () => { test("add", async () => { const id = await when.modal.fillLayers({ type: "color-relief", layer: "example" }); await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ @@ -285,7 +285,7 @@ test.describe("layers list", () => { }); }); - test.describe("groups", () => { + describe("groups", () => { test("simple", async () => { await when.setStyle("geojson"); @@ -308,7 +308,7 @@ test.describe("layers list", () => { }); }); - test.describe("drag and drop", () => { + describe("drag and drop", () => { test("move layer should update local storage", async () => { await when.modal.open(); const firstId = await when.modal.fillLayers({ id: "a", type: "background" }); @@ -329,7 +329,7 @@ test.describe("layers list", () => { }); }); - test.describe("sticky header", () => { + describe("sticky header", () => { test("should keep header visible when scrolling layer list", async () => { // Setup: Create multiple layers to enable scrolling for (let i = 0; i < 20; i++) { diff --git a/e2e/map.spec.ts b/e2e/map.spec.ts index 48165a1a..9fba4096 100644 --- a/e2e/map.spec.ts +++ b/e2e/map.spec.ts @@ -1,15 +1,15 @@ -import { test } from "./fixtures"; +import { beforeEach, describe, test } from "./fixtures"; import { MaputnikDriver } from "./maputnik-driver"; -test.describe("map", () => { +describe("map", () => { const { given, get, when, then } = new MaputnikDriver(); - test.beforeEach(async () => { + beforeEach(async () => { await given.setupMockBackedResponses(); await when.setStyle("both"); }); - test.describe("zoom level", () => { + describe("zoom level", () => { test("via url", async () => { const zoomLevel = 12.37; await when.setStyle("geojson", zoomLevel); @@ -38,14 +38,14 @@ test.describe("map", () => { }); }); - test.describe("search", () => { + describe("search", () => { test("should exist", async () => { await then(get.searchControl()).shouldBeVisible(); }); }); - test.describe("popup", () => { - test.beforeEach(async () => { + describe("popup", () => { + beforeEach(async () => { await when.setStyle("rectangles"); await then(get.locationHash()).shouldExist(); }); diff --git a/e2e/modals.spec.ts b/e2e/modals.spec.ts index 300f06c1..68d4b962 100644 --- a/e2e/modals.spec.ts +++ b/e2e/modals.spec.ts @@ -1,11 +1,11 @@ -import { test, expect } from "./fixtures"; +import { test, expect, describe, beforeEach } from "./fixtures"; import { MaputnikDriver } from "./maputnik-driver"; import tokens from "../src/config/tokens.json" with { type: "json" }; -test.describe("modals", () => { +describe("modals", () => { const { given, get, when, then } = new MaputnikDriver(); - test.beforeEach(async () => { + 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. @@ -13,8 +13,8 @@ test.describe("modals", () => { await when.setStyle(""); }); - test.describe("open", () => { - test.beforeEach(async () => { + describe("open", () => { + beforeEach(async () => { await when.click("nav:open"); }); @@ -33,8 +33,8 @@ test.describe("modals", () => { await then(get.fixture("example-style.json")).shouldEqualToStoredStyle(); }); - test.describe("when click open url", () => { - test.beforeEach(async () => { + describe("when click open url", () => { + beforeEach(async () => { const styleFileUrl = get.exampleFileUrl(); await when.setValue("modal:open.url.input", styleFileUrl); @@ -47,7 +47,7 @@ test.describe("modals", () => { }); }); - test.describe("shortcuts", () => { + describe("shortcuts", () => { test("open/close", async () => { await when.setStyle(""); await when.typeKeys("?"); @@ -56,8 +56,8 @@ test.describe("modals", () => { }); }); - test.describe("export", () => { - test.beforeEach(async () => { + describe("export", () => { + beforeEach(async () => { await when.click("nav:export"); }); @@ -70,8 +70,8 @@ test.describe("modals", () => { test.skip("download", () => {}); }); - test.describe("sources", () => { - test.beforeEach(async () => { + describe("sources", () => { + beforeEach(async () => { await when.setStyle("layer"); await when.click("nav:sources"); }); @@ -126,7 +126,7 @@ test.describe("modals", () => { }); }); - test.describe("inspect", () => { + describe("inspect", () => { test("toggle", async () => { // There is no assertion in this test await when.setStyle("geojson"); @@ -134,13 +134,13 @@ test.describe("modals", () => { }); }); - test.describe("style settings", () => { - test.beforeEach(async () => { + describe("style settings", () => { + beforeEach(async () => { await when.click("nav:settings"); }); - test.describe("when click name filed spec information", () => { - test.beforeEach(async () => { + describe("when click name filed spec information", () => { + beforeEach(async () => { await when.click("field-doc-button-Name"); }); @@ -149,8 +149,8 @@ test.describe("modals", () => { }); }); - test.describe("when set name and click owner", () => { - test.beforeEach(async () => { + describe("when set name and click owner", () => { + beforeEach(async () => { await when.setValue("modal:settings.name", "foobar"); await when.click("modal:settings.owner"); await when.wait(200); @@ -163,8 +163,8 @@ test.describe("modals", () => { }); }); - test.describe("when set owner and click name", () => { - test.beforeEach(async () => { + describe("when set owner and click name", () => { + beforeEach(async () => { await when.setValue("modal:settings.owner", "foobar"); await when.click("modal:settings.name"); await when.wait(200); @@ -299,8 +299,8 @@ test.describe("modals", () => { }); }); - test.describe("add layer", () => { - test.beforeEach(async () => { + describe("add layer", () => { + beforeEach(async () => { await when.setStyle("layer"); await when.modal.open(); }); @@ -313,12 +313,12 @@ test.describe("modals", () => { }); }); - test.describe("sources placeholder", () => { + describe("sources placeholder", () => { test.skip("toggle", () => {}); }); - test.describe("global state", () => { - test.beforeEach(async () => { + describe("global state", () => { + beforeEach(async () => { await when.click("nav:global-state"); }); @@ -374,7 +374,7 @@ test.describe("modals", () => { }); }); - test.describe("error panel", () => { + describe("error panel", () => { test("not visible when no errors", async () => { await then(get.element("maputnik-message-panel-error")).shouldNotExist(); }); @@ -389,7 +389,7 @@ test.describe("modals", () => { }); }); - test.describe("Handle localStorage QuotaExceededError", () => { + describe("Handle localStorage QuotaExceededError", () => { test("handles quota exceeded error when opening style from URL", async ({ page }) => { // Clear localStorage to start fresh await when.clearLocalStorage();