diff --git a/cypress/e2e/history.cy.ts b/cypress/e2e/history.cy.ts index 7a16b62f..fedf69f8 100644 --- a/cypress/e2e/history.cy.ts +++ b/cypress/e2e/history.cy.ts @@ -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", }, - ] - ); + ], + }); }); }); diff --git a/cypress/e2e/layers.cy.ts b/cypress/e2e/layers.cy.ts index 053429d3..e3f76966 100644 --- a/cypress/e2e/layers.cy.ts +++ b/cypress/e2e/layers.cy.ts @@ -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", }, - ] - ); + ], + }); }); }); diff --git a/cypress/e2e/maputnik-driver.ts b/cypress/e2e/maputnik-driver.ts index 5deb412d..39a11de4 100644 --- a/cypress/e2e/maputnik-driver.ts +++ b/cypress/e2e/maputnik-driver.ts @@ -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 extends Assertable { - 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 extends Assertable { + 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"); - }, - }; } diff --git a/cypress/e2e/modals.cy.ts b/cypress/e2e/modals.cy.ts index fc9a29ac..49ae193e 100644 --- a/cypress/e2e/modals.cy.ts +++ b/cypress/e2e/modals.cy.ts @@ -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" }, }); });