ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-08-24 14:07:33 +00:00
Code Issues Projects Releases Wiki Activity

modify some of the layer tests

Browse Source
This commit is contained in:
shelly_goldblit
2023-12-30 18:26:50 +02:00
parent 9014e12ca6
commit 6ed08c7416
5 changed files with 141 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cypress/e2e/accessibility.cy.ts
+2 -4
View File
@@ -16,9 +16,7 @@ describe("accessibility", () => {
when.tab(); when.tab();
should.beFocused(selector); should.beFocused(selector);
when.click(selector); when.click(selector);
should.beFocused("skip-target-layer-list"); then(get.skipTargetLayerList()).shouldBeFocused();
// then(get.skipTargetLayerList()).shouldBeFocused();
}); });
// This fails for some reason only in Chrome, but passes in firefox. Adding a skip here to allow merge and later on we'll decide if we want to fix this or not. // This fails for some reason only in Chrome, but passes in firefox. Adding a skip here to allow merge and later on we'll decide if we want to fix this or not.
@@ -37,7 +35,7 @@ describe("accessibility", () => {
when.tab().tab().tab(); when.tab().tab().tab();
should.beFocused(selector); should.beFocused(selector);
when.click(selector); when.click(selector);
should.canvasBeFocused(); then(get.canvas()).shouldBeFocused();
}); });
}); });
}); });
cypress/e2e/cypress-wrapper-driver.ts
-3
View File
@@ -9,9 +9,6 @@ export default class CypressWrapperDriver {
public get = { public get = {
...this.helper.get, ...this.helper.get,
elementByClassOrType(slector: string) {
return cy.get(slector);
},
}; };
public when = { public when = {
cypress/e2e/layers.cy.ts
+97 -96
View File
@@ -1,8 +1,9 @@
import { then } from "@shellygo/cypress-test-utils/assertable";
import { v1 as uuid } from "uuid"; import { v1 as uuid } from "uuid";
import MaputnikDriver from "./maputnik-driver"; import MaputnikDriver from "./maputnik-driver";
describe("layers", () => { describe("layers", () => {
let { beforeAndAfter, when, should } = new MaputnikDriver(); let { beforeAndAfter, get, when, should } = new MaputnikDriver();
beforeAndAfter(); beforeAndAfter();
beforeEach(() => { beforeEach(() => {
when.setStyle("both"); when.setStyle("both");
@@ -10,105 +11,95 @@ describe("layers", () => {
}); });
describe("ops", () => { describe("ops", () => {
it("delete", () => { let id: string;
let id = when.modal.fillLayers({ beforeEach(() => {
id = when.modal.fillLayers({
type: "background", type: "background",
}); });
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: id,
type: "background",
},
]
);
when.click("layer-list-item:" + id + ":delete");
should.equalStyleStore((a: any) => a.layers, []);
}); });
it("duplicate", () => { it("should update layers in local storage", () => {
let id = when.modal.fillLayers({ then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
type: "background", layers: [
{
id: id,
type: "background",
},
],
}); });
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: id,
type: "background",
},
]
);
when.click("layer-list-item:" + id + ":copy");
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: id + "-copy",
type: "background",
},
{
id: id,
type: "background",
},
]
);
}); });
it("hide", () => { describe("when clicking delete", () => {
let id = when.modal.fillLayers({ beforeEach(() => {
type: "background", when.click("layer-list-item:" + id + ":delete");
});
it("should empty layers in local storage", () => {
then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
layers: [],
});
});
});
describe("when clicking duplicate", () => {
beforeEach(() => {
when.click("layer-list-item:" + id + ":copy");
});
it("should add copy layer in local storage", () => {
then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id + "-copy",
type: "background",
},
{
id: id,
type: "background",
},
],
});
});
});
describe("when clicking hide", () => {
beforeEach(() => {
when.click("layer-list-item:" + id + ":toggle-visibility");
}); });
should.equalStyleStore( it("should update visibility to none in local storage", () => {
(a: any) => a.layers, then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
[ layers: [
{ {
id: id, id: id,
type: "background", type: "background",
}, layout: {
] visibility: "none",
); },
when.click("layer-list-item:" + id + ":toggle-visibility");
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: id,
type: "background",
layout: {
visibility: "none",
}, },
}, ],
] });
); });
when.click("layer-list-item:" + id + ":toggle-visibility"); describe("when clicking show", () => {
beforeEach(() => {
when.click("layer-list-item:" + id + ":toggle-visibility");
});
should.equalStyleStore( it("should update visibility to visible in local storage", () => {
(a: any) => a.layers, then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
[ layers: [
{ {
id: id, id: id,
type: "background", type: "background",
layout: { layout: {
visibility: "visible", visibility: "visible",
}, },
}, },
] ],
); });
});
});
}); });
}); });
describe("background", () => { describe("background", () => {
it("add", () => { it("add", () => {
let id = when.modal.fillLayers({ let id = when.modal.fillLayers({
@@ -191,13 +182,18 @@ describe("layers", () => {
); );
// AND RESET! // AND RESET!
when.typeKeys("{backspace}", "min-zoom.input-text"); when.type("{backspace}", "min-zoom.input-text");
when.click("max-zoom.input-text"); when.click("max-zoom.input-text");
should.equalStyleStore((a: any) => a.layers, [{ should.equalStyleStore(
"id": 'background:'+bgId, (a: any) => a.layers,
"type": 'background' [
}]); {
id: "background:" + bgId,
type: "background",
},
]
);
}); });
it("max-zoom", () => { it("max-zoom", () => {
@@ -243,13 +239,18 @@ describe("layers", () => {
); );
// Unset it again. // Unset it again.
when.typeKeys("{backspace}{backspace}", "layer-comment.input"); when.type("{backspace}{backspace}", "layer-comment.input");
when.click("min-zoom.input-text"); when.click("min-zoom.input-text");
should.equalStyleStore((a: any) => a.layers, [{ should.equalStyleStore(
"id": 'background:' + bgId, (a: any) => a.layers,
"type": 'background' [
}]); {
id: "background:" + bgId,
type: "background",
},
]
);
}); });
it("color", () => { it("color", () => {
cypress/e2e/maputnik-driver.ts
+39 -39
View File
@@ -1,7 +1,7 @@
import CypressWrapperDriver from "./cypress-wrapper-driver"; import CypressWrapperDriver from "./cypress-wrapper-driver";
import ModalDriver from "./modal-driver"; import ModalDriver from "./modal-driver";
const SERVER_ADDRESS = "http://localhost:8888/"; const baseUrl = "http://localhost:8888/";
export default class MaputnikDriver { export default class MaputnikDriver {
private helper = new CypressWrapperDriver(); private helper = new CypressWrapperDriver();
@@ -18,7 +18,7 @@ export default class MaputnikDriver {
setupMockBackedResponses: () => { setupMockBackedResponses: () => {
this.helper.given.interceptAndMockResponse({ this.helper.given.interceptAndMockResponse({
method: "GET", method: "GET",
url: "http://localhost:8888/example-style.json", url: baseUrl + "example-style.json",
response: { response: {
fixture: "example-style.json", fixture: "example-style.json",
}, },
@@ -26,28 +26,28 @@ export default class MaputnikDriver {
}); });
this.helper.given.interceptAndMockResponse({ this.helper.given.interceptAndMockResponse({
method: "GET", method: "GET",
url: "http://localhost:8888/example-layer-style.json", url: baseUrl + "/example-layer-style.json",
response: { response: {
fixture: "example-layer-style.json", fixture: "example-layer-style.json",
}, },
}); });
this.helper.given.interceptAndMockResponse({ this.helper.given.interceptAndMockResponse({
method: "GET", method: "GET",
url: "http://localhost:8888/geojson-style.json", url: baseUrl + "geojson-style.json",
response: { response: {
fixture: "geojson-style.json", fixture: "geojson-style.json",
}, },
}); });
this.helper.given.interceptAndMockResponse({ this.helper.given.interceptAndMockResponse({
method: "GET", method: "GET",
url: "http://localhost:8888/raster-style.json", url: baseUrl + "raster-style.json",
response: { response: {
fixture: "raster-style.json", fixture: "raster-style.json",
}, },
}); });
this.helper.given.interceptAndMockResponse({ this.helper.given.interceptAndMockResponse({
method: "GET", method: "GET",
url: "http://localhost:8888/geojson-raster-style.json", url: baseUrl + "geojson-raster-style.json",
response: { response: {
fixture: "geojson-raster-style.json", fixture: "geojson-raster-style.json",
}, },
@@ -66,11 +66,12 @@ export default class MaputnikDriver {
}; };
public when = { public when = {
...this.helper.when,
modal: this.modalDriver.when, modal: this.modalDriver.when,
within: (selector: string, fn: () => void) => { within: (selector: string, fn: () => void) => {
this.helper.when.within(fn, selector); this.helper.when.within(fn, selector);
}, },
tab: () => this.helper.get.elementByClassOrType("body").tab(), tab: () => this.helper.get.element("body").tab(),
waitForExampleFileRequset: () => { waitForExampleFileRequset: () => {
this.helper.when.waitForResponse("example-style.json"); this.helper.when.waitForResponse("example-style.json");
}, },
@@ -86,52 +87,43 @@ export default class MaputnikDriver {
let url = "?debug"; let url = "?debug";
switch (styleProperties) { switch (styleProperties) {
case "geojson": case "geojson":
url += `&style=${SERVER_ADDRESS}geojson-style.json`; url += `&style=${baseUrl}geojson-style.json`;
break; break;
case "raster": case "raster":
url += `&style=${SERVER_ADDRESS}raster-style.json`; url += `&style=${baseUrl}raster-style.json`;
break; break;
case "both": case "both":
url += `&style=${SERVER_ADDRESS}geojson-raster-style.json`; url += `&style=${baseUrl}geojson-raster-style.json`;
break; break;
case "layer": case "layer":
url += `&style=${SERVER_ADDRESS}/example-layer-style.json`; url += `&style=${baseUrl}/example-layer-style.json`;
break; break;
} }
if (zoom) { if (zoom) {
url += `#${zoom}/41.3805/2.1635`; url += `#${zoom}/41.3805/2.1635`;
} }
this.helper.when.visit(SERVER_ADDRESS + url); this.helper.when.visit(baseUrl + url);
if (styleProperties) { if (styleProperties) {
this.helper.when.confirmAlert(); this.helper.when.confirmAlert();
} }
this.helper.get.element("toolbar:link").should("be.visible"); this.helper.get.elementByTestId("toolbar:link").should("be.visible");
}, },
typeKeys: (keys: string, selector?: string) => { typeKeys: (keys: string, selector?: string) =>
if (selector) { this.helper.get.element("body").type(keys),
this.helper.get.element(selector).type(keys);
} else {
this.helper.get.elementByClassOrType("body").type(keys);
}
},
click: (selector: string) => {
this.helper.when.click(selector);
},
clickZoomin: () => { clickZoomin: () => {
this.helper.get.elementByClassOrType(".maplibregl-ctrl-zoom-in").click(); this.helper.get.element(".maplibregl-ctrl-zoom-in").click();
}, },
selectWithin: (selector: string, value: string) => { selectWithin: (selector: string, value: string) => {
this.when.within(selector, () => { this.when.within(selector, () => {
this.helper.get.elementByClassOrType("select").select(value); this.helper.get.element("select").select(value);
}); });
}, },
select: (selector: string, value: string) => { select: (selector: string, value: string) => {
this.helper.get.element(selector).select(value); this.helper.get.elementByTestId(selector).select(value);
}, },
focus: (selector: string) => { focus: (selector: string) => {
@@ -140,7 +132,7 @@ export default class MaputnikDriver {
setValue: (selector: string, text: string) => { setValue: (selector: string, text: string) => {
this.helper.get this.helper.get
.element(selector) .elementByTestId(selector)
.clear() .clear()
.type(text, { parseSpecialCharSequences: false }); .type(text, { parseSpecialCharSequences: false });
}, },
@@ -156,13 +148,21 @@ export default class MaputnikDriver {
const obj = JSON.parse(styleItem || ""); const obj = JSON.parse(styleItem || "");
return obj; return obj;
}, },
maputnikStyleFromLocalStorage: () => {
const styleId = localStorage.getItem("maputnik:latest_style");
const styleItem = localStorage.getItem(`maputnik:style:${styleId}`);
const obj = JSON.parse(styleItem || "");
return cy.wrap(obj);
},
exampleFileUrl: () => { exampleFileUrl: () => {
return SERVER_ADDRESS + "example-style.json"; return baseUrl + "example-style.json";
}, },
skipTargetLayerList: () => skipTargetLayerList: () =>
this.helper.get.element("skip-target-layer-list"), this.helper.get.elementByTestId("skip-target-layer-list"),
skipTargetLayerEditor: () => skipTargetLayerEditor: () =>
this.helper.get.element("skip-target-layer-editor"), this.helper.get.elementByTestId("skip-target-layer-editor"),
canvas: () => this.helper.get.element("canvas"),
}; };
public should = { public should = {
@@ -172,22 +172,22 @@ export default class MaputnikDriver {
}); });
}, },
notExist: (selector: string) => { notExist: (selector: string) => {
this.helper.get.elementByClassOrType(selector).should("not.exist"); this.helper.get.element(selector).should("not.exist");
}, },
beFocused: (selector: string) => { beFocused: (selector: string) => {
this.helper.get.element(selector).should("have.focus"); this.helper.get.elementByTestId(selector).should("have.focus");
}, },
notBeFocused: (selector: string) => { notBeFocused: (selector: string) => {
this.helper.get.element(selector).should("not.have.focus"); this.helper.get.elementByTestId(selector).should("not.have.focus");
}, },
beVisible: (selector: string) => { beVisible: (selector: string) => {
this.helper.get.element(selector).should("be.visible"); this.helper.get.elementByTestId(selector).should("be.visible");
}, },
notBeVisible: (selector: string) => { notBeVisible: (selector: string) => {
this.helper.get.element(selector).should("not.be.visible"); this.helper.get.elementByTestId(selector).should("not.be.visible");
}, },
equalStyleStore: (getter: (obj: any) => any, styleObj: any) => { equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
@@ -207,16 +207,16 @@ export default class MaputnikDriver {
}, },
exist: (selector: string) => { exist: (selector: string) => {
this.helper.get.element(selector).should("exist"); this.helper.get.elementByTestId(selector).should("exist");
}, },
beSelected: (selector: string, value: string) => { beSelected: (selector: string, value: string) => {
this.helper.get this.helper.get
.element(selector) .elementByTestId(selector)
.find(`option[value="${value}"]`) .find(`option[value="${value}"]`)
.should("be.selected"); .should("be.selected");
}, },
containText: (selector: string, text: string) => { containText: (selector: string, text: string) => {
this.helper.get.element(selector).should("contain.text", text); this.helper.get.elementByTestId(selector).should("contain.text", text);
}, },
}; };
} }
cypress/e2e/modal-driver.ts
+3 -6
View File
@@ -14,12 +14,12 @@ export default class ModalDriver {
} else { } else {
id = `${type}:${uuid()}`; id = `${type}:${uuid()}`;
} }
this.helper.when.selectOption("add-layer.layer-type.select", type);
this.helper.when.type("add-layer.layer-id.input", id);
this.helper.get.element("add-layer.layer-type.select").select(type);
this.helper.get.element("add-layer.layer-id.input").type(id);
if (layer) { if (layer) {
this.helper.when.within(() => { this.helper.when.within(() => {
this.helper.get.elementByClassOrType("input").type(layer!); this.helper.get.element("input").type(layer!);
}, "add-layer.layer-source-block"); }, "add-layer.layer-source-block");
} }
this.helper.when.click("add-layer"); this.helper.when.click("add-layer");
@@ -29,9 +29,6 @@ export default class ModalDriver {
open: () => { open: () => {
this.helper.when.click("layer-list:add-layer"); this.helper.when.click("layer-list:add-layer");
this.helper.get.element("modal:add-layer").should("exist");
this.helper.get.element("modal:add-layer").should("be.visible");
}, },
close: (key: string) => { close: (key: string) => {