ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2025-12-06 06:10:00 +00:00
Code Issues Projects Releases Wiki Activity

Improve drivers (#856)

Browse Source 
Co-authored-by: shelly_goldblit <shelly_goldblit@dell.com>
Co-authored-by: HarelM <harel.mazor@gmail.com>
This commit is contained in:
ShellyDCMS
2024-01-02 12:12:06 +02:00
committed by GitHub
parent 124ae98bf3
commit 8e35ed97e6
14 changed files with 3073 additions and 1464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.github/workflows/ci.yml vendored
View File

@@ -34,12 +34,6 @@ jobs:
- uses: actions/setup-node@v4
with:
node-version-file: '.nvmrc'
- uses: actions/cache@v1
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- run: npm ci
- run: npm run build
- run: npm run lint
@@ -57,12 +51,6 @@ jobs:
- uses: actions/setup-node@v4
with:
node-version-file: '.nvmrc'
- uses: actions/cache@v1
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- run: npm ci
- run: npm run build
- run: npm run build-storybook

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

@@ -1,7 +1,7 @@
import MaputnikDriver from "./maputnik-driver";
import { MaputnikDriver } from "./maputnik-driver";
describe("accessibility", () => {
let { beforeAndAfter, when, should } = new MaputnikDriver();
let { beforeAndAfter, get, when, then } = new MaputnikDriver();
beforeAndAfter();
describe("skip links", () => {
@@ -11,30 +11,30 @@ 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.elementByTestId(selector)).shouldBeFocused();
when.click(selector);
should.beFocused("skip-target-layer-list");
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.
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);
then(get.elementByTestId(selector)).shouldBeFocused();
when.click(selector);
should.beFocused("skip-target-layer-editor");
then(get.skipTargetLayerEditor()).shouldBeFocused();
});
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);
then(get.elementByTestId(selector)).shouldBeFocused();
when.click(selector);
should.canvasBeFocused();
then(get.canvas()).shouldBeFocused();
});
});
});

41
cypress/e2e/cypress-wrapper-driver.ts
View File

@@ -1,41 +0,0 @@
import { CypressHelper } from "@shellygo/cypress-test-utils";
export default class CypressWrapperDriver {
private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
public given = {
...this.helper.given,
/**
*
* @param url a url to a file, this assumes the file name is the last part of the url
* @param alias
*/
interceptGetToFile(url: string) {
let fileNameAndAlias = url.split('/').pop();
cy.intercept('GET', url, { fixture: fileNameAndAlias }).as(fileNameAndAlias!);
},
interceptAndIgnore(url: string) {
cy.intercept({ method: "GET", url }, []);
}
}
public get = {
...this.helper.get,
elementByClassOrType(slector: string) {
return cy.get(slector);
}
}
public when = {
...this.helper.when,
visit(address: string) {
cy.visit(address);
},
confirmAlert() {
cy.on("window:confirm", () => true);
}
}
public beforeAndAfter = this.helper.beforeAndAfter;
}

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

@@ -1,7 +1,7 @@
import MaputnikDriver from "./maputnik-driver";
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",
},
]
);
],
});
});
});

27
cypress/e2e/keyboard.cy.ts
View File

@@ -1,61 +1,60 @@
import MaputnikDriver from "./maputnik-driver";
import { MaputnikDriver } from "./maputnik-driver";
describe("keyboard", () => {
let { beforeAndAfter, given, when, should } = new MaputnikDriver();
let { beforeAndAfter, given, when, get, then } = new MaputnikDriver();
beforeAndAfter();
describe("shortcuts", () => {
beforeEach(() => {
given.setupInterception();
given.setupMockBackedResponses();
when.setStyle("");
});
it("ESC should unfocus", () => {
const targetSelector = "maputnik-select";
when.focus(targetSelector);
should.beFocused(targetSelector);
then(get.elementByTestId(targetSelector)).shouldBeFocused();
when.typeKeys("{esc}");
expect(should.notBeFocused(targetSelector));
then(get.elementByTestId(targetSelector)).shouldNotBeFocused();
});
it("'?' should show shortcuts modal", () => {
when.typeKeys("?");
should.beVisible("modal:shortcuts");
then(get.elementByTestId("modal:shortcuts")).shouldBeVisible();
});
it("'o' should show open modal", () => {
when.typeKeys("o");
should.beVisible("modal:open");
then(get.elementByTestId("modal:open")).shouldBeVisible();
});
it("'e' should show export modal", () => {
when.typeKeys("e");
should.beVisible("modal:export");
then(get.elementByTestId("modal:export")).shouldBeVisible();
});
it("'d' should show sources modal", () => {
when.typeKeys("d");
should.beVisible("modal:sources");
then(get.elementByTestId("modal:sources")).shouldBeVisible();
});
it("'s' should show settings modal", () => {
when.typeKeys("s");
should.beVisible("modal:settings");
then(get.elementByTestId("modal:settings")).shouldBeVisible();
});
it("'i' should change map to inspect mode", () => {
when.typeKeys("i");
should.beSelected("nav:inspect", "inspect");
then(get.inputValue("maputnik-select")).shouldEqual("inspect");
});
it("'m' should focus map", () => {
when.typeKeys("m");
should.canvasBeFocused();
then(get.canvas()).shouldBeFocused();
});
it("'!' should show debug modal", () => {
when.typeKeys("!");
should.beVisible("modal:debug");
then(get.elementByTestId("modal:debug")).shouldBeVisible();
});
});
});

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

