ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-07-09 15:37:28 +00:00
Code Issues Projects Releases Wiki Activity

Move things back to where this will still work.

Browse Source
This commit is contained in:
HarelM
2026-07-08 15:05:35 +03:00
parent 4249e9beb9
commit 8344a30f5d
21 changed files with 80 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/accessibility.spec.ts
+4 -2
View File
@@ -1,10 +1,12 @@
import { MaputnikDriver } from "./maputnik-driver";
test.describe("accessibility", () => {
const test = it;
describe("accessibility", () => {
const { beforeAndAfter, get, when, then } = new MaputnikDriver();
beforeAndAfter();
test.describe("skip links", () => {
describe("skip links", () => {
beforeEach(() => {
when.setStyle("layer");
});
e2e/code-editor.spec.ts
+3 -1
View File
@@ -1,6 +1,8 @@
import { MaputnikDriver } from "./maputnik-driver";
test.describe("code editor", () => {
const test = it;
describe("code editor", () => {
const { beforeAndAfter, when, get, then } = new MaputnikDriver();
beforeAndAfter();
e2e/fixtures/example-layer-style.json
-17
View File
@@ -1,17 +0,0 @@
{
"id": "test-style",
"version": 8,
"name": "Test Style",
"metadata": {
"maputnik:renderer": "mlgljs"
},
"sources": {},
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
"layers": [
{
"id": "background",
"type": "background"
}
]
}
e2e/fixtures/example-style-with-fonts.json
-38
View File
@@ -1,38 +0,0 @@
{
"id": "test-style",
"version": 8,
"name": "Test Style",
"metadata": {
"maputnik:renderer": "mlgljs"
},
"sources": {
"example": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features":[{
"type": "Feature",
"properties": {
"name": "Dinagat Islands"
},
"geometry":{
"type": "Point",
"coordinates": [125.6, 10.1]
}
}]
}
}
},
"glyphs": "https://www.glyph-server.com/fonts/{fontstack}/{range}.pbf",
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
"layers": [
{
"id": "label",
"type": "symbol",
"source": "example",
"layout": {
"text-font": ["Font"]
}
}
]
}
e2e/fixtures/example-style-with-zoom-5-and-center-50-50.json
-19
View File
@@ -1,19 +0,0 @@
{
"id": "test-style",
"center": [50,50],
"zoom": 5,
"version": 8,
"name": "Test Style",
"sources": {
"rectangles": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": []
}
}
},
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
"layers": []
}
e2e/fixtures/example-style-with-zoom-7-and-center-0-51.json
-17
View File
@@ -1,17 +0,0 @@
{
"id": "test-style",
"center": [0,51],
"zoom": 7,
"version": 8,
"name": "Test Style",
"sources": {
"rectangles": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": []
}
}
},
"layers": []
}
e2e/fixtures/example-style.json
-114
View File
@@ -1,114 +0,0 @@
{
"id": "test-style",
"version": 8,
"name": "Test Style",
"metadata": {
"maputnik:renderer": "mlgljs",
"data": [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31,
32,
33,
34,
35,
36,
37,
38,
39,
40,
41,
42,
43,
44,
45,
46,
47,
48,
49,
50,
51,
52,
53,
54,
55,
56,
57,
58,
59,
60,
61,
62,
63,
64,
65,
66,
67,
68,
69,
70,
71,
72,
73,
74,
75,
76,
77,
78,
79,
80,
81,
82,
83,
84,
85,
86,
87,
88,
89,
90,
91,
92,
93,
94,
95,
96,
97,
98,
99
]
},
"sources": {},
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
"layers": []
}
e2e/fixtures/geojson-raster-style.json
-34
View File
@@ -1,34 +0,0 @@
{
"id": "test-style",
"version": 8,
"name": "Test Style",
"metadata": {
"maputnik:renderer": "mlgljs"
},
"sources": {
"example": {
"type": "vector",
"data": {
"type": "FeatureCollection",
"features":[{
"type": "Feature",
"properties": {
"name": "Dinagat Islands"
},
"geometry":{
"type": "Point",
"coordinates": [125.6, 10.1]
}
}]
}
},
"raster": {
"tileSize": 256,
"tiles": ["http://localhost/example/{x}/{y}/{z}"],
"type": "raster"
}
},
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
"layers": []
}
e2e/fixtures/geojson-style.json
-29
View File
@@ -1,29 +0,0 @@
{
"id": "test-style",
"version": 8,
"name": "Test Style",
"metadata": {
"maputnik:renderer": "mlgljs"
},
"sources": {
"example": {
"type": "vector",
"data": {
"type": "FeatureCollection",
"features":[{
"type": "Feature",
"properties": {
"name": "Dinagat Islands"
},
"geometry":{
"type": "Point",
"coordinates": [125.6, 10.1]
}
}]
}
}
},
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
"layers": []
}
e2e/fixtures/raster-style.json
-18
View File
@@ -1,18 +0,0 @@
{
"id": "test-style",
"version": 8,
"name": "Test Style",
"metadata": {
"maputnik:renderer": "mlgljs"
},
"sources": {
"raster": {
"tileSize": 256,
"tiles": ["http://localhost/example/{x}/{y}/{z}"],
"type": "raster"
}
},
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
"layers": []
}
e2e/fixtures/rectangles-style.json
-92
View File
@@ -1,92 +0,0 @@
{
"version": 8,
"sources": {
"rectangles": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-130.78125,
-33.13755119234615
],
[
-130.78125,
63.548552232036414
],
[
15.468749999999998,
63.548552232036414
],
[
15.468749999999998,
-33.13755119234615
],
[
-130.78125,
-33.13755119234615
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-48.515625,
-54.97761367069625
],
[
-48.515625,
36.5978891330702
],
[
169.45312499999997,
36.5978891330702
],
[
169.45312499999997,
-54.97761367069625
],
[
-48.515625,
-54.97761367069625
]
]
]
}
}
]
}
}
},
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "white"
}
},
{
"id": "rectangles",
"type": "fill",
"source": "rectangles",
"paint": {
"fill-opacity": 0.3
}
}
]
}
e2e/history.spec.ts
+3 -1
View File
@@ -1,6 +1,8 @@
import { MaputnikDriver } from "./maputnik-driver";
test.describe("history", () => {
const test = it;
describe("history", () => {
const { beforeAndAfter, when, get, then } = new MaputnikDriver();
beforeAndAfter();
e2e/i18n.spec.ts
+5 -3
View File
@@ -1,10 +1,12 @@
import { MaputnikDriver } from "./maputnik-driver";
test.describe("i18n", () => {
const test = it;
describe("i18n", () => {
const { beforeAndAfter, get, when, then } = new MaputnikDriver();
beforeAndAfter();
test.describe("language detector", () => {
describe("language detector", () => {
test("English", () => {
const url = "?lng=en";
when.visit(url);
@@ -18,7 +20,7 @@ test.describe("i18n", () => {
});
});
test.describe("language switcher", () => {
describe("language switcher", () => {
beforeEach(() => {
when.setStyle("layer");
});
e2e/keyboard.spec.ts
+3 -2
View File
@@ -1,9 +1,10 @@
import { MaputnikDriver } from "./maputnik-driver";
const test = it;
test.describe("keyboard", () => {
describe("keyboard", () => {
const { beforeAndAfter, given, when, get, then } = new MaputnikDriver();
beforeAndAfter();
test.describe("shortcuts", () => {
describe("shortcuts", () => {
beforeEach(() => {
given.setupMockBackedResponses();
when.setStyle("");
e2e/layer-editor.spec.ts
+16 -14
View File
@@ -1,7 +1,9 @@
import { MaputnikDriver } from "./maputnik-driver";
import { v1 as uuid } from "uuid";
test.describe("layer editor", () => {
const test = it;
describe("layer editor", () => {
const { beforeAndAfter, get, when, then } = new MaputnikDriver();
beforeAndAfter();
beforeEach(() => {
@@ -48,7 +50,7 @@ test.describe("layer editor", () => {
});
});
test.describe("source", () => {
describe("source", () => {
test("should show error when the source is invalid", () => {
when.modal.fillLayers({
type: "circle",
@@ -58,7 +60,7 @@ test.describe("layer editor", () => {
});
});
test.describe("min-zoom", () => {
describe("min-zoom", () => {
let bgId: string;
beforeEach(() => {
@@ -80,7 +82,7 @@ test.describe("layer editor", () => {
});
});
test("when clicking next layer should update style on local storage", () => {
it("when clicking next layer should update style on local storage", () => {
when.type("min-zoom.input-text", "{backspace}");
when.click("max-zoom.input-text");
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
@@ -95,7 +97,7 @@ test.describe("layer editor", () => {
});
});
test.describe("max-zoom", () => {
describe("max-zoom", () => {
let bgId: string;
beforeEach(() => {
@@ -118,7 +120,7 @@ test.describe("layer editor", () => {
});
});
test.describe("comments", () => {
describe("comments", () => {
let bgId: string;
const comment = "42";
@@ -143,7 +145,7 @@ test.describe("layer editor", () => {
});
});
test.describe("when unsetting", () => {
describe("when unsetting", () => {
beforeEach(() => {
when.clear("layer-comment.input");
when.click("min-zoom.input-text");
@@ -162,7 +164,7 @@ test.describe("layer editor", () => {
});
});
test.describe("color", () => {
describe("color", () => {
let bgId: string;
beforeEach(() => {
bgId = createBackground();
@@ -182,7 +184,7 @@ test.describe("layer editor", () => {
});
});
test.describe("opacity", () => {
describe("opacity", () => {
let bgId: string;
beforeEach(() => {
bgId = createBackground();
@@ -202,12 +204,12 @@ test.describe("layer editor", () => {
test.describe("filter", () => {
describe("filter", () => {
test("expand/collapse");
test("compound filter");
});
test.describe("layout", () => {
describe("layout", () => {
test("text-font", () => {
when.setStyle("font");
when.collapseGroupInLayerEditor();
@@ -221,14 +223,14 @@ test.describe("layer editor", () => {
});
});
test.describe("paint", () => {
describe("paint", () => {
test("expand/collapse");
test("color");
test("pattern");
test("opacity");
});
test.describe("json-editor", () => {
describe("json-editor", () => {
test("add", () => {
const id = when.modal.fillLayers({
type: "circle",
@@ -272,7 +274,7 @@ test.describe("layer editor", () => {
});
});
test.describe("sticky header", () => {
describe("sticky header", () => {
test("should keep layer header visible when scrolling properties", () => {
// Setup: Create a layer with many properties (e.g., symbol layer)
when.modal.fillLayers({
e2e/layers-list.spec.ts
+20 -20
View File
@@ -1,6 +1,6 @@
import { MaputnikDriver } from "./maputnik-driver";
test.describe("layers list", () => {
describe("layers list", () => {
const { beforeAndAfter, get, when, then } = new MaputnikDriver();
beforeAndAfter();
beforeEach(() => {
@@ -8,7 +8,7 @@ test.describe("layers list", () => {
when.modal.open();
});
test.describe("ops", () => {
describe("ops", () => {
let id: string;
beforeEach(() => {
id = when.modal.fillLayers({
@@ -27,7 +27,7 @@ test.describe("layers list", () => {
});
});
test.describe("when clicking delete", () => {
describe("when clicking delete", () => {
beforeEach(() => {
when.click("layer-list-item:" + id + ":delete");
});
@@ -38,7 +38,7 @@ test.describe("layers list", () => {
});
});
test.describe("when clicking duplicate", () => {
describe("when clicking duplicate", () => {
beforeEach(() => {
when.click("layer-list-item:" + id + ":copy");
});
@@ -58,7 +58,7 @@ test.describe("layers list", () => {
});
});
test.describe("when clicking hide", () => {
describe("when clicking hide", () => {
beforeEach(() => {
when.click("layer-list-item:" + id + ":toggle-visibility");
});
@@ -77,7 +77,7 @@ test.describe("layers list", () => {
});
});
test.describe("when clicking show", () => {
describe("when clicking show", () => {
beforeEach(() => {
when.click("layer-list-item:" + id + ":toggle-visibility");
});
@@ -97,7 +97,7 @@ test.describe("layers list", () => {
});
});
test.describe("when selecting a layer", () => {
describe("when selecting a layer", () => {
let secondId: string;
beforeEach(() => {
when.modal.open();
@@ -116,7 +116,7 @@ test.describe("layers list", () => {
});
});
test.describe("background", () => {
describe("background", () => {
test("add", () => {
const id = when.modal.fillLayers({
type: "background",
@@ -131,10 +131,10 @@ test.describe("layers list", () => {
});
});
test.describe("modify", () => {});
describe("modify", () => {});
});
test.describe("fill", () => {
describe("fill", () => {
test("add", () => {
const id = when.modal.fillLayers({
type: "fill",
@@ -156,7 +156,7 @@ test.describe("layers list", () => {
test("change source");
});
test.describe("line", () => {
describe("line", () => {
test("add", () => {
const id = when.modal.fillLayers({
type: "line",
@@ -229,7 +229,7 @@ test.describe("layers list", () => {
});
});
test.describe("symbol", () => {
describe("symbol", () => {
test("add", () => {
const id = when.modal.fillLayers({
type: "symbol",
@@ -286,7 +286,7 @@ test.describe("layers list", () => {
});
});
test.describe("raster", () => {
describe("raster", () => {
test("add", () => {
const id = when.modal.fillLayers({
type: "raster",
@@ -305,7 +305,7 @@ test.describe("layers list", () => {
});
});
test.describe("circle", () => {
describe("circle", () => {
test("add", () => {
const id = when.modal.fillLayers({
type: "circle",
@@ -324,7 +324,7 @@ test.describe("layers list", () => {
});
});
test.describe("fill extrusion", () => {
describe("fill extrusion", () => {
test("add", () => {
const id = when.modal.fillLayers({
type: "fill-extrusion",
@@ -343,7 +343,7 @@ test.describe("layers list", () => {
});
});
test.describe("hillshade", () => {
describe("hillshade", () => {
test("add", () => {
const id = when.modal.fillLayers({
type: "hillshade",
@@ -412,7 +412,7 @@ test.describe("layers list", () => {
});
});
test.describe("color-relief", () => {
describe("color-relief", () => {
test("add", () => {
const id = when.modal.fillLayers({
type: "color-relief",
@@ -441,7 +441,7 @@ test.describe("layers list", () => {
});
});
test.describe("groups", () => {
describe("groups", () => {
test("simple", () => {
when.setStyle("geojson");
@@ -477,7 +477,7 @@ test.describe("layers list", () => {
});
});
test.describe("drag and drop", () => {
describe("drag and drop", () => {
test("move layer should update local storage", () => {
when.modal.open();
const firstId = when.modal.fillLayers({
@@ -516,7 +516,7 @@ test.describe("layers list", () => {
});
});
test.describe("sticky header", () => {
describe("sticky header", () => {
test("should keep header visible when scrolling layer list", () => {
// Setup: Create multiple layers to enable scrolling
for (let i = 0; i < 20; i++) {
e2e/map.spec.ts
+6 -4
View File
@@ -1,9 +1,11 @@
import { MaputnikDriver } from "./maputnik-driver";
test.describe("map", () => {
const test = it;
describe("map", () => {
const { beforeAndAfter, get, when, then } = new MaputnikDriver();
beforeAndAfter();
test.describe("zoom level", () => {
describe("zoom level", () => {
test("via url", () => {
const zoomLevel = 12.37;
when.setStyle("geojson", zoomLevel);
@@ -39,13 +41,13 @@ test.describe("map", () => {
});
});
test.describe("search", () => {
describe("search", () => {
test("should exist", () => {
then(get.searchControl()).shouldBeVisible();
});
});
test.describe("popup", () => {
describe("popup", () => {
beforeEach(() => {
when.setStyle("rectangles");
then(get.locationHash().should("exist"));
e2e/maputnik-cypress-helper.ts
+56
View File
@@ -0,0 +1,56 @@
/// <reference types="cypress-real-events" />
import { CypressHelper } from "@shellygo/cypress-test-utils";
import "cypress-real-events/support";
export default class MaputnikCypressHelper {
private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
public given = {
...this.helper.given,
};
public get = {
locationHash: (): Cypress.Chainable<string> => cy.location("hash"),
...this.helper.get,
};
public when = {
dragAndDropWithWait: (element: string, targetElement: string) => {
this.helper.get.elementByTestId(element).realMouseDown({ button: "left", position: "center" });
this.helper.get.elementByTestId(element).realMouseMove(0, 10, { position: "center" });
this.helper.get.elementByTestId(targetElement).realMouseMove(0, 0, { position: "center" });
this.helper.when.wait(1);
this.helper.get.elementByTestId(targetElement).realMouseUp();
},
clickCenter: (element: string) => {
this.helper.get.elementByTestId(element).realMouseDown({ button: "left", position: "center" });
this.helper.when.wait(200);
this.helper.get.elementByTestId(element).realMouseUp();
},
openFileByFixture: (fixture: string, buttonTestId: string, inputTestId: string) => {
cy.window().then((win) => {
const file = {
text: cy.stub().resolves(cy.fixture(fixture).then(JSON.stringify)),
};
const fileHandle = {
getFile: cy.stub().resolves(file),
};
if (!win.showOpenFilePicker) {
this.helper.get.elementByTestId(inputTestId).selectFile("cypress/fixtures/" + fixture, { force: true });
} else {
cy.stub(win, "showOpenFilePicker").resolves([fileHandle]);
this.helper.get.elementByTestId(buttonTestId).click();
}
});
},
dropFileByFixture: (fixture: string, dropzoneTestId: string) => {
this.helper.get.elementByTestId(dropzoneTestId).selectFile("cypress/fixtures/" + fixture, {
action: "drag-drop",
force: true,
});
},
...this.helper.when,
};
public beforeAndAfter = this.helper.beforeAndAfter;
}
e2e/modals.spec.ts
+18 -17
View File
@@ -1,14 +1,15 @@
import { MaputnikDriver } from "./maputnik-driver";
import tokens from "../../src/config/tokens.json" with {type: "json"};
import tokens from "../src/config/tokens.json" with {type: "json"};
const test = it;
test.describe("modals", () => {
describe("modals", () => {
const { beforeAndAfter, when, get, given, then } = new MaputnikDriver();
beforeAndAfter();
beforeEach(() => {
when.setStyle("");
});
test.describe("open", () => {
describe("open", () => {
beforeEach(() => {
when.click("nav:open");
});
@@ -28,7 +29,7 @@ test.describe("modals", () => {
then(get.fixture("example-style.json")).shouldEqualToStoredStyle();
});
test.describe("when click open url", () => {
describe("when click open url", () => {
beforeEach(() => {
const styleFileUrl = get.exampleFileUrl();
@@ -42,7 +43,7 @@ test.describe("modals", () => {
});
});
test.describe("shortcuts", () => {
describe("shortcuts", () => {
test("open/close", () => {
when.setStyle("");
when.typeKeys("?");
@@ -51,7 +52,7 @@ test.describe("modals", () => {
});
});
test.describe("export", () => {
describe("export", () => {
beforeEach(() => {
when.click("nav:export");
});
@@ -65,7 +66,7 @@ test.describe("modals", () => {
test("download");
});
test.describe("sources", () => {
describe("sources", () => {
beforeEach(() => {
when.setStyle("layer");
when.click("nav:sources");
@@ -122,7 +123,7 @@ test.describe("modals", () => {
});
});
test.describe("inspect", () => {
describe("inspect", () => {
test("toggle", () => {
// There is no assertion in this test
when.setStyle("geojson");
@@ -130,12 +131,12 @@ test.describe("modals", () => {
});
});
test.describe("style settings", () => {
describe("style settings", () => {
beforeEach(() => {
when.click("nav:settings");
});
test.describe("when click name filed spec information", () => {
describe("when click name filed spec information", () => {
beforeEach(() => {
when.click("field-doc-button-Name");
});
@@ -147,7 +148,7 @@ test.describe("modals", () => {
});
});
test.describe("when set name and click owner", () => {
describe("when set name and click owner", () => {
beforeEach(() => {
when.setValue("modal:settings.name", "foobar");
when.click("modal:settings.owner");
@@ -161,7 +162,7 @@ test.describe("modals", () => {
});
});
test.describe("when set owner and click name", () => {
describe("when set owner and click name", () => {
beforeEach(() => {
when.setValue("modal:settings.owner", "foobar");
when.click("modal:settings.name");
@@ -321,7 +322,7 @@ test.describe("modals", () => {
});
test.describe("add layer", () => {
describe("add layer", () => {
beforeEach(() => {
when.setStyle("layer");
when.modal.open();
@@ -337,11 +338,11 @@ test.describe("modals", () => {
});
});
test.describe("sources", () => {
describe("sources", () => {
test("toggle");
});
test.describe("global state", () => {
describe("global state", () => {
beforeEach(() => {
when.click("nav:global-state");
});
@@ -399,7 +400,7 @@ test.describe("modals", () => {
});
});
test.describe("error panel", () => {
describe("error panel", () => {
test("not visible when no errors", () => {
then(get.element("maputnik-message-panel-error")).shouldNotExist();
});
@@ -414,7 +415,7 @@ test.describe("modals", () => {
});
});
test.describe("Handle localStorage QuotaExceededError", () => {
describe("Handle localStorage QuotaExceededError", () => {
test("handles quota exceeded error when opening style from URL", () => {
// Clear localStorage to start fresh
cy.clearLocalStorage();