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

I think all tests should be green now

Browse Source
This commit is contained in:
shelly_goldblit
2023-12-31 20:41:17 +02:00
parent a94ee550f8
commit 2213e74e2a
4 changed files with 101 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cypress/e2e/history.cy.ts
+23 -30
View File
@@ -1,7 +1,7 @@
import { MaputnikDriver } from "./maputnik-driver"; import { MaputnikDriver } from "./maputnik-driver";
describe("history", () => { describe("history", () => {
let { beforeAndAfter, when, get, should } = new MaputnikDriver(); let { beforeAndAfter, when, get, then } = new MaputnikDriver();
beforeAndAfter(); beforeAndAfter();
let undoKeyCombo: string; let undoKeyCombo: string;
@@ -16,23 +16,20 @@ describe("history", () => {
it("undo/redo", () => { it("undo/redo", () => {
when.setStyle("geojson"); when.setStyle("geojson");
when.modal.open(); when.modal.open();
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
should.equalStyleStore((a: any) => a.layers, []);
when.modal.fillLayers({ when.modal.fillLayers({
id: "step 1", id: "step 1",
type: "background", type: "background",
}); });
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
should.equalStyleStore( layers: [
(a: any) => a.layers,
[
{ {
id: "step 1", id: "step 1",
type: "background", type: "background",
}, },
] ],
); });
when.modal.open(); when.modal.open();
when.modal.fillLayers({ when.modal.fillLayers({
@@ -40,9 +37,8 @@ describe("history", () => {
type: "background", type: "background",
}); });
should.equalStyleStore( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
(a: any) => a.layers, layers: [
[
{ {
id: "step 1", id: "step 1",
type: "background", type: "background",
@@ -51,38 +47,35 @@ describe("history", () => {
id: "step 2", id: "step 2",
type: "background", type: "background",
}, },
] ],
); });
when.typeKeys(undoKeyCombo); when.typeKeys(undoKeyCombo);
should.equalStyleStore( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
(a: any) => a.layers, layers: [
[
{ {
id: "step 1", id: "step 1",
type: "background", type: "background",
}, },
] ],
); });
when.typeKeys(undoKeyCombo); when.typeKeys(undoKeyCombo);
should.equalStyleStore((a: any) => a.layers, []); then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
when.typeKeys(redoKeyCombo); when.typeKeys(redoKeyCombo);
should.equalStyleStore( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
(a: any) => a.layers, layers: [
[
{ {
id: "step 1", id: "step 1",
type: "background", type: "background",
}, },
] ],
); });
when.typeKeys(redoKeyCombo); when.typeKeys(redoKeyCombo);
should.equalStyleStore( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
(a: any) => a.layers, layers: [
[
{ {
id: "step 1", id: "step 1",
type: "background", type: "background",
@@ -91,7 +84,7 @@ describe("history", () => {
id: "step 2", id: "step 2",
type: "background", type: "background",
}, },
] ],
); });
}); });
}); });
cypress/e2e/layers.cy.ts
+47 -75
View File
@@ -18,7 +18,7 @@ describe("layers", () => {
}); });
it("should update layers in local storage", () => { it("should update layers in local storage", () => {
then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({ then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [ layers: [
{ {
id: id, id: id,
@@ -33,9 +33,7 @@ describe("layers", () => {
when.click("layer-list-item:" + id + ":delete"); when.click("layer-list-item:" + id + ":delete");
}); });
it("should empty layers in local storage", () => { it("should empty layers in local storage", () => {
then( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
layers: [], layers: [],
}); });
}); });
@@ -46,9 +44,7 @@ describe("layers", () => {
when.click("layer-list-item:" + id + ":copy"); when.click("layer-list-item:" + id + ":copy");
}); });
it("should add copy layer in local storage", () => { it("should add copy layer in local storage", () => {
then( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
layers: [ layers: [
{ {
id: id + "-copy", id: id + "-copy",
@@ -69,9 +65,7 @@ describe("layers", () => {
}); });
it("should update visibility to none in local storage", () => { it("should update visibility to none in local storage", () => {
then( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
layers: [ layers: [
{ {
id: id, id: id,
@@ -90,9 +84,7 @@ describe("layers", () => {
}); });
it("should update visibility to visible in local storage", () => { it("should update visibility to visible in local storage", () => {
then( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
layers: [ layers: [
{ {
id: id, id: id,
@@ -112,16 +104,14 @@ describe("layers", () => {
let id = when.modal.fillLayers({ let id = when.modal.fillLayers({
type: "background", type: "background",
}); });
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
should.equalStyleStore( layers: [
(a: any) => a.layers,
[
{ {
id: id, id: id,
type: "background", type: "background",
}, },
] ],
); });
}); });
describe("modify", () => { describe("modify", () => {
@@ -134,15 +124,14 @@ describe("layers", () => {
when.click("add-layer"); when.click("add-layer");
should.equalStyleStore( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
(a: any) => a.layers, layers: [
[
{ {
id: "background:" + id, id: "background:" + id,
type: "background", type: "background",
}, },
] ],
); });
return id; return id;
} }
@@ -158,15 +147,14 @@ describe("layers", () => {
when.setValue("layer-editor.layer-id.input", "foobar:" + id); when.setValue("layer-editor.layer-id.input", "foobar:" + id);
when.click("min-zoom"); when.click("min-zoom");
should.equalStyleStore( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
(a: any) => a.layers, layers: [
[
{ {
id: "foobar:" + id, id: "foobar:" + id,
type: "background", type: "background",
}, },
] ],
); });
}); });
describe("min-zoom", () => { describe("min-zoom", () => {
@@ -180,9 +168,7 @@ describe("layers", () => {
}); });
it("should update min-zoom in local storage", () => { it("should update min-zoom in local storage", () => {
then( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
layers: [ layers: [
{ {
id: "background:" + bgId, id: "background:" + bgId,
@@ -196,9 +182,7 @@ describe("layers", () => {
it("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.type("min-zoom.input-text", "{backspace}");
when.click("max-zoom.input-text"); when.click("max-zoom.input-text");
then( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
layers: [ layers: [
{ {
id: "background:" + bgId, id: "background:" + bgId,
@@ -221,7 +205,7 @@ describe("layers", () => {
}); });
it("should update style in local storage", () => { it("should update style in local storage", () => {
then(cy.window()).shouldIncludeLocalStorageStyle({ then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [ layers: [
{ {
id: "background:" + bgId, id: "background:" + bgId,
@@ -245,9 +229,7 @@ describe("layers", () => {
}); });
it("should update style in local storage", () => { it("should update style in local storage", () => {
then( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
layers: [ layers: [
{ {
id: "background:" + bgId, id: "background:" + bgId,
@@ -267,9 +249,7 @@ describe("layers", () => {
}); });
it("should update style in local storage", () => { it("should update style in local storage", () => {
then( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
layers: [ layers: [
{ {
id: "background:" + bgId, id: "background:" + bgId,
@@ -290,9 +270,7 @@ describe("layers", () => {
}); });
it("should update style in local storage", () => { it("should update style in local storage", () => {
then( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
layers: [ layers: [
{ {
id: "background:" + bgId, id: "background:" + bgId,
@@ -348,16 +326,15 @@ describe("layers", () => {
layer: "example", layer: "example",
}); });
should.equalStyleStore( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
(a: any) => a.layers, layers: [
[
{ {
id: id, id: id,
type: "fill", type: "fill",
source: "example", source: "example",
}, },
] ],
); });
}); });
// TODO: Change source // TODO: Change source
@@ -371,16 +348,15 @@ describe("layers", () => {
layer: "example", layer: "example",
}); });
should.equalStyleStore( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
(a: any) => a.layers, layers: [
[
{ {
id: id, id: id,
type: "line", type: "line",
source: "example", source: "example",
}, },
] ],
); });
}); });
it("groups", () => { it("groups", () => {
@@ -396,16 +372,15 @@ describe("layers", () => {
layer: "example", layer: "example",
}); });
should.equalStyleStore( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
(a: any) => a.layers, layers: [
[
{ {
id: id, id: id,
type: "symbol", type: "symbol",
source: "example", source: "example",
}, },
] ],
); });
}); });
}); });
@@ -416,16 +391,15 @@ describe("layers", () => {
layer: "raster", layer: "raster",
}); });
should.equalStyleStore( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
(a: any) => a.layers, layers: [
[
{ {
id: id, id: id,
type: "raster", type: "raster",
source: "raster", source: "raster",
}, },
] ],
); });
}); });
}); });
@@ -436,16 +410,15 @@ describe("layers", () => {
layer: "example", layer: "example",
}); });
should.equalStyleStore( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
(a: any) => a.layers, layers: [
[
{ {
id: id, id: id,
type: "circle", type: "circle",
source: "example", source: "example",
}, },
] ],
); });
}); });
}); });
@@ -456,16 +429,15 @@ describe("layers", () => {
layer: "example", layer: "example",
}); });
should.equalStyleStore( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
(a: any) => a.layers, layers: [
[
{ {
id: id, id: id,
type: "fill-extrusion", type: "fill-extrusion",
source: "example", source: "example",
}, },
] ],
); });
}); });
}); });
cypress/e2e/maputnik-driver.ts
+18 -51
View File
@@ -1,24 +1,24 @@
import { CypressHelper } from "@shellygo/cypress-test-utils";
import { Assertable, then } from "@shellygo/cypress-test-utils/assertable"; import { Assertable, then } from "@shellygo/cypress-test-utils/assertable";
import CypressWrapperDriver from "./cypress-wrapper-driver"; import CypressWrapperDriver from "./cypress-wrapper-driver";
import ModalDriver from "./modal-driver"; import ModalDriver from "./modal-driver";
const baseUrl = "http://localhost:8888/"; const baseUrl = "http://localhost:8888/";
export class MaputnikAssertable<T> extends Assertable<T> { const styleFromWindow = (win: Window) => {
private getStyleFromWindow = (win: Window) => { const styleId = win.localStorage.getItem("maputnik:latest_style");
const styleId = win.localStorage.getItem("maputnik:latest_style"); const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`);
const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`); const obj = JSON.parse(styleItem || "");
const obj = JSON.parse(styleItem || ""); return obj;
return obj; };
};
shouldIncludeLocalStorageStyle = (styleObj: Object) =>
then(
cy.window().then((win) => this.getStyleFromWindow(win))
).shouldDeepNestedInclude(styleObj);
shouldHaveLocalStorageStyle = (styleObj: Object) => export class MaputnikAssertable<T> extends Assertable<T> {
shouldEqualToStoredStyle = () =>
then( then(
cy.window().then((win) => this.getStyleFromWindow(win)) new CypressHelper().get.window().then((win) => {
).shouldDeepEqual(styleObj); const style = styleFromWindow(win);
then(this.chainable).shouldDeepNestedInclude(style);
})
);
} }
export class MaputnikDriver { export class MaputnikDriver {
@@ -165,23 +165,17 @@ export class MaputnikDriver {
isMac: () => { isMac: () => {
return Cypress.platform === "darwin"; return Cypress.platform === "darwin";
}, },
styleFromWindow: (win: Window) => {
const styleId = win.localStorage.getItem("maputnik:latest_style"); styleFromLocalStorage: () =>
const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`); this.helper.get.window().then((win) => styleFromWindow(win)),
const obj = JSON.parse(styleItem || "");
return obj;
},
maputnikStyleFromLocalStorageObj: () => { maputnikStyleFromLocalStorageObj: () => {
const styleId = localStorage.getItem("maputnik:latest_style"); const styleId = localStorage.getItem("maputnik:latest_style");
const styleItem = localStorage.getItem(`maputnik:style:${styleId}`); const styleItem = localStorage.getItem(`maputnik:style:${styleId}`);
const obj = JSON.parse(styleItem || ""); const obj = JSON.parse(styleItem || "");
console.log(obj);
return obj; return obj;
}, },
maputnikStyleFromLocalStorage: () => {
return cy.wrap(this.get.maputnikStyleFromLocalStorageObj());
},
exampleFileUrl: () => { exampleFileUrl: () => {
return baseUrl + "example-style.json"; return baseUrl + "example-style.json";
}, },
@@ -191,31 +185,4 @@ export class MaputnikDriver {
this.helper.get.elementByTestId("skip-target-layer-editor"), this.helper.get.elementByTestId("skip-target-layer-editor"),
canvas: () => this.helper.get.element("canvas"), canvas: () => this.helper.get.element("canvas"),
}; };
public should = {
notExist: (selector: string) => {
this.helper.get.element(selector).should("not.exist");
},
beFocused: (selector: string) => {
this.helper.get.elementByTestId(selector).should("have.focus");
},
notBeFocused: (selector: string) => {
this.helper.get.elementByTestId(selector).should("not.have.focus");
},
equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
cy.window().then((win: any) => {
const obj = this.get.styleFromWindow(win);
assert.deepEqual(getter(obj), styleObj);
});
},
beSelected: (selector: string, value: string) => {
this.helper.get
.elementByTestId(selector)
.find(`option[value="${value}"]`)
.should("be.selected");
},
};
} }
cypress/e2e/modals.cy.ts
+13 -19
View File
@@ -20,9 +20,7 @@ describe("modals", () => {
it.skip("upload", () => { it.skip("upload", () => {
// HM: I was not able to make the following choose file actually to select a file and close the modal... // HM: I was not able to make the following choose file actually to select a file and close the modal...
when.chooseExampleFile(); when.chooseExampleFile();
then(get.responseBody("example-style.json")).shouldHaveLocalStorageStyle( then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
get.maputnikStyleFromLocalStorageObj()
);
}); });
describe("when click open url", () => { describe("when click open url", () => {
@@ -34,9 +32,7 @@ describe("modals", () => {
when.wait(200); when.wait(200);
}); });
it("load from url", () => { it("load from url", () => {
then( then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
get.responseBody("example-style.json")
).shouldHaveLocalStorageStyle(get.maputnikStyleFromLocalStorageObj());
}); });
}); });
}); });
@@ -103,9 +99,7 @@ describe("modals", () => {
}); });
it("show name specifications", () => { it("show name specifications", () => {
then( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
name: "foobar", name: "foobar",
}); });
}); });
@@ -118,9 +112,7 @@ describe("modals", () => {
when.wait(200); when.wait(200);
}); });
it("should update owner in local storage", () => { it("should update owner in local storage", () => {
then( then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
owner: "foobar", owner: "foobar",
}); });
}); });
@@ -129,7 +121,7 @@ describe("modals", () => {
it("sprite url", () => { it("sprite url", () => {
when.setValue("modal:settings.sprite", "http://example.com"); when.setValue("modal:settings.sprite", "http://example.com");
when.click("modal:settings.name"); when.click("modal:settings.name");
then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({ then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
sprite: "http://example.com", sprite: "http://example.com",
}); });
}); });
@@ -137,7 +129,7 @@ describe("modals", () => {
let glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"; let glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
when.setValue("modal:settings.glyphs", glyphsUrl); when.setValue("modal:settings.glyphs", glyphsUrl);
when.click("modal:settings.name"); when.click("modal:settings.name");
then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({ then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
glyphs: glyphsUrl, glyphs: glyphsUrl,
}); });
}); });
@@ -149,7 +141,9 @@ describe("modals", () => {
apiKey apiKey
); );
when.click("modal:settings.name"); when.click("modal:settings.name");
then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({ then(
get.styleFromLocalStorage().pipe((style) => style.metadata)
).shouldInclude({
"maputnik:openmaptiles_access_token": apiKey, "maputnik:openmaptiles_access_token": apiKey,
}); });
}); });
@@ -161,9 +155,9 @@ describe("modals", () => {
apiKey apiKey
); );
when.click("modal:settings.name"); when.click("modal:settings.name");
then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({ then(
metadata: { "maputnik:thunderforest_access_token": apiKey }, get.styleFromLocalStorage().pipe((style) => style.metadata)
}); ).shouldInclude({ "maputnik:thunderforest_access_token": apiKey });
}); });
it("style renderer", () => { it("style renderer", () => {
@@ -174,7 +168,7 @@ describe("modals", () => {
); );
when.click("modal:settings.name"); when.click("modal:settings.name");
then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({ then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
metadata: { "maputnik:renderer": "ol" }, metadata: { "maputnik:renderer": "ol" },
}); });
}); });