ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-02-06 04:30:01 +00:00
Code Issues Projects Releases Wiki Activity

remove all async part, fix tests

Browse Source
This commit is contained in:
HarelM
2023-12-16 23:59:19 +02:00
parent 5d8041f55c
commit 9fb06d16c8
5 changed files with 114 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
cypress/e2e/driver.ts
View File

@@ -16,7 +16,8 @@ export default {
cy.intercept('GET', 'http://localhost:8888/geojson-style.json', { fixture: 'geojson-style.json' });
cy.intercept('GET', 'http://localhost:8888/raster-style.json', { fixture: 'raster-style.json' });
cy.intercept('GET', 'http://localhost:8888/geojson-raster-style.json', { fixture: 'geojson-raster-style.json' });
cy.intercept({method: 'GET', url: '*example.com/*', },[]);
cy.intercept({method: 'GET', url: '*example.local/*' }, []);
cy.intercept({method: 'GET', url: '*example.com/*' }, []);
},
setStyle(styleProperties: 'geojson' | 'raster' | 'both' | 'layer' | '', zoom? : number) {
@@ -66,11 +67,24 @@ export default {
cy.get(this.getDataAttribute('modal:add-layer')).should('be.visible');
},
async getStyleStore(): Promise<any> {
return new Promise((resolve) => {
cy.window().then((win: any) => {
return win.debug.get("maputnik", "styleStore").latestStyle(resolve);
});
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;
},
isStyleStoreEqual(getter: (obj:any) => any, styleObj: any) {
cy.window().then((win: any) => {
const obj = this.getStyleFromWindow(win);
assert.deepEqual(getter(obj), styleObj);
});
},
isStyleStoreEqualToExampleFileData() {
cy.window().then((win: any) => {
const obj = this.getStyleFromWindow(win);
cy.fixture('example-style.json').should('deep.equal', obj);
});
},
@@ -144,10 +158,6 @@ export default {
cy.get("input[type='file']").selectFile('cypress/fixtures/example-style.json', {force: true});
},
isEqualToExampleFileData(styleObject: any) {
return cy.fixture('example-style.json').should('deep.equal', styleObject);
},
getExampleFileUrl() {
return "http://localhost:8888/example-style.json";
},

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

@@ -11,22 +11,18 @@ describe("history", () => {
driver.beforeEach();
});
it("undo/redo", async () => {
var styleObj;
it("undo/redo", () => {
driver.setStyle('geojson');
driver.openLayersModal();
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, []);
driver.isStyleStoreEqual((a: any) => a.layers, []);
driver.fillLayersModal({
id: "step 1",
type: "background"
})
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": "step 1",
"type": 'background'
@@ -39,8 +35,7 @@ describe("history", () => {
type: "background"
})
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": "step 1",
"type": 'background'
@@ -52,8 +47,7 @@ describe("history", () => {
]);
driver.typeKeys(undoKeyCombo);
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": "step 1",
"type": 'background'
@@ -61,13 +55,10 @@ describe("history", () => {
]);
driver.typeKeys(undoKeyCombo)
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
]);
driver.isStyleStoreEqual((a: any) => a.layers, []);
driver.typeKeys(redoKeyCombo)
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": "step 1",
"type": 'background'
@@ -75,8 +66,7 @@ describe("history", () => {
]);
driver.typeKeys(redoKeyCombo)
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": "step 1",
"type": 'background'
@@ -86,7 +76,5 @@ describe("history", () => {
"type": 'background'
}
]);
});
})

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

