ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-02-05 20:20:02 +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

53
cypress/e2e/history.cy.ts
View File

@@ -1,7 +1,7 @@
import { MaputnikDriver } from "./maputnik-driver";
describe("history", () => {
let { beforeAndAfter, when, get, should } = new MaputnikDriver();
let { beforeAndAfter, when, get, then } = new MaputnikDriver();
beforeAndAfter();
let undoKeyCombo: string;
@@ -16,23 +16,20 @@ describe("history", () => {
it("undo/redo", () => {
when.setStyle("geojson");
when.modal.open();
should.equalStyleStore((a: any) => a.layers, []);
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
when.modal.fillLayers({
id: "step 1",
type: "background",
});
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "step 1",
type: "background",
},
]
);
],
});
when.modal.open();
when.modal.fillLayers({
@@ -40,9 +37,8 @@ describe("history", () => {
type: "background",
});
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "step 1",
type: "background",
@@ -51,38 +47,35 @@ describe("history", () => {
id: "step 2",
type: "background",
},
]
);
],
});
when.typeKeys(undoKeyCombo);
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "step 1",
type: "background",
},
]
);
],
});
when.typeKeys(undoKeyCombo);
should.equalStyleStore((a: any) => a.layers, []);
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({ layers: [] });
when.typeKeys(redoKeyCombo);
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "step 1",
type: "background",
},
]
);
],
});
when.typeKeys(redoKeyCombo);
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "step 1",
type: "background",
@@ -91,7 +84,7 @@ describe("history", () => {
id: "step 2",
type: "background",
},
]
);
],
});
});
});

122
cypress/e2e/layers.cy.ts
View File

@@ -18,7 +18,7 @@ describe("layers", () => {
});
it("should update layers in local storage", () => {
then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
@@ -33,9 +33,7 @@ describe("layers", () => {
when.click("layer-list-item:" + id + ":delete");
});
it("should empty layers in local storage", () => {
then(
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [],
});
});
@@ -46,9 +44,7 @@ describe("layers", () => {
when.click("layer-list-item:" + id + ":copy");
});
it("should add copy layer in local storage", () => {
then(
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id + "-copy",
@@ -69,9 +65,7 @@ describe("layers", () => {
});
it("should update visibility to none in local storage", () => {
then(
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
@@ -90,9 +84,7 @@ describe("layers", () => {
});
it("should update visibility to visible in local storage", () => {
then(
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
@@ -112,16 +104,14 @@ describe("layers", () => {
let id = when.modal.fillLayers({
type: "background",
});
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "background",
},
]
);
],
});
});
describe("modify", () => {
@@ -134,15 +124,14 @@ describe("layers", () => {
when.click("add-layer");
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "background:" + id,
type: "background",
},
]
);
],
});
return id;
}
@@ -158,15 +147,14 @@ describe("layers", () => {
when.setValue("layer-editor.layer-id.input", "foobar:" + id);
when.click("min-zoom");
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "foobar:" + id,
type: "background",
},
]
);
],
});
});
describe("min-zoom", () => {
@@ -180,9 +168,7 @@ describe("layers", () => {
});
it("should update min-zoom in local storage", () => {
then(
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "background:" + bgId,
@@ -196,9 +182,7 @@ describe("layers", () => {
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.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "background:" + bgId,
@@ -221,7 +205,7 @@ describe("layers", () => {
});
it("should update style in local storage", () => {
then(cy.window()).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "background:" + bgId,
@@ -245,9 +229,7 @@ describe("layers", () => {
});
it("should update style in local storage", () => {
then(
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "background:" + bgId,
@@ -267,9 +249,7 @@ describe("layers", () => {
});
it("should update style in local storage", () => {
then(
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "background:" + bgId,
@@ -290,9 +270,7 @@ describe("layers", () => {
});
it("should update style in local storage", () => {
then(
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "background:" + bgId,
@@ -348,16 +326,15 @@ describe("layers", () => {
layer: "example",
});
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "fill",
source: "example",
},
]
);
],
});
});
// TODO: Change source
@@ -371,16 +348,15 @@ describe("layers", () => {
layer: "example",
});
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "line",
source: "example",
},
]
);
],
});
});
it("groups", () => {
@@ -396,16 +372,15 @@ describe("layers", () => {
layer: "example",
});
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "symbol",
source: "example",
},
]
);
],
});
});
});
@@ -416,16 +391,15 @@ describe("layers", () => {
layer: "raster",
});
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "raster",
source: "raster",
},
]
);
],
});
});
});
@@ -436,16 +410,15 @@ describe("layers", () => {
layer: "example",
});
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "circle",
source: "example",
},
]
);
],
});
});
});
@@ -456,16 +429,15 @@ describe("layers", () => {
layer: "example",
});
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "fill-extrusion",
source: "example",
},
]
);
],
});
});
});

69
cypress/e2e/maputnik-driver.ts
View File