@@ -1,8 +1,8 @@
import { v1 as uuid } from "uuid";
import MaputnikDriver from "./maputnik-driver";
import { MaputnikDriver } from "./maputnik-driver";
describe("layers", () => {
let { beforeAndAfter, when, should } = new MaputnikDriver();
let { beforeAndAfter, get, when, then } = new MaputnikDriver();
beforeAndAfter();
beforeEach(() => {
when.setStyle("both");
@@ -10,120 +10,108 @@ describe("layers", () => {
});
describe("ops", () => {
it("delete", () => {
let id = when.modal.fillLayers({
let id: string;
beforeEach(() => {
id = when.modal.fillLayers({
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", () => {
let id = when.modal.fillLayers({
type: "background",
it("should update layers in local storage", () => {
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
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", () => {
let id = when.modal.fillLayers({
type: "background",
describe("when clicking delete", () => {
beforeEach(() => {
when.click("layer-list-item:" + id + ":delete");
});
it("should empty layers in local storage", () => {
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [],
});
});
});
describe("when clicking duplicate", () => {
beforeEach(() => {
when.click("layer-list-item:" + id + ":copy");
});
it("should add copy layer in local storage", () => {
then(get.styleFromLocalStorage()).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(
(a: any) => a.layers,
[
{
id: id,
type: "background",
},
]
);
when.click("layer-list-item:" + id + ":toggle-visibility");
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: id,
type: "background",
layout: {
visibility: "none",
it("should update visibility to none in local storage", () => {
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
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(
(a: any) => a.layers,
[
{
id: id,
type: "background",
layout: {
visibility: "visible",
},
},
]
);
it("should update visibility to visible in local storage", () => {
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "background",
layout: {
visibility: "visible",
},
},
],
});
});
});
});
});
describe("background", () => {
it("add", () => {
let id = when.modal.fillLayers({
type: "background",
});
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "background",
},
]
);
],
});
});
describe("modify", () => {
@@ -136,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;
}
@@ -160,114 +147,138 @@ 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",
},
]
);
],
});
});
it("min-zoom", () => {
let bgId = createBackground();
describe("min-zoom", () => {
let bgId: string;
when.click("layer-list-item:background:" + bgId);
when.setValue("min-zoom.input-text", "1");
beforeEach(() => {
bgId = createBackground();
when.click("layer-list-item:background:" + bgId);
when.setValue("min-zoom.input-text", "1");
when.click("layer-editor.layer-id");
});
when.click("layer-editor.layer-id");
it("should update min-zoom in local storage", () => {
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "background:" + bgId,
type: "background",
minzoom: 1,
},
],
});
});
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: "background:" + bgId,
type: "background",
minzoom: 1,
},
]
);
// AND RESET!
when.typeKeys("{backspace}", "min-zoom.input-text");
when.click("max-zoom.input-text");
should.equalStyleStore((a: any) => a.layers, [{
"id": 'background:'+bgId,
"type": 'background'
}]);
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.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "background:" + bgId,
type: "background",
minzoom: 1,
},
],
});
});
});
it("max-zoom", () => {
let bgId = createBackground();
describe("max-zoom", () => {
let bgId: string;
when.click("layer-list-item:background:" + bgId);
when.setValue("max-zoom.input-text", "1");
beforeEach(() => {
bgId = createBackground();
when.click("layer-list-item:background:" + bgId);
when.setValue("max-zoom.input-text", "1");
when.click("layer-editor.layer-id");
});
when.click("layer-editor.layer-id");
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: "background:" + bgId,
type: "background",
maxzoom: 1,
},
]
);
it("should update style in local storage", () => {
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "background:" + bgId,
type: "background",
maxzoom: 1,
},
],
});
});
});
it("comments", () => {
let bgId = createBackground();
describe("comments", () => {
let bgId: string;
let comment = "42";
when.click("layer-list-item:background:" + bgId);
when.setValue("layer-comment.input", comment);
beforeEach(() => {
bgId = createBackground();
when.click("layer-list-item:background:" + bgId);
when.setValue("layer-comment.input", comment);
when.click("layer-editor.layer-id");
});
when.click("layer-editor.layer-id");
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: "background:" + bgId,
type: "background",
metadata: {
"maputnik:comment": comment,
it("should update style in local storage", () => {
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "background:" + bgId,
type: "background",
metadata: {
"maputnik:comment": comment,
},
},
},
]
);
],
});
});
// Unset it again.
when.typeKeys("{backspace}{backspace}", "layer-comment.input");
when.click("min-zoom.input-text");
describe("when unsetting", () => {
beforeEach(() => {
when.clear("layer-comment.input");
when.click("min-zoom.input-text");
});
should.equalStyleStore((a: any) => a.layers, [{
"id": 'background:' + bgId,
"type": 'background'
}]);
it("should update style in local storage", () => {
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "background:" + bgId,
type: "background",
},
],
});
});
});
});
it("color", () => {
let bgId = createBackground();
describe("color", () => {
let bgId: string;
beforeEach(() => {
bgId = createBackground();
when.click("layer-list-item:background:" + bgId);
when.click("spec-field:background-color");
});
when.click("layer-list-item:background:" + bgId);
when.click("spec-field:background-color");
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: "background:" + bgId,
type: "background",
},
]
);
it("should update style in local storage", () => {
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: "background:" + bgId,
type: "background",
},
],
});
});
});
});
@@ -295,13 +306,13 @@ describe("layers", () => {
when.click("layer-list-item:background:" + bgId);
let errorSelector = ".CodeMirror-lint-marker-error";
should.notExist(errorSelector);
then(get.elementByTestId(errorSelector)).shouldNotExist();
when.click(".CodeMirror");
when.typeKeys(
"\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
);
should.exist(errorSelector);
then(get.elementByTestId(errorSelector)).shouldExist();
});
});
});
@@ -314,16 +325,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
@@ -337,16 +347,15 @@ describe("layers", () => {
layer: "example",
});
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "line",
source: "example",
},
]
);
],
});
});
it("groups", () => {
@@ -362,16 +371,15 @@ describe("layers", () => {
layer: "example",
});
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "symbol",
source: "example",
},
]
);
],
});
});
});
@@ -382,16 +390,15 @@ describe("layers", () => {
layer: "raster",
});
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "raster",
source: "raster",
},
]
);
],
});
});
});
@@ -402,16 +409,15 @@ describe("layers", () => {
layer: "example",
});
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "circle",
source: "example",
},
]
);
],
});
});
});
@@ -422,16 +428,15 @@ describe("layers", () => {
layer: "example",
});
should.equalStyleStore(
(a: any) => a.layers,
[
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "fill-extrusion",
source: "example",
},
]
);
],
});
});
});
@@ -457,16 +462,17 @@ 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-item:foo")).shouldBeVisible();
then(get.elementByTestId("layer-list-item:foo_bar")).shouldNotBeVisible();
then(
get.elementByTestId("layer-list-item: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-item:foo")).shouldBeVisible();
then(get.elementByTestId("layer-list-item:foo_bar")).shouldBeVisible();
then(
get.elementByTestId("layer-list-item:foo_bar_baz")
).shouldBeVisible();
});
});
});

