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

Use driver pattern for e2e tests (#829)

Browse Source 
I've moved all the logic relevant to WBIO into a single file in order to
be able to replace it.
I have tried to upgrade WDIO in order to use the latest version and it
got stuck on my computer.
Furthermore, I was not able to run it locally which made this whole
cycle very long.
After this will be merged I will replace WDIO with cypress.
This doesn't change anything, only moves some code in the tests to a
single file, removes unneeded files and uses the driver pattern, which
will later allow switching the underline WDIO with Cypress.

cc: @nyurik
This commit is contained in:
Harel M
2023-12-17 08:14:23 +02:00
committed by GitHub
parent 31d56c9fae
commit 18f45e932b
15 changed files with 490 additions and 605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/wdio.conf.js
View File

@@ -27,7 +27,7 @@ exports.config = {
],
// geckodriver-0.31 seems to have problems as of 2022 May 1
services: process.env.DOCKER_HOST ? [] : [ ['selenium-standalone', { drivers: { firefox: 'latest', chrome: 'latest' } } ] ],
logLevel: 'info',
logLevel: 'warn',
bail: 0,
screenshotPath: SCREENSHOT_PATH,
hostname: process.env.DOCKER_HOST || "0.0.0.0",

13
test/config/specs.js
View File

@@ -1,6 +1,11 @@
var config = {};
config.testNetwork = process.env.TEST_NETWORK || "localhost";
config.port = 9001;
config.baseUrl = "http://"+config.testNetwork+":"+config.port;
const testNetwork = process.env.TEST_NETWORK || "localhost";
const port = 9001;
const baseUrl = `http://${testNetwork}:${port}`;
const config = {
testNetwork,
port,
baseUrl
};
module.exports = config;

42
test/functional/accessibility/index.js
View File

@@ -1,3 +1,43 @@
var assert = require("assert");
var driver = require("../driver");
describe("accessibility", function () {
require("./skip-links");
describe("skip links", function() {
beforeEach(async function () {
await driver.setStyle("example-layer-style.json");
});
it("skip link to layer list", async function() {
const selector = driver.getDataAttribute("root:skip:layer-list")
assert(await driver.isExisting(selector));
await driver.typeKeys(['Tab']);
assert(await driver.isFocused(selector));
await driver.click(selector);
assert(await driver.isFocused("#skip-target-layer-list"));
});
it("skip link to layer editor", async function() {
const selector = driver.getDataAttribute("root:skip:layer-editor")
assert(await driver.isExisting(selector));
await driver.typeKeys(['Tab']);
await driver.typeKeys(['Tab']);
assert(await driver.isFocused(selector));
await driver.click(selector);
assert(await driver.isFocused("#skip-target-layer-editor"));
});
it("skip link to map view", async function() {
const selector = driver.getDataAttribute("root:skip:map-view")
assert(await driver.isExisting(selector));
await driver.typeKeys(['Tab']);
await driver.typeKeys(['Tab']);
await driver.typeKeys(['Tab']);
assert(await driver.isFocused(selector));
await driver.click(selector);
assert(await driver.isFocused(".maplibregl-canvas"));
});
});
})

51
test/functional/accessibility/skip-links.js
View File

@@ -1,51 +0,0 @@
var assert = require("assert");
var config = require("../../config/specs");
var helper = require("../helper");
var wd = require("../../wd-helper");
describe("skip links", function() {
beforeEach(async function () {
await browser.url(config.baseUrl+"?debug&style="+helper.getGeoServerUrl("example-layer-style.json"));
await browser.acceptAlert();
});
it("skip link to layer list", async function() {
const selector = wd.$("root:skip:layer-list")
const elem = await $(selector);
assert(await elem.isExisting());
await browser.keys(['Tab']);
assert(await elem.isFocused());
await elem.click();
const targetEl = await $("#skip-target-layer-list");
assert(await targetEl.isFocused());
});
it("skip link to layer editor", async function() {
const selector = wd.$("root:skip:layer-editor")
const elem = await $(selector);
assert(await elem.isExisting());
await browser.keys(['Tab']);
await browser.keys(['Tab']);
assert(await elem.isFocused());
await elem.click();
const targetEl = await $("#skip-target-layer-editor");
assert(await targetEl.isFocused());
});
it("skip link to map view", async function() {
const selector = wd.$("root:skip:map-view")
const elem = await $(selector);
assert(await elem.isExisting());
await browser.keys(['Tab']);
await browser.keys(['Tab']);
await browser.keys(['Tab']);
assert(await elem.isFocused());
await elem.click();
const targetEl = await $(".maplibregl-canvas");
assert(await targetEl.isFocused());
});
});

218
test/functional/driver.js Normal file
View File

@@ -0,0 +1,218 @@
var {v1: uuid} = require('uuid');
var fs = require("fs");
var path = require("path");
var config = require("../config/specs");
var geoServer = require("../geojson-server");
var artifacts = require("../artifacts");
var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots");
var testNetwork = process.env.TEST_NETWORK || "localhost";
var geoserver;
const driver = {
geoserver: {
start(done) {
geoserver = geoServer.listen(9002, "0.0.0.0", done);
},
stop(done) {
geoserver.close(done);
geoserver = undefined;
},
},
getStyleUrl(styles) {
var port = geoserver.address().port;
return "http://"+testNetwork+":"+port+"/styles/empty/"+styles.join(",");
},
getGeoServerUrl(urlPath) {
var port = geoserver.address().port;
return "http://"+testNetwork+":"+port+"/"+urlPath;
},
async setStyle(styleProperties, zoom) {
let url = config.baseUrl + "?debug";
if (styleProperties && Array.isArray(styleProperties)) {
url += "&style=" + this.getStyleUrl(styleProperties);
} else if (styleProperties && typeof styleProperties === "string") {
url += "&style=" + this.getGeoServerUrl(styleProperties);
}
if (zoom) {
url += "#" + zoom + "/41.3805/2.1635";
}
await browser.url(url);
if (styleProperties) {
await browser.acceptAlert();
}
await this.waitForExist(".maputnik-toolbar-link");
await this.zeroTimeout();
},
async getStyleStore() {
return await browser.executeAsync(function(done) {
window.debug.get("maputnik", "styleStore").latestStyle(done);
});
},
async setSurvey() {
await browser.execute(function() {
localStorage.setItem("survey", true);
});
},
async isMac() {
return await browser.execute(function() {
return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
});
},
async typeKeys(keys) {
await browser.keys(keys)
},
async click(selector) {
const elem = await $(selector);
await elem.click();
},
async selectFromDropdown(selector, value) {
const selectBox = await $(selector);
await selectBox.selectByAttribute('value', value);
await this.zeroTimeout();
},
async isDisplayedInViewport(selector) {
const elem = await $(selector);
return elem.isDisplayedInViewport();
},
async isFocused(selector) {
const elem = await $(selector);
return elem.isFocused();
},
/**
* Sometimes chrome driver can result in the wrong text.
*
* See <https://github.com/webdriverio/webdriverio/issues/1886>
*/
async setValue(selector, text) {
for (var i = 0; i < 10; i++) {
const elem = await $(selector);
await elem.waitForDisplayed(500);
var elements = await browser.findElements("css selector", selector);
if (elements.length > 1) {
throw "Too many elements found";
}
const elem2 = await $(selector);
await elem2.setValue(text);
var browserText = await elem2.getValue();
if (browserText == text) {
return;
}
else {
console.error("Warning: setValue failed, trying again");
}
}
// Wait for change events to fire and state updated
await this.zeroTimeout();
},
getExampleFilePath() {
return __dirname + "/../example-style.json";
},
async getExampleFileData() {
var styleFilePath = this.getExampleFilePath();
return JSON.parse(fs.readFileSync(styleFilePath));
},
async chooseExampleFile() {
const elem = await $("*[type='file']");
await elem.waitForExist();
await browser.chooseFile("*[type='file']", this.getExampleFilePath());
},
async zeroTimeout() {
await browser.executeAsync(function (done) {
// For any events to propagate
setTimeout(function () {
// For the DOM to be updated.
setTimeout(done, 0);
}, 0)
})
},
async sleep(milliseconds) {
await browser.pause(milliseconds);
},
async isExisting(selector) {
const elem = await $(selector);
return elem.isExisting();
},
async waitForExist(selector) {
const elem = await $(selector);
await elem.waitForExist();
},
async setWindowSize(height, width) {
await browser.setWindowSize(height, width);
},
async takeScreenShot(filepath) {
var savepath = path.join(SCREENSHOTS_PATH, filepath);
await browser.saveScreenshot(savepath);
},
getDataAttribute(key, selector) {
selector = selector || "";
return "*[data-wd-key='"+key+"'] "+selector;
},
async openLayersModal() {
const selector = await $(this.getDataAttribute('layer-list:add-layer'));
await selector.click();
// Wait for events
await this.zeroTimeout();
const elem = await $(this.getDataAttribute('modal:add-layer'));
await elem.waitForExist();
await elem.isDisplayed();
await elem.isDisplayedInViewport();
// Wait for events
await this.zeroTimeout();
},
async fillLayersModal(opts) {
var type = opts.type;
var layer = opts.layer;
var id;
if(opts.id) {
id = opts.id
}
else {
id = type+":"+uuid();
}
const selectBox = await $(this.getDataAttribute("add-layer.layer-type", "select"));
await selectBox.selectByAttribute('value', type);
await this.zeroTimeout();
await this.setValue(this.getDataAttribute("add-layer.layer-id", "input"), id);
if(layer) {
await this.setValue(this.getDataAttribute("add-layer.layer-source-block", "input"), layer);
}
await this.zeroTimeout();
const elem_addLayer = await $(this.getDataAttribute("add-layer"));
await elem_addLayer.click();
return id;
},
async closeModal(wdKey) {
const selector = this.getDataAttribute(wdKey);
await browser.waitUntil(async function() {
const elem = await $(selector);
return await elem.isDisplayedInViewport();
});
await this.click(this.getDataAttribute(wdKey+".close-modal"));
await browser.waitUntil(async function() {
return await browser.execute((selector) => {
return !document.querySelector(selector);
}, selector);
});
}
}
module.exports = driver;

86
test/functional/helper.js
View File

@@ -1,86 +0,0 @@
var wd = require("../wd-helper");
var {v1: uuid} = require('uuid');
var geoServer = require("../geojson-server");
var testNetwork = process.env.TEST_NETWORK || "localhost";
var geoserver;
module.exports = {
startGeoserver: function(done) {
geoserver = geoServer.listen(9002, "0.0.0.0", done);
},
stopGeoserver: function(done) {
geoserver.close(done);
geoserver = undefined;
},
getStyleUrl: function(styles) {
var port = geoserver.address().port;
return "http://"+testNetwork+":"+port+"/styles/empty/"+styles.join(",");
},
getGeoServerUrl: function(urlPath) {
var port = geoserver.address().port;
return "http://"+testNetwork+":"+port+"/"+urlPath;
},
getStyleStore: async function(browser) {
return await browser.executeAsync(function(done) {
window.debug.get("maputnik", "styleStore").latestStyle(done);
});
},
getRevisionStore: async function(browser) {
var result = await browser.execute(function() {
var rs = window.debug.get("maputnik", "revisionStore")
return {
currentIdx: rs.currentIdx,
revisions: rs.revisions
};
})
return result.value;
},
modal: {
addLayer: {
open: async function() {
const selector = await $(wd.$('layer-list:add-layer'));
await selector.click();
// Wait for events
await browser.flushReactUpdates();
const elem = await $(wd.$('modal:add-layer'));
await elem.waitForExist();
await elem.isDisplayed();
await elem.isDisplayedInViewport();
// Wait for events
await browser.flushReactUpdates();
},
fill: async function(opts) {
var type = opts.type;
var layer = opts.layer;
var id;
if(opts.id) {
id = opts.id
}
else {
id = type+":"+uuid();
}
const selectBox = await $(wd.$("add-layer.layer-type", "select"));
await selectBox.selectByAttribute('value', type);
await browser.flushReactUpdates();
await browser.setValueSafe(wd.$("add-layer.layer-id", "input"), id);
if(layer) {
await browser.setValueSafe(wd.$("add-layer.layer-source-block", "input"), layer);
}
await browser.flushReactUpdates();
const elem_addLayer = await $(wd.$("add-layer"));
await elem_addLayer.click();
return id;
}
}
}
}

53
test/functional/history/index.js
View File

@@ -1,8 +1,5 @@
var assert = require("assert");
var config = require("../../config/specs");
var helper = require("../helper");
var driver = require("../driver");
describe("history", function() {
let undoKeyCombo;
@@ -11,9 +8,7 @@ describe("history", function() {
let redoKeyComboReset;
before(async function() {
const isMac = await browser.execute(function() {
return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
});
const isMac = await driver.isMac();
undoKeyCombo = ['Meta', 'z'];
undoKeyComboReset = ['Meta'];
redoKeyCombo = isMac ? ['Meta', 'Shift', 'z'] : ['Meta', 'y'];
@@ -26,22 +21,18 @@ describe("history", function() {
it.skip("undo/redo", async function() {
var styleObj;
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
await browser.acceptAlert();
await driver.setStyle(["geojson:example"])
await driver.openLayersModal();
await helper.modal.addLayer.open();
styleObj = await helper.getStyleStore(browser);
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, []);
await helper.modal.addLayer.fill({
await driver.fillLayersModal({
id: "step 1",
type: "background"
})
styleObj = await helper.getStyleStore(browser);
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": "step 1",
@@ -49,13 +40,13 @@ describe("history", function() {
}
]);
await helper.modal.addLayer.open();
await helper.modal.addLayer.fill({
await driver.openLayersModal();
await driver.fillLayersModal({
id: "step 2",
type: "background"
})
styleObj = await helper.getStyleStore(browser);
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": "step 1",
@@ -67,9 +58,9 @@ describe("history", function() {
}
]);
await browser.keys(undoKeyCombo)
await browser.keys(undoKeyComboReset);
styleObj = await helper.getStyleStore(browser);
await driver.typeKeys(undoKeyCombo);
await driver.typeKeys(undoKeyComboReset);
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": "step 1",
@@ -77,15 +68,15 @@ describe("history", function() {
}
]);
await browser.keys(undoKeyCombo)
await browser.keys(undoKeyComboReset);
styleObj = await helper.getStyleStore(browser);
await driver.typeKeys(undoKeyCombo)
await driver.typeKeys(undoKeyComboReset);
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
]);
await browser.keys(redoKeyCombo)
await browser.keys(redoKeyComboReset);
styleObj = await helper.getStyleStore(browser);
await driver.typeKeys(redoKeyCombo)
await driver.typeKeys(redoKeyComboReset);
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": "step 1",
@@ -93,9 +84,9 @@ describe("history", function() {
}
]);
await browser.keys(redoKeyCombo)
await browser.keys(redoKeyComboReset);
styleObj = await helper.getStyleStore(browser);
await driver.typeKeys(redoKeyCombo)
await driver.typeKeys(redoKeyComboReset);
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": "step 1",

25
test/functional/index.js
View File

@@ -1,31 +1,20 @@
var config = require("../config/specs");
var helper = require("./helper");
var extendWebdriverIO = require("./util/webdriverio-ext");
var driver = require("./driver");
describe('maputnik', function() {
before(async function(done) {
await extendWebdriverIO();
helper.startGeoserver(done);
await browser.setTimeout({ 'script': 20 * 1000 });
await browser.setTimeout({ 'implicit': 20 * 1000 });
driver.geoserver.start(done);
});
after(function(done) {
helper.stopGeoserver(done);
driver.geoserver.stop(done);
});
beforeEach(async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example",
"raster:raster"
]));
await browser.acceptAlert();
await browser.execute(function() {
localStorage.setItem("survey", true);
});
const elem = await $(".maputnik-toolbar-link");
await elem.waitForExist();
await browser.flushReactUpdates();
await driver.setStyle(["geojson:example","raster:raster"]);
await driver.setSurvey();
});
// -------- setup --------

42
test/functional/keyboard/index.js
View File

@@ -1,55 +1,55 @@
var assert = require("assert");
var wd = require("../../wd-helper");
var driver = require("../driver");
describe("keyboard", function() {
describe("shortcuts", function() {
it("ESC should unfocus", async function() {
const tmpTargetEl = await $(wd.$("nav:inspect") + " select");
await tmpTargetEl.click();
assert(await tmpTargetEl.isFocused());
const targetSelector = driver.getDataAttribute("nav:inspect") + " select";
driver.click(targetSelector);
assert(await driver.isFocused(targetSelector));
await browser.keys(["Escape"]);
await driver.typeKeys(["Escape"]);
assert(await (await $("body")).isFocused());
});
it("'?' should show shortcuts modal", async function() {
await browser.keys(["?"]);
assert(await (await $(wd.$("modal:shortcuts"))).isDisplayed());
await driver.typeKeys(["?"]);
assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts")));
});
it("'o' should show open modal", async function() {
await browser.keys(["o"]);
assert(await (await $(wd.$("modal:open"))).isDisplayed());
await driver.typeKeys(["o"]);
assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:open")));
});
it("'e' should show export modal", async function() {
await browser.keys(["e"]);
assert(await (await $(wd.$("modal:export"))).isDisplayed());
await driver.typeKeys(["e"]);
await driver.sleep(100);
assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:export")));
});
it("'d' should show sources modal", async function() {
await browser.keys(["d"]);
assert(await (await $(wd.$("modal:sources"))).isDisplayed());
await driver.typeKeys(["d"]);
assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:sources")));
});
it("'s' should show settings modal", async function() {
await browser.keys(["s"]);
assert(await (await $(wd.$("modal:settings"))).isDisplayed());
await driver.typeKeys(["s"]);
assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:settings")));
});
it.skip("'i' should change map to inspect mode", async function() {
// await browser.keys(["i"]);
// await driver.typeKeys(["i"]);
});
it("'m' should focus map", async function() {
await browser.keys(["m"]);
assert(await (await $(".maplibregl-canvas")).isFocused());
await driver.typeKeys(["m"]);
assert(await driver.isFocused(".maplibregl-canvas"));
});
it("'!' should show debug modal", async function() {
await browser.keys(["!"]);
assert(await (await $(wd.$("modal:debug"))).isDisplayed());
await driver.typeKeys(["!"]);
assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:debug")));
});
});

204
test/functional/layers/index.js
View File

@@ -1,32 +1,24 @@
var assert = require("assert");
var config = require("../../config/specs");
var helper = require("../helper");
var driver = require("../driver");
var {v1: uuid} = require('uuid');
var wd = require("../../wd-helper");
describe("layers", function() {
beforeEach(async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
driver.setStyle([
"geojson:example",
"raster:raster"
]));
await browser.acceptAlert();
const elem = await $(".maputnik-toolbar-link");
await elem.waitForExist();
await browser.flushReactUpdates();
await helper.modal.addLayer.open();
]);
await driver.openLayersModal();
});
describe("ops", function() {
it("delete", async function() {
var styleObj;
var id = await helper.modal.addLayer.fill({
var id = await driver.fillLayersModal({
type: "background"
})
styleObj = await helper.getStyleStore(browser);
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": id,
@@ -34,21 +26,20 @@ describe("layers", function() {
},
]);
const elem = await $(wd.$("layer-list-item:"+id+":delete", ""));
await elem.click();
await driver.click(driver.getDataAttribute("layer-list-item:"+id+":delete", ""))
styleObj = await helper.getStyleStore(browser);
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
]);
});
it("duplicate", async function() {
var styleObj;
var id = await helper.modal.addLayer.fill({
var id = await driver.fillLayersModal({
type: "background"
})
styleObj = await helper.getStyleStore(browser);
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": id,
@@ -56,10 +47,9 @@ describe("layers", function() {
},
]);
const elem = await $(wd.$("layer-list-item:"+id+":copy", ""));
await elem.click();
await driver.click(driver.getDataAttribute("layer-list-item:"+id+":copy", ""));
styleObj = await helper.getStyleStore(browser);
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": id+"-copy",
@@ -74,11 +64,11 @@ describe("layers", function() {
it("hide", async function() {
var styleObj;
var id = await helper.modal.addLayer.fill({
var id = await driver.fillLayersModal({
type: "background"
})
styleObj = await helper.getStyleStore(browser);
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": id,
@@ -86,10 +76,9 @@ describe("layers", function() {
},
]);
const elem = await $(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
await elem.click();
await driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
styleObj = await helper.getStyleStore(browser);
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": id,
@@ -100,9 +89,9 @@ describe("layers", function() {
},
]);
await elem.click();
await driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
styleObj = await helper.getStyleStore(browser);
styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": id,
@@ -115,21 +104,15 @@ describe("layers", function() {
})
})
describe("tooltips", function() {
})
describe("help", function() {
})
describe('background', function () {
it("add", async function() {
var id = await helper.modal.addLayer.fill({
var id = await driver.fillLayersModal({
type: "background"
})
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": id,
@@ -143,15 +126,12 @@ describe("layers", function() {
// Setup
var id = uuid();
const selectBox = await $(wd.$("add-layer.layer-type", "select"));
await selectBox.selectByAttribute('value', "background");
await browser.flushReactUpdates();
await browser.setValueSafe(wd.$("add-layer.layer-id", "input"), "background:"+id);
await driver.selectFromDropdown(driver.getDataAttribute("add-layer.layer-type", "select"), "background");
await driver.setValue(driver.getDataAttribute("add-layer.layer-id", "input"), "background:"+id);
const elem = await $(wd.$("add-layer"));
await elem.click();
await driver.click(driver.getDataAttribute("add-layer"));
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": 'background:'+id,
@@ -167,15 +147,13 @@ describe("layers", function() {
it("id", async function() {
var bgId = await createBackground();
const elem = await $(wd.$("layer-list-item:background:"+bgId));
await elem.click();
await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
var id = uuid();
await browser.setValueSafe(wd.$("layer-editor.layer-id", "input"), "foobar:"+id)
const elem2 = await $(wd.$("min-zoom"));
await elem2.click();
await driver.setValue(driver.getDataAttribute("layer-editor.layer-id", "input"), "foobar:"+id)
await driver.click(driver.getDataAttribute("min-zoom"));
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": 'foobar:'+id,
@@ -187,13 +165,12 @@ describe("layers", function() {
it("min-zoom", async function() {
var bgId = await createBackground();
const elem = await $(wd.$("layer-list-item:background:"+bgId));
await elem.click();
await browser.setValueSafe(wd.$("min-zoom", 'input[type="text"]'), 1)
const elem2 = await $(wd.$("layer-editor.layer-id", "input"));
await elem2.click();
await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
await driver.setValue(driver.getDataAttribute("min-zoom", 'input[type="text"]'), 1)
var styleObj = await helper.getStyleStore(browser);
await driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": 'background:'+bgId,
@@ -203,10 +180,10 @@ describe("layers", function() {
]);
// AND RESET!
// await browser.setValueSafe(wd.$("min-zoom", "input"), "")
// await browser.click(wd.$("max-zoom", "input"));
// await driver.setValue(driver.getDataAttribute("min-zoom", "input"), "")
// await driver.click(driver.getDataAttribute("max-zoom", "input"));
// var styleObj = await helper.getStyleStore(browser);
// var styleObj = await driver.getStyleStore();
// assert.deepEqual(styleObj.layers, [
// {
@@ -219,13 +196,12 @@ describe("layers", function() {
it("max-zoom", async function() {
var bgId = await createBackground();
const elem = await $(wd.$("layer-list-item:background:"+bgId));
await elem.click();
await browser.setValueSafe(wd.$("max-zoom", 'input[type="text"]'), 1)
const elem2 = await $(wd.$("layer-editor.layer-id", "input"));
await elem2.click();
await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
await driver.setValue(driver.getDataAttribute("max-zoom", 'input[type="text"]'), 1)
var styleObj = await helper.getStyleStore(browser);
await driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": 'background:'+bgId,
@@ -239,13 +215,12 @@ describe("layers", function() {
var bgId = await createBackground();
var id = uuid();
const elem = await $(wd.$("layer-list-item:background:"+bgId));
await elem.click();
await browser.setValueSafe(wd.$("layer-comment", "textarea"), id);
const elem2 = await $(wd.$("layer-editor.layer-id", "input"));
await elem2.click();
await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
await driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), id);
var styleObj = await helper.getStyleStore(browser);
await driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": 'background:'+bgId,
@@ -258,11 +233,11 @@ describe("layers", function() {
// Unset it again.
// TODO: This fails
// await browser.setValueSafe(wd.$("layer-comment", "textarea"), "");
// await browser.click(wd.$("min-zoom", "input"));
// await browser.flushReactUpdates();
// await driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), "");
// await driver.click(driver.getDataAttribute("min-zoom", "input"));
// await driver.zeroTimeout();
// var styleObj = await helper.getStyleStore(browser);
// var styleObj = await driver.getStyleStore();
// assert.deepEqual(styleObj.layers, [
// {
// "id": 'background:'+bgId,
@@ -274,12 +249,11 @@ describe("layers", function() {
it("color", null, async function() {
var bgId = await createBackground();
await browser.click(wd.$("layer-list-item:background:"+bgId));
await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
await browser.click(wd.$("spec-field:background-color", "input"))
// await browser.debug();
await driver.click(driver.getDataAttribute("spec-field:background-color", "input"));
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": 'background:'+bgId,
@@ -311,16 +285,18 @@ describe("layers", function() {
it.skip("parse error", async function() {
var bgId = await createBackground();
await browser.click(wd.$("layer-list-item:background:"+bgId));
await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
var errorSelector = ".CodeMirror-lint-marker-error";
assert.equal(await browser.isExisting(errorSelector), false);
assert.equal(await driver.isExisting(errorSelector), false);
await browser.click(".CodeMirror")
await browser.keys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {");
await browser.waitForExist(errorSelector)
await driver.click(".CodeMirror");
await driver.keys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {");
await driver.waitForExist(errorSelector);
await browser.click(wd.$("layer-editor.layer-id"));
await driver.click(driver.getDataAttribute("layer-editor.layer-id"));
});
});
})
@@ -328,14 +304,13 @@ describe("layers", function() {
describe('fill', function () {
it("add", async function() {
// await browser.debug();
var id = await helper.modal.addLayer.fill({
var id = await driver.fillLayersModal({
type: "fill",
layer: "example"
});
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": id,
@@ -351,12 +326,12 @@ describe("layers", function() {
describe('line', function () {
it("add", async function() {
var id = await helper.modal.addLayer.fill({
var id = await driver.fillLayersModal({
type: "line",
layer: "example"
});
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": id,
@@ -374,12 +349,12 @@ describe("layers", function() {
describe('symbol', function () {
it("add", async function() {
var id = await helper.modal.addLayer.fill({
var id = await driver.fillLayersModal({
type: "symbol",
layer: "example"
});
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": id,
@@ -392,12 +367,12 @@ describe("layers", function() {
describe('raster', function () {
it("add", async function() {
var id = await helper.modal.addLayer.fill({
var id = await driver.fillLayersModal({
type: "raster",
layer: "raster"
});
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": id,
@@ -410,12 +385,12 @@ describe("layers", function() {
describe('circle', function () {
it("add", async function() {
var id = await helper.modal.addLayer.fill({
var id = await driver.fillLayersModal({
type: "circle",
layer: "example"
});
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": id,
@@ -429,12 +404,12 @@ describe("layers", function() {
describe('fill extrusion', function () {
it("add", async function() {
var id = await helper.modal.addLayer.fill({
var id = await driver.fillLayersModal({
type: "fill-extrusion",
layer: "example"
});
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.deepEqual(styleObj.layers, [
{
"id": id,
@@ -448,41 +423,36 @@ describe("layers", function() {
describe("groups", function() {
it("simple", async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
await browser.acceptAlert();
await driver.setStyle(["geojson:example"]);
await helper.modal.addLayer.open();
await helper.modal.addLayer.fill({
await driver.openLayersModal();
await driver.fillLayersModal({
id: "foo",
type: "background"
})
await helper.modal.addLayer.open();
await helper.modal.addLayer.fill({
await driver.openLayersModal();
await driver.fillLayersModal({
id: "foo_bar",
type: "background"
})
await helper.modal.addLayer.open();
await helper.modal.addLayer.fill({
await driver.openLayersModal();
await driver.fillLayersModal({
id: "foo_bar_baz",
type: "background"
})
const groupEl = await $(wd.$("layer-list-group:foo-0"));
await groupEl.isDisplayed();
assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo")), true);
assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar")), false);
assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz")), false);
assert.equal(await (await $(wd.$("layer-list-item:foo"))).isDisplayedInViewport(), true);
assert.equal(await (await $(wd.$("layer-list-item:foo_bar"))).isDisplayedInViewport(), false);
assert.equal(await (await $(wd.$("layer-list-item:foo_bar_baz"))).isDisplayedInViewport(), false);
await driver.click(driver.getDataAttribute("layer-list-group:foo-0"));
await groupEl.click();
assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo")), true);
assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar")), true);
assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz")), true);
assert.equal(await (await $(wd.$("layer-list-item:foo"))).isDisplayedInViewport(), true);
assert.equal(await (await $(wd.$("layer-list-item:foo_bar"))).isDisplayedInViewport(), true);
assert.equal(await (await $(wd.$("layer-list-item:foo_bar_baz"))).isDisplayedInViewport(), true);
})
})
});

19
test/functional/map/index.js
View File

@@ -1,16 +1,10 @@
var config = require("../../config/specs");
var helper = require("../helper");
var driver = require("../driver");
describe("map", function() {
describe.skip("zoom level", function() {
it("via url", async function() {
var zoomLevel = "12.37"
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
])+"#"+zoomLevel+"/41.3805/2.1635");
await browser.alertAccept();
var zoomLevel = "12.37";
await driver.setStyle(["geojson:example"], zoomLevel);
await browser.waitUntil(async function () {
return (
await browser.isVisible(".maplibregl-ctrl-zoom")
@@ -20,12 +14,9 @@ describe("map", function() {
})
it("via map controls", async function() {
var zoomLevel = 12.37;
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
])+"#"+zoomLevel+"/41.3805/2.1635");
await browser.alertAccept();
await driver.setStyle(["geojson:example"], zoomLevel);
await browser.click(".maplibregl-ctrl-zoom-in")
await driver.click(".maplibregl-ctrl-zoom-in");
await browser.waitUntil(async function () {
var text = await browser.getText(".maplibregl-ctrl-zoom")
return text === "Zoom level: "+(zoomLevel+1);

174
test/functional/modals/index.js
View File

@@ -1,93 +1,53 @@
var assert = require('assert');
var fs = require("fs");
var wd = require("../../wd-helper");
var config = require("../../config/specs");
var helper = require("../helper");
async function closeModal(wdKey) {
const selector = wd.$(wdKey);
await browser.waitUntil(async function() {
const elem = await $(selector);
return await elem.isDisplayedInViewport();
});
const closeBtnSelector = await $(wd.$(wdKey+".close-modal"));
await closeBtnSelector.click();
await browser.waitUntil(async function() {
return await browser.execute((selector) => {
return !document.querySelector(selector);
}, selector);
});
}
var driver = require("../driver");
describe("modals", function() {
describe("open", function() {
var styleFilePath = __dirname+"/../../example-style.json";
var styleFileData = JSON.parse(fs.readFileSync(styleFilePath));
beforeEach(async function() {
await browser.url(config.baseUrl+"?debug");
const elem = await $(".maputnik-toolbar-link");
await elem.waitForExist();
await browser.flushReactUpdates();
const elem2 = await $(wd.$("nav:open"));
await elem2.click();
await browser.flushReactUpdates();
await driver.setStyle();
await driver.click(driver.getDataAttribute("nav:open"));
await driver.zeroTimeout();
});
it("close", async function() {
await closeModal("modal:open");
await driver.closeModal("modal:open");
});
// "chooseFile" command currently not available for wdio v5 https://github.com/webdriverio/webdriverio/pull/3632
it.skip("upload", async function() {
const elem = await $("*[type='file']");
await elem.waitForExist();
await browser.chooseFile("*[type='file']", styleFilePath);
await driver.chooseExampleFile();
var styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleFileData, styleObj);
var styleObj = await driver.getStyleStore();
assert.deepEqual(await driver.getExampleFileData(), styleObj);
});
it("load from url", async function() {
var styleFileUrl = helper.getGeoServerUrl("example-style.json");
var styleFileUrl = driver.getGeoServerUrl("example-style.json");
await browser.setValueSafe(wd.$("modal:open.url.input"), styleFileUrl);
await driver.setValue(driver.getDataAttribute("modal:open.url.input"), styleFileUrl);
const selector = await $(wd.$("modal:open.url.button"));
await selector.click();
await driver.click(driver.getDataAttribute("modal:open.url.button"))
// Allow the network request to happen
// NOTE: Its localhost so this should be fast.
await browser.pause(300);
await driver.sleep(300);
var styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleFileData, styleObj);
var styleObj = await driver.getStyleStore();
assert.deepEqual(await driver.getExampleFileData(), styleObj);
});
// TODO: Need to work out how to mock out the end points
it("gallery")
})
describe("shortcuts", function() {
it("open/close", async function() {
await browser.url(config.baseUrl+"?debug");
await driver.setStyle();
const elem = await $(".maputnik-toolbar-link");
await elem.waitForExist();
await browser.flushReactUpdates();
await driver.typeKeys(["?"]);
await browser.keys(["?"]);
const modalEl = await $(wd.$("modal:shortcuts"))
const modalEl = await $(driver.getDataAttribute("modal:shortcuts"))
assert(await modalEl.isDisplayed());
await closeModal("modal:shortcuts");
await driver.closeModal("modal:shortcuts");
});
});
@@ -95,19 +55,13 @@ describe("modals", function() {
describe("export", function() {
beforeEach(async function() {
await browser.url(config.baseUrl+"?debug");
const elem = await $(".maputnik-toolbar-link");
await elem.waitForExist();
await browser.flushReactUpdates();
const elem2 = await $(wd.$("nav:export"));
await elem2.click();
await browser.flushReactUpdates();
await driver.setStyle();
await driver.click(driver.getDataAttribute("nav:export"));
await driver.zeroTimeout();
});
it("close", async function() {
await closeModal("modal:export");
await driver.closeModal("modal:export");
});
// TODO: Work out how to download a file and check the contents
@@ -123,97 +77,79 @@ describe("modals", function() {
describe("inspect", function() {
it("toggle", async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
await browser.acceptAlert();
await driver.setStyle(["geojson:example"]);
const selectBox = await $(wd.$("nav:inspect", "select"));
await selectBox.selectByAttribute('value', "inspect");
await driver.selectFromDropdown(driver.getDataAttribute("nav:inspect", "select"), "inspect");
})
})
describe("style settings", function() {
beforeEach(async function() {
await browser.url(config.baseUrl+"?debug");
const elem = await $(".maputnik-toolbar-link");
await elem.waitForExist();
await browser.flushReactUpdates();
const elem2 = await $(wd.$("nav:settings"));
await elem2.click();
await browser.flushReactUpdates();
await driver.setStyle();
await driver.click(driver.getDataAttribute("nav:settings"));
await driver.zeroTimeout();
});
it("name", async function() {
await browser.setValueSafe(wd.$("modal:settings.name"), "foobar")
const elem = await $(wd.$("modal:settings.owner"));
await elem.click();
await browser.flushReactUpdates();
await driver.setValue(driver.getDataAttribute("modal:settings.name"), "foobar");
await driver.click(driver.getDataAttribute("modal:settings.owner"));
await driver.zeroTimeout();
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.equal(styleObj.name, "foobar");
})
it("owner", async function() {
await browser.setValueSafe(wd.$("modal:settings.owner"), "foobar")
const elem = await $(wd.$("modal:settings.name"));
await elem.click();
await browser.flushReactUpdates();
await driver.setValue(driver.getDataAttribute("modal:settings.owner"), "foobar")
await driver.click(driver.getDataAttribute("modal:settings.name"));
await driver.zeroTimeout();
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.equal(styleObj.owner, "foobar");
})
it("sprite url", async function() {
await browser.setValueSafe(wd.$("modal:settings.sprite"), "http://example.com")
const elem = await $(wd.$("modal:settings.name"));
await elem.click();
await browser.flushReactUpdates();
await driver.setValue(driver.getDataAttribute("modal:settings.sprite"), "http://example.com")
await driver.click(driver.getDataAttribute("modal:settings.name"));
await driver.zeroTimeout();
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.equal(styleObj.sprite, "http://example.com");
})
it("glyphs url", async function() {
var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"
await browser.setValueSafe(wd.$("modal:settings.glyphs"), glyphsUrl)
const elem = await $(wd.$("modal:settings.name"));
await elem.click();
await browser.flushReactUpdates();
await driver.setValue(driver.getDataAttribute("modal:settings.glyphs"), glyphsUrl);
await driver.click(driver.getDataAttribute("modal:settings.name"));
await driver.zeroTimeout();
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.equal(styleObj.glyphs, glyphsUrl);
})
it("maptiler access token", async function() {
var apiKey = "testing123";
await browser.setValueSafe(wd.$("modal:settings.maputnik:openmaptiles_access_token"), apiKey);
const elem = await $(wd.$("modal:settings.name"));
await elem.click();
await browser.flushReactUpdates();
await driver.setValue(driver.getDataAttribute("modal:settings.maputnik:openmaptiles_access_token"), apiKey);
await driver.click(driver.getDataAttribute("modal:settings.name"));
await driver.zeroTimeout();
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.equal(styleObj.metadata["maputnik:openmaptiles_access_token"], apiKey);
})
it("thunderforest access token", async function() {
var apiKey = "testing123";
await browser.setValueSafe(wd.$("modal:settings.maputnik:thunderforest_access_token"), apiKey);
const elem = await $(wd.$("modal:settings.name"));
await elem.click();
await browser.flushReactUpdates();
await driver.setValue(driver.getDataAttribute("modal:settings.maputnik:thunderforest_access_token"), apiKey);
await driver.click(driver.getDataAttribute("modal:settings.name"));
await driver.zeroTimeout();
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.equal(styleObj.metadata["maputnik:thunderforest_access_token"], apiKey);
})
it("style renderer", async function() {
const selector = await $(wd.$("modal:settings.maputnik:renderer"));
await selector.selectByAttribute('value', "ol");
const elem = await $(wd.$("modal:settings.name"));
await elem.click();
await browser.flushReactUpdates();
await driver.selectFromDropdown(driver.getDataAttribute("modal:settings.maputnik:renderer"), "ol");
await driver.click(driver.getDataAttribute("modal:settings.name"));
await driver.zeroTimeout();
var styleObj = await helper.getStyleStore(browser);
var styleObj = await driver.getStyleStore();
assert.equal(styleObj.metadata["maputnik:renderer"], "ol");
})
})

97
test/functional/screenshots/index.js
View File

@@ -1,6 +1,4 @@
var config = require("../../config/specs");
var helper = require("../helper");
var wd = require("../../wd-helper");
var driver = require("../driver");
// These will get used in the marketing material. They are also useful to do a quick manual check of the styling across browsers
@@ -8,104 +6,57 @@ var wd = require("../../wd-helper");
describe('screenshots', function() {
beforeEach(async function() {
await browser.setWindowSize(1280, 800)
await driver.setWindowSize(1280, 800)
})
it("front_page", async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
await browser.acceptAlert();
const elem = await $(".maputnik-toolbar-link");
await elem.waitForExist();
await browser.flushReactUpdates();
await driver.setStyle(["geojson:example"]);
await browser.takeScreenShot("/front_page.png")
await driver.takeScreenShot("/front_page.png")
})
it("open", async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
await browser.acceptAlert();
const elem = await $(".maputnik-toolbar-link");
await elem.waitForExist();
await browser.flushReactUpdates();
await driver.setStyle(["geojson:example"]);
await driver.click(driver.getDataAttribute("nav:open"));
await driver.zeroTimeout();
const nav_open = await $(wd.$("nav:open"));
await nav_open.click();
await nav_open.waitForExist();
await browser.flushReactUpdates();
await browser.takeScreenShot("/open.png")
await driver.takeScreenShot("/open.png")
})
it("export", async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
await browser.acceptAlert();
const elem = await $(".maputnik-toolbar-link")
await elem.waitForExist()
await browser.flushReactUpdates();
await driver.setStyle(["geojson:example"]);
const nav_export = await $(wd.$("nav:export"));
await nav_export.click();
await nav_export.waitForExist();
await browser.flushReactUpdates();
await driver.click(driver.getDataAttribute("nav:export"));
await driver.zeroTimeout();
await browser.takeScreenShot("/export.png")
await driver.takeScreenShot("/export.png")
})
it("sources", async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
await browser.acceptAlert();
const elem = await $(".maputnik-toolbar-link")
await elem.waitForExist()
await browser.flushReactUpdates();
await driver.setStyle(["geojson:example"]);
const nav_sources = await $(wd.$("nav:sources"));
await nav_sources.click();
await nav_sources.waitForExist();
await browser.flushReactUpdates();
await driver.click(driver.getDataAttribute("nav:sources"));
await driver.zeroTimeout();
await browser.takeScreenShot("/sources.png")
await driver.takeScreenShot("/sources.png")
})
it("style settings", async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
await browser.acceptAlert();
const elem = await $(".maputnik-toolbar-link")
await elem.waitForExist()
await browser.flushReactUpdates();
await driver.setStyle(["geojson:example"]);
const nav_settings = await $(wd.$("nav:settings"));
await nav_settings.click();
await nav_settings.waitForExist();
await browser.flushReactUpdates();
await driver.click(driver.getDataAttribute("nav:settings"));
await driver.zeroTimeout();
await browser.takeScreenShot("/settings.png")
await driver.takeScreenShot("/settings.png")
})
it("inspect", async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
await browser.acceptAlert();
const elem = await $(".maputnik-toolbar-link")
await elem.waitForExist()
await browser.flushReactUpdates();
await driver.setStyle(["geojson:example"]);
const selectBox = await $(wd.$("nav:inspect", "select"));
await selectBox.selectByAttribute('value', 'inspect');
await driver.selectFromDropdown(driver.getDataAttribute("nav:inspect", "select"), 'inspect');
await driver.zeroTimeout();
await browser.flushReactUpdates();
await browser.takeScreenShot("/inspect.png")
await driver.takeScreenShot("/inspect.png")
})
})

63
test/functional/util/webdriverio-ext.js
View File

@@ -1,63 +0,0 @@
var artifacts = require("../../artifacts");
var path = require("path");
const extendWebdriverIO = async function() {
await browser.setTimeout({ 'script': 20 * 1000 });
await browser.setTimeout({ 'implicit': 20 * 1000 });
var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots");
/**
* Sometimes chrome driver can result in the wrong text.
*
* See <https://github.com/webdriverio/webdriverio/issues/1886>
*/
try {
await browser.addCommand('setValueSafe', async function (selector, text) {
for (var i = 0; i < 10; i++) {
const elem = await $(selector);
await elem.waitForDisplayed(500);
var elements = await browser.findElements("css selector", selector);
if (elements.length > 1) {
throw "Too many elements found";
}
const elem2 = await $(selector);
await elem2.setValue(text);
var browserText = await elem2.getValue();
if (browserText == text) {
return;
}
else {
console.error("Warning: setValue failed, trying again");
}
}
// Wait for change events to fire and state updated
await browser.flushReactUpdates();
})
await browser.addCommand('takeScreenShot', async function (filepath) {
var savepath = path.join(SCREENSHOTS_PATH, filepath);
await browser.saveScreenshot(savepath);
});
await browser.addCommand('flushReactUpdates', async function () {
await browser.executeAsync(function (done) {
// For any events to propagate
setTimeout(function () {
// For the DOM to be updated.
setTimeout(done, 0);
}, 0)
})
})
} catch (err) {
console.error(">>> Ignored error: " + err);
}
}
module.exports = extendWebdriverIO;

6
test/wd-helper.js
View File

@@ -1,6 +0,0 @@
module.exports = {
"$": function(key, selector) {
selector = selector || "";
return "*[data-wd-key='"+key+"'] "+selector;
}
}