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

wip

Browse Source
This commit is contained in:
shelly_goldblit
2023-12-30 20:36:49 +02:00
parent 085eda76a1
commit f7a945abce
4 changed files with 98 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
cypress/e2e/accessibility.cy.ts
View File

@@ -12,9 +12,9 @@ describe("accessibility", () => {
it("skip link to layer list", () => {
const selector = "root:skip:layer-list";
should.exist(selector);
then(get.elementByTestId(selector)).shouldExist();
when.tab();
should.beFocused(selector);
then(get.skipTargetLayerList()).shouldBeFocused();
when.click(selector);
then(get.skipTargetLayerList()).shouldBeFocused();
});
@@ -22,7 +22,7 @@ describe("accessibility", () => {
// 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.
it.skip("skip link to layer editor", () => {
const selector = "root:skip:layer-editor";
should.exist(selector);
then(get.elementByTestId(selector)).shouldExist();
when.tab().tab();
should.beFocused(selector);
when.click(selector);
@@ -31,7 +31,7 @@ describe("accessibility", () => {
it("skip link to map view", () => {
const selector = "root:skip:map-view";
should.exist(selector);
then(get.elementByTestId(selector)).shouldExist();
when.tab().tab().tab();
should.beFocused(selector);
when.click(selector);

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

@@ -182,7 +182,7 @@ describe("layers", () => {
);
// AND RESET!
when.type("{backspace}", "min-zoom.input-text");
when.type("min-zoom.input-text", "{backspace}");
when.click("max-zoom.input-text");
should.equalStyleStore(
@@ -239,7 +239,7 @@ describe("layers", () => {
);
// Unset it again.
when.type("{backspace}{backspace}", "layer-comment.input");
when.type("layer-comment.input", "{backspace}{backspace}");
when.click("min-zoom.input-text");
should.equalStyleStore(
@@ -459,16 +459,19 @@ describe("layers", () => {
type: "background",
});
should.beVisible("layer-list-item:foo");
should.notBeVisible("layer-list-item:foo_bar");
should.notBeVisible("layer-list-item:foo_bar_baz");
then(get.elementByTestId("layer-list-group:foo")).shouldBeVisible();
then(
get.elementByTestId("layer-list-group:foo_bar")
).shouldNotBeVisible();
then(
get.elementByTestId("layer-list-group:foo_bar_baz")
).shouldNotBeVisible();
when.click("layer-list-group:foo-0");
should.beVisible("layer-list-item:foo");
should.beVisible("layer-list-item:foo_bar");
should.beVisible("layer-list-item:foo_bar_baz");
then(get.elementByTestId("layer-list-group:foo")).shouldBeVisible();
then(get.elementByTestId("layer-list-group:foo_bar")).shouldBeVisible();
then(
get.elementByTestId("layer-list-group:foo_bar_baz")
).shouldBeVisible();
});
});
});

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

@@ -15,6 +15,7 @@ export default class MaputnikDriver {
};
public given = {
...this.helper.given,
setupMockBackedResponses: () => {
this.helper.given.interceptAndMockResponse({
method: "GET",
@@ -26,7 +27,7 @@ export default class MaputnikDriver {
});
this.helper.given.interceptAndMockResponse({
method: "GET",
url: baseUrl + "/example-layer-style.json",
url: baseUrl + "example-layer-style.json",
response: {
fixture: "example-layer-style.json",
},
@@ -72,7 +73,7 @@ export default class MaputnikDriver {
this.helper.when.within(fn, selector);
},
tab: () => this.helper.get.element("body").tab(),
waitForExampleFileRequset: () => {
waitForExampleFileResponse: () => {
this.helper.when.waitForResponse("example-style.json");
},
chooseExampleFile: () => {
@@ -106,6 +107,7 @@ export default class MaputnikDriver {
if (styleProperties) {
this.helper.when.confirmAlert();
}
// when methods should not include assertions
this.helper.get.elementByTestId("toolbar:link").should("be.visible");
},
@@ -150,11 +152,15 @@ export default class MaputnikDriver {
return obj;
},
maputnikStyleFromLocalStorage: () => {
maputnikStyleFromLocalStorageObj: () => {
const styleId = localStorage.getItem("maputnik:latest_style");
const styleItem = localStorage.getItem(`maputnik:style:${styleId}`);
const obj = JSON.parse(styleItem || "");
return cy.wrap(obj);
console.log(obj);
return obj;
},
maputnikStyleFromLocalStorage: () => {
return cy.wrap(this.get.maputnikStyleFromLocalStorageObj());
},
exampleFileUrl: () => {
return baseUrl + "example-style.json";
@@ -178,14 +184,6 @@ export default class MaputnikDriver {
this.helper.get.elementByTestId(selector).should("not.have.focus");
},
beVisible: (selector: string) => {
this.helper.get.elementByTestId(selector).should("be.visible");
},
notBeVisible: (selector: string) => {
this.helper.get.elementByTestId(selector).should("not.be.visible");
},
equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
cy.window().then((win: any) => {
const obj = this.get.styleFromWindow(win);
@@ -196,23 +194,18 @@ export default class MaputnikDriver {
styleStoreEqualToExampleFileData: () => {
cy.window().then((win: any) => {
const obj = this.get.styleFromWindow(win);
const bobj = this.get.maputnikStyleFromLocalStorageObj();
this.helper.given
.fixture("example-style.json", "file:example-style.json")
.should("deep.equal", obj);
});
},
exist: (selector: string) => {
this.helper.get.elementByTestId(selector).should("exist");
},
beSelected: (selector: string, value: string) => {
this.helper.get
.elementByTestId(selector)
.find(`option[value="${value}"]`)
.should("be.selected");
},
containText: (selector: string, text: string) => {
this.helper.get.elementByTestId(selector).should("contain.text", text);
},
};
}

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

@@ -1,9 +1,11 @@
import { then } from "@shellygo/cypress-test-utils/assertable";
import MaputnikDriver from "./maputnik-driver";
describe("modals", () => {
let { beforeAndAfter, when, get, should } = new MaputnikDriver();
let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
beforeAndAfter();
beforeEach(() => {
given.fixture("example-style.json", "file:example-style.json");
when.setStyle("");
});
describe("open", () => {
@@ -11,7 +13,8 @@ describe("modals", () => {
when.click("nav:open");
});
it.only("close", () => {
it.skip("close", () => {
// Asserting non existence is an anti-pattern
when.modal.close("modal:open");
should.notExist("modal:open");
});
@@ -19,26 +22,51 @@ 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();
should.styleStoreEqualToExampleFileData();
then(get.responseBody("example-style.json")).shouldDeepEqual(
get.maputnikStyleFromLocalStorageObj()
);
});
it("load from url", () => {
let styleFileUrl = get.exampleFileUrl();
describe("when click open url", () => {
beforeEach(() => {
let styleFileUrl = get.exampleFileUrl();
when.setValue("modal:open.url.input", styleFileUrl);
when.click("modal:open.url.button");
when.waitForExampleFileRequset();
when.setValue("modal:open.url.input", styleFileUrl);
when.click("modal:open.url.button");
});
it.only("load from url", () => {
// expect(
// Cypress._.isMatch(
// get.maputnikStyleFromLocalStorageObj(),
// get.responseBody("example-style.json")
// )
// ).to.be.true;
should.styleStoreEqualToExampleFileData();
// expect(
// Cypress._.isMatch(
// get.maputnikStyleFromLocalStorageObj(),
// { shelly: true }
// //get.responseBody("example-style.json")
// )
// );
should.styleStoreEqualToExampleFileData();
// then(get.fixture("file:example-style.json")).should(
// "deep.equal",
// get.maputnikStyleFromLocalStorageObj()
// );
// then(get.responseBody("example-style.json")).shouldDeepNestedInclude(
// get.maputnikStyleFromLocalStorageObj()
// );
});
});
});
describe("shortcuts", () => {
it("open/close", () => {
it.skip("open/close", () => {
when.setStyle("");
when.typeKeys("?");
when.modal.close("modal:shortcuts");
// Anti pattern. we should test that things exist. million things don't exist
should.notExist("modal:shortcuts");
});
});
@@ -48,7 +76,7 @@ describe("modals", () => {
when.click("nav:export");
});
it("close", () => {
it.skip("close", () => {
when.modal.close("modal:export");
should.notExist("modal:export");
});
@@ -65,9 +93,9 @@ describe("modals", () => {
describe("inspect", () => {
it("toggle", () => {
// There is no assertion in this test
when.setStyle("geojson");
when.selectWithin("nav:inspect", "inspect");
when.select("maputnik-select", "inspect");
});
});
@@ -78,35 +106,40 @@ describe("modals", () => {
it("name", () => {
when.click("field-doc-button-Name");
should.containText("spec-field-doc", "name for the style");
then(get.elementsText("spec-field-doc")).shouldContainText(
"name for the style"
);
});
it("show name specifications", () => {
when.setValue("modal:settings.name", "foobar");
when.click("modal:settings.owner");
should.equalStyleStore((obj) => obj.name, "foobar");
then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
name: "foobar",
});
});
it("owner", () => {
when.setValue("modal:settings.owner", "foobar");
when.click("modal:settings.name");
should.equalStyleStore((obj) => obj.owner, "foobar");
then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
owner: "foobar",
});
});
it("sprite url", () => {
when.setValue("modal:settings.sprite", "http://example.com");
when.click("modal:settings.name");
should.equalStyleStore((obj) => obj.sprite, "http://example.com");
then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
sprite: "http://example.com",
});
});
it("glyphs url", () => {
let glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
when.setValue("modal:settings.glyphs", glyphsUrl);
when.click("modal:settings.name");
should.equalStyleStore((obj) => obj.glyphs, glyphsUrl);
then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
glyphs: glyphsUrl,
});
});
it("maptiler access token", () => {
@@ -116,11 +149,9 @@ describe("modals", () => {
apiKey
);
when.click("modal:settings.name");
should.equalStyleStore(
(obj) => obj.metadata["maputnik:openmaptiles_access_token"],
apiKey
);
then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
metadata: { "maputnik:openmaptiles_access_token": apiKey },
});
});
it("thunderforest access token", () => {
@@ -130,21 +161,22 @@ describe("modals", () => {
apiKey
);
when.click("modal:settings.name");
should.equalStyleStore(
(obj) => obj.metadata["maputnik:thunderforest_access_token"],
apiKey
);
then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
metadata: { "maputnik:thunderforest_access_token": apiKey },
});
});
it("style renderer", () => {
cy.on("uncaught:exception", () => false); // this is due to the fact that this is an invalid style for openlayers
when.select("modal:settings.maputnik:renderer", "ol");
should.beSelected("modal:settings.maputnik:renderer", "ol");
then(get.inputValue("modal:settings.maputnik:renderer")).shouldEqual(
"ol"
);
when.click("modal:settings.name");
should.equalStyleStore((obj) => obj.metadata["maputnik:renderer"], "ol");
then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
metadata: { "maputnik:renderer": "ol" },
});
});
});