@@ -10,14 +10,12 @@ describe("layers", () => {
});
describe("ops", () => {
it("delete", async () => {
var styleObj;
it("delete", () => {
var id = driver.fillLayersModal({
type: "background"
})
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": id,
"type": 'background'
@@ -26,18 +24,16 @@ describe("layers", () => {
driver.click(driver.getDataAttribute("layer-list-item:"+id+":delete", ""))
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, []);
driver.isStyleStoreEqual((a: any) => a.layers, []);
});
it("duplicate", async () => {
it("duplicate", () => {
var styleObj;
var id = driver.fillLayersModal({
type: "background"
})
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": id,
"type": 'background'
@@ -46,8 +42,7 @@ describe("layers", () => {
driver.click(driver.getDataAttribute("layer-list-item:"+id+":copy", ""));
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": id+"-copy",
"type": "background"
@@ -59,14 +54,13 @@ describe("layers", () => {
]);
});
it("hide", async () => {
it("hide", () => {
var styleObj;
var id = driver.fillLayersModal({
type: "background"
})
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": id,
"type": 'background'
@@ -75,8 +69,7 @@ describe("layers", () => {
driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": id,
"type": "background",
@@ -86,10 +79,9 @@ describe("layers", () => {
},
]);
await driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": id,
"type": "background",
@@ -102,15 +94,14 @@ describe("layers", () => {
})
describe('background', function () {
describe('background', () => {
it("add", async () => {
it("add", () => {
var id = driver.fillLayersModal({
type: "background"
})
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": id,
"type": 'background'
@@ -119,7 +110,7 @@ describe("layers", () => {
});
describe("modify", () => {
async function createBackground() {
function createBackground() {
// Setup
var id = uuid();
@@ -128,8 +119,7 @@ describe("layers", () => {
driver.click(driver.getDataAttribute("add-layer"));
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": 'background:'+id,
"type": 'background'
@@ -141,8 +131,8 @@ describe("layers", () => {
// ====> THESE SHOULD BE FROM THE SPEC
describe("layer", () => {
it("expand/collapse");
it("id", async () => {
var bgId = await createBackground();
it("id", () => {
var bgId = createBackground();
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
@@ -150,8 +140,7 @@ describe("layers", () => {
driver.setValue(driver.getDataAttribute("layer-editor.layer-id", "input"), "foobar:"+id)
driver.click(driver.getDataAttribute("min-zoom"));
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": 'foobar:'+id,
"type": 'background'
@@ -159,16 +148,15 @@ describe("layers", () => {
]);
});
it("min-zoom", async () => {
var bgId = await createBackground();
it("min-zoom", () => {
var bgId = createBackground();
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
driver.setValue(driver.getDataAttribute("min-zoom", 'input[type="text"]'), "1");
driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": 'background:'+bgId,
"type": 'background',
@@ -177,12 +165,10 @@ describe("layers", () => {
]);
// AND RESET!
// await driver.setValue(driver.getDataAttribute("min-zoom", "input"), "")
// await driver.click(driver.getDataAttribute("max-zoom", "input"));
// driver.setValue(driver.getDataAttribute("min-zoom", "input"), "")
// driver.click(driver.getDataAttribute("max-zoom", "input"));
// var styleObj = await driver.getStyleStore();
// assert.deepEqual(styleObj.layers, [
// driver.isStyleStoreEqual((a: any) => a.layers, [
// {
// "id": 'background:'+bgId,
// "type": 'background'
@@ -190,16 +176,15 @@ describe("layers", () => {
// ]);
});
it("max-zoom", async () => {
var bgId = await createBackground();
it("max-zoom", () => {
var bgId = createBackground();
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
driver.setValue(driver.getDataAttribute("max-zoom", 'input[type="text"]'), "1")
driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": 'background:'+bgId,
"type": 'background',
@@ -208,17 +193,16 @@ describe("layers", () => {
]);
});
it("comments", async () => {
var bgId = await createBackground();
it("comments", () => {
var bgId = createBackground();
var id = uuid();
await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
await driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), id);
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), id);
await driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": 'background:'+bgId,
"type": 'background',
@@ -230,12 +214,10 @@ describe("layers", () => {
// Unset it again.
// TODO: This fails
// await driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), "");
// await driver.click(driver.getDataAttribute("min-zoom", "input"));
// await driver.zeroTimeout();
// driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), "");
// driver.click(driver.getDataAttribute("min-zoom", "input"));
// var styleObj = await driver.getStyleStore();
// assert.deepEqual(styleObj.layers, [
// driver.isStyleStoreEqual((a: any) => a.layers, [
// {
// "id": 'background:'+bgId,
// "type": 'background'
@@ -243,15 +225,14 @@ describe("layers", () => {
// ]);
});
it("color", async () => {
var bgId = await createBackground();
it("color", () => {
var bgId = createBackground();
await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
await driver.click(driver.getDataAttribute("spec-field:background-color", "input"));
driver.click(driver.getDataAttribute("spec-field:background-color", "input"));
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": 'background:'+bgId,
"type": 'background'
@@ -279,8 +260,8 @@ describe("layers", () => {
it("modify");
// TODO
it.skip("parse error", async () => {
var bgId = await createBackground();
it.skip("parse error", () => {
var bgId = createBackground();
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
@@ -298,15 +279,14 @@ describe("layers", () => {
});
describe('fill', () => {
it("add", async () => {
it("add", () => {
var id = driver.fillLayersModal({
type: "fill",
layer: "example"
});
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": id,
"type": 'fill',
@@ -320,14 +300,13 @@ describe("layers", () => {
});
describe('line', () => {
it("add", async () => {
it("add", () => {
var id = driver.fillLayersModal({
type: "line",
layer: "example"
});
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": id,
"type": "line",
@@ -343,14 +322,13 @@ describe("layers", () => {
});
describe('symbol', () => {
it("add", async () => {
it("add", () => {
var id = driver.fillLayersModal({
type: "symbol",
layer: "example"
});
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": id,
"type": "symbol",
@@ -361,14 +339,13 @@ describe("layers", () => {
});
describe('raster', () => {
it("add", async () => {
it("add", () => {
var id = driver.fillLayersModal({
type: "raster",
layer: "raster"
});
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": id,
"type": "raster",
@@ -379,14 +356,13 @@ describe("layers", () => {
});
describe('circle', () => {
it("add", async () => {
it("add", () => {
var id = driver.fillLayersModal({
type: "circle",
layer: "example"
});
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": id,
"type": "circle",
@@ -398,14 +374,13 @@ describe("layers", () => {
});
describe('fill extrusion', () => {
it("add", async () => {
it("add", () => {
var id = driver.fillLayersModal({
type: "fill-extrusion",
layer: "example"
});
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
driver.isStyleStoreEqual((a: any) => a.layers, [
{
"id": id,
"type": 'fill-extrusion',
@@ -417,7 +392,7 @@ describe("layers", () => {
describe("groups", () => {
it("simple", async () => {
it("simple", () => {
driver.setStyle("geojson");
driver.openLayersModal();

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

@@ -1,10 +1,10 @@
import driver from "./driver";
describe("modals", () => {
beforeEach(() => {
driver.beforeEach();
driver.setStyle('');
});
beforeEach(() => {
driver.beforeEach();
driver.setStyle('');
});
describe("open", () => {
beforeEach(() => {
driver.click(driver.getDataAttribute("nav:open"));
@@ -14,27 +14,26 @@ describe("modals", () => {
driver.closeModal("modal:open");
});
it("upload", async () => {
it.skip("upload", () => {
// HM: I was not able to make the following choose file actually to select a file and close the modal...
driver.chooseExampleFile();
var styleObj = await driver.getStyleStore();
driver.isEqualToExampleFileData(styleObj);
driver.isStyleStoreEqualToExampleFileData();
});
it("load from url", async () => {
it("load from url", () => {
var styleFileUrl = driver.getExampleFileUrl();
driver.setValue(driver.getDataAttribute("modal:open.url.input"), styleFileUrl);
driver.click(driver.getDataAttribute("modal:open.url.button"))
driver.waitForExampleFileRequset();
var styleObj = await driver.getStyleStore();
driver.isEqualToExampleFileData(styleObj);
driver.isStyleStoreEqualToExampleFileData();
});
})
describe("shortcuts", () => {
it("open/close", async () => {
it("open/close", () => {
driver.setStyle('');
driver.typeKeys("?");
@@ -67,7 +66,7 @@ describe("modals", () => {
})
describe("inspect", () => {
it("toggle", async () => {
it("toggle", () => {
driver.setStyle('geojson');
driver.select(driver.getDataAttribute("nav:inspect", "select"), "inspect");
@@ -79,60 +78,56 @@ describe("modals", () => {
driver.click(driver.getDataAttribute("nav:settings"));
});
it("name", async () => {
it("name", () => {
driver.setValue(driver.getDataAttribute("modal:settings.name"), "foobar");
driver.click(driver.getDataAttribute("modal:settings.owner"));
var styleObj = await driver.getStyleStore();
assert.equal(styleObj.name, "foobar");
driver.isStyleStoreEqual((obj) => obj.name, "foobar");
})
it("owner", async () => {
it("owner", () => {
driver.setValue(driver.getDataAttribute("modal:settings.owner"), "foobar")
driver.click(driver.getDataAttribute("modal:settings.name"));
var styleObj = await driver.getStyleStore();
assert.equal(styleObj.owner, "foobar");
driver.isStyleStoreEqual((obj) => obj.owner, "foobar");
})
it("sprite url", async () => {
it("sprite url", () => {
driver.setValue(driver.getDataAttribute("modal:settings.sprite"), "http://example.com")
driver.click(driver.getDataAttribute("modal:settings.name"));
var styleObj = await driver.getStyleStore();
assert.equal(styleObj.sprite, "http://example.com");
driver.isStyleStoreEqual((obj) => obj.sprite, "http://example.com");
})
it("glyphs url", async () => {
it("glyphs url", () => {
var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"
driver.setValue(driver.getDataAttribute("modal:settings.glyphs"), glyphsUrl);
driver.click(driver.getDataAttribute("modal:settings.name"));
var styleObj = await driver.getStyleStore();
assert.equal(styleObj.glyphs, glyphsUrl);
driver.isStyleStoreEqual((obj) => obj.glyphs, glyphsUrl);
})
it("maptiler access token", async () => {
it("maptiler access token", () => {
var apiKey = "testing123";
driver.setValue(driver.getDataAttribute("modal:settings.maputnik:openmaptiles_access_token"), apiKey);
driver.click(driver.getDataAttribute("modal:settings.name"));
var styleObj = await driver.getStyleStore();
assert.equal(styleObj.metadata["maputnik:openmaptiles_access_token"], apiKey);
driver.isStyleStoreEqual((obj) => obj.metadata["maputnik:openmaptiles_access_token"], apiKey);
})
it("thunderforest access token", async () => {
it("thunderforest access token", () => {
var apiKey = "testing123";
driver.setValue(driver.getDataAttribute("modal:settings.maputnik:thunderforest_access_token"), apiKey);
driver.click(driver.getDataAttribute("modal:settings.name"));
var styleObj = await driver.getStyleStore();
assert.equal(styleObj.metadata["maputnik:thunderforest_access_token"], apiKey);
driver.isStyleStoreEqual((obj) => obj.metadata["maputnik:thunderforest_access_token"], apiKey);
})
it("style renderer", async () => {
it("style renderer", () => {
cy.on('uncaught:exception', () => false); // this is due to the fact that this is an invalid style for openlayers
driver.select(driver.getDataAttribute("modal:settings.maputnik:renderer"), "ol");
driver.isSelected(driver.getDataAttribute("modal:settings.maputnik:renderer"), "ol");
driver.click(driver.getDataAttribute("modal:settings.name"));
var styleObj = await driver.getStyleStore();
assert.equal(styleObj.metadata["maputnik:renderer"], "ol");
driver.isStyleStoreEqual((obj) => obj.metadata["maputnik:renderer"], "ol");
})
})

2
tsconfig.json
View File

@@ -51,7 +51,7 @@
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
// "outDir": "./", /* Specify an output folder for all emitted files. */
// "removeComments": true, /* Disable emitting comments. */
// "noEmit": true, /* Disable emitting files from a compilation. */
"noEmit": true, /* Disable emitting files from a compilation. */
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */