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

Fix tests, types, added data-wd-key

Browse Source
This commit is contained in:
HarelM
2023-12-19 23:44:35 +02:00
parent 84adbe6eb2
commit 3ba3a20848
14 changed files with 1124 additions and 1313 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cypress/e2e/accessibility.cy.ts
+3 -3
View File
@@ -11,7 +11,7 @@ describe("accessibility", () => {
it("skip link to layer list", () => {
const selector = "root:skip:layer-list";
should.isExists(selector);
should.exist(selector);
when.tab();
should.beFocused(selector);
when.click(selector);
@@ -20,7 +20,7 @@ describe("accessibility", () => {
it("skip link to layer editor", () => {
const selector = "root:skip:layer-editor";
should.isExists(selector);
should.exist(selector);
when.tab().tab();
should.beFocused(selector);
when.click(selector);
@@ -29,7 +29,7 @@ describe("accessibility", () => {
it("skip link to map view", () => {
const selector = "root:skip:map-view";
should.isExists(selector);
should.exist(selector);
when.tab().tab().tab();
should.beFocused(selector);
when.click(selector);
cypress/e2e/driver.ts
+29 -17
View File
@@ -73,7 +73,7 @@ export default class MaputnikDriver {
}
cy.get(".maputnik-toolbar-link").should("be.visible");
},
fillLayersModal: (opts: any) => {
fillLayersModal: (opts: {type: string, layer?: string, id?: string}) => {
var type = opts.type;
var layer = opts.layer;
var id;
@@ -84,12 +84,12 @@ export default class MaputnikDriver {
}
cy.get(
this.get.getDataAttribute("add-layer.layer-type", "select")
this.get.dataAttribute("add-layer.layer-type", "select")
).select(type);
cy.get(this.get.getDataAttribute("add-layer.layer-id", "input")).type(id);
cy.get(this.get.dataAttribute("add-layer.layer-id", "input")).type(id);
if (layer) {
cy.get(
this.get.getDataAttribute("add-layer.layer-source-block", "input")
this.get.dataAttribute("add-layer.layer-source-block", "input")
).type(layer);
}
this.when.click("add-layer");
@@ -103,11 +103,20 @@ export default class MaputnikDriver {
click: (selector: string) => {
this.helper.when.click(selector);
// cy.get(selector).click({ force: true });
},
clickZoomin: () => {
cy.get(".maplibregl-ctrl-zoom-in").click();
},
selectWithin: (selector: string, value: string) => {
this.when.within(selector, () => {
cy.get("select").select(value);
});
},
select: (selector: string, value: string) => {
cy.get(selector).select(value);
this.helper.get.element(selector).select(value);
},
focus: (selector: string) => {
@@ -126,8 +135,8 @@ export default class MaputnikDriver {
openLayersModal: () => {
this.helper.when.click("layer-list:add-layer");
cy.get(this.get.getDataAttribute("modal:add-layer")).should("exist");
cy.get(this.get.getDataAttribute("modal:add-layer")).should("be.visible");
cy.get(this.get.dataAttribute("modal:add-layer")).should("exist");
cy.get(this.get.dataAttribute("modal:add-layer")).should("be.visible");
},
};
@@ -135,16 +144,16 @@ export default class MaputnikDriver {
isMac: () => {
return Cypress.platform === "darwin";
},
getStyleFromWindow: (win: Window) => {
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;
},
getExampleFileUrl: () => {
exampleFileUrl: () => {
return "http://localhost:8888/example-style.json";
},
getDataAttribute: (key: string, selector?: string): string => {
dataAttribute: (key: string, selector?: string): string => {
return `*[data-wd-key='${key}'] ${selector || ""}`;
},
};
@@ -176,23 +185,26 @@ export default class MaputnikDriver {
equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
cy.window().then((win: any) => {
const obj = this.get.getStyleFromWindow(win);
const obj = this.get.styleFromWindow(win);
assert.deepEqual(getter(obj), styleObj);
});
},
isStyleStoreEqualToExampleFileData: () => {
styleStoreEqualToExampleFileData: () => {
cy.window().then((win: any) => {
const obj = this.get.getStyleFromWindow(win);
const obj = this.get.styleFromWindow(win);
cy.fixture("example-style.json").should("deep.equal", obj);
});
},
isExists: (selector: string) => {
exist: (selector: string) => {
this.helper.get.element(selector).should("exist");
},
isSelected: (selector: string, value: string) => {
cy.get(selector).find(`option[value="${value}"]`).should("be.selected");
beSelected: (selector: string, value: string) => {
this.helper.get.element(selector).find(`option[value="${value}"]`).should("be.selected");
},
containText: (selector: string, text: string) => {
this.helper.get.element(selector).should("contain.text", text);
}
};
}
cypress/e2e/keyboard.cy.ts
+3 -3
View File
@@ -1,4 +1,4 @@
import { default as MaputnikDriver } from "./driver";
import MaputnikDriver from "./driver";
describe("keyboard", () => {
let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
@@ -45,12 +45,12 @@ describe("keyboard", () => {
it("'i' should change map to inspect mode", () => {
when.typeKeys("i");
should.isSelected(get.getDataAttribute("nav:inspect"), "inspect");
should.beSelected("nav:inspect", "inspect");
});
it("'m' should focus map", () => {
when.typeKeys("m");
should.beFocused(".maplibregl-canvas");
should.canvasBeFocused();
});
it("'!' should show debug modal", () => {
cypress/e2e/layers.cy.ts
+9 -15
View File
@@ -1,4 +1,3 @@
var assert = require("assert");
import { v1 as uuid } from "uuid";
import MaputnikDriver from "./driver";
@@ -134,12 +133,9 @@ describe("layers", () => {
// Setup
var id = uuid();
when.select(
get.getDataAttribute("add-layer.layer-type", "select"),
"background"
);
when.selectWithin("add-layer.layer-type", "background");
when.setValue(
get.getDataAttribute("add-layer.layer-id", "input"),
get.dataAttribute("add-layer.layer-id", "input"),
"background:" + id
);
@@ -167,7 +163,7 @@ describe("layers", () => {
var id = uuid();
when.setValue(
get.getDataAttribute("layer-editor.layer-id", "input"),
get.dataAttribute("layer-editor.layer-id", "input"),
"foobar:" + id
);
when.click("min-zoom");
@@ -188,7 +184,7 @@ describe("layers", () => {
when.click("layer-list-item:background:" + bgId);
when.setValue(
get.getDataAttribute("min-zoom", 'input[type="text"]'),
get.dataAttribute("min-zoom", 'input[type="text"]'),
"1"
);
@@ -206,8 +202,8 @@ describe("layers", () => {
);
// AND RESET!
// driver.setValue(driver.getDataAttribute("min-zoom", "input"), "")
// driver.click(driver.getDataAttribute("max-zoom", "input"));
// driver.setValue(driver.get.dataAttribute("min-zoom", "input"), "")
// driver.click(driver.get.dataAttribute("max-zoom", "input"));
// driver.isStyleStoreEqual((a: any) => a.layers, [
// {
@@ -222,7 +218,7 @@ describe("layers", () => {
when.click("layer-list-item:background:" + bgId);
when.setValue(
get.getDataAttribute("max-zoom", 'input[type="text"]'),
get.dataAttribute("max-zoom", 'input[type="text"]'),
"1"
);
@@ -245,7 +241,7 @@ describe("layers", () => {
var id = uuid();
when.click("layer-list-item:background:" + bgId);
when.setValue(get.getDataAttribute("layer-comment", "textarea"), id);
when.setValue(get.dataAttribute("layer-comment", "textarea"), id);
when.click("layer-editor.layer-id");
@@ -324,9 +320,7 @@ describe("layers", () => {
when.typeKeys(
"\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
);
should.isExists(errorSelector);
when.click("layer-editor.layer-id");
should.exist(errorSelector);
});
});
});
cypress/e2e/map.cy.ts
+3 -5
View File
@@ -8,18 +8,16 @@ describe("map", () => {
var zoomLevel = 12.37;
when.setStyle("geojson", zoomLevel);
should.beVisible("maplibre:ctrl-zoom");
// HM TODO
//driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel);
should.containText("maplibre:ctrl-zoom", "Zoom: " + zoomLevel);
});
it("via map controls", () => {
var zoomLevel = 12.37;
when.setStyle("geojson", zoomLevel);
when.click("maplibre:ctrl-zoom");
should.beVisible("maplibre:ctrl-zoom");
// HM TODO
//driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel + 1);
when.clickZoomin();
should.containText("maplibre:ctrl-zoom", "Zoom: "+(zoomLevel + 1));
});
});
});
cypress/e2e/modals.cy.ts
+13 -19
View File
@@ -20,17 +20,17 @@ describe("modals", () => {
// HM: I was not able to make the following choose file actually to select a file and close the modal...
when.chooseExampleFile();
should.isStyleStoreEqualToExampleFileData();
should.styleStoreEqualToExampleFileData();
});
it("load from url", () => {
var styleFileUrl = get.getExampleFileUrl();
var styleFileUrl = get.exampleFileUrl();
when.setValue(get.getDataAttribute("modal:open.url.input"), styleFileUrl);
when.setValue(get.dataAttribute("modal:open.url.input"), styleFileUrl);
when.click("modal:open.url.button");
when.waitForExampleFileRequset();
should.isStyleStoreEqualToExampleFileData();
should.styleStoreEqualToExampleFileData();
});
});
@@ -67,7 +67,7 @@ describe("modals", () => {
it("toggle", () => {
when.setStyle("geojson");
when.select(get.getDataAttribute("nav:inspect", "select"), "inspect");
when.selectWithin("nav:inspect", "inspect");
});
});
@@ -77,20 +77,20 @@ describe("modals", () => {
});
it("name", () => {
when.setValue(get.getDataAttribute("modal:settings.name"), "foobar");
when.setValue(get.dataAttribute("modal:settings.name"), "foobar");
when.click("modal:settings.owner");
should.equalStyleStore((obj) => obj.name, "foobar");
});
it("owner", () => {
when.setValue(get.getDataAttribute("modal:settings.owner"), "foobar");
when.setValue(get.dataAttribute("modal:settings.owner"), "foobar");
when.click("modal:settings.name");
should.equalStyleStore((obj) => obj.owner, "foobar");
});
it("sprite url", () => {
when.setValue(
get.getDataAttribute("modal:settings.sprite"),
get.dataAttribute("modal:settings.sprite"),
"http://example.com"
);
when.click("modal:settings.name");
@@ -99,7 +99,7 @@ describe("modals", () => {
});
it("glyphs url", () => {
var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
when.setValue(get.getDataAttribute("modal:settings.glyphs"), glyphsUrl);
when.setValue(get.dataAttribute("modal:settings.glyphs"), glyphsUrl);
when.click("modal:settings.name");
should.equalStyleStore((obj) => obj.glyphs, glyphsUrl);
@@ -108,7 +108,7 @@ describe("modals", () => {
it("maptiler access token", () => {
var apiKey = "testing123";
when.setValue(
get.getDataAttribute(
get.dataAttribute(
"modal:settings.maputnik:openmaptiles_access_token"
),
apiKey
@@ -124,7 +124,7 @@ describe("modals", () => {
it("thunderforest access token", () => {
var apiKey = "testing123";
when.setValue(
get.getDataAttribute(
get.dataAttribute(
"modal:settings.maputnik:thunderforest_access_token"
),
apiKey
@@ -139,14 +139,8 @@ describe("modals", () => {
it("style renderer", () => {
cy.on("uncaught:exception", () => false); // this is due to the fact that this is an invalid style for openlayers
when.select(
get.getDataAttribute("modal:settings.maputnik:renderer"),
"ol"
);
should.isSelected(
get.getDataAttribute("modal:settings.maputnik:renderer"),
"ol"
);
when.select("modal:settings.maputnik:renderer", "ol");
should.beSelected("modal:settings.maputnik:renderer", "ol");
when.click("modal:settings.name");