19
cypress/e2e/map.cy.ts
View File

@@ -1,23 +1,26 @@
import MaputnikDriver from "./maputnik-driver";
import { MaputnikDriver } from "./maputnik-driver";
describe("map", () => {
let { beforeAndAfter, when, should } = new MaputnikDriver();
let { beforeAndAfter, get, when, then } = new MaputnikDriver();
beforeAndAfter();
describe("zoom level", () => {
it("via url", () => {
let zoomLevel = 12.37;
when.setStyle("geojson", zoomLevel);
should.beVisible("maplibre:ctrl-zoom");
should.containText("maplibre:ctrl-zoom", "Zoom: " + zoomLevel);
then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText(
"Zoom: " + zoomLevel
);
});
it("via map controls", () => {
let zoomLevel = 12.37;
when.setStyle("geojson", zoomLevel);
should.beVisible("maplibre:ctrl-zoom");
when.clickZoomin();
should.containText("maplibre:ctrl-zoom", "Zoom: "+(zoomLevel + 1));
then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
when.clickZoomIn();
then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText(
"Zoom: " + (zoomLevel + 1)
);
});
});
});

19
cypress/e2e/maputnik-cypress-helper.ts Normal file
View File

@@ -0,0 +1,19 @@
import { CypressHelper } from "@shellygo/cypress-test-utils";
export default class MaputnikCypressHelper {
private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
public given = {
...this.helper.given,
};
public get = {
...this.helper.get,
};
public when = {
...this.helper.when,
};
public beforeAndAfter = this.helper.beforeAndAfter;
}

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