@@ -1,24 +1,24 @@
import { CypressHelper } from "@shellygo/cypress-test-utils";
import { Assertable, then } from "@shellygo/cypress-test-utils/assertable";
import CypressWrapperDriver from "./cypress-wrapper-driver";
import ModalDriver from "./modal-driver";
const baseUrl = "http://localhost:8888/";
export class MaputnikAssertable<T> extends Assertable<T> {
private getStyleFromWindow = (win: Window) => {
const styleId = win.localStorage.getItem("maputnik:latest_style");
const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`);
const obj = JSON.parse(styleItem || "");
return obj;
};
shouldIncludeLocalStorageStyle = (styleObj: Object) =>
then(
cy.window().then((win) => this.getStyleFromWindow(win))
).shouldDeepNestedInclude(styleObj);
const styleFromWindow = (win: Window) => {
const styleId = win.localStorage.getItem("maputnik:latest_style");
const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`);
const obj = JSON.parse(styleItem || "");
return obj;
};
shouldHaveLocalStorageStyle = (styleObj: Object) =>
export class MaputnikAssertable<T> extends Assertable<T> {
shouldEqualToStoredStyle = () =>
then(
cy.window().then((win) => this.getStyleFromWindow(win))
).shouldDeepEqual(styleObj);
new CypressHelper().get.window().then((win) => {
const style = styleFromWindow(win);
then(this.chainable).shouldDeepNestedInclude(style);
})
);
}
export class MaputnikDriver {
@@ -165,23 +165,17 @@ export class MaputnikDriver {
isMac: () => {
return Cypress.platform === "darwin";
},
styleFromWindow: (win: Window) => {
const styleId = win.localStorage.getItem("maputnik:latest_style");
const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`);
const obj = JSON.parse(styleItem || "");
return obj;
},
styleFromLocalStorage: () =>
this.helper.get.window().then((win) => styleFromWindow(win)),
maputnikStyleFromLocalStorageObj: () => {
const styleId = localStorage.getItem("maputnik:latest_style");
const styleItem = localStorage.getItem(`maputnik:style:${styleId}`);
const obj = JSON.parse(styleItem || "");
console.log(obj);
return obj;
},
maputnikStyleFromLocalStorage: () => {
return cy.wrap(this.get.maputnikStyleFromLocalStorageObj());
},
exampleFileUrl: () => {
return baseUrl + "example-style.json";
},
@@ -191,31 +185,4 @@ export class MaputnikDriver {
this.helper.get.elementByTestId("skip-target-layer-editor"),
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");
},
};
}

32
cypress/e2e/modals.cy.ts
View File

@@ -20,9 +20,7 @@ describe("modals", () => {
it.skip("upload", () => {
// HM: I was not able to make the following choose file actually to select a file and close the modal...
when.chooseExampleFile();
then(get.responseBody("example-style.json")).shouldHaveLocalStorageStyle(
get.maputnikStyleFromLocalStorageObj()
);
then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
});
describe("when click open url", () => {
@@ -34,9 +32,7 @@ describe("modals", () => {
when.wait(200);
});
it("load from url", () => {
then(
get.responseBody("example-style.json")
).shouldHaveLocalStorageStyle(get.maputnikStyleFromLocalStorageObj());
then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
});
});
});
@@ -103,9 +99,7 @@ describe("modals", () => {
});
it("show name specifications", () => {
then(
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
name: "foobar",
});
});
@@ -118,9 +112,7 @@ describe("modals", () => {
when.wait(200);
});
it("should update owner in local storage", () => {
then(
get.maputnikStyleFromLocalStorage()
).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
owner: "foobar",
});
});
@@ -129,7 +121,7 @@ describe("modals", () => {
it("sprite url", () => {
when.setValue("modal:settings.sprite", "http://example.com");
when.click("modal:settings.name");
then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
sprite: "http://example.com",
});
});
@@ -137,7 +129,7 @@ describe("modals", () => {
let glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
when.setValue("modal:settings.glyphs", glyphsUrl);
when.click("modal:settings.name");
then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
glyphs: glyphsUrl,
});
});
@@ -149,7 +141,9 @@ describe("modals", () => {
apiKey
);
when.click("modal:settings.name");
then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
then(
get.styleFromLocalStorage().pipe((style) => style.metadata)
).shouldInclude({
"maputnik:openmaptiles_access_token": apiKey,
});
});
@@ -161,9 +155,9 @@ describe("modals", () => {
apiKey
);
when.click("modal:settings.name");
then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
metadata: { "maputnik:thunderforest_access_token": apiKey },
});
then(
get.styleFromLocalStorage().pipe((style) => style.metadata)
).shouldInclude({ "maputnik:thunderforest_access_token": apiKey });
});
it("style renderer", () => {
@@ -174,7 +168,7 @@ describe("modals", () => {
);
when.click("modal:settings.name");
then(get.maputnikStyleFromLocalStorage()).shouldIncludeLocalStorageStyle({
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
metadata: { "maputnik:renderer": "ol" },
});
});