ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-09-10 14:27:26 +00:00
Code Issues Projects Releases Wiki Activity
Files
1f475cf71517d6ae91059ed56158a8436420779a
editor/e2e/layers-list.spec.ts
T
Nikita Maximilian Grimm 1301dc03e7 Fix layer group expansion state after deletion (#2146) 
Deleting a layer changes the starting indices of later groups, so their
stored expansion state no longer matches. Preserve that state through
surviving layer IDs when rebuilding the group keys.

This keeps expanded groups open after deleting an earlier layer or the
first layer of a group. Separate groups with the same prefix retain
their own states; if deletion joins two groups, the merged group stays
expanded when either was expanded.

- Fixes #1781.

Adds five deletion regression tests, a small style fixture, and a
changelog entry.

Validation:

- All 33 layer-list E2E tests and 50 unit tests pass.
- Lint and the production build, including TypeScript checking, pass.
- Manually checked OSM Liberty: all 15 groups remain expanded after
deleting the background layer.
- The full E2E suite reports 160 passing tests and one failure in
`modals > open > upload` (`Could not get styleItem from localStorage`).
The same failure reproduces with the original production code restored.

---------

Co-authored-by: Harel M <harel.mazor@gmail.com>
2026-09-08 18:33:00 +00:00

442 lines
19 KiB
TypeScript
Raw Blame History

import { beforeEach, describe, expect, test } from "./utils/fixtures";
import { MaputnikDriver } from "./maputnik-driver";
describe("layers list", () => {
const { given, get, when, then } = new MaputnikDriver();
beforeEach(async () => {
await given.setupMockBackedResponses();
await when.setStyle("both");
await when.modal.open();
});
describe("ops", () => {
let id: string;
beforeEach(async () => {
id = await when.modal.fillLayers({ type: "background" });
});
test("should update layers in local storage", async () => {
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id, type: "background" }],
});
});
describe("when clicking delete", () => {
beforeEach(async () => {
await when.click("layer-list-item:" + id + ":delete");
});
test("should empty layers in local storage", async () => {
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [],
});
});
});
describe("when clicking duplicate", () => {
beforeEach(async () => {
await when.click("layer-list-item:" + id + ":copy");
});
test("should add copy layer in local storage", async () => {
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{ id: id + "-copy", type: "background" },
{ id, type: "background" },
],
});
});
});
test("should title the visibility button with the action it performs", async () => {
const key = "layer-list-item:" + id + ":toggle-visibility";
// A visible layer is about to be hidden, and a hidden one to be shown.
await expect(get.elementByTestId(key)).toHaveAttribute("title", "hide");
await when.click(key);
await expect(get.elementByTestId(key)).toHaveAttribute("title", "show");
});
describe("when clicking hide", () => {
beforeEach(async () => {
await when.click("layer-list-item:" + id + ":toggle-visibility");
});
test("should update visibility to none in local storage", async () => {
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id, type: "background", layout: { visibility: "none" } }],
});
});
describe("when clicking show", () => {
beforeEach(async () => {
await when.click("layer-list-item:" + id + ":toggle-visibility");
});
test("should update visibility to visible in local storage", async () => {
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id, type: "background", layout: { visibility: "visible" } }],
});
});
});
describe("when selecting a layer", () => {
let secondId: string;
beforeEach(async () => {
await when.modal.open();
secondId = await when.modal.fillLayers({
id: "second-layer",
type: "background",
});
});
test("should show the selected layer in the editor", async () => {
await when.realClick("layer-list-item:" + secondId);
await then(get.elementByTestId("layer-editor.layer-id.input")).shouldHaveValue(secondId);
await when.realClick("layer-list-item:" + id);
await then(get.elementByTestId("layer-editor.layer-id.input")).shouldHaveValue(id);
});
});
});
});
describe("background", () => {
test("add", async () => {
const id = await when.modal.fillLayers({ type: "background" });
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id, type: "background" }],
});
});
test("modify", async () => {
const id = await when.modal.fillLayers({ type: "background" });
await when.click("layer-list-item:" + id);
await when.setValue("spec-field-input:background-opacity", "0.4");
await when.click("layer-editor.layer-id");
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id, type: "background", paint: { "background-opacity": 0.4 } }],
});
});
});
describe("fill", () => {
test("add", async () => {
const id = await when.modal.fillLayers({ type: "fill", layer: "example" });
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id, type: "fill", source: "example" }],
});
});
test("change source", async () => {
const id = await when.modal.fillLayers({ type: "fill", layer: "example" });
await when.changeLayerSource("raster");
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id, type: "fill", source: "raster" }],
});
});
});
describe("line", () => {
test("add", async () => {
const id = await when.modal.fillLayers({ type: "line", layer: "example" });
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id, type: "line", source: "example" }],
});
});
test("groups", async () => {
const id1 = await when.modal.fillLayers({ id: "aa", type: "line", layer: "example" });
await when.modal.open();
const id2 = await when.modal.fillLayers({ id: "aa-2", type: "line", layer: "example" });
await when.modal.open();
const id3 = await when.modal.fillLayers({ id: "b", type: "line", layer: "example" });
await then(get.elementByTestId("layer-list-item:" + id1)).shouldBeVisible();
await then(get.elementByTestId("layer-list-item:" + id2)).shouldNotBeVisible();
await then(get.elementByTestId("layer-list-item:" + id3)).shouldBeVisible();
await when.click("layer-list-group:aa-0");
await then(get.elementByTestId("layer-list-item:" + id1)).shouldBeVisible();
await then(get.elementByTestId("layer-list-item:" + id2)).shouldBeVisible();
await then(get.elementByTestId("layer-list-item:" + id3)).shouldBeVisible();
await when.click("layer-list-item:" + id2);
await when.click("skip-target-layer-editor");
await when.click("menu-move-layer-down");
await then(get.elementByTestId("layer-list-group:aa-0")).shouldNotExist();
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{ id: "aa", type: "line", source: "example" },
{ id: "b", type: "line", source: "example" },
{ id: "aa-2", type: "line", source: "example" },
],
});
});
});
describe("symbol", () => {
test("add", async () => {
const id = await when.modal.fillLayers({ type: "symbol", layer: "example" });
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id, type: "symbol", source: "example" }],
});
});
test("should show spec info when hovering and clicking single line property", async () => {
await when.modal.fillLayers({ type: "symbol", layer: "example" });
await when.hover("spec-field-container:text-rotate");
await then(get.elementByTestId("field-doc-button-Rotate")).shouldBeVisible();
await when.click("field-doc-button-Rotate", 0);
await then(get.elementByTestId("spec-field-doc")).shouldContainText("Rotates the ");
});
test("should show spec info when hovering and clicking multi line property", async () => {
await when.modal.fillLayers({ type: "symbol", layer: "example" });
await when.hover("spec-field-container:text-offset");
await then(get.elementByTestId("field-doc-button-Offset")).shouldBeVisible();
await when.click("field-doc-button-Offset", 0);
await then(get.elementByTestId("spec-field-doc")).shouldContainText("Offset distance");
});
test("should hide spec info when clicking a second time", async () => {
await when.modal.fillLayers({ type: "symbol", layer: "example" });
await when.hover("spec-field-container:text-rotate");
await then(get.elementByTestId("field-doc-button-Rotate")).shouldBeVisible();
await when.click("field-doc-button-Rotate", 0);
await when.wait(200);
await when.click("field-doc-button-Rotate", 0);
await then(get.elementByTestId("spec-field-doc")).shouldNotBeVisible();
});
});
describe("raster", () => {
test("add", async () => {
const id = await when.modal.fillLayers({ type: "raster", layer: "raster" });
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id, type: "raster", source: "raster" }],
});
});
});
describe("circle", () => {
test("add", async () => {
const id = await when.modal.fillLayers({ type: "circle", layer: "example" });
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id, type: "circle", source: "example" }],
});
});
});
describe("fill extrusion", () => {
test("add", async () => {
const id = await when.modal.fillLayers({ type: "fill-extrusion", layer: "example" });
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id, type: "fill-extrusion", source: "example" }],
});
});
});
describe("hillshade", () => {
test("add", async () => {
const id = await when.modal.fillLayers({ type: "hillshade", layer: "example" });
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id, type: "hillshade", source: "example" }],
});
});
test("set hillshade illumination direction array", async () => {
const id = await when.modal.fillLayers({ type: "hillshade", layer: "example" });
await when.collapseGroupInLayerEditor();
await when.collapseGroupInLayerEditor(1);
await when.setValueToPropertyArray("spec-field:hillshade-illumination-direction", "1");
await when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "2");
await when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "3");
await when.addValueToPropertyArray("spec-field:hillshade-illumination-direction", "4");
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id,
type: "hillshade",
source: "example",
paint: { "hillshade-illumination-direction": [1, 2, 3, 4] },
},
],
});
});
test("set hillshade highlight color array", async () => {
const id = await when.modal.fillLayers({ type: "hillshade", layer: "example" });
await when.collapseGroupInLayerEditor();
await when.setValueToPropertyArray("spec-field:hillshade-highlight-color", "blue");
await when.addValueToPropertyArray("spec-field:hillshade-highlight-color", "#00ff00");
await when.addValueToPropertyArray("spec-field:hillshade-highlight-color", "rgba(255, 255, 0, 1)");
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id,
type: "hillshade",
source: "example",
paint: {
"hillshade-highlight-color": ["blue", "#00ff00", "rgba(255, 255, 0, 1)"],
},
},
],
});
});
});
describe("color-relief", () => {
test("add", async () => {
const id = await when.modal.fillLayers({ type: "color-relief", layer: "example" });
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [{ id, type: "color-relief", source: "example" }],
});
});
test("adds elevation expression when clicking the elevation button", async () => {
await when.modal.fillLayers({ type: "color-relief", layer: "example" });
await when.collapseGroupInLayerEditor();
await when.click("make-elevation-function");
await then(
get.element("[data-wd-key='spec-field-container:color-relief-color'] .cm-line")
).shouldBeVisible();
});
});
describe("groups", () => {
for (const control of ["menu", "trash"] as const) {
describe(`after deletion using ${control}`, () => {
beforeEach(async () => {
await when.setStyle("grouped_layers");
});
test("keeps all groups expanded when an earlier layer is deleted", async () => {
await when.click("skip-target-layer-list");
await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
await when.deleteLayer("background", control);
await then(get.elementByTestId("layer-list-item:background")).shouldNotExist();
await then(get.elementByTestId("layer-list-group:park-0")).shouldExist();
await expect(get.elementByTestId("layer-list-group:water-6").getByRole("button")).toHaveAttribute("aria-expanded", "true");
await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
await then(get.elementByTestId("layer-list-item:park-e")).shouldBeVisible();
await then(get.elementByTestId("layer-list-item:water-b")).shouldBeVisible();
});
test("preserves separate states for groups with the same prefix", async () => {
await when.click("layer-list-group:park-1");
await when.deleteLayer("background", control);
await then(get.elementByTestId("layer-list-group:park-0")).shouldExist();
await when.click("layer-list-item:road");
await expect(get.elementByTestId("layer-list-group:park-0").getByRole("button")).toHaveAttribute("aria-expanded", "true");
await expect(get.elementByTestId("layer-list-group:park-4").getByRole("button")).toHaveAttribute("aria-expanded", "false");
await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
await then(get.elementByTestId("layer-list-item:park-e")).shouldNotBeVisible();
});
test("keeps a group expanded when its first layer is deleted", async () => {
await when.click("layer-list-group:park-1");
await when.deleteLayer("park-a", control);
await then(get.elementByTestId("layer-list-item:park-a")).shouldNotExist();
await when.click("layer-list-item:road");
await expect(get.elementByTestId("layer-list-group:park-1").getByRole("button")).toHaveAttribute("aria-expanded", "true");
await then(get.elementByTestId("layer-list-item:park-c")).shouldBeVisible();
});
for (const expandedGroup of ["park-1", "park-5"]) {
test(`keeps a merged group expanded when ${expandedGroup} was expanded`, async () => {
await when.click("layer-list-group:" + expandedGroup);
await when.deleteLayer("road", control);
await then(get.elementByTestId("layer-list-item:road")).shouldNotExist();
await expect(get.elementByTestId("layer-list-group:park-1").getByRole("button")).toHaveAttribute("aria-expanded", "true");
await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
await then(get.elementByTestId("layer-list-item:park-e")).shouldBeVisible();
});
}
test("keeps a merged group collapsed when both groups were collapsed", async () => {
await when.deleteLayer("road", control);
await then(get.elementByTestId("layer-list-item:road")).shouldNotExist();
await when.click("layer-list-item:background");
await expect(get.elementByTestId("layer-list-group:park-1").getByRole("button")).toHaveAttribute("aria-expanded", "false");
await then(get.elementByTestId("layer-list-item:park-b")).shouldNotBeVisible();
await then(get.elementByTestId("layer-list-item:park-e")).shouldNotBeVisible();
});
test("preserves later groups after deleting an entire group", async () => {
await when.click("skip-target-layer-list");
await when.deleteLayer("park-a", control);
await when.deleteLayer("park-b", control);
await when.deleteLayer("park-c", control);
await expect(get.elementByTestId("layer-list-group:water-4").getByRole("button")).toHaveAttribute("aria-expanded", "true");
await then(get.elementByTestId("layer-list-item:water-b")).shouldBeVisible();
});
});
}
test("simple", async () => {
await when.setStyle("geojson");
await when.modal.open();
await when.modal.fillLayers({ id: "foo", type: "background" });
await when.modal.open();
await when.modal.fillLayers({ id: "foo_bar", type: "background" });
await when.modal.open();
await when.modal.fillLayers({ id: "foo_bar_baz", type: "background" });
await then(get.elementByTestId("layer-list-item:foo")).shouldBeVisible();
await then(get.elementByTestId("layer-list-item:foo_bar")).shouldNotBeVisible();
await then(get.elementByTestId("layer-list-item:foo_bar_baz")).shouldNotBeVisible();
await when.click("layer-list-group:foo-0");
await then(get.elementByTestId("layer-list-item:foo")).shouldBeVisible();
await then(get.elementByTestId("layer-list-item:foo_bar")).shouldBeVisible();
await then(get.elementByTestId("layer-list-item:foo_bar_baz")).shouldBeVisible();
});
});
describe("drag and drop", () => {
test("move layer should update local storage", async () => {
const firstId = await when.modal.fillLayers({ id: "a", type: "background" });
await when.modal.open();
const secondId = await when.modal.fillLayers({ id: "b", type: "background" });
await when.modal.open();
const thirdId = await when.modal.fillLayers({ id: "c", type: "background" });
await when.dragAndDropWithWait("layer-list-item:" + firstId, "layer-list-item:" + thirdId);
await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{ id: secondId, type: "background" },
{ id: thirdId, type: "background" },
{ id: firstId, type: "background" },
],
});
});
});
describe("sticky header", () => {
test("should keep header visible when scrolling layer list", async () => {
// Setup: Create multiple layers to enable scrolling
// The modal is already open (beforeEach) for the first layer.
await when.modal.fillLayers({ id: "layer-0", type: "background" });
for (let i = 1; i < 20; i++) {
await when.modal.open();
await when.modal.fillLayers({ id: `layer-${i}`, type: "background" });
}
await when.wait(500);
const header = get.elementByTestId("layer-list.header");
await then(header).shouldBeVisible();
// Scroll the layer list container
await when.scrollToBottom(get.elementByTestId("layer-list"));
await when.wait(200);
await then(header).shouldBeVisible();
await then(get.elementByTestId("layer-list:add-layer")).shouldBeVisible();
});
});
});
Reference in New Issue View Git Blame Copy Permalink