@@ -1,46 +1,106 @@
import CypressWrapperDriver from "./cypress-wrapper-driver";
import { CypressHelper } from "@shellygo/cypress-test-utils";
import { Assertable, then } from "@shellygo/cypress-test-utils/assertable";
import MaputnikCypressHelper from "./maputnik-cypress-helper";
import ModalDriver from "./modal-driver";
const baseUrl = "http://localhost:8888/";
const SERVER_ADDRESS = "http://localhost:8888/";
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;
};
export default class MaputnikDriver {
private helper = new CypressWrapperDriver();
export class MaputnikAssertable<T> extends Assertable<T> {
shouldEqualToStoredStyle = () =>
then(
new CypressHelper().get.window().then((win) => {
const style = styleFromWindow(win);
then(this.chainable).shouldDeepNestedInclude(style);
})
);
}
export class MaputnikDriver {
private helper = new MaputnikCypressHelper();
private modalDriver = new ModalDriver();
public beforeAndAfter = () => {
beforeEach(() => {
this.given.setupInterception();
this.given.setupMockBackedResponses();
this.when.setStyle("both");
});
};
public given = {
setupInterception: () => {
this.helper.given.interceptGetToFile(SERVER_ADDRESS + "example-style.json");
this.helper.given.interceptGetToFile(SERVER_ADDRESS + "example-layer-style.json");
this.helper.given.interceptGetToFile(SERVER_ADDRESS + "geojson-style.json");
this.helper.given.interceptGetToFile(SERVER_ADDRESS + "raster-style.json");
this.helper.given.interceptGetToFile(SERVER_ADDRESS + "geojson-raster-style.json");
public then = (chainable: Cypress.Chainable<any>) =>
new MaputnikAssertable(chainable);
this.helper.given.interceptAndIgnore("*example.local/*");
this.helper.given.interceptAndIgnore("*example.com/*");
public given = {
...this.helper.given,
setupMockBackedResponses: () => {
this.helper.given.interceptAndMockResponse({
method: "GET",
url: baseUrl + "example-style.json",
response: {
fixture: "example-style.json",
},
alias: "example-style.json",
});
this.helper.given.interceptAndMockResponse({
method: "GET",
url: baseUrl + "example-layer-style.json",
response: {
fixture: "example-layer-style.json",
},
});
this.helper.given.interceptAndMockResponse({
method: "GET",
url: baseUrl + "geojson-style.json",
response: {
fixture: "geojson-style.json",
},
});
this.helper.given.interceptAndMockResponse({
method: "GET",
url: baseUrl + "raster-style.json",
response: {
fixture: "raster-style.json",
},
});
this.helper.given.interceptAndMockResponse({
method: "GET",
url: baseUrl + "geojson-raster-style.json",
response: {
fixture: "geojson-raster-style.json",
},
});
this.helper.given.interceptAndMockResponse({
method: "GET",
url: "*example.local/*",
response: [],
});
this.helper.given.interceptAndMockResponse({
method: "GET",
url: "*example.com/*",
response: [],
});
},
};
public when = {
...this.helper.when,
modal: this.modalDriver.when,
within: (selector: string, fn: () => void) => {
this.helper.when.within(fn, selector);
},
tab: () => this.helper.get.elementByClassOrType("body").tab(),
waitForExampleFileRequset: () => {
tab: () => this.helper.get.element("body").tab(),
waitForExampleFileResponse: () => {
this.helper.when.waitForResponse("example-style.json");
},
chooseExampleFile: () => {
this.helper.get.elementByClassOrType("input[type='file']").selectFile(
"cypress/fixtures/example-style.json",
{ force: true }
);
this.helper.get
.bySelector("type", "file")
.selectFile("cypress/fixtures/example-style.json", { force: true });
},
setStyle: (
styleProperties: "geojson" | "raster" | "both" | "layer" | "",
@@ -49,52 +109,43 @@ export default class MaputnikDriver {
let url = "?debug";
switch (styleProperties) {
case "geojson":
url += `&style=${SERVER_ADDRESS}geojson-style.json`;
url += `&style=${baseUrl}geojson-style.json`;
break;
case "raster":
url += `&style=${SERVER_ADDRESS}raster-style.json`;
url += `&style=${baseUrl}raster-style.json`;
break;
case "both":
url += `&style=${SERVER_ADDRESS}geojson-raster-style.json`;
url += `&style=${baseUrl}geojson-raster-style.json`;
break;
case "layer":
url += `&style=${SERVER_ADDRESS}/example-layer-style.json`;
url += `&style=${baseUrl}/example-layer-style.json`;
break;
}
if (zoom) {
url += `#${zoom}/41.3805/2.1635`;
}
this.helper.when.visit(SERVER_ADDRESS + url);
this.helper.when.visit(baseUrl + url);
if (styleProperties) {
this.helper.when.confirmAlert();
this.helper.when.acceptConfirm();
}
this.helper.get.element("toolbar:link").should("be.visible");
// when methods should not include assertions
this.helper.get.elementByTestId("toolbar:link").should("be.visible");
},
typeKeys: (keys: string, selector?: string) => {
if (selector) {
this.helper.get.element(selector).type(keys);
} else {
this.helper.get.elementByClassOrType("body").type(keys);
}
},
typeKeys: (keys: string) => this.helper.get.element("body").type(keys),
click: (selector: string) => {
this.helper.when.click(selector);
},
clickZoomin: () => {
this.helper.get.elementByClassOrType(".maplibregl-ctrl-zoom-in").click();
clickZoomIn: () => {
this.helper.get.element(".maplibregl-ctrl-zoom-in").click();
},
selectWithin: (selector: string, value: string) => {
this.when.within(selector, () => {
this.helper.get.elementByClassOrType("select").select(value);
this.helper.get.element("select").select(value);
});
},
select: (selector: string, value: string) => {
this.helper.get.element(selector).select(value);
this.helper.get.elementByTestId(selector).select(value);
},
focus: (selector: string) => {
@@ -102,72 +153,29 @@ export default class MaputnikDriver {
},
setValue: (selector: string, text: string) => {
this.helper.get.element(selector).clear().type(text, { parseSpecialCharSequences: false });
this.helper.get
.elementByTestId(selector)
.clear()
.type(text, { parseSpecialCharSequences: false });
},
};
public get = {
...this.helper.get,
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)),
exampleFileUrl: () => {
return SERVER_ADDRESS + "example-style.json";
return baseUrl + "example-style.json";
},
};
public should = {
canvasBeFocused: () => {
this.when.within("maplibre:map", () => {
this.helper.get.elementByClassOrType("canvas").should("be.focused");
});
},
notExist: (selector: string) => {
this.helper.get.elementByClassOrType(selector).should("not.exist");
},
beFocused: (selector: string) => {
this.helper.get.element(selector).should("have.focus");
},
notBeFocused: (selector: string) => {
this.helper.get.element(selector).should("not.have.focus");
},
beVisible: (selector: string) => {
this.helper.get.element(selector).should("be.visible");
},
notBeVisible: (selector: string) => {
this.helper.get.element(selector).should("not.be.visible");
},
equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
cy.window().then((win: any) => {
const obj = this.get.styleFromWindow(win);
assert.deepEqual(getter(obj), styleObj);
});
},
styleStoreEqualToExampleFileData: () => {
cy.window().then((win: any) => {
const obj = this.get.styleFromWindow(win);
this.helper.given.fixture("example-style.json", "file:example-style.json").should("deep.equal", obj);
});
},
exist: (selector: string) => {
this.helper.get.element(selector).should("exist");
},
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);
}
skipTargetLayerList: () =>
this.helper.get.elementByTestId("skip-target-layer-list"),
skipTargetLayerEditor: () =>
this.helper.get.elementByTestId("skip-target-layer-editor"),
canvas: () => this.helper.get.element("canvas"),
};
}

28
cypress/e2e/modal-driver.ts
View File

@@ -1,11 +1,13 @@
import { v1 as uuid } from "uuid";
import CypressWrapperDriver from "./cypress-wrapper-driver";
import MaputnikCypressHelper from "./maputnik-cypress-helper";
export default class ModalDriver {
private helper = new CypressWrapperDriver();
private helper = new MaputnikCypressHelper();
public when = {
fillLayers: (opts: {type: string, layer?: string, id?: string}) => {
fillLayers: (opts: { type: string; layer?: string; id?: string }) => {
// Having logic in test code is an anti pattern.
// This should be splitted to multiple single responsibility functions
let type = opts.type;
let layer = opts.layer;
let id;
@@ -14,29 +16,25 @@ export default class ModalDriver {
} else {
id = `${type}:${uuid()}`;
}
this.helper.get.element("add-layer.layer-type.select").select(type);
this.helper.get.element("add-layer.layer-id.input").type(id);
this.helper.when.selectOption("add-layer.layer-type.select", type);
this.helper.when.type("add-layer.layer-id.input", id);
if (layer) {
this.helper.when.within(() => {
this.helper.get.elementByClassOrType("input").type(layer!);
}, "add-layer.layer-source-block")
this.helper.get.element("input").type(layer!);
}, "add-layer.layer-source-block");
}
this.helper.when.click("add-layer");
return id;
},
open: () => {
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) => {
this.helper.when.waitUntil(() => this.helper.get.element(key));
this.helper.when.click(key + ".close-modal");
},
}
}
};
}

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

