mirror of
https://github.com/maputnik/editor.git
synced 2025-12-06 06:10:00 +00:00
Refactor driver for E2E (#843)
This is basically the content of #841 with the code review changes and relevant fixes to tests/driver code to pass the tests. CC: @ShellyDCMS After this we should lint the project and add the lint to the CI to make sure it doesn't break. --------- Co-authored-by: ShellyDCMS <60476837+ShellyDCMS@users.noreply.github.com> Co-authored-by: shelly_goldblit <shelly_goldblit@dell.com>
This commit is contained in:
Harel M
GitHub
@@ -5,5 +5,9 @@ export default defineConfig({
|
||||
setupNodeEvents(on, config) {
|
||||
// implement node event listeners here
|
||||
},
|
||||
retries: {
|
||||
runMode: 2,
|
||||
openMode: 0,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,41 +1,40 @@
|
||||
import driver from "./driver";
|
||||
import MaputnikDriver from "./driver";
|
||||
|
||||
describe("accessibility", () => {
|
||||
// skipped due to the following issue with cypress: https://github.com/cypress-io/cypress/issues/299
|
||||
describe.skip("skip links", () => {
|
||||
let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
|
||||
describe("skip links", () => {
|
||||
beforeEach(() => {
|
||||
driver.beforeEach();
|
||||
driver.setStyle("layer");
|
||||
when.setStyle("layer");
|
||||
});
|
||||
|
||||
|
||||
it("skip link to layer list", () => {
|
||||
const selector = driver.getDataAttribute("root:skip:layer-list");
|
||||
driver.isExists(selector);
|
||||
driver.typeKeys('{tab}');
|
||||
driver.isFocused(selector);
|
||||
driver.click(selector);
|
||||
|
||||
driver.isFocused("#skip-target-layer-list");
|
||||
const selector = "root:skip:layer-list";
|
||||
should.exist(selector);
|
||||
when.tab();
|
||||
should.beFocused(selector);
|
||||
when.click(selector);
|
||||
should.beFocused("skip-target-layer-list");
|
||||
});
|
||||
|
||||
it("skip link to layer editor", () => {
|
||||
const selector = driver.getDataAttribute("root:skip:layer-editor");
|
||||
driver.isExists(selector);
|
||||
driver.typeKeys('{tab}{tab}');
|
||||
driver.isFocused(selector);
|
||||
driver.click(selector);
|
||||
|
||||
driver.isFocused("#skip-target-layer-editor");
|
||||
|
||||
// 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);
|
||||
when.tab().tab();
|
||||
should.beFocused(selector);
|
||||
when.click(selector);
|
||||
should.beFocused("skip-target-layer-editor");
|
||||
});
|
||||
|
||||
|
||||
it("skip link to map view", () => {
|
||||
const selector = driver.getDataAttribute("root:skip:map-view");
|
||||
driver.isExists(selector);
|
||||
driver.typeKeys('{tab}{tab}{tab}');
|
||||
driver.isFocused(selector);
|
||||
driver.click(selector);
|
||||
|
||||
driver.isFocused(".maplibregl-canvas");
|
||||
const selector = "root:skip:map-view";
|
||||
should.exist(selector);
|
||||
when.tab().tab().tab();
|
||||
should.beFocused(selector);
|
||||
when.click(selector);
|
||||
should.canvasBeFocused();
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,170 +1,210 @@
|
||||
import {v1 as uuid} from "uuid";
|
||||
import { CypressHelper } from "@shellygo/cypress-test-utils";
|
||||
import { v1 as uuid } from "uuid";
|
||||
export default class MaputnikDriver {
|
||||
private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
|
||||
public beforeAndAfter = () => {
|
||||
beforeEach(() => {
|
||||
this.given.setupInterception();
|
||||
this.when.setStyle("both");
|
||||
});
|
||||
};
|
||||
|
||||
export default {
|
||||
isMac() {
|
||||
return Cypress.platform === "darwin";
|
||||
public given = {
|
||||
setupInterception: () => {
|
||||
cy.intercept("GET", "http://localhost:8888/example-style.json", {
|
||||
fixture: "example-style.json",
|
||||
}).as("example-style.json");
|
||||
cy.intercept("GET", "http://localhost:8888/example-layer-style.json", {
|
||||
fixture: "example-layer-style.json",
|
||||
});
|
||||
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.local/*" }, []);
|
||||
cy.intercept({ method: "GET", url: "*example.com/*" }, []);
|
||||
},
|
||||
};
|
||||
|
||||
beforeEach() {
|
||||
this.setupInterception();
|
||||
this.setStyle('both');
|
||||
public when = {
|
||||
within: (selector: string, fn: () => void) => {
|
||||
this.helper.when.within(fn, selector);
|
||||
},
|
||||
|
||||
setupInterception() {
|
||||
cy.intercept('GET', 'http://localhost:8888/example-style.json', { fixture: 'example-style.json' }).as('example-style.json');
|
||||
cy.intercept('GET', 'http://localhost:8888/example-layer-style.json', { fixture: 'example-layer-style.json' });
|
||||
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.local/*' }, []);
|
||||
cy.intercept({method: 'GET', url: '*example.com/*' }, []);
|
||||
tab: () => cy.get("body").tab(),
|
||||
waitForExampleFileRequset: () => {
|
||||
this.helper.when.waitForResponse("example-style.json");
|
||||
},
|
||||
|
||||
setStyle(styleProperties: 'geojson' | 'raster' | 'both' | 'layer' | '', zoom? : number) {
|
||||
let url = "?debug";
|
||||
switch (styleProperties) {
|
||||
case "geojson":
|
||||
url += "&style=http://localhost:8888/geojson-style.json";
|
||||
break;
|
||||
case "raster":
|
||||
url += "&style=http://localhost:8888/raster-style.json";
|
||||
break;
|
||||
case "both":
|
||||
url += "&style=http://localhost:8888/geojson-raster-style.json";
|
||||
break;
|
||||
case "layer":
|
||||
url += "&style=http://localhost:8888/example-layer-style.json";
|
||||
break;
|
||||
}
|
||||
if (zoom) {
|
||||
url += "#" + zoom + "/41.3805/2.1635";
|
||||
}
|
||||
cy.visit("http://localhost:8888/" + url);
|
||||
if (styleProperties) {
|
||||
cy.on('window:confirm', () => true)
|
||||
}
|
||||
cy.get(".maputnik-toolbar-link").should("be.visible");
|
||||
},
|
||||
|
||||
getDataAttribute(key: string, selector?: string) {
|
||||
return `*[data-wd-key='${key}'] ${selector || ''}`;
|
||||
},
|
||||
|
||||
closeModal(key: string) {
|
||||
const selector = this.getDataAttribute(key);
|
||||
|
||||
this.isDisplayedInViewport(selector);
|
||||
|
||||
this.click(this.getDataAttribute(key + ".close-modal"));
|
||||
|
||||
this.doesNotExists(selector);
|
||||
},
|
||||
|
||||
openLayersModal() {
|
||||
cy.get(this.getDataAttribute('layer-list:add-layer')).click();
|
||||
|
||||
cy.get(this.getDataAttribute('modal:add-layer')).should('exist');
|
||||
cy.get(this.getDataAttribute('modal:add-layer')).should('be.visible');
|
||||
},
|
||||
|
||||
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);
|
||||
});
|
||||
},
|
||||
|
||||
fillLayersModal(opts: any) {
|
||||
var type = opts.type;
|
||||
var layer = opts.layer;
|
||||
var id;
|
||||
if(opts.id) {
|
||||
id = opts.id
|
||||
}
|
||||
else {
|
||||
id = `${type}:${uuid()}`;
|
||||
}
|
||||
|
||||
cy.get(this.getDataAttribute('add-layer.layer-type', "select")).select(type);
|
||||
cy.get(this.getDataAttribute("add-layer.layer-id", "input")).type(id);
|
||||
if(layer) {
|
||||
cy.get(this.getDataAttribute("add-layer.layer-source-block", "input")).type(layer);
|
||||
}
|
||||
cy.get(this.getDataAttribute("add-layer")).click();
|
||||
|
||||
return id;
|
||||
},
|
||||
|
||||
typeKeys(keys: string) {
|
||||
cy.get('body').type(keys);
|
||||
},
|
||||
|
||||
click(selector: string) {
|
||||
cy.get(selector).click();
|
||||
},
|
||||
|
||||
select(selector: string, value: string) {
|
||||
cy.get(selector).select(value);
|
||||
},
|
||||
|
||||
isSelected(selector: string, value: string) {
|
||||
cy.get(selector).find(`option[value="${value}"]`).should("be.selected");
|
||||
},
|
||||
|
||||
|
||||
focus(selector: string) {
|
||||
cy.get(selector).focus();
|
||||
},
|
||||
|
||||
isFocused(selector: string) {
|
||||
cy.get(selector).should('have.focus');
|
||||
},
|
||||
|
||||
isDisplayedInViewport(selector: string) {
|
||||
cy.get(selector).should('be.visible');
|
||||
},
|
||||
|
||||
isNotDisplayedInViewport(selector: string) {
|
||||
cy.get(selector).should('not.be.visible');
|
||||
},
|
||||
|
||||
setValue(selector: string, text: string) {
|
||||
cy.get(selector).clear().type(text, {parseSpecialCharSequences: false});
|
||||
},
|
||||
|
||||
isExists(selector: string) {
|
||||
cy.get(selector).should('exist');
|
||||
},
|
||||
|
||||
doesNotExists(selector: string) {
|
||||
cy.get(selector).should('not.exist');
|
||||
},
|
||||
|
||||
chooseExampleFile() {
|
||||
cy.get("input[type='file']").selectFile('cypress/fixtures/example-style.json', {force: true});
|
||||
},
|
||||
|
||||
getExampleFileUrl() {
|
||||
return "http://localhost:8888/example-style.json";
|
||||
},
|
||||
|
||||
waitForExampleFileRequset() {
|
||||
cy.wait('@example-style.json');
|
||||
chooseExampleFile: () => {
|
||||
cy.get("input[type='file']").selectFile(
|
||||
"cypress/fixtures/example-style.json",
|
||||
{ force: true }
|
||||
);
|
||||
},
|
||||
setStyle: (
|
||||
styleProperties: "geojson" | "raster" | "both" | "layer" | "",
|
||||
zoom?: number
|
||||
) => {
|
||||
let url = "?debug";
|
||||
switch (styleProperties) {
|
||||
case "geojson":
|
||||
url += "&style=http://localhost:8888/geojson-style.json";
|
||||
break;
|
||||
case "raster":
|
||||
url += "&style=http://localhost:8888/raster-style.json";
|
||||
break;
|
||||
case "both":
|
||||
url += "&style=http://localhost:8888/geojson-raster-style.json";
|
||||
break;
|
||||
case "layer":
|
||||
url += "&style=http://localhost:8888/example-layer-style.json";
|
||||
break;
|
||||
}
|
||||
if (zoom) {
|
||||
url += "#" + zoom + "/41.3805/2.1635";
|
||||
}
|
||||
cy.visit("http://localhost:8888/" + url);
|
||||
if (styleProperties) {
|
||||
cy.on("window:confirm", () => true);
|
||||
}
|
||||
cy.get(".maputnik-toolbar-link").should("be.visible");
|
||||
},
|
||||
fillLayersModal: (opts: {type: string, layer?: string, id?: string}) => {
|
||||
var type = opts.type;
|
||||
var layer = opts.layer;
|
||||
var id;
|
||||
if (opts.id) {
|
||||
id = opts.id;
|
||||
} else {
|
||||
id = `${type}:${uuid()}`;
|
||||
}
|
||||
|
||||
cy.get(
|
||||
this.get.dataAttribute("add-layer.layer-type", "select")
|
||||
).select(type);
|
||||
cy.get(this.get.dataAttribute("add-layer.layer-id", "input")).type(id);
|
||||
if (layer) {
|
||||
cy.get(
|
||||
this.get.dataAttribute("add-layer.layer-source-block", "input")
|
||||
).type(layer);
|
||||
}
|
||||
this.when.click("add-layer");
|
||||
|
||||
return id;
|
||||
},
|
||||
|
||||
typeKeys: (keys: string) => {
|
||||
cy.get("body").type(keys);
|
||||
},
|
||||
|
||||
click: (selector: string) => {
|
||||
this.helper.when.click(selector);
|
||||
},
|
||||
|
||||
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) => {
|
||||
this.helper.get.element(selector).select(value);
|
||||
},
|
||||
|
||||
focus: (selector: string) => {
|
||||
this.helper.when.focus(selector);
|
||||
},
|
||||
|
||||
setValue: (selector: string, text: string) => {
|
||||
cy.get(selector).clear().type(text, { parseSpecialCharSequences: false });
|
||||
},
|
||||
|
||||
closeModal: (key: string) => {
|
||||
this.helper.when.waitUntil(() => this.helper.get.element(key));
|
||||
this.when.click(key + ".close-modal");
|
||||
},
|
||||
|
||||
openLayersModal: () => {
|
||||
this.helper.when.click("layer-list:add-layer");
|
||||
|
||||
cy.get(this.get.dataAttribute("modal:add-layer")).should("exist");
|
||||
cy.get(this.get.dataAttribute("modal:add-layer")).should("be.visible");
|
||||
},
|
||||
};
|
||||
|
||||
public 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;
|
||||
},
|
||||
exampleFileUrl: () => {
|
||||
return "http://localhost:8888/example-style.json";
|
||||
},
|
||||
dataAttribute: (key: string, selector?: string): string => {
|
||||
return `*[data-wd-key='${key}'] ${selector || ""}`;
|
||||
},
|
||||
};
|
||||
|
||||
public should = {
|
||||
canvasBeFocused: () => {
|
||||
this.when.within("maplibre:map", () => {
|
||||
cy.get("canvas").should("be.focused");
|
||||
});
|
||||
},
|
||||
notExist: (selector: string) => {
|
||||
cy.get(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);
|
||||
cy.fixture("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);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,80 +1,97 @@
|
||||
import driver from "./driver";
|
||||
import MaputnikDriver from "./driver";
|
||||
|
||||
describe("history", () => {
|
||||
let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
|
||||
let undoKeyCombo: string;
|
||||
let redoKeyCombo: string;
|
||||
|
||||
before(() => {
|
||||
const isMac = driver.isMac();
|
||||
undoKeyCombo = isMac ? '{meta}z' : '{ctrl}z';
|
||||
redoKeyCombo = isMac ? '{meta}{shift}z' : '{ctrl}y';
|
||||
driver.beforeEach();
|
||||
const isMac = get.isMac();
|
||||
undoKeyCombo = isMac ? "{meta}z" : "{ctrl}z";
|
||||
redoKeyCombo = isMac ? "{meta}{shift}z" : "{ctrl}y";
|
||||
});
|
||||
|
||||
it("undo/redo", () => {
|
||||
driver.setStyle('geojson');
|
||||
driver.openLayersModal();
|
||||
when.setStyle("geojson");
|
||||
when.openLayersModal();
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, []);
|
||||
should.equalStyleStore((a: any) => a.layers, []);
|
||||
|
||||
driver.fillLayersModal({
|
||||
when.fillLayersModal({
|
||||
id: "step 1",
|
||||
type: "background"
|
||||
})
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": "step 1",
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.openLayersModal();
|
||||
driver.fillLayersModal({
|
||||
when.openLayersModal();
|
||||
when.fillLayersModal({
|
||||
id: "step 2",
|
||||
type: "background"
|
||||
})
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": "step 1",
|
||||
"type": 'background'
|
||||
},
|
||||
{
|
||||
"id": "step 2",
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
},
|
||||
{
|
||||
id: "step 2",
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.typeKeys(undoKeyCombo);
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": "step 1",
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
when.typeKeys(undoKeyCombo);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.typeKeys(undoKeyCombo)
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, []);
|
||||
when.typeKeys(undoKeyCombo);
|
||||
should.equalStyleStore((a: any) => a.layers, []);
|
||||
|
||||
driver.typeKeys(redoKeyCombo)
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": "step 1",
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
when.typeKeys(redoKeyCombo);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.typeKeys(redoKeyCombo)
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": "step 1",
|
||||
"type": 'background'
|
||||
},
|
||||
{
|
||||
"id": "step 2",
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
when.typeKeys(redoKeyCombo);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "step 1",
|
||||
type: "background",
|
||||
},
|
||||
{
|
||||
id: "step 2",
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
@@ -1,60 +1,61 @@
|
||||
import driver from "./driver";
|
||||
import MaputnikDriver from "./driver";
|
||||
|
||||
describe("keyboard", () => {
|
||||
let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
describe("shortcuts", () => {
|
||||
beforeEach(() => {
|
||||
driver.setupInterception();
|
||||
driver.setStyle('');
|
||||
})
|
||||
given.setupInterception();
|
||||
when.setStyle("");
|
||||
});
|
||||
|
||||
it("ESC should unfocus", () => {
|
||||
const targetSelector = driver.getDataAttribute("nav:inspect") + " select";
|
||||
driver.focus(targetSelector);
|
||||
driver.isFocused(targetSelector);
|
||||
const targetSelector = "maputnik-select";
|
||||
when.focus(targetSelector);
|
||||
should.beFocused(targetSelector);
|
||||
|
||||
//driver.typeKeys("{esc}");
|
||||
//driver.isFocused('body');
|
||||
when.typeKeys("{esc}");
|
||||
expect(should.notBeFocused(targetSelector));
|
||||
});
|
||||
|
||||
it("'?' should show shortcuts modal", () => {
|
||||
driver.typeKeys("?");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts"));
|
||||
when.typeKeys("?");
|
||||
should.beVisible("modal:shortcuts");
|
||||
});
|
||||
|
||||
it("'o' should show open modal", () => {
|
||||
driver.typeKeys("o");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:open"));
|
||||
when.typeKeys("o");
|
||||
should.beVisible("modal:open");
|
||||
});
|
||||
|
||||
it("'e' should show export modal", () => {
|
||||
driver.typeKeys("e");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:export"));
|
||||
when.typeKeys("e");
|
||||
should.beVisible("modal:export");
|
||||
});
|
||||
|
||||
it("'d' should show sources modal", () => {
|
||||
driver.typeKeys("d");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:sources"));
|
||||
when.typeKeys("d");
|
||||
should.beVisible("modal:sources");
|
||||
});
|
||||
|
||||
it("'s' should show settings modal", () => {
|
||||
driver.typeKeys("s");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:settings"));
|
||||
when.typeKeys("s");
|
||||
should.beVisible("modal:settings");
|
||||
});
|
||||
|
||||
it("'i' should change map to inspect mode", () => {
|
||||
driver.typeKeys("i");
|
||||
driver.isSelected(driver.getDataAttribute("nav:inspect"), "inspect");
|
||||
when.typeKeys("i");
|
||||
should.beSelected("nav:inspect", "inspect");
|
||||
});
|
||||
|
||||
it("'m' should focus map", () => {
|
||||
driver.typeKeys("m");
|
||||
driver.isFocused(".maplibregl-canvas");
|
||||
when.typeKeys("m");
|
||||
should.canvasBeFocused();
|
||||
});
|
||||
|
||||
it("'!' should show debug modal", () => {
|
||||
driver.typeKeys("!");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:debug"));
|
||||
when.typeKeys("!");
|
||||
should.beVisible("modal:debug");
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -1,112 +1,131 @@
|
||||
var assert = require("assert");
|
||||
import driver from "./driver";
|
||||
import { v1 as uuid } from 'uuid';
|
||||
import { v1 as uuid } from "uuid";
|
||||
import MaputnikDriver from "./driver";
|
||||
|
||||
describe("layers", () => {
|
||||
let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
beforeEach(() => {
|
||||
driver.beforeEach();
|
||||
driver.setStyle('both');
|
||||
driver.openLayersModal();
|
||||
when.setStyle("both");
|
||||
when.openLayersModal();
|
||||
});
|
||||
|
||||
describe("ops", () => {
|
||||
it("delete", () => {
|
||||
var id = driver.fillLayersModal({
|
||||
type: "background"
|
||||
})
|
||||
var id = when.fillLayersModal({
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'background'
|
||||
},
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:"+id+":delete", ""))
|
||||
when.click("layer-list-item:" + id + ":delete");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, []);
|
||||
should.equalStyleStore((a: any) => a.layers, []);
|
||||
});
|
||||
|
||||
it("duplicate", () => {
|
||||
var styleObj;
|
||||
var id = driver.fillLayersModal({
|
||||
type: "background"
|
||||
})
|
||||
var id = when.fillLayersModal({
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'background'
|
||||
},
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:"+id+":copy", ""));
|
||||
when.click("layer-list-item:" + id + ":copy");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id+"-copy",
|
||||
"type": "background"
|
||||
},
|
||||
{
|
||||
"id": id,
|
||||
"type": "background"
|
||||
},
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id + "-copy",
|
||||
type: "background",
|
||||
},
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
it("hide", () => {
|
||||
var styleObj;
|
||||
var id = driver.fillLayersModal({
|
||||
type: "background"
|
||||
})
|
||||
var id = when.fillLayersModal({
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'background'
|
||||
},
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
|
||||
when.click("layer-list-item:" + id + ":toggle-visibility");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "background",
|
||||
"layout": {
|
||||
"visibility": "none"
|
||||
}
|
||||
},
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
layout: {
|
||||
visibility: "none",
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
|
||||
when.click("layer-list-item:" + id + ":toggle-visibility");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "background",
|
||||
"layout": {
|
||||
"visibility": "visible"
|
||||
}
|
||||
},
|
||||
]);
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
describe('background', () => {
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
layout: {
|
||||
visibility: "visible",
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("background", () => {
|
||||
it("add", () => {
|
||||
var id = driver.fillLayersModal({
|
||||
type: "background"
|
||||
})
|
||||
var id = when.fillLayersModal({
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
describe("modify", () => {
|
||||
@@ -114,17 +133,23 @@ describe("layers", () => {
|
||||
// Setup
|
||||
var id = uuid();
|
||||
|
||||
driver.select(driver.getDataAttribute("add-layer.layer-type", "select"), "background");
|
||||
driver.setValue(driver.getDataAttribute("add-layer.layer-id", "input"), "background:"+id);
|
||||
when.selectWithin("add-layer.layer-type", "background");
|
||||
when.setValue(
|
||||
get.dataAttribute("add-layer.layer-id", "input"),
|
||||
"background:" + id
|
||||
);
|
||||
|
||||
driver.click(driver.getDataAttribute("add-layer"));
|
||||
when.click("add-layer");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": 'background:'+id,
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "background:" + id,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
return id;
|
||||
}
|
||||
|
||||
@@ -134,39 +159,51 @@ describe("layers", () => {
|
||||
it("id", () => {
|
||||
var bgId = createBackground();
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
|
||||
var id = uuid();
|
||||
driver.setValue(driver.getDataAttribute("layer-editor.layer-id", "input"), "foobar:"+id)
|
||||
driver.click(driver.getDataAttribute("min-zoom"));
|
||||
when.setValue(
|
||||
get.dataAttribute("layer-editor.layer-id", "input"),
|
||||
"foobar:" + id
|
||||
);
|
||||
when.click("min-zoom");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": 'foobar:'+id,
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "foobar:" + id,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
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");
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.setValue(
|
||||
get.dataAttribute("min-zoom", 'input[type="text"]'),
|
||||
"1"
|
||||
);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
|
||||
when.click("layer-editor.layer-id");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": 'background:'+bgId,
|
||||
"type": 'background',
|
||||
"minzoom": 1
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
minzoom: 1,
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
// 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, [
|
||||
// {
|
||||
@@ -179,38 +216,47 @@ describe("layers", () => {
|
||||
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")
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.setValue(
|
||||
get.dataAttribute("max-zoom", 'input[type="text"]'),
|
||||
"1"
|
||||
);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
|
||||
when.click("layer-editor.layer-id");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": 'background:'+bgId,
|
||||
"type": 'background',
|
||||
"maxzoom": 1
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
maxzoom: 1,
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
it("comments", () => {
|
||||
var bgId = createBackground();
|
||||
var id = uuid();
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
|
||||
driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), id);
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
when.setValue(get.dataAttribute("layer-comment", "textarea"), id);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
|
||||
when.click("layer-editor.layer-id");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": 'background:'+bgId,
|
||||
"type": 'background',
|
||||
metadata: {
|
||||
'maputnik:comment': id
|
||||
}
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
metadata: {
|
||||
"maputnik:comment": id,
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
|
||||
// Unset it again.
|
||||
// TODO: This fails
|
||||
@@ -228,31 +274,33 @@ describe("layers", () => {
|
||||
it("color", () => {
|
||||
var bgId = createBackground();
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
|
||||
driver.click(driver.getDataAttribute("spec-field:background-color", "input"));
|
||||
when.click("spec-field:background-color");
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": 'background:'+bgId,
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
|
||||
})
|
||||
})
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: "background:" + bgId,
|
||||
type: "background",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("filter", () => {
|
||||
it("expand/collapse");
|
||||
it("compound filter");
|
||||
})
|
||||
});
|
||||
|
||||
describe("paint", () => {
|
||||
it("expand/collapse");
|
||||
it("color");
|
||||
it("pattern");
|
||||
it("opacity");
|
||||
})
|
||||
});
|
||||
// <=====
|
||||
|
||||
describe("json-editor", () => {
|
||||
@@ -263,165 +311,181 @@ describe("layers", () => {
|
||||
it.skip("parse error", () => {
|
||||
var bgId = createBackground();
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
|
||||
when.click("layer-list-item:background:" + bgId);
|
||||
|
||||
var errorSelector = ".CodeMirror-lint-marker-error";
|
||||
driver.doesNotExists(errorSelector);
|
||||
should.notExist(errorSelector);
|
||||
|
||||
driver.click(".CodeMirror");
|
||||
driver.typeKeys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {");
|
||||
driver.isExists(errorSelector);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-editor.layer-id"));
|
||||
when.click(".CodeMirror");
|
||||
when.typeKeys(
|
||||
"\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
|
||||
);
|
||||
should.exist(errorSelector);
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
describe('fill', () => {
|
||||
describe("fill", () => {
|
||||
it("add", () => {
|
||||
|
||||
var id = driver.fillLayersModal({
|
||||
var id = when.fillLayersModal({
|
||||
type: "fill",
|
||||
layer: "example"
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'fill',
|
||||
"source": "example"
|
||||
}
|
||||
]);
|
||||
})
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "fill",
|
||||
source: "example",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
// TODO: Change source
|
||||
it("change source")
|
||||
it("change source");
|
||||
});
|
||||
|
||||
describe('line', () => {
|
||||
describe("line", () => {
|
||||
it("add", () => {
|
||||
var id = driver.fillLayersModal({
|
||||
var id = when.fillLayersModal({
|
||||
type: "line",
|
||||
layer: "example"
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "line",
|
||||
"source": "example",
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "line",
|
||||
source: "example",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
it("groups", () => {
|
||||
// TODO
|
||||
// Click each of the layer groups.
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
describe('symbol', () => {
|
||||
describe("symbol", () => {
|
||||
it("add", () => {
|
||||
var id = driver.fillLayersModal({
|
||||
var id = when.fillLayersModal({
|
||||
type: "symbol",
|
||||
layer: "example"
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "symbol",
|
||||
"source": "example",
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "symbol",
|
||||
source: "example",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('raster', () => {
|
||||
describe("raster", () => {
|
||||
it("add", () => {
|
||||
var id = driver.fillLayersModal({
|
||||
var id = when.fillLayersModal({
|
||||
type: "raster",
|
||||
layer: "raster"
|
||||
layer: "raster",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "raster",
|
||||
"source": "raster",
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "raster",
|
||||
source: "raster",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('circle', () => {
|
||||
describe("circle", () => {
|
||||
it("add", () => {
|
||||
var id = driver.fillLayersModal({
|
||||
var id = when.fillLayersModal({
|
||||
type: "circle",
|
||||
layer: "example"
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "circle",
|
||||
"source": "example",
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "circle",
|
||||
source: "example",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('fill extrusion', () => {
|
||||
describe("fill extrusion", () => {
|
||||
it("add", () => {
|
||||
var id = driver.fillLayersModal({
|
||||
var id = when.fillLayersModal({
|
||||
type: "fill-extrusion",
|
||||
layer: "example"
|
||||
layer: "example",
|
||||
});
|
||||
|
||||
driver.isStyleStoreEqual((a: any) => a.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'fill-extrusion',
|
||||
"source": "example"
|
||||
}
|
||||
]);
|
||||
should.equalStyleStore(
|
||||
(a: any) => a.layers,
|
||||
[
|
||||
{
|
||||
id: id,
|
||||
type: "fill-extrusion",
|
||||
source: "example",
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe("groups", () => {
|
||||
it("simple", () => {
|
||||
driver.setStyle("geojson");
|
||||
when.setStyle("geojson");
|
||||
|
||||
driver.openLayersModal();
|
||||
driver.fillLayersModal({
|
||||
when.openLayersModal();
|
||||
when.fillLayersModal({
|
||||
id: "foo",
|
||||
type: "background"
|
||||
})
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.openLayersModal();
|
||||
driver.fillLayersModal({
|
||||
when.openLayersModal();
|
||||
when.fillLayersModal({
|
||||
id: "foo_bar",
|
||||
type: "background"
|
||||
})
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.openLayersModal();
|
||||
driver.fillLayersModal({
|
||||
when.openLayersModal();
|
||||
when.fillLayersModal({
|
||||
id: "foo_bar_baz",
|
||||
type: "background"
|
||||
})
|
||||
type: "background",
|
||||
});
|
||||
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo"));
|
||||
driver.isNotDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar"));
|
||||
driver.isNotDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz"));
|
||||
should.beVisible("layer-list-item:foo");
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-group:foo-0"));
|
||||
should.notBeVisible("layer-list-item:foo_bar");
|
||||
should.notBeVisible("layer-list-item:foo_bar_baz");
|
||||
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo"));
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar"));
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz"));
|
||||
})
|
||||
})
|
||||
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");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,25 +1,23 @@
|
||||
import driver from "./driver";
|
||||
import MaputnikDriver from "./driver";
|
||||
|
||||
describe("map", () => {
|
||||
describe("zoom level", () => {
|
||||
beforeEach(() => {
|
||||
driver.beforeEach();
|
||||
});
|
||||
it("via url", () => {
|
||||
var zoomLevel = 12.37;
|
||||
driver.setStyle("geojson", zoomLevel);
|
||||
driver.isDisplayedInViewport(".maplibregl-ctrl-zoom");
|
||||
// HM TODO
|
||||
//driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel);
|
||||
})
|
||||
it("via map controls", () => {
|
||||
var zoomLevel = 12.37;
|
||||
driver.setStyle("geojson", zoomLevel);
|
||||
|
||||
driver.click(".maplibregl-ctrl-zoom-in");
|
||||
driver.isDisplayedInViewport(".maplibregl-ctrl-zoom");
|
||||
// HM TODO
|
||||
//driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel + 1);
|
||||
})
|
||||
})
|
||||
})
|
||||
let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
describe("zoom level", () => {
|
||||
it("via url", () => {
|
||||
var zoomLevel = 12.37;
|
||||
when.setStyle("geojson", zoomLevel);
|
||||
should.beVisible("maplibre:ctrl-zoom");
|
||||
should.containText("maplibre:ctrl-zoom", "Zoom: " + zoomLevel);
|
||||
});
|
||||
|
||||
it("via map controls", () => {
|
||||
var zoomLevel = 12.37;
|
||||
when.setStyle("geojson", zoomLevel);
|
||||
|
||||
should.beVisible("maplibre:ctrl-zoom");
|
||||
when.clickZoomin();
|
||||
should.containText("maplibre:ctrl-zoom", "Zoom: "+(zoomLevel + 1));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,137 +1,154 @@
|
||||
import driver from "./driver";
|
||||
import MaputnikDriver from "./driver";
|
||||
|
||||
describe("modals", () => {
|
||||
let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
|
||||
beforeAndAfter();
|
||||
beforeEach(() => {
|
||||
driver.beforeEach();
|
||||
driver.setStyle('');
|
||||
when.setStyle("");
|
||||
});
|
||||
describe("open", () => {
|
||||
beforeEach(() => {
|
||||
driver.click(driver.getDataAttribute("nav:open"));
|
||||
when.click("nav:open");
|
||||
});
|
||||
|
||||
it("close", () => {
|
||||
driver.closeModal("modal:open");
|
||||
when.closeModal("modal:open");
|
||||
should.notExist("modal:open");
|
||||
});
|
||||
|
||||
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();
|
||||
when.chooseExampleFile();
|
||||
|
||||
driver.isStyleStoreEqualToExampleFileData();
|
||||
should.styleStoreEqualToExampleFileData();
|
||||
});
|
||||
|
||||
it("load from url", () => {
|
||||
var styleFileUrl = driver.getExampleFileUrl();
|
||||
var styleFileUrl = get.exampleFileUrl();
|
||||
|
||||
driver.setValue(driver.getDataAttribute("modal:open.url.input"), styleFileUrl);
|
||||
driver.click(driver.getDataAttribute("modal:open.url.button"))
|
||||
driver.waitForExampleFileRequset();
|
||||
when.setValue(get.dataAttribute("modal:open.url.input"), styleFileUrl);
|
||||
when.click("modal:open.url.button");
|
||||
when.waitForExampleFileRequset();
|
||||
|
||||
driver.isStyleStoreEqualToExampleFileData();
|
||||
should.styleStoreEqualToExampleFileData();
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
describe("shortcuts", () => {
|
||||
it("open/close", () => {
|
||||
driver.setStyle('');
|
||||
|
||||
driver.typeKeys("?");
|
||||
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts"));
|
||||
|
||||
driver.closeModal("modal:shortcuts");
|
||||
when.setStyle("");
|
||||
when.typeKeys("?");
|
||||
when.closeModal("modal:shortcuts");
|
||||
should.notExist("modal:shortcuts");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("export", () => {
|
||||
beforeEach(() => {
|
||||
driver.click(driver.getDataAttribute("nav:export"));
|
||||
when.click("nav:export");
|
||||
});
|
||||
|
||||
it("close", () => {
|
||||
driver.closeModal("modal:export");
|
||||
when.closeModal("modal:export");
|
||||
should.notExist("modal:export");
|
||||
});
|
||||
|
||||
// TODO: Work out how to download a file and check the contents
|
||||
it("download")
|
||||
|
||||
})
|
||||
it("download");
|
||||
});
|
||||
|
||||
describe("sources", () => {
|
||||
it("active sources")
|
||||
it("public source")
|
||||
it("add new source")
|
||||
})
|
||||
it("active sources");
|
||||
it("public source");
|
||||
it("add new source");
|
||||
});
|
||||
|
||||
describe("inspect", () => {
|
||||
it("toggle", () => {
|
||||
driver.setStyle('geojson');
|
||||
when.setStyle("geojson");
|
||||
|
||||
driver.select(driver.getDataAttribute("nav:inspect", "select"), "inspect");
|
||||
})
|
||||
})
|
||||
when.selectWithin("nav:inspect", "inspect");
|
||||
});
|
||||
});
|
||||
|
||||
describe("style settings", () => {
|
||||
beforeEach(() => {
|
||||
driver.click(driver.getDataAttribute("nav:settings"));
|
||||
when.click("nav:settings");
|
||||
});
|
||||
|
||||
it("name", () => {
|
||||
driver.setValue(driver.getDataAttribute("modal:settings.name"), "foobar");
|
||||
driver.click(driver.getDataAttribute("modal:settings.owner"));
|
||||
when.setValue(get.dataAttribute("modal:settings.name"), "foobar");
|
||||
when.click("modal:settings.owner");
|
||||
|
||||
driver.isStyleStoreEqual((obj) => obj.name, "foobar");
|
||||
})
|
||||
should.equalStyleStore((obj) => obj.name, "foobar");
|
||||
});
|
||||
it("owner", () => {
|
||||
driver.setValue(driver.getDataAttribute("modal:settings.owner"), "foobar")
|
||||
driver.click(driver.getDataAttribute("modal:settings.name"));
|
||||
when.setValue(get.dataAttribute("modal:settings.owner"), "foobar");
|
||||
when.click("modal:settings.name");
|
||||
|
||||
driver.isStyleStoreEqual((obj) => obj.owner, "foobar");
|
||||
})
|
||||
should.equalStyleStore((obj) => obj.owner, "foobar");
|
||||
});
|
||||
it("sprite url", () => {
|
||||
driver.setValue(driver.getDataAttribute("modal:settings.sprite"), "http://example.com")
|
||||
driver.click(driver.getDataAttribute("modal:settings.name"));
|
||||
when.setValue(
|
||||
get.dataAttribute("modal:settings.sprite"),
|
||||
"http://example.com"
|
||||
);
|
||||
when.click("modal:settings.name");
|
||||
|
||||
driver.isStyleStoreEqual((obj) => obj.sprite, "http://example.com");
|
||||
})
|
||||
should.equalStyleStore((obj) => obj.sprite, "http://example.com");
|
||||
});
|
||||
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 glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
|
||||
when.setValue(get.dataAttribute("modal:settings.glyphs"), glyphsUrl);
|
||||
when.click("modal:settings.name");
|
||||
|
||||
driver.isStyleStoreEqual((obj) => obj.glyphs, glyphsUrl);
|
||||
})
|
||||
should.equalStyleStore((obj) => obj.glyphs, glyphsUrl);
|
||||
});
|
||||
|
||||
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"));
|
||||
when.setValue(
|
||||
get.dataAttribute(
|
||||
"modal:settings.maputnik:openmaptiles_access_token"
|
||||
),
|
||||
apiKey
|
||||
);
|
||||
when.click("modal:settings.name");
|
||||
|
||||
driver.isStyleStoreEqual((obj) => obj.metadata["maputnik:openmaptiles_access_token"], apiKey);
|
||||
})
|
||||
should.equalStyleStore(
|
||||
(obj) => obj.metadata["maputnik:openmaptiles_access_token"],
|
||||
apiKey
|
||||
);
|
||||
});
|
||||
|
||||
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"));
|
||||
when.setValue(
|
||||
get.dataAttribute(
|
||||
"modal:settings.maputnik:thunderforest_access_token"
|
||||
),
|
||||
apiKey
|
||||
);
|
||||
when.click("modal:settings.name");
|
||||
|
||||
driver.isStyleStoreEqual((obj) => obj.metadata["maputnik:thunderforest_access_token"], apiKey);
|
||||
})
|
||||
should.equalStyleStore(
|
||||
(obj) => obj.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
|
||||
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"));
|
||||
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");
|
||||
|
||||
driver.isStyleStoreEqual((obj) => obj.metadata["maputnik:renderer"], "ol");
|
||||
})
|
||||
})
|
||||
when.click("modal:settings.name");
|
||||
|
||||
should.equalStyleStore((obj) => obj.metadata["maputnik:renderer"], "ol");
|
||||
});
|
||||
});
|
||||
|
||||
describe("sources", () => {
|
||||
it("toggle")
|
||||
})
|
||||
})
|
||||
it("toggle");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -14,7 +14,8 @@
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands'
|
||||
import "cypress-plugin-tab";
|
||||
import "./commands";
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
// require('./commands')
|
||||
|
||||
6245
package-lock.json
generated
6245
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -86,6 +86,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-replace": "^5.0.5",
|
||||
"@shellygo/cypress-test-utils": "^2.0.9",
|
||||
"@storybook/addon-a11y": "^7.6.5",
|
||||
"@storybook/addon-actions": "^7.6.5",
|
||||
"@storybook/addon-links": "^7.6.5",
|
||||
|
||||
@@ -682,7 +682,7 @@ export default class App extends React.Component {
|
||||
elementStyle.filter = `url('#${filterName}')`;
|
||||
}
|
||||
|
||||
return <div style={elementStyle} className="maputnik-map__container">
|
||||
return <div style={elementStyle} className="maputnik-map__container" data-wd-key="maplibre:container">
|
||||
{mapElement}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -244,12 +244,13 @@ export default class AppToolbar extends React.Component {
|
||||
<label>View
|
||||
<select
|
||||
className="maputnik-select"
|
||||
data-wd-key="maputnik-select"
|
||||
onChange={(e) => this.handleSelection(e.target.value)}
|
||||
value={currentView.id}
|
||||
>
|
||||
{views.filter(v => v.group === "general").map((item) => {
|
||||
return (
|
||||
<option key={item.id} value={item.id} disabled={item.disabled}>
|
||||
<option key={item.id} value={item.id} disabled={item.disabled} data-wd-key={item.id}>
|
||||
{item.title}
|
||||
</option>
|
||||
);
|
||||
|
||||
@@ -305,7 +305,7 @@ export default class LayerEditor extends React.Component {
|
||||
onSelection={handleSelection}
|
||||
closeOnSelection={false}
|
||||
>
|
||||
<Button id="skip-target-layer-editor" className='more-menu__button' title="Layer options">
|
||||
<Button id="skip-target-layer-editor" data-wd-key="skip-target-layer-editor" className='more-menu__button' title="Layer options">
|
||||
<MdMoreVert className="more-menu__button__svg" />
|
||||
</Button>
|
||||
<Menu>
|
||||
|
||||
@@ -286,6 +286,7 @@ class LayerListContainer extends React.Component {
|
||||
<div className="maputnik-multibutton">
|
||||
<button
|
||||
id="skip-target-layer-list"
|
||||
data-wd-key="skip-target-layer-list"
|
||||
onClick={this.toggleLayers}
|
||||
className="maputnik-button">
|
||||
{this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
|
||||
|
||||
@@ -230,6 +230,7 @@ export default class MapMaplibreGl extends React.Component {
|
||||
role="region"
|
||||
aria-label="Map view"
|
||||
ref={x => this.container = x}
|
||||
data-wd-key="maplibre:map"
|
||||
></div>
|
||||
}
|
||||
else {
|
||||
|
||||
@@ -1,12 +1,16 @@
|
||||
import querystring from 'querystring'
|
||||
interface DebugStore {
|
||||
[namespace: string]: {
|
||||
[key: string]: any
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const debugStore = {};
|
||||
const debugStore: DebugStore = {};
|
||||
|
||||
function enabled() {
|
||||
const qs = querystring.parse(window.location.search.slice(1));
|
||||
if(qs.hasOwnProperty("debug")) {
|
||||
return !!qs.debug.match(/^(|1|true)$/);
|
||||
const qs = new URL(window.location.href).searchParams;
|
||||
const debugQs = qs.get("debug");
|
||||
if(debugQs) {
|
||||
return !!debugQs.match(/^(|1|true)$/);
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
@@ -17,7 +21,7 @@ function genErr() {
|
||||
return new Error("Debug not enabled, enable by appending '?debug' to your query string");
|
||||
}
|
||||
|
||||
function set(namespace, key, value) {
|
||||
function set(namespace: keyof DebugStore, key: string, value: any) {
|
||||
if(!enabled()) {
|
||||
throw genErr();
|
||||
}
|
||||
@@ -25,7 +29,7 @@ function set(namespace, key, value) {
|
||||
debugStore[namespace][key] = value;
|
||||
}
|
||||
|
||||
function get(namespace, key) {
|
||||
function get(namespace: keyof DebugStore, key: string) {
|
||||
if(!enabled()) {
|
||||
throw genErr();
|
||||
}
|
||||
@@ -38,7 +42,7 @@ const mod = {
|
||||
enabled,
|
||||
get,
|
||||
set
|
||||
}
|
||||
};
|
||||
|
||||
window.debug = mod;
|
||||
(window as any).debug = mod;
|
||||
export default mod;
|
||||
@@ -3,6 +3,7 @@ export default class ZoomControl {
|
||||
this._map = map;
|
||||
this._container = document.createElement('div');
|
||||
this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom';
|
||||
this._container.setAttribute("data-wd-key", "maplibre:ctrl-zoom");
|
||||
this._container.innerHTML = `
|
||||
Zoom: <span></span>
|
||||
`;
|
||||
|
||||
@@ -1,11 +1,22 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import replace from '@rollup/plugin-replace';
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
port: 8888
|
||||
},
|
||||
plugins: [react()],
|
||||
plugins: [
|
||||
replace({
|
||||
preventAssignment: true,
|
||||
include: /\/jsonlint-lines-primitives\/lib\/jsonlint.js/,
|
||||
delimiters: ['', ''],
|
||||
values: {
|
||||
'_token_stack:': ''
|
||||
}
|
||||
}) as any,
|
||||
react()
|
||||
],
|
||||
define: {
|
||||
global: "window",
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user