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

Update tests for WebdriverIO v5

Browse source
This commit is contained in:
pathmapper 2019-06-08 07:19:18 +02:00
parent 924b14621a
commit e9a8b094a2
6 changed files with 131 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
test/functional/helper.js
View file

@ -18,7 +18,7 @@ module.exports = {
var result = browser.executeAsync(function(done) {
window.debug.get("maputnik", "styleStore").latestStyle(done);
})
return result.value;
return result;
},
getRevisionStore: function(browser) {
var result = browser.execute(function(done) {
@ -34,15 +34,16 @@ module.exports = {
modal: {
addLayer: {
open: function() {
var selector = wd.$('layer-list:add-layer');
browser.click(selector);
const selector = $(wd.$('layer-list:add-layer'));
selector.click();
// Wait for events
browser.flushReactUpdates();
browser.waitForExist(wd.$('modal:add-layer'));
browser.isVisible(wd.$('modal:add-layer'));
browser.isVisibleWithinViewport(wd.$('modal:add-layer'));
const elem = $(wd.$('modal:add-layer'));
elem.waitForExist();
elem.isDisplayed();
elem.isDisplayedInViewport();
// Wait for events
browser.flushReactUpdates();
@ -58,7 +59,8 @@ module.exports = {
id = type+":"+uuid();
}
browser.selectByValue(wd.$("add-layer.layer-type", "select"), type);
const selectBox = $(wd.$("add-layer.layer-type", "select"));
selectBox.selectByAttribute('value', type);
browser.flushReactUpdates();
browser.setValueSafe(wd.$("add-layer.layer-id", "input"), id);
@ -67,7 +69,8 @@ module.exports = {
}
browser.flushReactUpdates();
browser.click(wd.$("add-layer"));
const elem_addLayer = $(wd.$("add-layer"));
elem_addLayer.click();
return id;
}

5
test/functional/index.js
View file

@ -11,11 +11,12 @@ describe('maputnik', function() {
"geojson:example",
"raster:raster"
]));
browser.alertAccept();
browser.acceptAlert();
browser.execute(function() {
localStorage.setItem("survey", true);
});
browser.waitForExist(".maputnik-toolbar-link");
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
});

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

@ -11,8 +11,9 @@ describe("layers", function() {
"geojson:example",
"raster:raster"
]));
browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
helper.modal.addLayer.open();
@ -33,7 +34,8 @@ describe("layers", function() {
},
]);
browser.click(wd.$("layer-list-item:"+id+":delete", ""));
const elem = $(wd.$("layer-list-item:"+id+":delete", ""));
elem.click();
styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -54,7 +56,8 @@ describe("layers", function() {
},
]);
browser.click(wd.$("layer-list-item:"+id+":copy", ""));
const elem = $(wd.$("layer-list-item:"+id+":copy", ""));
elem.click();
styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -83,7 +86,8 @@ describe("layers", function() {
},
]);
browser.click(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
const elem = $(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
elem.click();
styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -96,7 +100,7 @@ describe("layers", function() {
},
]);
browser.click(wd.$("layer-list-item:"+id+":toggle-visibility", ""));
elem.click();
styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -147,11 +151,13 @@ describe("layers", function() {
// Setup
var id = uuid();
browser.selectByValue(wd.$("add-layer.layer-type", "select"), "background");
const selectBox = $(wd.$("add-layer.layer-type", "select"));
selectBox.selectByAttribute('value', "background");
browser.flushReactUpdates();
browser.setValueSafe(wd.$("add-layer.layer-id", "input"), "background:"+id);
browser.click(wd.$("add-layer"));
const elem = $(wd.$("add-layer"));
elem.click();
var styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -169,11 +175,13 @@ describe("layers", function() {
it("id", function() {
var bgId = createBackground();
browser.click(wd.$("layer-list-item:background:"+bgId))
const elem = $(wd.$("layer-list-item:background:"+bgId));
elem.click();
var id = uuid();
browser.setValueSafe(wd.$("layer-editor.layer-id", "input"), "foobar:"+id)
browser.click(wd.$("min-zoom"))
const elem2 = $(wd.$("min-zoom"));
elem2.click();
var styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -190,9 +198,12 @@ describe("layers", function() {
it("min-zoom", function() {
var bgId = createBackground();
browser.click(wd.$("layer-list-item:background:"+bgId))
browser.setValueSafe(wd.$("min-zoom", "input"), 1)
browser.click(wd.$("layer-editor.layer-id", "input"));
const elem = $(wd.$("layer-list-item:background:"+bgId));
elem.click();
// zoom level number input currently fails https://github.com/webdriverio/webdriverio/issues/4059, this is whystring input "1" is used
browser.setValueSafe(wd.$("min-zoom", "input"), "1")
const elem2 = $(wd.$("layer-editor.layer-id", "input"));
elem2.click();
var styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -220,9 +231,12 @@ describe("layers", function() {
it("max-zoom", function() {
var bgId = createBackground();
browser.click(wd.$("layer-list-item:background:"+bgId))
browser.setValueSafe(wd.$("max-zoom", "input"), 1)
browser.click(wd.$("layer-editor.layer-id", "input"));
const elem = $(wd.$("layer-list-item:background:"+bgId));
elem.click();
// zoom level number input currently fails https://github.com/webdriverio/webdriverio/issues/4059, this is whystring input "1" is used
browser.setValueSafe(wd.$("max-zoom", "input"), "1")
const elem2 = $(wd.$("layer-editor.layer-id", "input"));
elem2.click();
var styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -238,9 +252,11 @@ describe("layers", function() {
var bgId = createBackground();
var id = uuid();
browser.click(wd.$("layer-list-item:background:"+bgId));
const elem = $(wd.$("layer-list-item:background:"+bgId));
elem.click();
browser.setValueSafe(wd.$("layer-comment", "textarea"), id);
browser.click(wd.$("layer-editor.layer-id", "input"));
const elem2 = $(wd.$("layer-editor.layer-id", "input"));
elem2.click();
var styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
@ -484,4 +500,3 @@ describe("layers", function() {
})
})
});

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

@ -7,14 +7,16 @@ var helper = require("../helper");
function closeModal(wdKey) {
browser.waitUntil(function() {
return browser.isVisibleWithinViewport(wd.$(wdKey));
const elem = $(wdKey);
return elem.isDisplayedInViewport();
});
var closeBtnSelector = wd.$(wdKey+".close-modal");
browser.click(closeBtnSelector);
const closeBtnSelector = $(wd.$(wdKey+".close-modal"));
closeBtnSelector.click();
browser.waitUntil(function() {
return !browser.isVisibleWithinViewport(wd.$(wdKey));
const elem = $(wdKey);
return !elem.isDisplayed();
});
}
@ -26,10 +28,12 @@ describe("modals", function() {
beforeEach(function() {
browser.url(config.baseUrl+"?debug");
browser.waitForExist(".maputnik-toolbar-link");
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
browser.click(wd.$("nav:open"))
const elem2 = $(wd.$("nav:open"));
elem2.click();
browser.flushReactUpdates();
});
@ -38,7 +42,8 @@ describe("modals", function() {
});
it("upload", function() {
browser.waitForExist("*[type='file']")
const elem = $("*[type='file']");
elem.waitForExist();
browser.chooseFile("*[type='file']", styleFilePath);
var styleObj = helper.getStyleStore(browser);
@ -50,8 +55,8 @@ describe("modals", function() {
browser.setValueSafe(wd.$("open-modal.url.input"), styleFileUrl);
var selector = wd.$("open-modal.url.button");
browser.click(selector);
const selector = $(wd.$("open-modal.url.button"));
selector.click();
// Allow the network request to happen
// NOTE: Its localhost so this should be fast.
@ -70,10 +75,12 @@ describe("modals", function() {
beforeEach(function() {
browser.url(config.baseUrl+"?debug");
browser.waitForExist(".maputnik-toolbar-link");
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
browser.click(wd.$("nav:export"))
const elem2 = $(wd.$("nav:export"));
elem2.click();
browser.flushReactUpdates();
});
@ -99,9 +106,10 @@ describe("modals", function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.acceptAlert();
browser.selectByValue(wd.$("nav:inspect", "select"), "inspect");
const selectBox = $(wd.$("nav:inspect", "select"));
selectBox.selectByAttribute('value', "inspect");
})
})
@ -109,16 +117,19 @@ describe("modals", function() {
beforeEach(function() {
browser.url(config.baseUrl+"?debug");
browser.waitForExist(".maputnik-toolbar-link");
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
browser.click(wd.$("nav:settings"))
const elem2 = $(wd.$("nav:settings"));
elem2.click();
browser.flushReactUpdates();
});
it("name", function() {
browser.setValueSafe(wd.$("modal-settings.name"), "foobar")
browser.click(wd.$("modal-settings.owner"))
const elem = $(wd.$("modal-settings.owner"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);
@ -126,7 +137,8 @@ describe("modals", function() {
})
it("owner", function() {
browser.setValueSafe(wd.$("modal-settings.owner"), "foobar")
browser.click(wd.$("modal-settings.name"))
const elem = $(wd.$("modal-settings.name"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);
@ -134,7 +146,8 @@ describe("modals", function() {
})
it("sprite url", function() {
browser.setValueSafe(wd.$("modal-settings.sprite"), "http://example.com")
browser.click(wd.$("modal-settings.name"))
const elem = $(wd.$("modal-settings.name"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);
@ -143,7 +156,8 @@ describe("modals", function() {
it("glyphs url", function() {
var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"
browser.setValueSafe(wd.$("modal-settings.glyphs"), glyphsUrl)
browser.click(wd.$("modal-settings.name"))
const elem = $(wd.$("modal-settings.name"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);
@ -153,7 +167,8 @@ describe("modals", function() {
it("mapbox access token", function() {
var apiKey = "testing123";
browser.setValueSafe(wd.$("modal-settings.maputnik:mapbox_access_token"), apiKey);
browser.click(wd.$("modal-settings.name"))
const elem = $(wd.$("modal-settings.name"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);
@ -165,7 +180,8 @@ describe("modals", function() {
it("maptiler access token", function() {
var apiKey = "testing123";
browser.setValueSafe(wd.$("modal-settings.maputnik:openmaptiles_access_token"), apiKey);
browser.click(wd.$("modal-settings.name"))
const elem = $(wd.$("modal-settings.name"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);
@ -175,7 +191,8 @@ describe("modals", function() {
it("thunderforest access token", function() {
var apiKey = "testing123";
browser.setValueSafe(wd.$("modal-settings.maputnik:thunderforest_access_token"), apiKey);
browser.click(wd.$("modal-settings.name"))
const elem = $(wd.$("modal-settings.name"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);
@ -183,9 +200,10 @@ describe("modals", function() {
})
it("style renderer", function() {
var selector = wd.$("modal-settings.maputnik:renderer");
browser.selectByValue(selector, "ol");
browser.click(wd.$("modal-settings.name"))
const selector = $(wd.$("modal-settings.maputnik:renderer"));
selector.selectByAttribute('value', "ol");
const elem = $(wd.$("modal-settings.name"));
elem.click();
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);

51
test/functional/screenshots/index.js
View file

@ -8,18 +8,16 @@ var wd = require("../../wd-helper");
describe('screenshots', function() {
beforeEach(function() {
browser.windowHandleSize({
width: 1280,
height: 800
});
browser.setWindowSize(1280, 800)
})
it("front_page", function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
browser.takeScreenShot("/front_page.png")
@ -29,11 +27,13 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
browser.click(wd.$("nav:open"))
const nav_open = $(wd.$("nav:open"));
nav_open.waitForExist();
browser.flushReactUpdates();
browser.takeScreenShot("/open.png")
@ -43,11 +43,13 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link")
elem.waitForExist()
browser.flushReactUpdates();
browser.click(wd.$("nav:export"))
const nav_export = $(wd.$("nav:export"));
nav_export.waitForExist();
browser.flushReactUpdates();
browser.takeScreenShot("/export.png")
@ -57,11 +59,13 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link")
elem.waitForExist()
browser.flushReactUpdates();
browser.click(wd.$("nav:sources"))
const nav_sources = $(wd.$("nav:sources"));
nav_sources.waitForExist();
browser.flushReactUpdates();
browser.takeScreenShot("/sources.png")
@ -71,11 +75,13 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link")
elem.waitForExist()
browser.flushReactUpdates();
browser.click(wd.$("nav:settings"))
const nav_settings = $(wd.$("nav:settings"));
nav_settings.waitForExist();
browser.flushReactUpdates();
browser.takeScreenShot("/settings.png")
@ -85,11 +91,14 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.acceptAlert();
const elem = $(".maputnik-toolbar-link")
elem.waitForExist()
browser.flushReactUpdates();
browser.selectByValue(wd.$("nav:inspect", "select"), "inspect");
const selectBox = $(wd.$("nav:inspect", "select"));
selectBox.selectByAttribute('value', 'inspect');
browser.flushReactUpdates();
browser.takeScreenShot("/inspect.png")

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

@ -3,8 +3,8 @@ var fs = require("fs");
var path = require("path");
browser.timeoutsAsyncScript(20*1000);
browser.timeoutsImplicitWait(20*1000);
browser.setTimeout({ 'script': 20*1000 });
browser.setTimeout({ 'implicit': 20*1000 });
var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots");
@ -16,15 +16,18 @@ var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots");
try {
browser.addCommand('setValueSafe', function(selector, text) {
for(var i=0; i<10; i++) {
browser.waitForVisible(selector);
const elem = $(selector);
elem.waitForDisplayed(500);
var elements = browser.elements(selector);
var elements = browser.findElements("css selector", selector);
if(elements.length > 1) {
throw "Too many elements found";
}
browser.setValue(selector, text);
var browserText = browser.getValue(selector);
const elem2 = $(selector);
elem2.setValue(text);
var browserText = elem2.getValue();
if(browserText == text) {
return;
@ -39,7 +42,7 @@ try {
})
browser.addCommand('takeScreenShot', function(filepath) {
var data = browser.screenshot();
var data = browser.takeScreenshot();
fs.writeFileSync(path.join(SCREENSHOTS_PATH, filepath), data.value, 'base64');
});