@@ -1,8 +1,9 @@
import MaputnikDriver from "./maputnik-driver";
import { MaputnikDriver } from "./maputnik-driver";
describe("modals", () => {
let { beforeAndAfter, when, get, should } = new MaputnikDriver();
let { beforeAndAfter, when, get, then } = new MaputnikDriver();
beforeAndAfter();
beforeEach(() => {
when.setStyle("");
});
@@ -13,24 +14,26 @@ describe("modals", () => {
it("close", () => {
when.modal.close("modal:open");
should.notExist("modal:open");
then(get.elementByTestId("modal:open")).shouldNotExist();
});
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")).shouldEqualToStoredStyle();
});
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();
should.styleStoreEqualToExampleFileData();
when.setValue("modal:open.url.input", styleFileUrl);
when.click("modal:open.url.button");
when.wait(200);
});
it("load from url", () => {
then(get.responseBody("example-style.json")).shouldEqualToStoredStyle();
});
});
});
@@ -39,7 +42,7 @@ describe("modals", () => {
when.setStyle("");
when.typeKeys("?");
when.modal.close("modal:shortcuts");
should.notExist("modal:shortcuts");
then(get.elementByTestId("modal:shortcuts")).shouldNotExist();
});
});
@@ -50,7 +53,7 @@ describe("modals", () => {
it("close", () => {
when.modal.close("modal:export");
should.notExist("modal:export");
then(get.elementByTestId("modal:export")).shouldNotExist();
});
// TODO: Work out how to download a file and check the contents
@@ -65,9 +68,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");
});
});
@@ -76,37 +79,59 @@ describe("modals", () => {
when.click("nav:settings");
});
it("name", () => {
when.click("field-doc-button-Name");
describe("when click name", () => {
beforeEach(() => {
when.click("field-doc-button-Name");
});
should.containText("spec-field-doc", "name for the style");
it("name", () => {
then(get.elementsText("spec-field-doc")).shouldInclude(
"name for the style"
);
});
});
it("show name specifications", () => {
when.setValue("modal:settings.name", "foobar");
when.click("modal:settings.owner");
describe("when set name and click owner", () => {
beforeEach(() => {
when.setValue("modal:settings.name", "foobar");
when.click("modal:settings.owner");
when.wait(200);
});
should.equalStyleStore((obj) => obj.name, "foobar");
it("show name specifications", () => {
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
name: "foobar",
});
});
});
it("owner", () => {
when.setValue("modal:settings.owner", "foobar");
when.click("modal:settings.name");
should.equalStyleStore((obj) => obj.owner, "foobar");
describe("when set owner and click name", () => {
beforeEach(() => {
when.setValue("modal:settings.owner", "foobar");
when.click("modal:settings.name");
when.wait(200);
});
it("should update owner in local storage", () => {
then(get.styleFromLocalStorage()).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.styleFromLocalStorage()).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.styleFromLocalStorage()).shouldDeepNestedInclude({
glyphs: glyphsUrl,
});
});
it("maptiler access token", () => {
@@ -116,32 +141,36 @@ describe("modals", () => {
apiKey
);
when.click("modal:settings.name");
should.equalStyleStore(
(obj) => obj.metadata["maputnik:openmaptiles_access_token"],
apiKey
);
then(
get.styleFromLocalStorage().pipe((style) => style.metadata)
).shouldInclude({
"maputnik:openmaptiles_access_token": apiKey,
});
});
it("thunderforest access token", () => {
let apiKey = "testing123";
when.setValue("modal:settings.maputnik:thunderforest_access_token", apiKey);
when.click("modal:settings.name");
should.equalStyleStore(
(obj) => obj.metadata["maputnik:thunderforest_access_token"],
when.setValue(
"modal:settings.maputnik:thunderforest_access_token",
apiKey
);
when.click("modal:settings.name");
then(
get.styleFromLocalStorage().pipe((style) => style.metadata)
).shouldInclude({ "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.styleFromLocalStorage()).shouldDeepNestedInclude({
metadata: { "maputnik:renderer": "ol" },
});
});
});

3531
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -91,7 +91,7 @@
"@cypress/code-coverage": "^3.12.15",
"@istanbuljs/nyc-config-typescript": "^1.0.2",
"@rollup/plugin-replace": "^5.0.5",
"@shellygo/cypress-test-utils": "^2.0.9",
"@shellygo/cypress-test-utils": "^2.0.17",
"@storybook/addon-a11y": "^7.6.5",
"@storybook/addon-actions": "^7.6.5",
"@storybook/addon-links": "^7.6.5",

2
src/components/FieldFunction.tsx
View File

@@ -399,7 +399,7 @@ export default class FieldFunction extends React.Component<FieldFunctionProps, F
/>
)
}
return <div className={propClass} data-wd-key={"spec-field:"+this.props.fieldName}>
return <div className={propClass} data-wd-key={"spec-field-container:"+this.props.fieldName}>
{specField}
</div>
}