Use node 16.x

It required converting mocha tests code into async since [@wdio/sync is
deprecated](https://webdriver.io/docs/sync-vs-async/) starting with
node v16.
It removed the dependency on fibers and on [node-gyp + python](https://
webdriver.io/docs/sync-vs-async/#common-issues-in-sync-mode) indirectly
though which is a great thing.

Also moved away from node-sass to sass since [node-sass is deprecated]
(https://sass-lang.com/blog/libsass-is-deprecated).
This commit is contained in:
Filip Proborszcz 2022-04-06 14:05:15 +02:00
parent 87745f1fc9
commit e34c1ca4be
14 changed files with 8441 additions and 8219 deletions

View file

@ -48,7 +48,7 @@ jobs:
fail-fast: false
matrix:
os: [ubuntu-latest, windows-latest, macos-latest]
node-version: [10.x, 12.x, 14.x]
node-version: [12.x, 14.x, 16.x]
steps:
- uses: actions/checkout@v2
@ -146,9 +146,9 @@ jobs:
name: maputnik-windows
path: ./src/github.com/maputnik/desktop/bin/windows/
# build and test the editor in standalone-chrome
test_selenium_standalone_chrome:
name: "test/standalone-chrome (${{ matrix.os }})"
# build and test the editor
test_selenium_standalone:
name: "test/standalone-${{ matrix.browser }} (${{ matrix.os }})"
runs-on: ${{ matrix.os }}
if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
@ -157,7 +157,8 @@ jobs:
fail-fast: false
matrix:
os: [ubuntu-latest]
node-version: [10]
node-version: [16]
browser: [chrome, firefox]
container:
image: node:${{ matrix.node-version }}
@ -165,7 +166,7 @@ jobs:
services:
selenium:
image: selenium/standalone-chrome:3.141.59
image: selenium/standalone-${{ matrix.browser }}
ports:
- 4444:4444
@ -178,9 +179,11 @@ jobs:
restore-keys: |
${{ runner.os }}-node-
- run: npm install
- run: TEST_NETWORK=testhost DOCKER_HOST=selenium npm test
- run: ./node_modules/.bin/istanbul report --include build/coverage/coverage.json --dir build/coverage html lcov
- name: artifacts/coverage
- run: BROWSER=${{ matrix.browser }} TEST_NETWORK=testhost DOCKER_HOST=selenium npm run test
- if: ${{ matrix.browser == 'chrome' }}
run: ./node_modules/.bin/istanbul report --include build/coverage/coverage.json --dir build/coverage html lcov
- if: ${{ matrix.browser == 'chrome' }}
name: artifacts/coverage
uses: actions/upload-artifact@v1
with:
name: coverage
@ -188,45 +191,5 @@ jobs:
- name: artifacts/screenshots
uses: actions/upload-artifact@v1
with:
name: screenshots-chrome
name: screenshots-${{ matrix.browser }}
path: build/screenshots
# build and test the editor in standalone-firefox
test_selenium_standalone_firefox:
name: "test/standalone-firefox (${{ matrix.os }})"
runs-on: ${{ matrix.os }}
if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
strategy:
fail-fast: false
matrix:
os: [ubuntu-latest]
node-version: [10]
container:
image: node:${{ matrix.node-version }}
options: --network-alias testhost
services:
selenium:
image: selenium/standalone-firefox:3.141.59
ports:
- 4444:4444
steps:
- uses: actions/checkout@v2
- uses: actions/cache@v1
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- run: npm install
- run: BROWSER=firefox TEST_NETWORK=testhost DOCKER_HOST=selenium npm test
- name: artifacts/screenshots
uses: actions/upload-artifact@v1
with:
name: screenshots-firefox
path: build/screenshots

15615
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -31,6 +31,7 @@
"@mapbox/mapbox-gl-style-spec": "^13.15.0",
"@mdi/react": "^1.4.0",
"array-move": "^2.2.1",
"caniuse-lite": "^1.0.30001325",
"classnames": "^2.2.6",
"codemirror": "^5.52.0",
"color": "^3.1.2",
@ -66,6 +67,7 @@
"react-motion": "^0.5.2",
"react-sortable-hoc": "^1.11.0",
"reconnecting-websocket": "^4.4.0",
"sass": "^1.49.9",
"slugify": "^1.4.5",
"string-hash": "^1.1.3",
"url": "^0.11.0"
@ -135,7 +137,6 @@
"@wdio/mocha-framework": "^6.1.14",
"@wdio/selenium-standalone-service": "^6.1.14",
"@wdio/spec-reporter": "^6.1.14",
"@wdio/sync": "^6.1.14",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.1.0",
"babel-plugin-istanbul": "^6.0.0",
@ -155,7 +156,6 @@
"istanbul-lib-coverage": "^3.0.0",
"mkdirp": "^1.0.4",
"mocha": "^7.1.2",
"node-sass": "^4.14.1",
"react-hot-loader": "^4.12.19",
"sass-loader": "^8.0.2",
"selenium-standalone": "^6.17.0",

View file

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

View file

@ -21,14 +21,13 @@ module.exports = {
var port = geoserver.address().port;
return "http://"+testNetwork+":"+port+"/"+urlPath;
},
getStyleStore: function(browser) {
var result = browser.executeAsync(function(done) {
getStyleStore: async function(browser) {
return await browser.executeAsync(function(done) {
window.debug.get("maputnik", "styleStore").latestStyle(done);
})
return result;
});
},
getRevisionStore: function(browser) {
var result = browser.execute(function(done) {
getRevisionStore: async function(browser) {
var result = await browser.execute(function() {
var rs = window.debug.get("maputnik", "revisionStore")
return {
@ -40,22 +39,22 @@ module.exports = {
},
modal: {
addLayer: {
open: function() {
const selector = $(wd.$('layer-list:add-layer'));
selector.click();
open: async function() {
const selector = await $(wd.$('layer-list:add-layer'));
await selector.click();
// Wait for events
browser.flushReactUpdates();
await browser.flushReactUpdates();
const elem = $(wd.$('modal:add-layer'));
elem.waitForExist();
elem.isDisplayed();
elem.isDisplayedInViewport();
const elem = await $(wd.$('modal:add-layer'));
await elem.waitForExist();
await elem.isDisplayed();
await elem.isDisplayedInViewport();
// Wait for events
browser.flushReactUpdates();
await browser.flushReactUpdates();
},
fill: function(opts) {
fill: async function(opts) {
var type = opts.type;
var layer = opts.layer;
var id;
@ -66,18 +65,18 @@ module.exports = {
id = type+":"+uuid();
}
const selectBox = $(wd.$("add-layer.layer-type", "select"));
selectBox.selectByAttribute('value', type);
browser.flushReactUpdates();
const selectBox = await $(wd.$("add-layer.layer-type", "select"));
await selectBox.selectByAttribute('value', type);
await browser.flushReactUpdates();
browser.setValueSafe(wd.$("add-layer.layer-id", "input"), id);
await browser.setValueSafe(wd.$("add-layer.layer-id", "input"), id);
if(layer) {
browser.setValueSafe(wd.$("add-layer.layer-source-block", "input"), layer);
await browser.setValueSafe(wd.$("add-layer.layer-source-block", "input"), layer);
}
browser.flushReactUpdates();
const elem_addLayer = $(wd.$("add-layer"));
elem_addLayer.click();
await browser.flushReactUpdates();
const elem_addLayer = await $(wd.$("add-layer"));
await elem_addLayer.click();
return id;
}

View file

@ -10,8 +10,8 @@ describe("history", function() {
let redoKeyCombo;
let redoKeyComboReset;
before(function() {
const isMac = browser.execute(function() {
before(async function() {
const isMac = await browser.execute(function() {
return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
});
undoKeyCombo = ['Meta', 'z'];
@ -23,25 +23,25 @@ describe("history", function() {
/**
* See <https://github.com/webdriverio/webdriverio/issues/1126>
*/
it.skip("undo/redo", function() {
it.skip("undo/redo", async function() {
var styleObj;
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.acceptAlert();
await browser.acceptAlert();
helper.modal.addLayer.open();
await helper.modal.addLayer.open();
styleObj = helper.getStyleStore(browser);
styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, []);
helper.modal.addLayer.fill({
await helper.modal.addLayer.fill({
id: "step 1",
type: "background"
})
styleObj = helper.getStyleStore(browser);
styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": "step 1",
@ -49,13 +49,13 @@ describe("history", function() {
}
]);
helper.modal.addLayer.open();
helper.modal.addLayer.fill({
await helper.modal.addLayer.open();
await helper.modal.addLayer.fill({
id: "step 2",
type: "background"
})
styleObj = helper.getStyleStore(browser);
styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": "step 1",
@ -67,9 +67,9 @@ describe("history", function() {
}
]);
browser.keys(undoKeyCombo)
browser.keys(undoKeyComboReset);
styleObj = helper.getStyleStore(browser);
await browser.keys(undoKeyCombo)
await browser.keys(undoKeyComboReset);
styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": "step 1",
@ -77,15 +77,15 @@ describe("history", function() {
}
]);
browser.keys(undoKeyCombo)
browser.keys(undoKeyComboReset);
styleObj = helper.getStyleStore(browser);
await browser.keys(undoKeyCombo)
await browser.keys(undoKeyComboReset);
styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
]);
browser.keys(redoKeyCombo)
browser.keys(redoKeyComboReset);
styleObj = helper.getStyleStore(browser);
await browser.keys(redoKeyCombo)
await browser.keys(redoKeyComboReset);
styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": "step 1",
@ -93,9 +93,9 @@ describe("history", function() {
}
]);
browser.keys(redoKeyCombo)
browser.keys(redoKeyComboReset);
styleObj = helper.getStyleStore(browser);
await browser.keys(redoKeyCombo)
await browser.keys(redoKeyComboReset);
styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": "step 1",

View file

@ -1,11 +1,12 @@
var config = require("../config/specs");
var helper = require("./helper");
var extendWebdriverIO = require("./util/webdriverio-ext");
describe('maputnik', function() {
before(function(done) {
require("./util/webdriverio-ext");
before(async function(done) {
await extendWebdriverIO();
helper.startGeoserver(done);
});
@ -13,18 +14,18 @@ describe('maputnik', function() {
helper.stopGeoserver(done);
});
beforeEach(function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
beforeEach(async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example",
"raster:raster"
]));
browser.acceptAlert();
browser.execute(function() {
await browser.acceptAlert();
await browser.execute(function() {
localStorage.setItem("survey", true);
});
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
const elem = await $(".maputnik-toolbar-link");
await elem.waitForExist();
await browser.flushReactUpdates();
});
// -------- setup --------

View file

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

View file

@ -6,27 +6,27 @@ var wd = require("../../wd-helper");
describe("layers", function() {
beforeEach(function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
beforeEach(async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example",
"raster:raster"
]));
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
await browser.acceptAlert();
const elem = await $(".maputnik-toolbar-link");
await elem.waitForExist();
await browser.flushReactUpdates();
helper.modal.addLayer.open();
await helper.modal.addLayer.open();
});
describe("ops", function() {
it("delete", function() {
it("delete", async function() {
var styleObj;
var id = helper.modal.addLayer.fill({
var id = await helper.modal.addLayer.fill({
type: "background"
})
styleObj = helper.getStyleStore(browser);
styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": id,
@ -34,21 +34,21 @@ describe("layers", function() {
},
]);
const elem = $(wd.$("layer-list-item:"+id+":delete", ""));
elem.click();
const elem = await $(wd.$("layer-list-item:"+id+":delete", ""));
await elem.click();
styleObj = helper.getStyleStore(browser);
styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
]);
});
it("duplicate", function() {
it("duplicate", async function() {
var styleObj;
var id = helper.modal.addLayer.fill({
var id = await helper.modal.addLayer.fill({
type: "background"
})
styleObj = helper.getStyleStore(browser);
styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": id,
@ -56,10 +56,10 @@ describe("layers", function() {
},
]);
const elem = $(wd.$("layer-list-item:"+id+":copy", ""));
elem.click();
const elem = await $(wd.$("layer-list-item:"+id+":copy", ""));
await elem.click();
styleObj = helper.getStyleStore(browser);
styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": id+"-copy",
@ -72,13 +72,13 @@ describe("layers", function() {
]);
});
it("hide", function() {
it("hide", async function() {
var styleObj;
var id = helper.modal.addLayer.fill({
var id = await helper.modal.addLayer.fill({
type: "background"
})
styleObj = helper.getStyleStore(browser);
styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": id,
@ -86,10 +86,10 @@ describe("layers", function() {
},
]);
const elem = $(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
elem.click();
const elem = await $(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
await elem.click();
styleObj = helper.getStyleStore(browser);
styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": id,
@ -100,9 +100,9 @@ describe("layers", function() {
},
]);
elem.click();
await elem.click();
styleObj = helper.getStyleStore(browser);
styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": id,
@ -124,12 +124,12 @@ describe("layers", function() {
describe('background', function () {
it("add", function() {
var id = helper.modal.addLayer.fill({
it("add", async function() {
var id = await helper.modal.addLayer.fill({
type: "background"
})
var styleObj = helper.getStyleStore(browser);
var styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": id,
@ -139,19 +139,19 @@ describe("layers", function() {
});
describe("modify", function() {
function createBackground() {
async function createBackground() {
// Setup
var id = uuid();
const selectBox = $(wd.$("add-layer.layer-type", "select"));
selectBox.selectByAttribute('value', "background");
browser.flushReactUpdates();
browser.setValueSafe(wd.$("add-layer.layer-id", "input"), "background:"+id);
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);
const elem = $(wd.$("add-layer"));
elem.click();
const elem = await $(wd.$("add-layer"));
await elem.click();
var styleObj = helper.getStyleStore(browser);
var styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": 'background:'+id,
@ -164,18 +164,18 @@ describe("layers", function() {
// ====> THESE SHOULD BE FROM THE SPEC
describe("layer", function() {
it("expand/collapse");
it("id", function() {
var bgId = createBackground();
it("id", async function() {
var bgId = await createBackground();
const elem = $(wd.$("layer-list-item:background:"+bgId));
elem.click();
const elem = await $(wd.$("layer-list-item:background:"+bgId));
await elem.click();
var id = uuid();
browser.setValueSafe(wd.$("layer-editor.layer-id", "input"), "foobar:"+id)
const elem2 = $(wd.$("min-zoom"));
elem2.click();
await browser.setValueSafe(wd.$("layer-editor.layer-id", "input"), "foobar:"+id)
const elem2 = await $(wd.$("min-zoom"));
await elem2.click();
var styleObj = helper.getStyleStore(browser);
var styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": 'foobar:'+id,
@ -184,16 +184,16 @@ describe("layers", function() {
]);
});
it("min-zoom", function() {
var bgId = createBackground();
it("min-zoom", async function() {
var bgId = await createBackground();
const elem = $(wd.$("layer-list-item:background:"+bgId));
elem.click();
browser.setValueSafe(wd.$("min-zoom", 'input[type="text"]'), 1)
const elem2 = $(wd.$("layer-editor.layer-id", "input"));
elem2.click();
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();
var styleObj = helper.getStyleStore(browser);
var styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": 'background:'+bgId,
@ -203,10 +203,10 @@ describe("layers", function() {
]);
// AND RESET!
// browser.setValueSafe(wd.$("min-zoom", "input"), "")
// browser.click(wd.$("max-zoom", "input"));
// await browser.setValueSafe(wd.$("min-zoom", "input"), "")
// await browser.click(wd.$("max-zoom", "input"));
// var styleObj = helper.getStyleStore(browser);
// var styleObj = await helper.getStyleStore(browser);
// assert.deepEqual(styleObj.layers, [
// {
@ -216,16 +216,16 @@ describe("layers", function() {
// ]);
});
it("max-zoom", function() {
var bgId = createBackground();
it("max-zoom", async function() {
var bgId = await createBackground();
const elem = $(wd.$("layer-list-item:background:"+bgId));
elem.click();
browser.setValueSafe(wd.$("max-zoom", 'input[type="text"]'), 1)
const elem2 = $(wd.$("layer-editor.layer-id", "input"));
elem2.click();
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();
var styleObj = helper.getStyleStore(browser);
var styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": 'background:'+bgId,
@ -235,17 +235,17 @@ describe("layers", function() {
]);
});
it("comments", function() {
var bgId = createBackground();
it("comments", async function() {
var bgId = await createBackground();
var id = uuid();
const elem = $(wd.$("layer-list-item:background:"+bgId));
elem.click();
browser.setValueSafe(wd.$("layer-comment", "textarea"), id);
const elem2 = $(wd.$("layer-editor.layer-id", "input"));
elem2.click();
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();
var styleObj = helper.getStyleStore(browser);
var styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": 'background:'+bgId,
@ -258,11 +258,11 @@ describe("layers", function() {
// Unset it again.
// TODO: This fails
// browser.setValueSafe(wd.$("layer-comment", "textarea"), "");
// browser.click(wd.$("min-zoom", "input"));
// browser.flushReactUpdates();
// await browser.setValueSafe(wd.$("layer-comment", "textarea"), "");
// await browser.click(wd.$("min-zoom", "input"));
// await browser.flushReactUpdates();
// var styleObj = helper.getStyleStore(browser);
// var styleObj = await helper.getStyleStore(browser);
// assert.deepEqual(styleObj.layers, [
// {
// "id": 'background:'+bgId,
@ -271,16 +271,15 @@ describe("layers", function() {
// ]);
});
it("color", null, function() {
var bgId = createBackground();
var id = uuid();
it("color", null, async function() {
var bgId = await createBackground();
browser.click(wd.$("layer-list-item:background:"+bgId));
await browser.click(wd.$("layer-list-item:background:"+bgId));
browser.click(wd.$("spec-field:background-color", "input"))
// browser.debug();
await browser.click(wd.$("spec-field:background-color", "input"))
// await browser.debug();
var styleObj = helper.getStyleStore(browser);
var styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": 'background:'+bgId,
@ -309,35 +308,34 @@ describe("layers", function() {
it("modify");
// TODO
it.skip("parse error", function() {
var bgId = createBackground();
var id = uuid();
it.skip("parse error", async function() {
var bgId = await createBackground();
browser.click(wd.$("layer-list-item:background:"+bgId));
await browser.click(wd.$("layer-list-item:background:"+bgId));
var errorSelector = ".CodeMirror-lint-marker-error";
assert.equal(browser.isExisting(errorSelector), false);
assert.equal(await browser.isExisting(errorSelector), false);
browser.click(".CodeMirror")
browser.keys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {");
browser.waitForExist(errorSelector)
await browser.click(".CodeMirror")
await browser.keys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {");
await browser.waitForExist(errorSelector)
browser.click(wd.$("layer-editor.layer-id"));
await browser.click(wd.$("layer-editor.layer-id"));
});
});
})
});
describe('fill', function () {
it("add", function() {
// browser.debug();
it("add", async function() {
// await browser.debug();
var id = helper.modal.addLayer.fill({
var id = await helper.modal.addLayer.fill({
type: "fill",
layer: "example"
});
var styleObj = helper.getStyleStore(browser);
var styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": id,
@ -352,13 +350,13 @@ describe("layers", function() {
});
describe('line', function () {
it("add", function() {
var id = helper.modal.addLayer.fill({
it("add", async function() {
var id = await helper.modal.addLayer.fill({
type: "line",
layer: "example"
});
var styleObj = helper.getStyleStore(browser);
var styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": id,
@ -375,13 +373,13 @@ describe("layers", function() {
});
describe('symbol', function () {
it("add", function() {
var id = helper.modal.addLayer.fill({
it("add", async function() {
var id = await helper.modal.addLayer.fill({
type: "symbol",
layer: "example"
});
var styleObj = helper.getStyleStore(browser);
var styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": id,
@ -393,13 +391,13 @@ describe("layers", function() {
});
describe('raster', function () {
it("add", function() {
var id = helper.modal.addLayer.fill({
it("add", async function() {
var id = await helper.modal.addLayer.fill({
type: "raster",
layer: "raster"
});
var styleObj = helper.getStyleStore(browser);
var styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": id,
@ -411,13 +409,13 @@ describe("layers", function() {
});
describe('circle', function () {
it("add", function() {
var id = helper.modal.addLayer.fill({
it("add", async function() {
var id = await helper.modal.addLayer.fill({
type: "circle",
layer: "example"
});
var styleObj = helper.getStyleStore(browser);
var styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": id,
@ -430,13 +428,13 @@ describe("layers", function() {
});
describe('fill extrusion', function () {
it("add", function() {
var id = helper.modal.addLayer.fill({
it("add", async function() {
var id = await helper.modal.addLayer.fill({
type: "fill-extrusion",
layer: "example"
});
var styleObj = helper.getStyleStore(browser);
var styleObj = await helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": id,
@ -449,42 +447,42 @@ describe("layers", function() {
describe("groups", function() {
it("simple", function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
it("simple", async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.acceptAlert();
await browser.acceptAlert();
helper.modal.addLayer.open();
var aId = helper.modal.addLayer.fill({
await helper.modal.addLayer.open();
await helper.modal.addLayer.fill({
id: "foo",
type: "background"
})
helper.modal.addLayer.open();
var bId = helper.modal.addLayer.fill({
await helper.modal.addLayer.open();
await helper.modal.addLayer.fill({
id: "foo_bar",
type: "background"
})
helper.modal.addLayer.open();
var bId = helper.modal.addLayer.fill({
await helper.modal.addLayer.open();
await helper.modal.addLayer.fill({
id: "foo_bar_baz",
type: "background"
})
const groupEl = $(wd.$("layer-list-group:foo-0"));
groupEl.isDisplayed();
const groupEl = await $(wd.$("layer-list-group:foo-0"));
await groupEl.isDisplayed();
assert.equal($(wd.$("layer-list-item:foo")).isDisplayedInViewport(), true);
assert.equal($(wd.$("layer-list-item:foo_bar")).isDisplayedInViewport(), false);
assert.equal($(wd.$("layer-list-item:foo_bar_baz")).isDisplayedInViewport(), 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);
groupEl.click();
await groupEl.click();
assert.equal($(wd.$("layer-list-item:foo")).isDisplayedInViewport(), true);
assert.equal($(wd.$("layer-list-item:foo_bar")).isDisplayedInViewport(), true);
assert.equal($(wd.$("layer-list-item:foo_bar_baz")).isDisplayedInViewport(), 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);
})
})
});

View file

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

View file

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

View file

@ -7,105 +7,105 @@ var wd = require("../../wd-helper");
// NOTE: These duplicate some of the tests, however this is indended becuase it's likely these will change for aesthetic reasons over time
describe('screenshots', function() {
beforeEach(function() {
browser.setWindowSize(1280, 800)
beforeEach(async function() {
await browser.setWindowSize(1280, 800)
})
it("front_page", function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
it("front_page", async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
await browser.acceptAlert();
const elem = await $(".maputnik-toolbar-link");
await elem.waitForExist();
await browser.flushReactUpdates();
browser.takeScreenShot("/front_page.png")
await browser.takeScreenShot("/front_page.png")
})
it("open", function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
it("open", async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
await browser.acceptAlert();
const elem = await $(".maputnik-toolbar-link");
await elem.waitForExist();
await browser.flushReactUpdates();
const nav_open = $(wd.$("nav:open"));
nav_open.click();
nav_open.waitForExist();
browser.flushReactUpdates();
const nav_open = await $(wd.$("nav:open"));
await nav_open.click();
await nav_open.waitForExist();
await browser.flushReactUpdates();
browser.takeScreenShot("/open.png")
await browser.takeScreenShot("/open.png")
})
it("export", function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
it("export", async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link")
elem.waitForExist()
browser.flushReactUpdates();
await browser.acceptAlert();
const elem = await $(".maputnik-toolbar-link")
await elem.waitForExist()
await browser.flushReactUpdates();
const nav_export = $(wd.$("nav:export"));
nav_export.click();
nav_export.waitForExist();
browser.flushReactUpdates();
const nav_export = await $(wd.$("nav:export"));
await nav_export.click();
await nav_export.waitForExist();
await browser.flushReactUpdates();
browser.takeScreenShot("/export.png")
await browser.takeScreenShot("/export.png")
})
it("sources", function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
it("sources", async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link")
elem.waitForExist()
browser.flushReactUpdates();
await browser.acceptAlert();
const elem = await $(".maputnik-toolbar-link")
await elem.waitForExist()
await browser.flushReactUpdates();
const nav_sources = $(wd.$("nav:sources"));
nav_sources.click();
nav_sources.waitForExist();
browser.flushReactUpdates();
const nav_sources = await $(wd.$("nav:sources"));
await nav_sources.click();
await nav_sources.waitForExist();
await browser.flushReactUpdates();
browser.takeScreenShot("/sources.png")
await browser.takeScreenShot("/sources.png")
})
it("style settings", function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
it("style settings", async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link")
elem.waitForExist()
browser.flushReactUpdates();
await browser.acceptAlert();
const elem = await $(".maputnik-toolbar-link")
await elem.waitForExist()
await browser.flushReactUpdates();
const nav_settings = $(wd.$("nav:settings"));
nav_settings.click();
nav_settings.waitForExist();
browser.flushReactUpdates();
const nav_settings = await $(wd.$("nav:settings"));
await nav_settings.click();
await nav_settings.waitForExist();
await browser.flushReactUpdates();
browser.takeScreenShot("/settings.png")
await browser.takeScreenShot("/settings.png")
})
it("inspect", function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
it("inspect", async function() {
await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link")
elem.waitForExist()
browser.flushReactUpdates();
await browser.acceptAlert();
const elem = await $(".maputnik-toolbar-link")
await elem.waitForExist()
await browser.flushReactUpdates();
const selectBox = $(wd.$("nav:inspect", "select"));
selectBox.selectByAttribute('value', 'inspect');
const selectBox = await $(wd.$("nav:inspect", "select"));
await selectBox.selectByAttribute('value', 'inspect');
browser.flushReactUpdates();
await browser.flushReactUpdates();
browser.takeScreenShot("/inspect.png")
await browser.takeScreenShot("/inspect.png")
})
})

View file

@ -8,9 +8,9 @@ var COVERAGE_PATH = artifacts.pathSync("/coverage");
var coverage = istanbulCov.createCoverageMap({});
// Capture the coverage after each test
afterEach(function() {
afterEach(async function() {
// Code coverage
var results = browser.execute(function() {
var results = await browser.execute(function() {
return window.__coverage__;
});
@ -21,6 +21,36 @@ afterEach(function() {
// Dump the coverage to a file
after(function() {
var jsonStr = JSON.stringify(coverage, null, 2);
fs.writeFileSync(COVERAGE_PATH+"/coverage.json", jsonStr);
// Sometimes istanbul copies same location entry with null values
// crashing the final coverage step. This is just a workaround for now,
// since istanbul will be replaced by nyc.
const coverageJson = JSON.stringify(coverage, null, 2);
let newCoverage = JSON.parse(coverageJson);
Object.values(newCoverage).forEach(fileCov => {
if (fileCov.branchMap) {
Object.values(fileCov.branchMap).forEach(branchMapEntry => {
let prevLocation = {};
branchMapEntry.locations.forEach(curLocation => {
if (curLocation.start && curLocation.end &&
curLocation.start.column && curLocation.start.line &&
curLocation.end.column && curLocation.end.line)
{
prevLocation = curLocation;
}
else
{
curLocation.start.column = prevLocation.start.column;
curLocation.start.line = prevLocation.start.line;
curLocation.end.column = prevLocation.end.column;
curLocation.end.line = prevLocation.end.line;
}
})
})
}
})
const newCoverageJson = JSON.stringify(newCoverage, null, 2);
fs.writeFileSync(COVERAGE_PATH+"/coverage.json", newCoverageJson);
})

View file

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