schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-27 09:05:25 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use node 16.x

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

63
.github/workflows/ci.yml vendored
View file

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

15589
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
package.json
View file

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

60
test/functional/accessibility/skip-links.js
View file

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

47
test/functional/helper.js
View file

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

48
test/functional/history/index.js
View file

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

19
test/functional/index.js
View file

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

60
test/functional/keyboard/index.js
View file

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

258
test/functional/layers/index.js
View file

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

24
test/functional/map/index.js
View file

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

222
test/functional/modals/index.js
View file

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

126
test/functional/screenshots/index.js
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 // 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() { describe('screenshots', function() {
beforeEach(function() { beforeEach(async function() {
browser.setWindowSize(1280, 800) await browser.setWindowSize(1280, 800)
}) })
it("front_page", function() { it("front_page", async function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example" "geojson:example"
])); ]));
browser.acceptAlert(); await browser.acceptAlert();
const elem = $(".maputnik-toolbar-link"); const elem = await $(".maputnik-toolbar-link");
elem.waitForExist(); await elem.waitForExist();
browser.flushReactUpdates(); await browser.flushReactUpdates();
browser.takeScreenShot("/front_page.png") await browser.takeScreenShot("/front_page.png")
}) })
it("open", function() { it("open", async function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example" "geojson:example"
])); ]));
browser.acceptAlert(); await browser.acceptAlert();
const elem = $(".maputnik-toolbar-link"); const elem = await $(".maputnik-toolbar-link");
elem.waitForExist(); await elem.waitForExist();
browser.flushReactUpdates(); await browser.flushReactUpdates();
const nav_open = $(wd.$("nav:open")); const nav_open = await $(wd.$("nav:open"));
nav_open.click(); await nav_open.click();
nav_open.waitForExist(); await nav_open.waitForExist();
browser.flushReactUpdates(); await browser.flushReactUpdates();
browser.takeScreenShot("/open.png") await browser.takeScreenShot("/open.png")
}) })
it("export", function() { it("export", async function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example" "geojson:example"
])); ]));
browser.acceptAlert(); await browser.acceptAlert();
const elem = $(".maputnik-toolbar-link") const elem = await $(".maputnik-toolbar-link")
elem.waitForExist() await elem.waitForExist()
browser.flushReactUpdates(); await browser.flushReactUpdates();
const nav_export = $(wd.$("nav:export")); const nav_export = await $(wd.$("nav:export"));
nav_export.click(); await nav_export.click();
nav_export.waitForExist(); await nav_export.waitForExist();
browser.flushReactUpdates(); await browser.flushReactUpdates();
browser.takeScreenShot("/export.png") await browser.takeScreenShot("/export.png")
}) })
it("sources", function() { it("sources", async function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example" "geojson:example"
])); ]));
browser.acceptAlert(); await browser.acceptAlert();
const elem = $(".maputnik-toolbar-link") const elem = await $(".maputnik-toolbar-link")
elem.waitForExist() await elem.waitForExist()
browser.flushReactUpdates(); await browser.flushReactUpdates();
const nav_sources = $(wd.$("nav:sources")); const nav_sources = await $(wd.$("nav:sources"));
nav_sources.click(); await nav_sources.click();
nav_sources.waitForExist(); await nav_sources.waitForExist();
browser.flushReactUpdates(); await browser.flushReactUpdates();
browser.takeScreenShot("/sources.png") await browser.takeScreenShot("/sources.png")
}) })
it("style settings", function() { it("style settings", async function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example" "geojson:example"
])); ]));
browser.acceptAlert(); await browser.acceptAlert();
const elem = $(".maputnik-toolbar-link") const elem = await $(".maputnik-toolbar-link")
elem.waitForExist() await elem.waitForExist()
browser.flushReactUpdates(); await browser.flushReactUpdates();
const nav_settings = $(wd.$("nav:settings")); const nav_settings = await $(wd.$("nav:settings"));
nav_settings.click(); await nav_settings.click();
nav_settings.waitForExist(); await nav_settings.waitForExist();
browser.flushReactUpdates(); await browser.flushReactUpdates();
browser.takeScreenShot("/settings.png") await browser.takeScreenShot("/settings.png")
}) })
it("inspect", function() { it("inspect", async function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example" "geojson:example"
])); ]));
browser.acceptAlert(); await browser.acceptAlert();
const elem = $(".maputnik-toolbar-link") const elem = await $(".maputnik-toolbar-link")
elem.waitForExist() await elem.waitForExist()
browser.flushReactUpdates(); await browser.flushReactUpdates();
const selectBox = $(wd.$("nav:inspect", "select")); const selectBox = await $(wd.$("nav:inspect", "select"));
selectBox.selectByAttribute('value', 'inspect'); await selectBox.selectByAttribute('value', 'inspect');
browser.flushReactUpdates(); await browser.flushReactUpdates();
browser.takeScreenShot("/inspect.png") await browser.takeScreenShot("/inspect.png")
}) })
}) })

38
test/functional/util/coverage.js
View file

@ -8,9 +8,9 @@ var COVERAGE_PATH = artifacts.pathSync("/coverage");
var coverage = istanbulCov.createCoverageMap({}); var coverage = istanbulCov.createCoverageMap({});
// Capture the coverage after each test // Capture the coverage after each test
afterEach(function() { afterEach(async function() {
// Code coverage // Code coverage
var results = browser.execute(function() { var results = await browser.execute(function() {
return window.__coverage__; return window.__coverage__;
}); });
@ -21,6 +21,36 @@ afterEach(function() {
// Dump the coverage to a file // Dump the coverage to a file
after(function() { 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);
}) })

102
test/functional/util/webdriverio-ext.js
View file

@ -1,61 +1,63 @@
var artifacts = require("../../artifacts"); var artifacts = require("../../artifacts");
var fs = require("fs"); var path = require("path");
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 }); var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots");
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);
* Sometimes chrome driver can result in the wrong text. if (elements.length > 1) {
* throw "Too many elements found";
* 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);
var elements = browser.findElements("css selector", selector); const elem2 = await $(selector);
if(elements.length > 1) { await elem2.setValue(text);
throw "Too many elements found";
var browserText = await elem2.getValue();
if (browserText == text) {
return;
}
else {
console.error("Warning: setValue failed, trying again");
}
} }
const elem2 = $(selector); // Wait for change events to fire and state updated
elem2.setValue(text); await browser.flushReactUpdates();
var browserText = elem2.getValue();
if(browserText == text) {
return;
}
else {
console.error("Warning: setValue failed, trying again");
}
}
// Wait for change events to fire and state updated
browser.flushReactUpdates();
})
browser.addCommand('takeScreenShot', function(filepath) {
var savepath = path.join(SCREENSHOTS_PATH, filepath);
browser.saveScreenshot(savepath);
});
browser.addCommand('flushReactUpdates', function() {
browser.executeAsync(function(done) {
// For any events to propogate
setTimeout(function() {
// For the DOM to be updated.
setTimeout(done, 0);
}, 0)
}) })
})
} catch(err) { await browser.addCommand('takeScreenShot', async function (filepath) {
console.error(">>> Ignored error: "+err); 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;