mirror of
https://github.com/maputnik/editor.git
synced 2026-07-18 20:07:27 +00:00
Alot of the cypress code and tests
This commit is contained in:
HarelM
@@ -0,0 +1,41 @@
|
||||
import driver from "./driver";
|
||||
|
||||
describe("accessibility", () => {
|
||||
// skipped due to the following issue with cypress: https://github.com/cypress-io/cypress/issues/299
|
||||
describe.skip("skip links", () => {
|
||||
beforeEach(() => {
|
||||
driver.beforeEach();
|
||||
driver.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");
|
||||
});
|
||||
|
||||
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");
|
||||
});
|
||||
|
||||
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");
|
||||
});
|
||||
});
|
||||
})
|
||||
@@ -0,0 +1,159 @@
|
||||
import {v1 as uuid} from "uuid";
|
||||
|
||||
export default {
|
||||
isMac() {
|
||||
return Cypress.platform === "darwin";
|
||||
},
|
||||
|
||||
beforeEach() {
|
||||
this.setupInterception();
|
||||
this.setStyle('both');
|
||||
},
|
||||
|
||||
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' });
|
||||
},
|
||||
|
||||
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');
|
||||
},
|
||||
|
||||
async getStyleStore(): Promise<any> {
|
||||
return new Promise((resolve) => {
|
||||
cy.window().then((win: any) => {
|
||||
return win.debug.get("maputnik", "styleStore").latestStyle(resolve);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
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});
|
||||
},
|
||||
|
||||
isEqualToExampleFileData(styleObject: any) {
|
||||
return cy.fixture('example-style.json').should('deep.equal', styleObject);
|
||||
},
|
||||
|
||||
getExampleFileUrl() {
|
||||
return "http://localhost:8888/example-style.json";
|
||||
},
|
||||
|
||||
waitForExampleFileRequset() {
|
||||
cy.wait('@example-style.json');
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import driver from "./driver";
|
||||
|
||||
describe("history", () => {
|
||||
let undoKeyCombo: string;
|
||||
let redoKeyCombo: string;
|
||||
|
||||
before(() => {
|
||||
const isMac = driver.isMac();
|
||||
undoKeyCombo = '{meta}z';
|
||||
redoKeyCombo = isMac ? '{meta}{shift}z' : '{meta}y';
|
||||
driver.beforeEach();
|
||||
});
|
||||
|
||||
it("undo/redo", async () => {
|
||||
var styleObj;
|
||||
|
||||
driver.setStyle('geojson');
|
||||
driver.openLayersModal();
|
||||
|
||||
styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, []);
|
||||
|
||||
driver.fillLayersModal({
|
||||
id: "step 1",
|
||||
type: "background"
|
||||
})
|
||||
|
||||
styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": "step 1",
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
|
||||
driver.openLayersModal();
|
||||
driver.fillLayersModal({
|
||||
id: "step 2",
|
||||
type: "background"
|
||||
})
|
||||
|
||||
styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": "step 1",
|
||||
"type": 'background'
|
||||
},
|
||||
{
|
||||
"id": "step 2",
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
|
||||
driver.typeKeys(undoKeyCombo);
|
||||
styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": "step 1",
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
|
||||
driver.typeKeys(undoKeyCombo)
|
||||
styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
]);
|
||||
|
||||
driver.typeKeys(redoKeyCombo)
|
||||
styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": "step 1",
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
|
||||
driver.typeKeys(redoKeyCombo)
|
||||
styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": "step 1",
|
||||
"type": 'background'
|
||||
},
|
||||
{
|
||||
"id": "step 2",
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
@@ -0,0 +1,60 @@
|
||||
import driver from "./driver";
|
||||
|
||||
describe("keyboard", () => {
|
||||
describe("shortcuts", () => {
|
||||
beforeEach(() => {
|
||||
driver.setupInterception();
|
||||
driver.setStyle('');
|
||||
})
|
||||
|
||||
it("ESC should unfocus", () => {
|
||||
const targetSelector = driver.getDataAttribute("nav:inspect") + " select";
|
||||
driver.focus(targetSelector);
|
||||
driver.isFocused(targetSelector);
|
||||
|
||||
//driver.typeKeys("{esc}");
|
||||
//driver.isFocused('body');
|
||||
});
|
||||
|
||||
it("'?' should show shortcuts modal", () => {
|
||||
driver.typeKeys("?");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts"));
|
||||
});
|
||||
|
||||
it("'o' should show open modal", () => {
|
||||
driver.typeKeys("o");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:open"));
|
||||
});
|
||||
|
||||
it("'e' should show export modal", () => {
|
||||
driver.typeKeys("e");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:export"));
|
||||
});
|
||||
|
||||
it("'d' should show sources modal", () => {
|
||||
driver.typeKeys("d");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:sources"));
|
||||
});
|
||||
|
||||
it("'s' should show settings modal", () => {
|
||||
driver.typeKeys("s");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:settings"));
|
||||
});
|
||||
|
||||
it("'i' should change map to inspect mode", () => {
|
||||
driver.typeKeys("i");
|
||||
driver.isSelected(driver.getDataAttribute("nav:inspect"), "inspect");
|
||||
});
|
||||
|
||||
it("'m' should focus map", () => {
|
||||
driver.typeKeys("m");
|
||||
driver.isFocused(".maplibregl-canvas");
|
||||
});
|
||||
|
||||
it("'!' should show debug modal", () => {
|
||||
driver.typeKeys("!");
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:debug"));
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,452 @@
|
||||
var assert = require("assert");
|
||||
import driver from "./driver";
|
||||
import { v1 as uuid } from 'uuid';
|
||||
|
||||
describe("layers", () => {
|
||||
beforeEach(() => {
|
||||
driver.beforeEach();
|
||||
driver.setStyle('both');
|
||||
driver.openLayersModal();
|
||||
});
|
||||
|
||||
describe("ops", () => {
|
||||
it("delete", async () => {
|
||||
var styleObj;
|
||||
var id = driver.fillLayersModal({
|
||||
type: "background"
|
||||
})
|
||||
|
||||
styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'background'
|
||||
},
|
||||
]);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:"+id+":delete", ""))
|
||||
|
||||
styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, []);
|
||||
});
|
||||
|
||||
it("duplicate", async () => {
|
||||
var styleObj;
|
||||
var id = driver.fillLayersModal({
|
||||
type: "background"
|
||||
})
|
||||
|
||||
styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'background'
|
||||
},
|
||||
]);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:"+id+":copy", ""));
|
||||
|
||||
styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": id+"-copy",
|
||||
"type": "background"
|
||||
},
|
||||
{
|
||||
"id": id,
|
||||
"type": "background"
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it("hide", async () => {
|
||||
var styleObj;
|
||||
var id = driver.fillLayersModal({
|
||||
type: "background"
|
||||
})
|
||||
|
||||
styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'background'
|
||||
},
|
||||
]);
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
|
||||
|
||||
styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "background",
|
||||
"layout": {
|
||||
"visibility": "none"
|
||||
}
|
||||
},
|
||||
]);
|
||||
|
||||
await driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
|
||||
|
||||
styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "background",
|
||||
"layout": {
|
||||
"visibility": "visible"
|
||||
}
|
||||
},
|
||||
]);
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
describe('background', function () {
|
||||
|
||||
it("add", async () => {
|
||||
var id = driver.fillLayersModal({
|
||||
type: "background"
|
||||
})
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
describe("modify", () => {
|
||||
async function createBackground() {
|
||||
// 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);
|
||||
|
||||
driver.click(driver.getDataAttribute("add-layer"));
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": 'background:'+id,
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
return id;
|
||||
}
|
||||
|
||||
// ====> THESE SHOULD BE FROM THE SPEC
|
||||
describe("layer", () => {
|
||||
it("expand/collapse");
|
||||
it("id", async () => {
|
||||
var bgId = await createBackground();
|
||||
|
||||
driver.click(driver.getDataAttribute("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"));
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": 'foobar:'+id,
|
||||
"type": 'background'
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
it("min-zoom", async () => {
|
||||
var bgId = await createBackground();
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
|
||||
driver.setValue(driver.getDataAttribute("min-zoom", 'input[type="text"]'), "1");
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": 'background:'+bgId,
|
||||
"type": 'background',
|
||||
"minzoom": 1
|
||||
}
|
||||
]);
|
||||
|
||||
// AND RESET!
|
||||
// await driver.setValue(driver.getDataAttribute("min-zoom", "input"), "")
|
||||
// await driver.click(driver.getDataAttribute("max-zoom", "input"));
|
||||
|
||||
// var styleObj = await driver.getStyleStore();
|
||||
|
||||
// assert.deepEqual(styleObj.layers, [
|
||||
// {
|
||||
// "id": 'background:'+bgId,
|
||||
// "type": 'background'
|
||||
// }
|
||||
// ]);
|
||||
});
|
||||
|
||||
it("max-zoom", async () => {
|
||||
var bgId = await createBackground();
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
|
||||
driver.setValue(driver.getDataAttribute("max-zoom", 'input[type="text"]'), "1")
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": 'background:'+bgId,
|
||||
"type": 'background',
|
||||
"maxzoom": 1
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
it("comments", async () => {
|
||||
var bgId = await createBackground();
|
||||
var id = uuid();
|
||||
|
||||
await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
|
||||
await driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), id);
|
||||
|
||||
await driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": 'background:'+bgId,
|
||||
"type": 'background',
|
||||
metadata: {
|
||||
'maputnik:comment': id
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
// Unset it again.
|
||||
// TODO: This fails
|
||||
// await driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), "");
|
||||
// await driver.click(driver.getDataAttribute("min-zoom", "input"));
|
||||
// await driver.zeroTimeout();
|
||||
|
||||
// var styleObj = await driver.getStyleStore();
|
||||
// assert.deepEqual(styleObj.layers, [
|
||||
// {
|
||||
// "id": 'background:'+bgId,
|
||||
// "type": 'background'
|
||||
// }
|
||||
// ]);
|
||||
});
|
||||
|
||||
it("color", async () => {
|
||||
var bgId = await createBackground();
|
||||
|
||||
await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
|
||||
|
||||
await driver.click(driver.getDataAttribute("spec-field:background-color", "input"));
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.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", () => {
|
||||
it("expand/collapse");
|
||||
it("modify");
|
||||
|
||||
// TODO
|
||||
it.skip("parse error", async () => {
|
||||
var bgId = await createBackground();
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
|
||||
|
||||
var errorSelector = ".CodeMirror-lint-marker-error";
|
||||
driver.doesNotExists(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"));
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
describe('fill', () => {
|
||||
it("add", async () => {
|
||||
|
||||
var id = driver.fillLayersModal({
|
||||
type: "fill",
|
||||
layer: "example"
|
||||
});
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'fill',
|
||||
"source": "example"
|
||||
}
|
||||
]);
|
||||
})
|
||||
|
||||
// TODO: Change source
|
||||
it("change source")
|
||||
});
|
||||
|
||||
describe('line', () => {
|
||||
it("add", async () => {
|
||||
var id = driver.fillLayersModal({
|
||||
type: "line",
|
||||
layer: "example"
|
||||
});
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "line",
|
||||
"source": "example",
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
it("groups", () => {
|
||||
// TODO
|
||||
// Click each of the layer groups.
|
||||
})
|
||||
});
|
||||
|
||||
describe('symbol', () => {
|
||||
it("add", async () => {
|
||||
var id = driver.fillLayersModal({
|
||||
type: "symbol",
|
||||
layer: "example"
|
||||
});
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "symbol",
|
||||
"source": "example",
|
||||
}
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('raster', () => {
|
||||
it("add", async () => {
|
||||
var id = driver.fillLayersModal({
|
||||
type: "raster",
|
||||
layer: "raster"
|
||||
});
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "raster",
|
||||
"source": "raster",
|
||||
}
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('circle', () => {
|
||||
it("add", async () => {
|
||||
var id = driver.fillLayersModal({
|
||||
type: "circle",
|
||||
layer: "example"
|
||||
});
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": "circle",
|
||||
"source": "example",
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('fill extrusion', () => {
|
||||
it("add", async () => {
|
||||
var id = driver.fillLayersModal({
|
||||
type: "fill-extrusion",
|
||||
layer: "example"
|
||||
});
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.deepEqual(styleObj.layers, [
|
||||
{
|
||||
"id": id,
|
||||
"type": 'fill-extrusion',
|
||||
"source": "example"
|
||||
}
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe("groups", () => {
|
||||
it("simple", async () => {
|
||||
driver.setStyle("geojson");
|
||||
|
||||
driver.openLayersModal();
|
||||
driver.fillLayersModal({
|
||||
id: "foo",
|
||||
type: "background"
|
||||
})
|
||||
|
||||
driver.openLayersModal();
|
||||
driver.fillLayersModal({
|
||||
id: "foo_bar",
|
||||
type: "background"
|
||||
})
|
||||
|
||||
driver.openLayersModal();
|
||||
driver.fillLayersModal({
|
||||
id: "foo_bar_baz",
|
||||
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"));
|
||||
|
||||
driver.click(driver.getDataAttribute("layer-list-group:foo-0"));
|
||||
|
||||
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"));
|
||||
})
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,142 @@
|
||||
import driver from "./driver";
|
||||
|
||||
describe("modals", () => {
|
||||
beforeEach(() => {
|
||||
driver.beforeEach();
|
||||
driver.setStyle('');
|
||||
});
|
||||
describe("open", () => {
|
||||
beforeEach(() => {
|
||||
driver.click(driver.getDataAttribute("nav:open"));
|
||||
});
|
||||
|
||||
it("close", () => {
|
||||
driver.closeModal("modal:open");
|
||||
});
|
||||
|
||||
it("upload", async () => {
|
||||
driver.chooseExampleFile();
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
driver.isEqualToExampleFileData(styleObj);
|
||||
});
|
||||
|
||||
it("load from url", async () => {
|
||||
var styleFileUrl = driver.getExampleFileUrl();
|
||||
|
||||
driver.setValue(driver.getDataAttribute("modal:open.url.input"), styleFileUrl);
|
||||
driver.click(driver.getDataAttribute("modal:open.url.button"))
|
||||
driver.waitForExampleFileRequset();
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
driver.isEqualToExampleFileData(styleObj);
|
||||
});
|
||||
})
|
||||
|
||||
describe("shortcuts", () => {
|
||||
it("open/close", async () => {
|
||||
driver.setStyle('');
|
||||
|
||||
driver.typeKeys("?");
|
||||
|
||||
driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts"));
|
||||
|
||||
driver.closeModal("modal:shortcuts");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("export", () => {
|
||||
beforeEach(() => {
|
||||
driver.click(driver.getDataAttribute("nav:export"));
|
||||
});
|
||||
|
||||
it("close", () => {
|
||||
driver.closeModal("modal:export");
|
||||
});
|
||||
|
||||
// TODO: Work out how to download a file and check the contents
|
||||
it("download")
|
||||
|
||||
})
|
||||
|
||||
describe("sources", () => {
|
||||
it("active sources")
|
||||
it("public source")
|
||||
it("add new source")
|
||||
})
|
||||
|
||||
describe("inspect", () => {
|
||||
it("toggle", async () => {
|
||||
driver.setStyle('geojson');
|
||||
|
||||
driver.select(driver.getDataAttribute("nav:inspect", "select"), "inspect");
|
||||
})
|
||||
})
|
||||
|
||||
describe("style settings", () => {
|
||||
beforeEach(() => {
|
||||
driver.click(driver.getDataAttribute("nav:settings"));
|
||||
});
|
||||
|
||||
it("name", async () => {
|
||||
driver.setValue(driver.getDataAttribute("modal:settings.name"), "foobar");
|
||||
driver.click(driver.getDataAttribute("modal:settings.owner"));
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.equal(styleObj.name, "foobar");
|
||||
})
|
||||
it("owner", async () => {
|
||||
driver.setValue(driver.getDataAttribute("modal:settings.owner"), "foobar")
|
||||
driver.click(driver.getDataAttribute("modal:settings.name"));
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.equal(styleObj.owner, "foobar");
|
||||
})
|
||||
it("sprite url", async () => {
|
||||
driver.setValue(driver.getDataAttribute("modal:settings.sprite"), "http://example.com")
|
||||
driver.click(driver.getDataAttribute("modal:settings.name"));
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.equal(styleObj.sprite, "http://example.com");
|
||||
})
|
||||
it("glyphs url", async () => {
|
||||
var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"
|
||||
driver.setValue(driver.getDataAttribute("modal:settings.glyphs"), glyphsUrl);
|
||||
driver.click(driver.getDataAttribute("modal:settings.name"));
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.equal(styleObj.glyphs, glyphsUrl);
|
||||
})
|
||||
|
||||
it("maptiler access token", async () => {
|
||||
var apiKey = "testing123";
|
||||
driver.setValue(driver.getDataAttribute("modal:settings.maputnik:openmaptiles_access_token"), apiKey);
|
||||
driver.click(driver.getDataAttribute("modal:settings.name"));
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.equal(styleObj.metadata["maputnik:openmaptiles_access_token"], apiKey);
|
||||
})
|
||||
|
||||
it("thunderforest access token", async () => {
|
||||
var apiKey = "testing123";
|
||||
driver.setValue(driver.getDataAttribute("modal:settings.maputnik:thunderforest_access_token"), apiKey);
|
||||
driver.click(driver.getDataAttribute("modal:settings.name"));
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.equal(styleObj.metadata["maputnik:thunderforest_access_token"], apiKey);
|
||||
})
|
||||
|
||||
it("style renderer", async () => {
|
||||
driver.select(driver.getDataAttribute("modal:settings.maputnik:renderer"), "ol");
|
||||
driver.click(driver.getDataAttribute("modal:settings.name"));
|
||||
|
||||
var styleObj = await driver.getStyleStore();
|
||||
assert.equal(styleObj.metadata["maputnik:renderer"], "ol");
|
||||
})
|
||||
})
|
||||
|
||||
describe("sources", () => {
|
||||
it("toggle")
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"id": "test-style",
|
||||
"version": 8,
|
||||
"name": "Test Style",
|
||||
"metadata": {
|
||||
"maputnik:renderer": "mlgljs"
|
||||
},
|
||||
"sources": {},
|
||||
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"layers": [
|
||||
{
|
||||
"id": "background",
|
||||
"type": "background"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"id": "test-style",
|
||||
"version": 8,
|
||||
"name": "Test Style",
|
||||
"metadata": {
|
||||
"maputnik:renderer": "mlgljs"
|
||||
},
|
||||
"sources": {},
|
||||
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"layers": []
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"id": "test-style",
|
||||
"version": 8,
|
||||
"name": "Test Style",
|
||||
"metadata": {
|
||||
"maputnik:renderer": "mlgljs"
|
||||
},
|
||||
"sources": {
|
||||
"example": {
|
||||
"type": "vector",
|
||||
"data": {
|
||||
"type": "FeatureCollection",
|
||||
"features":[{
|
||||
"type": "Feature",
|
||||
"properties": {
|
||||
"name": "Dinagat Islands"
|
||||
},
|
||||
"geometry":{
|
||||
"type": "Point",
|
||||
"coordinates": [125.6, 10.1]
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
"raster": {
|
||||
"tileSize": 256,
|
||||
"tiles": ["http://localhost/example/{x}/{y}/{z}"],
|
||||
"type": "raster"
|
||||
}
|
||||
},
|
||||
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"layers": []
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"id": "test-style",
|
||||
"version": 8,
|
||||
"name": "Test Style",
|
||||
"metadata": {
|
||||
"maputnik:renderer": "mlgljs"
|
||||
},
|
||||
"sources": {
|
||||
"example": {
|
||||
"type": "vector",
|
||||
"data": {
|
||||
"type": "FeatureCollection",
|
||||
"features":[{
|
||||
"type": "Feature",
|
||||
"properties": {
|
||||
"name": "Dinagat Islands"
|
||||
},
|
||||
"geometry":{
|
||||
"type": "Point",
|
||||
"coordinates": [125.6, 10.1]
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"layers": []
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"id": "test-style",
|
||||
"version": 8,
|
||||
"name": "Test Style",
|
||||
"metadata": {
|
||||
"maputnik:renderer": "mlgljs"
|
||||
},
|
||||
"sources": {
|
||||
"raster": {
|
||||
"tileSize": 256,
|
||||
"tiles": ["http://localhost/example/{x}/{y}/{z}"],
|
||||
"type": "raster"
|
||||
}
|
||||
},
|
||||
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
|
||||
"layers": []
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/// <reference types="cypress" />
|
||||
// ***********************************************
|
||||
// This example commands.ts shows you how to
|
||||
// create various custom commands and overwrite
|
||||
// existing commands.
|
||||
//
|
||||
// For more comprehensive examples of custom
|
||||
// commands please read more here:
|
||||
// https://on.cypress.io/custom-commands
|
||||
// ***********************************************
|
||||
//
|
||||
//
|
||||
// -- This is a parent command --
|
||||
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a child command --
|
||||
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a dual command --
|
||||
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This will overwrite an existing command --
|
||||
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
||||
//
|
||||
// declare global {
|
||||
// namespace Cypress {
|
||||
// interface Chainable {
|
||||
// login(email: string, password: string): Chainable<void>
|
||||
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
||||
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
||||
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@@ -0,0 +1,20 @@
|
||||
// ***********************************************************
|
||||
// This example support/e2e.ts is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands'
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
Reference in New Issue
Block a user