From 73f7798a1d2d5baea27f70873ea791360fafc72a Mon Sep 17 00:00:00 2001 From: Harel M Date: Thu, 14 Dec 2023 18:14:06 +0200 Subject: [PATCH] Use driver pattern for e2e tests (#2) * Initial commit * Fix spec * Move driver * Fix config location * Fix helper location * More usage of driver * Add click * Fix click * Migrate more tests * Add setValue to driver * Move more code to driver * add isExisting to driver * Change modal tests to use driver * Fix tests * Fix test * Fix invalid alert wait * Fix missing wd * Fix tests * Fix missing fs * Fix test * Fix path * Move screenshort to driver * Migrate keyboard * Migrate skiplinks to driver * Fix tests * Try fix skip-links * add config * Add helper * Fix driver? * remove helper * remove wd-helper * Remove redundant file * Remove webdriver extsions --- config/wdio.conf.js | 2 +- test/config/specs.js | 13 +- test/functional/accessibility/index.js | 42 +++- test/functional/accessibility/skip-links.js | 51 ----- test/functional/driver.js | 218 ++++++++++++++++++++ test/functional/helper.js | 86 -------- test/functional/history/index.js | 53 ++--- test/functional/index.js | 25 +-- test/functional/keyboard/index.js | 42 ++-- test/functional/layers/index.js | 204 ++++++++---------- test/functional/map/index.js | 19 +- test/functional/modals/index.js | 174 +++++----------- test/functional/screenshots/index.js | 113 +++------- test/functional/util/webdriverio-ext.js | 63 ------ test/wd-helper.js | 6 - 15 files changed, 498 insertions(+), 613 deletions(-) delete mode 100644 test/functional/accessibility/skip-links.js create mode 100644 test/functional/driver.js delete mode 100644 test/functional/helper.js delete mode 100644 test/functional/util/webdriverio-ext.js delete mode 100644 test/wd-helper.js diff --git a/config/wdio.conf.js b/config/wdio.conf.js index c5f8206ca..6db6544c1 100644 --- a/config/wdio.conf.js +++ b/config/wdio.conf.js @@ -27,7 +27,7 @@ exports.config = { ], // geckodriver-0.31 seems to have problems as of 2022 May 1 services: process.env.DOCKER_HOST ? [] : [ ['selenium-standalone', { drivers: { firefox: 'latest', chrome: 'latest' } } ] ], - logLevel: 'info', + logLevel: 'warn', bail: 0, screenshotPath: SCREENSHOT_PATH, hostname: process.env.DOCKER_HOST || "0.0.0.0", diff --git a/test/config/specs.js b/test/config/specs.js index 496132c0b..ae7ea9633 100644 --- a/test/config/specs.js +++ b/test/config/specs.js @@ -1,6 +1,11 @@ -var config = {}; -config.testNetwork = process.env.TEST_NETWORK || "localhost"; -config.port = 9001; -config.baseUrl = "http://"+config.testNetwork+":"+config.port; + +const testNetwork = process.env.TEST_NETWORK || "localhost"; +const port = 9001; +const baseUrl = `http://${testNetwork}:${port}`; +const config = { + testNetwork, + port, + baseUrl +}; module.exports = config; diff --git a/test/functional/accessibility/index.js b/test/functional/accessibility/index.js index 8fb87e632..bb2e903d6 100644 --- a/test/functional/accessibility/index.js +++ b/test/functional/accessibility/index.js @@ -1,3 +1,43 @@ +var assert = require("assert"); +var driver = require("../driver"); + describe("accessibility", function () { - require("./skip-links"); + describe("skip links", function() { + beforeEach(async function () { + await driver.setStyle("example-layer-style.json"); + }); + + it("skip link to layer list", async function() { + const selector = driver.getDataAttribute("root:skip:layer-list") + assert(await driver.isExisting(selector)); + await driver.typeKeys(['Tab']); + assert(await driver.isFocused(selector)); + await driver.click(selector); + + assert(await driver.isFocused("#skip-target-layer-list")); + }); + + it("skip link to layer editor", async function() { + const selector = driver.getDataAttribute("root:skip:layer-editor") + assert(await driver.isExisting(selector)); + await driver.typeKeys(['Tab']); + await driver.typeKeys(['Tab']); + assert(await driver.isFocused(selector)); + await driver.click(selector); + + assert(await driver.isFocused("#skip-target-layer-editor")); + }); + + it("skip link to map view", async function() { + const selector = driver.getDataAttribute("root:skip:map-view") + assert(await driver.isExisting(selector)); + await driver.typeKeys(['Tab']); + await driver.typeKeys(['Tab']); + await driver.typeKeys(['Tab']); + assert(await driver.isFocused(selector)); + await driver.click(selector); + + assert(await driver.isFocused(".maplibregl-canvas")); + }); + }); }) diff --git a/test/functional/accessibility/skip-links.js b/test/functional/accessibility/skip-links.js deleted file mode 100644 index d8df364ab..000000000 --- a/test/functional/accessibility/skip-links.js +++ /dev/null @@ -1,51 +0,0 @@ -var assert = require("assert"); -var config = require("../../config/specs"); -var helper = require("../helper"); -var wd = require("../../wd-helper"); - - -describe("skip links", function() { - beforeEach(async function () { - await browser.url(config.baseUrl+"?debug&style="+helper.getGeoServerUrl("example-layer-style.json")); - await browser.acceptAlert(); - }); - - it("skip link to layer list", async function() { - const selector = wd.$("root:skip:layer-list") - const elem = await $(selector); - assert(await elem.isExisting()); - await browser.keys(['Tab']); - assert(await elem.isFocused()); - await elem.click(); - - const targetEl = await $("#skip-target-layer-list"); - assert(await targetEl.isFocused()); - }); - - it("skip link to layer editor", async function() { - const selector = wd.$("root:skip:layer-editor") - const elem = await $(selector); - assert(await elem.isExisting()); - await browser.keys(['Tab']); - await browser.keys(['Tab']); - assert(await elem.isFocused()); - await elem.click(); - - const targetEl = await $("#skip-target-layer-editor"); - assert(await targetEl.isFocused()); - }); - - it("skip link to map view", async function() { - const selector = wd.$("root:skip:map-view") - const elem = await $(selector); - assert(await elem.isExisting()); - await browser.keys(['Tab']); - await browser.keys(['Tab']); - await browser.keys(['Tab']); - assert(await elem.isFocused()); - await elem.click(); - - const targetEl = await $(".maplibregl-canvas"); - assert(await targetEl.isFocused()); - }); -}); diff --git a/test/functional/driver.js b/test/functional/driver.js new file mode 100644 index 000000000..2fd5e4575 --- /dev/null +++ b/test/functional/driver.js @@ -0,0 +1,218 @@ +var {v1: uuid} = require('uuid'); +var fs = require("fs"); +var path = require("path"); +var config = require("../config/specs"); +var geoServer = require("../geojson-server"); +var artifacts = require("../artifacts"); + +var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots"); + +var testNetwork = process.env.TEST_NETWORK || "localhost"; +var geoserver; + + +const driver = { + geoserver: { + start(done) { + geoserver = geoServer.listen(9002, "0.0.0.0", done); + }, + stop(done) { + geoserver.close(done); + geoserver = undefined; + }, + }, + getStyleUrl(styles) { + var port = geoserver.address().port; + return "http://"+testNetwork+":"+port+"/styles/empty/"+styles.join(","); + }, + getGeoServerUrl(urlPath) { + var port = geoserver.address().port; + return "http://"+testNetwork+":"+port+"/"+urlPath; + }, + + async setStyle(styleProperties, zoom) { + let url = config.baseUrl + "?debug"; + if (styleProperties && Array.isArray(styleProperties)) { + url += "&style=" + this.getStyleUrl(styleProperties); + } else if (styleProperties && typeof styleProperties === "string") { + url += "&style=" + this.getGeoServerUrl(styleProperties); + } + if (zoom) { + url += "#" + zoom + "/41.3805/2.1635"; + } + await browser.url(url); + if (styleProperties) { + await browser.acceptAlert(); + } + await this.waitForExist(".maputnik-toolbar-link"); + await this.zeroTimeout(); + }, + async getStyleStore() { + return await browser.executeAsync(function(done) { + window.debug.get("maputnik", "styleStore").latestStyle(done); + }); + }, + async setSurvey() { + await browser.execute(function() { + localStorage.setItem("survey", true); + }); + }, + async isMac() { + return await browser.execute(function() { + return navigator.platform.toUpperCase().indexOf('MAC') >= 0; + }); + }, + async typeKeys(keys) { + await browser.keys(keys) + }, + async click(selector) { + const elem = await $(selector); + await elem.click(); + }, + async selectFromDropdown(selector, value) { + const selectBox = await $(selector); + await selectBox.selectByAttribute('value', value); + await this.zeroTimeout(); + }, + async isDisplayedInViewport(selector) { + const elem = await $(selector); + return elem.isDisplayedInViewport(); + }, + async isFocused(selector) { + const elem = await $(selector); + return elem.isFocused(); + }, + /** + * Sometimes chrome driver can result in the wrong text. + * + * See + */ + async setValue(selector, text) { + for (var i = 0; i < 10; i++) { + const elem = await $(selector); + await elem.waitForDisplayed(500); + + var elements = await browser.findElements("css selector", selector); + if (elements.length > 1) { + throw "Too many elements found"; + } + + const elem2 = await $(selector); + await elem2.setValue(text); + + var browserText = await elem2.getValue(); + + if (browserText == text) { + return; + } + else { + console.error("Warning: setValue failed, trying again"); + } + } + + // Wait for change events to fire and state updated + await this.zeroTimeout(); + }, + getExampleFilePath() { + return __dirname + "/../example-style.json"; + }, + async getExampleFileData() { + var styleFilePath = this.getExampleFilePath(); + return JSON.parse(fs.readFileSync(styleFilePath)); + }, + async chooseExampleFile() { + const elem = await $("*[type='file']"); + await elem.waitForExist(); + await browser.chooseFile("*[type='file']", this.getExampleFilePath()); + }, + async zeroTimeout() { + await browser.executeAsync(function (done) { + // For any events to propagate + setTimeout(function () { + // For the DOM to be updated. + setTimeout(done, 0); + }, 0) + }) + }, + async sleep(milliseconds) { + await browser.pause(milliseconds); + }, + async isExisting(selector) { + const elem = await $(selector); + return elem.isExisting(); + }, + async waitForExist(selector) { + const elem = await $(selector); + await elem.waitForExist(); + }, + async setWindowSize(height, width) { + await browser.setWindowSize(height, width); + }, + async takeScreenShot(filepath) { + var savepath = path.join(SCREENSHOTS_PATH, filepath); + await browser.saveScreenshot(savepath); + }, + getDataAttribute(key, selector) { + selector = selector || ""; + return "*[data-wd-key='"+key+"'] "+selector; + }, + async openLayersModal() { + const selector = await $(this.getDataAttribute('layer-list:add-layer')); + await selector.click(); + + // Wait for events + await this.zeroTimeout(); + + const elem = await $(this.getDataAttribute('modal:add-layer')); + await elem.waitForExist(); + await elem.isDisplayed(); + await elem.isDisplayedInViewport(); + + // Wait for events + await this.zeroTimeout(); + }, + async fillLayersModal(opts) { + var type = opts.type; + var layer = opts.layer; + var id; + if(opts.id) { + id = opts.id + } + else { + id = type+":"+uuid(); + } + + const selectBox = await $(this.getDataAttribute("add-layer.layer-type", "select")); + await selectBox.selectByAttribute('value', type); + await this.zeroTimeout(); + + await this.setValue(this.getDataAttribute("add-layer.layer-id", "input"), id); + if(layer) { + await this.setValue(this.getDataAttribute("add-layer.layer-source-block", "input"), layer); + } + + await this.zeroTimeout(); + const elem_addLayer = await $(this.getDataAttribute("add-layer")); + await elem_addLayer.click(); + + return id; + }, + + async closeModal(wdKey) { + const selector = this.getDataAttribute(wdKey); + + await browser.waitUntil(async function() { + const elem = await $(selector); + return await elem.isDisplayedInViewport(); + }); + + await this.click(this.getDataAttribute(wdKey+".close-modal")); + + await browser.waitUntil(async function() { + return await browser.execute((selector) => { + return !document.querySelector(selector); + }, selector); + }); + } +} +module.exports = driver; \ No newline at end of file diff --git a/test/functional/helper.js b/test/functional/helper.js deleted file mode 100644 index b9c7fd26d..000000000 --- a/test/functional/helper.js +++ /dev/null @@ -1,86 +0,0 @@ -var wd = require("../wd-helper"); -var {v1: uuid} = require('uuid'); -var geoServer = require("../geojson-server"); - -var testNetwork = process.env.TEST_NETWORK || "localhost"; -var geoserver; - -module.exports = { - startGeoserver: function(done) { - geoserver = geoServer.listen(9002, "0.0.0.0", done); - }, - stopGeoserver: function(done) { - geoserver.close(done); - geoserver = undefined; - }, - getStyleUrl: function(styles) { - var port = geoserver.address().port; - return "http://"+testNetwork+":"+port+"/styles/empty/"+styles.join(","); - }, - getGeoServerUrl: function(urlPath) { - var port = geoserver.address().port; - return "http://"+testNetwork+":"+port+"/"+urlPath; - }, - getStyleStore: async function(browser) { - return await browser.executeAsync(function(done) { - window.debug.get("maputnik", "styleStore").latestStyle(done); - }); - }, - getRevisionStore: async function(browser) { - var result = await browser.execute(function() { - var rs = window.debug.get("maputnik", "revisionStore") - - return { - currentIdx: rs.currentIdx, - revisions: rs.revisions - }; - }) - return result.value; - }, - modal: { - addLayer: { - open: async function() { - const selector = await $(wd.$('layer-list:add-layer')); - await selector.click(); - - // Wait for events - await browser.flushReactUpdates(); - - const elem = await $(wd.$('modal:add-layer')); - await elem.waitForExist(); - await elem.isDisplayed(); - await elem.isDisplayedInViewport(); - - // Wait for events - await browser.flushReactUpdates(); - }, - fill: async function(opts) { - var type = opts.type; - var layer = opts.layer; - var id; - if(opts.id) { - id = opts.id - } - else { - id = type+":"+uuid(); - } - - const selectBox = await $(wd.$("add-layer.layer-type", "select")); - await selectBox.selectByAttribute('value', type); - await browser.flushReactUpdates(); - - await browser.setValueSafe(wd.$("add-layer.layer-id", "input"), id); - if(layer) { - await browser.setValueSafe(wd.$("add-layer.layer-source-block", "input"), layer); - } - - await browser.flushReactUpdates(); - const elem_addLayer = await $(wd.$("add-layer")); - await elem_addLayer.click(); - - return id; - } - } - } -} - diff --git a/test/functional/history/index.js b/test/functional/history/index.js index de56f33d9..79ed060e1 100644 --- a/test/functional/history/index.js +++ b/test/functional/history/index.js @@ -1,8 +1,5 @@ var assert = require("assert"); -var config = require("../../config/specs"); -var helper = require("../helper"); - - +var driver = require("../driver"); describe("history", function() { let undoKeyCombo; @@ -11,9 +8,7 @@ describe("history", function() { let redoKeyComboReset; before(async function() { - const isMac = await browser.execute(function() { - return navigator.platform.toUpperCase().indexOf('MAC') >= 0; - }); + const isMac = await driver.isMac(); undoKeyCombo = ['Meta', 'z']; undoKeyComboReset = ['Meta']; redoKeyCombo = isMac ? ['Meta', 'Shift', 'z'] : ['Meta', 'y']; @@ -26,22 +21,18 @@ describe("history", function() { it.skip("undo/redo", async function() { var styleObj; - await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ - "geojson:example" - ])); - await browser.acceptAlert(); - - await helper.modal.addLayer.open(); + await driver.setStyle(["geojson:example"]) + await driver.openLayersModal(); - styleObj = await helper.getStyleStore(browser); + styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, []); - await helper.modal.addLayer.fill({ + await driver.fillLayersModal({ id: "step 1", type: "background" }) - styleObj = await helper.getStyleStore(browser); + styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": "step 1", @@ -49,13 +40,13 @@ describe("history", function() { } ]); - await helper.modal.addLayer.open(); - await helper.modal.addLayer.fill({ + await driver.openLayersModal(); + await driver.fillLayersModal({ id: "step 2", type: "background" }) - styleObj = await helper.getStyleStore(browser); + styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": "step 1", @@ -67,9 +58,9 @@ describe("history", function() { } ]); - await browser.keys(undoKeyCombo) - await browser.keys(undoKeyComboReset); - styleObj = await helper.getStyleStore(browser); + await driver.typeKeys(undoKeyCombo); + await driver.typeKeys(undoKeyComboReset); + styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": "step 1", @@ -77,15 +68,15 @@ describe("history", function() { } ]); - await browser.keys(undoKeyCombo) - await browser.keys(undoKeyComboReset); - styleObj = await helper.getStyleStore(browser); + await driver.typeKeys(undoKeyCombo) + await driver.typeKeys(undoKeyComboReset); + styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ ]); - await browser.keys(redoKeyCombo) - await browser.keys(redoKeyComboReset); - styleObj = await helper.getStyleStore(browser); + await driver.typeKeys(redoKeyCombo) + await driver.typeKeys(redoKeyComboReset); + styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": "step 1", @@ -93,9 +84,9 @@ describe("history", function() { } ]); - await browser.keys(redoKeyCombo) - await browser.keys(redoKeyComboReset); - styleObj = await helper.getStyleStore(browser); + await driver.typeKeys(redoKeyCombo) + await driver.typeKeys(redoKeyComboReset); + styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": "step 1", diff --git a/test/functional/index.js b/test/functional/index.js index ab59c362d..2d4c792ef 100644 --- a/test/functional/index.js +++ b/test/functional/index.js @@ -1,31 +1,20 @@ -var config = require("../config/specs"); -var helper = require("./helper"); -var extendWebdriverIO = require("./util/webdriverio-ext"); - +var driver = require("./driver"); describe('maputnik', function() { before(async function(done) { - await extendWebdriverIO(); - helper.startGeoserver(done); + await browser.setTimeout({ 'script': 20 * 1000 }); + await browser.setTimeout({ 'implicit': 20 * 1000 }); + driver.geoserver.start(done); }); after(function(done) { - helper.stopGeoserver(done); + driver.geoserver.stop(done); }); beforeEach(async function() { - await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ - "geojson:example", - "raster:raster" - ])); - await browser.acceptAlert(); - await browser.execute(function() { - localStorage.setItem("survey", true); - }); - const elem = await $(".maputnik-toolbar-link"); - await elem.waitForExist(); - await browser.flushReactUpdates(); + await driver.setStyle(["geojson:example","raster:raster"]); + await driver.setSurvey(); }); // -------- setup -------- diff --git a/test/functional/keyboard/index.js b/test/functional/keyboard/index.js index 9ec5e4fa3..8274ce43a 100644 --- a/test/functional/keyboard/index.js +++ b/test/functional/keyboard/index.js @@ -1,55 +1,55 @@ var assert = require("assert"); -var wd = require("../../wd-helper"); - +var driver = require("../driver"); describe("keyboard", function() { describe("shortcuts", function() { it("ESC should unfocus", async function() { - const tmpTargetEl = await $(wd.$("nav:inspect") + " select"); - await tmpTargetEl.click(); - assert(await tmpTargetEl.isFocused()); + const targetSelector = driver.getDataAttribute("nav:inspect") + " select"; + driver.click(targetSelector); + assert(await driver.isFocused(targetSelector)); - await browser.keys(["Escape"]); + await driver.typeKeys(["Escape"]); assert(await (await $("body")).isFocused()); }); it("'?' should show shortcuts modal", async function() { - await browser.keys(["?"]); - assert(await (await $(wd.$("modal:shortcuts"))).isDisplayed()); + await driver.typeKeys(["?"]); + assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts"))); }); it("'o' should show open modal", async function() { - await browser.keys(["o"]); - assert(await (await $(wd.$("modal:open"))).isDisplayed()); + await driver.typeKeys(["o"]); + assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:open"))); }); it("'e' should show export modal", async function() { - await browser.keys(["e"]); - assert(await (await $(wd.$("modal:export"))).isDisplayed()); + await driver.typeKeys(["e"]); + await driver.sleep(100); + assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:export"))); }); it("'d' should show sources modal", async function() { - await browser.keys(["d"]); - assert(await (await $(wd.$("modal:sources"))).isDisplayed()); + await driver.typeKeys(["d"]); + assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:sources"))); }); it("'s' should show settings modal", async function() { - await browser.keys(["s"]); - assert(await (await $(wd.$("modal:settings"))).isDisplayed()); + await driver.typeKeys(["s"]); + assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:settings"))); }); it.skip("'i' should change map to inspect mode", async function() { - // await browser.keys(["i"]); + // await driver.typeKeys(["i"]); }); it("'m' should focus map", async function() { - await browser.keys(["m"]); - assert(await (await $(".maplibregl-canvas")).isFocused()); + await driver.typeKeys(["m"]); + assert(await driver.isFocused(".maplibregl-canvas")); }); it("'!' should show debug modal", async function() { - await browser.keys(["!"]); - assert(await (await $(wd.$("modal:debug"))).isDisplayed()); + await driver.typeKeys(["!"]); + assert(await driver.isDisplayedInViewport(driver.getDataAttribute("modal:debug"))); }); }); diff --git a/test/functional/layers/index.js b/test/functional/layers/index.js index 8b880c869..5ab9b3280 100644 --- a/test/functional/layers/index.js +++ b/test/functional/layers/index.js @@ -1,32 +1,24 @@ var assert = require("assert"); -var config = require("../../config/specs"); -var helper = require("../helper"); +var driver = require("../driver"); var {v1: uuid} = require('uuid'); -var wd = require("../../wd-helper"); - describe("layers", function() { beforeEach(async function() { - await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ + driver.setStyle([ "geojson:example", "raster:raster" - ])); - await browser.acceptAlert(); - const elem = await $(".maputnik-toolbar-link"); - await elem.waitForExist(); - await browser.flushReactUpdates(); - - await helper.modal.addLayer.open(); + ]); + await driver.openLayersModal(); }); describe("ops", function() { it("delete", async function() { var styleObj; - var id = await helper.modal.addLayer.fill({ + var id = await driver.fillLayersModal({ type: "background" }) - styleObj = await helper.getStyleStore(browser); + styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": id, @@ -34,21 +26,20 @@ describe("layers", function() { }, ]); - const elem = await $(wd.$("layer-list-item:"+id+":delete", "")); - await elem.click(); + await driver.click(driver.getDataAttribute("layer-list-item:"+id+":delete", "")) - styleObj = await helper.getStyleStore(browser); + styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ ]); }); it("duplicate", async function() { var styleObj; - var id = await helper.modal.addLayer.fill({ + var id = await driver.fillLayersModal({ type: "background" }) - styleObj = await helper.getStyleStore(browser); + styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": id, @@ -56,10 +47,9 @@ describe("layers", function() { }, ]); - const elem = await $(wd.$("layer-list-item:"+id+":copy", "")); - await elem.click(); + await driver.click(driver.getDataAttribute("layer-list-item:"+id+":copy", "")); - styleObj = await helper.getStyleStore(browser); + styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": id+"-copy", @@ -74,11 +64,11 @@ describe("layers", function() { it("hide", async function() { var styleObj; - var id = await helper.modal.addLayer.fill({ + var id = await driver.fillLayersModal({ type: "background" }) - styleObj = await helper.getStyleStore(browser); + styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": id, @@ -86,10 +76,9 @@ describe("layers", function() { }, ]); - const elem = await $(wd.$("layer-list-item:"+id+":toggle-visibility", "")); - await elem.click(); + await driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", "")); - styleObj = await helper.getStyleStore(browser); + styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": id, @@ -100,9 +89,9 @@ describe("layers", function() { }, ]); - await elem.click(); + await driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", "")); - styleObj = await helper.getStyleStore(browser); + styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": id, @@ -115,21 +104,15 @@ describe("layers", function() { }) }) - describe("tooltips", function() { - }) - - describe("help", function() { - }) - describe('background', function () { it("add", async function() { - var id = await helper.modal.addLayer.fill({ + var id = await driver.fillLayersModal({ type: "background" }) - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": id, @@ -143,15 +126,12 @@ describe("layers", function() { // Setup var id = uuid(); - const selectBox = await $(wd.$("add-layer.layer-type", "select")); - await selectBox.selectByAttribute('value', "background"); - await browser.flushReactUpdates(); - await browser.setValueSafe(wd.$("add-layer.layer-id", "input"), "background:"+id); + await driver.selectFromDropdown(driver.getDataAttribute("add-layer.layer-type", "select"), "background"); + await driver.setValue(driver.getDataAttribute("add-layer.layer-id", "input"), "background:"+id); - const elem = await $(wd.$("add-layer")); - await elem.click(); + await driver.click(driver.getDataAttribute("add-layer")); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": 'background:'+id, @@ -167,15 +147,13 @@ describe("layers", function() { it("id", async function() { var bgId = await createBackground(); - const elem = await $(wd.$("layer-list-item:background:"+bgId)); - await elem.click(); + await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId)); var id = uuid(); - await browser.setValueSafe(wd.$("layer-editor.layer-id", "input"), "foobar:"+id) - const elem2 = await $(wd.$("min-zoom")); - await elem2.click(); + await driver.setValue(driver.getDataAttribute("layer-editor.layer-id", "input"), "foobar:"+id) + await driver.click(driver.getDataAttribute("min-zoom")); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": 'foobar:'+id, @@ -187,13 +165,12 @@ describe("layers", function() { it("min-zoom", async function() { var bgId = await createBackground(); - const elem = await $(wd.$("layer-list-item:background:"+bgId)); - await elem.click(); - await browser.setValueSafe(wd.$("min-zoom", 'input[type="text"]'), 1) - const elem2 = await $(wd.$("layer-editor.layer-id", "input")); - await elem2.click(); + await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId)); + await driver.setValue(driver.getDataAttribute("min-zoom", 'input[type="text"]'), 1) - var styleObj = await helper.getStyleStore(browser); + await driver.click(driver.getDataAttribute("layer-editor.layer-id", "input")); + + var styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": 'background:'+bgId, @@ -203,10 +180,10 @@ describe("layers", function() { ]); // AND RESET! - // await browser.setValueSafe(wd.$("min-zoom", "input"), "") - // await browser.click(wd.$("max-zoom", "input")); + // await driver.setValue(driver.getDataAttribute("min-zoom", "input"), "") + // await driver.click(driver.getDataAttribute("max-zoom", "input")); - // var styleObj = await helper.getStyleStore(browser); + // var styleObj = await driver.getStyleStore(); // assert.deepEqual(styleObj.layers, [ // { @@ -219,13 +196,12 @@ describe("layers", function() { it("max-zoom", async function() { var bgId = await createBackground(); - const elem = await $(wd.$("layer-list-item:background:"+bgId)); - await elem.click(); - await browser.setValueSafe(wd.$("max-zoom", 'input[type="text"]'), 1) - const elem2 = await $(wd.$("layer-editor.layer-id", "input")); - await elem2.click(); + await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId)); + await driver.setValue(driver.getDataAttribute("max-zoom", 'input[type="text"]'), 1) + + await driver.click(driver.getDataAttribute("layer-editor.layer-id", "input")); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": 'background:'+bgId, @@ -239,13 +215,12 @@ describe("layers", function() { var bgId = await createBackground(); var id = uuid(); - const elem = await $(wd.$("layer-list-item:background:"+bgId)); - await elem.click(); - await browser.setValueSafe(wd.$("layer-comment", "textarea"), id); - const elem2 = await $(wd.$("layer-editor.layer-id", "input")); - await elem2.click(); + await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId)); + await driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), id); + + await driver.click(driver.getDataAttribute("layer-editor.layer-id", "input")); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": 'background:'+bgId, @@ -258,11 +233,11 @@ describe("layers", function() { // Unset it again. // TODO: This fails - // await browser.setValueSafe(wd.$("layer-comment", "textarea"), ""); - // await browser.click(wd.$("min-zoom", "input")); - // await browser.flushReactUpdates(); + // await driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), ""); + // await driver.click(driver.getDataAttribute("min-zoom", "input")); + // await driver.zeroTimeout(); - // var styleObj = await helper.getStyleStore(browser); + // var styleObj = await driver.getStyleStore(); // assert.deepEqual(styleObj.layers, [ // { // "id": 'background:'+bgId, @@ -274,12 +249,11 @@ describe("layers", function() { it("color", null, async function() { var bgId = await createBackground(); - await browser.click(wd.$("layer-list-item:background:"+bgId)); + await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId)); - await browser.click(wd.$("spec-field:background-color", "input")) - // await browser.debug(); + await driver.click(driver.getDataAttribute("spec-field:background-color", "input")); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": 'background:'+bgId, @@ -311,16 +285,18 @@ describe("layers", function() { it.skip("parse error", async function() { var bgId = await createBackground(); - await browser.click(wd.$("layer-list-item:background:"+bgId)); + + + await driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId)); var errorSelector = ".CodeMirror-lint-marker-error"; - assert.equal(await browser.isExisting(errorSelector), false); + assert.equal(await driver.isExisting(errorSelector), false); - await browser.click(".CodeMirror") - await browser.keys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"); - await browser.waitForExist(errorSelector) + await driver.click(".CodeMirror"); + await driver.keys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"); + await driver.waitForExist(errorSelector); - await browser.click(wd.$("layer-editor.layer-id")); + await driver.click(driver.getDataAttribute("layer-editor.layer-id")); }); }); }) @@ -328,14 +304,13 @@ describe("layers", function() { describe('fill', function () { it("add", async function() { - // await browser.debug(); - var id = await helper.modal.addLayer.fill({ + var id = await driver.fillLayersModal({ type: "fill", layer: "example" }); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": id, @@ -351,12 +326,12 @@ describe("layers", function() { describe('line', function () { it("add", async function() { - var id = await helper.modal.addLayer.fill({ + var id = await driver.fillLayersModal({ type: "line", layer: "example" }); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": id, @@ -374,12 +349,12 @@ describe("layers", function() { describe('symbol', function () { it("add", async function() { - var id = await helper.modal.addLayer.fill({ + var id = await driver.fillLayersModal({ type: "symbol", layer: "example" }); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": id, @@ -392,12 +367,12 @@ describe("layers", function() { describe('raster', function () { it("add", async function() { - var id = await helper.modal.addLayer.fill({ + var id = await driver.fillLayersModal({ type: "raster", layer: "raster" }); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": id, @@ -410,12 +385,12 @@ describe("layers", function() { describe('circle', function () { it("add", async function() { - var id = await helper.modal.addLayer.fill({ + var id = await driver.fillLayersModal({ type: "circle", layer: "example" }); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": id, @@ -429,12 +404,12 @@ describe("layers", function() { describe('fill extrusion', function () { it("add", async function() { - var id = await helper.modal.addLayer.fill({ + var id = await driver.fillLayersModal({ type: "fill-extrusion", layer: "example" }); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.deepEqual(styleObj.layers, [ { "id": id, @@ -448,41 +423,36 @@ describe("layers", function() { describe("groups", function() { it("simple", async function() { - await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ - "geojson:example" - ])); - await browser.acceptAlert(); + await driver.setStyle(["geojson:example"]); - await helper.modal.addLayer.open(); - await helper.modal.addLayer.fill({ + await driver.openLayersModal(); + await driver.fillLayersModal({ id: "foo", type: "background" }) - await helper.modal.addLayer.open(); - await helper.modal.addLayer.fill({ + await driver.openLayersModal(); + await driver.fillLayersModal({ id: "foo_bar", type: "background" }) - await helper.modal.addLayer.open(); - await helper.modal.addLayer.fill({ + await driver.openLayersModal(); + await driver.fillLayersModal({ id: "foo_bar_baz", type: "background" }) - const groupEl = await $(wd.$("layer-list-group:foo-0")); - await groupEl.isDisplayed(); + assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo")), true); + assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar")), false); + assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz")), false); - assert.equal(await (await $(wd.$("layer-list-item:foo"))).isDisplayedInViewport(), true); - assert.equal(await (await $(wd.$("layer-list-item:foo_bar"))).isDisplayedInViewport(), false); - assert.equal(await (await $(wd.$("layer-list-item:foo_bar_baz"))).isDisplayedInViewport(), false); + await driver.click(driver.getDataAttribute("layer-list-group:foo-0")); - await groupEl.click(); + assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo")), true); + assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar")), true); + assert.equal(await driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz")), true); - assert.equal(await (await $(wd.$("layer-list-item:foo"))).isDisplayedInViewport(), true); - assert.equal(await (await $(wd.$("layer-list-item:foo_bar"))).isDisplayedInViewport(), true); - assert.equal(await (await $(wd.$("layer-list-item:foo_bar_baz"))).isDisplayedInViewport(), true); }) }) }); diff --git a/test/functional/map/index.js b/test/functional/map/index.js index 6a9902bb7..3e5b31ad6 100644 --- a/test/functional/map/index.js +++ b/test/functional/map/index.js @@ -1,16 +1,10 @@ -var config = require("../../config/specs"); -var helper = require("../helper"); - +var driver = require("../driver"); describe("map", function() { describe.skip("zoom level", function() { it("via url", async function() { - var zoomLevel = "12.37" - await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ - "geojson:example" - ])+"#"+zoomLevel+"/41.3805/2.1635"); - await browser.alertAccept(); - + var zoomLevel = "12.37"; + await driver.setStyle(["geojson:example"], zoomLevel); await browser.waitUntil(async function () { return ( await browser.isVisible(".maplibregl-ctrl-zoom") @@ -20,12 +14,9 @@ describe("map", function() { }) it("via map controls", async function() { var zoomLevel = 12.37; - await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ - "geojson:example" - ])+"#"+zoomLevel+"/41.3805/2.1635"); - await browser.alertAccept(); + await driver.setStyle(["geojson:example"], zoomLevel); - await browser.click(".maplibregl-ctrl-zoom-in") + await driver.click(".maplibregl-ctrl-zoom-in"); await browser.waitUntil(async function () { var text = await browser.getText(".maplibregl-ctrl-zoom") return text === "Zoom level: "+(zoomLevel+1); diff --git a/test/functional/modals/index.js b/test/functional/modals/index.js index 37c3836a3..f589731dc 100644 --- a/test/functional/modals/index.js +++ b/test/functional/modals/index.js @@ -1,93 +1,53 @@ var assert = require('assert'); -var fs = require("fs"); -var wd = require("../../wd-helper"); -var config = require("../../config/specs"); -var helper = require("../helper"); - - -async function closeModal(wdKey) { - const selector = wd.$(wdKey); - - await browser.waitUntil(async function() { - const elem = await $(selector); - return await elem.isDisplayedInViewport(); - }); - - const closeBtnSelector = await $(wd.$(wdKey+".close-modal")); - await closeBtnSelector.click(); - - await browser.waitUntil(async function() { - return await browser.execute((selector) => { - return !document.querySelector(selector); - }, selector); - }); -} +var driver = require("../driver"); describe("modals", function() { describe("open", function() { - var styleFilePath = __dirname+"/../../example-style.json"; - var styleFileData = JSON.parse(fs.readFileSync(styleFilePath)); - beforeEach(async function() { - await browser.url(config.baseUrl+"?debug"); - const elem = await $(".maputnik-toolbar-link"); - await elem.waitForExist(); - await browser.flushReactUpdates(); - - const elem2 = await $(wd.$("nav:open")); - await elem2.click(); - await browser.flushReactUpdates(); + await driver.setStyle(); + await driver.click(driver.getDataAttribute("nav:open")); + await driver.zeroTimeout(); }); it("close", async function() { - await closeModal("modal:open"); + await driver.closeModal("modal:open"); }); // "chooseFile" command currently not available for wdio v5 https://github.com/webdriverio/webdriverio/pull/3632 it.skip("upload", async function() { - const elem = await $("*[type='file']"); - await elem.waitForExist(); - await browser.chooseFile("*[type='file']", styleFilePath); + await driver.chooseExampleFile(); - var styleObj = await helper.getStyleStore(browser); - assert.deepEqual(styleFileData, styleObj); + var styleObj = await driver.getStyleStore(); + assert.deepEqual(await driver.getExampleFileData(), styleObj); }); it("load from url", async function() { - var styleFileUrl = helper.getGeoServerUrl("example-style.json"); + var styleFileUrl = driver.getGeoServerUrl("example-style.json"); - await browser.setValueSafe(wd.$("modal:open.url.input"), styleFileUrl); + await driver.setValue(driver.getDataAttribute("modal:open.url.input"), styleFileUrl); - const selector = await $(wd.$("modal:open.url.button")); - await selector.click(); + await driver.click(driver.getDataAttribute("modal:open.url.button")) // Allow the network request to happen // NOTE: Its localhost so this should be fast. - await browser.pause(300); + await driver.sleep(300); - var styleObj = await helper.getStyleStore(browser); - assert.deepEqual(styleFileData, styleObj); + var styleObj = await driver.getStyleStore(); + assert.deepEqual(await driver.getExampleFileData(), styleObj); }); - - // TODO: Need to work out how to mock out the end points - it("gallery") }) describe("shortcuts", function() { it("open/close", async function() { - await browser.url(config.baseUrl+"?debug"); + await driver.setStyle(); - const elem = await $(".maputnik-toolbar-link"); - await elem.waitForExist(); - await browser.flushReactUpdates(); + await driver.typeKeys(["?"]); - await browser.keys(["?"]); - - const modalEl = await $(wd.$("modal:shortcuts")) + const modalEl = await $(driver.getDataAttribute("modal:shortcuts")) assert(await modalEl.isDisplayed()); - await closeModal("modal:shortcuts"); + await driver.closeModal("modal:shortcuts"); }); }); @@ -95,19 +55,13 @@ describe("modals", function() { describe("export", function() { beforeEach(async function() { - await browser.url(config.baseUrl+"?debug"); - - const elem = await $(".maputnik-toolbar-link"); - await elem.waitForExist(); - await browser.flushReactUpdates(); - - const elem2 = await $(wd.$("nav:export")); - await elem2.click(); - await browser.flushReactUpdates(); + await driver.setStyle(); + await driver.click(driver.getDataAttribute("nav:export")); + await driver.zeroTimeout(); }); it("close", async function() { - await closeModal("modal:export"); + await driver.closeModal("modal:export"); }); // TODO: Work out how to download a file and check the contents @@ -123,97 +77,79 @@ describe("modals", function() { describe("inspect", function() { it("toggle", async function() { - await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ - "geojson:example" - ])); - await browser.acceptAlert(); + await driver.setStyle(["geojson:example"]); - const selectBox = await $(wd.$("nav:inspect", "select")); - await selectBox.selectByAttribute('value', "inspect"); + await driver.selectFromDropdown(driver.getDataAttribute("nav:inspect", "select"), "inspect"); }) }) describe("style settings", function() { beforeEach(async function() { - await browser.url(config.baseUrl+"?debug"); - - const elem = await $(".maputnik-toolbar-link"); - await elem.waitForExist(); - await browser.flushReactUpdates(); - - const elem2 = await $(wd.$("nav:settings")); - await elem2.click(); - await browser.flushReactUpdates(); + await driver.setStyle(); + await driver.click(driver.getDataAttribute("nav:settings")); + await driver.zeroTimeout(); }); it("name", async function() { - await browser.setValueSafe(wd.$("modal:settings.name"), "foobar") - const elem = await $(wd.$("modal:settings.owner")); - await elem.click(); - await browser.flushReactUpdates(); + await driver.setValue(driver.getDataAttribute("modal:settings.name"), "foobar"); + await driver.click(driver.getDataAttribute("modal:settings.owner")); + await driver.zeroTimeout(); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.equal(styleObj.name, "foobar"); }) it("owner", async function() { - await browser.setValueSafe(wd.$("modal:settings.owner"), "foobar") - const elem = await $(wd.$("modal:settings.name")); - await elem.click(); - await browser.flushReactUpdates(); + await driver.setValue(driver.getDataAttribute("modal:settings.owner"), "foobar") + await driver.click(driver.getDataAttribute("modal:settings.name")); + await driver.zeroTimeout(); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.equal(styleObj.owner, "foobar"); }) it("sprite url", async function() { - await browser.setValueSafe(wd.$("modal:settings.sprite"), "http://example.com") - const elem = await $(wd.$("modal:settings.name")); - await elem.click(); - await browser.flushReactUpdates(); + await driver.setValue(driver.getDataAttribute("modal:settings.sprite"), "http://example.com") + await driver.click(driver.getDataAttribute("modal:settings.name")); + await driver.zeroTimeout(); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.equal(styleObj.sprite, "http://example.com"); }) it("glyphs url", async function() { var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf" - await browser.setValueSafe(wd.$("modal:settings.glyphs"), glyphsUrl) - const elem = await $(wd.$("modal:settings.name")); - await elem.click(); - await browser.flushReactUpdates(); + await driver.setValue(driver.getDataAttribute("modal:settings.glyphs"), glyphsUrl); + await driver.click(driver.getDataAttribute("modal:settings.name")); + await driver.zeroTimeout(); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.equal(styleObj.glyphs, glyphsUrl); }) it("maptiler access token", async function() { var apiKey = "testing123"; - await browser.setValueSafe(wd.$("modal:settings.maputnik:openmaptiles_access_token"), apiKey); - const elem = await $(wd.$("modal:settings.name")); - await elem.click(); - await browser.flushReactUpdates(); + await driver.setValue(driver.getDataAttribute("modal:settings.maputnik:openmaptiles_access_token"), apiKey); + await driver.click(driver.getDataAttribute("modal:settings.name")); + await driver.zeroTimeout(); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.equal(styleObj.metadata["maputnik:openmaptiles_access_token"], apiKey); }) it("thunderforest access token", async function() { var apiKey = "testing123"; - await browser.setValueSafe(wd.$("modal:settings.maputnik:thunderforest_access_token"), apiKey); - const elem = await $(wd.$("modal:settings.name")); - await elem.click(); - await browser.flushReactUpdates(); + await driver.setValue(driver.getDataAttribute("modal:settings.maputnik:thunderforest_access_token"), apiKey); + await driver.click(driver.getDataAttribute("modal:settings.name")); + await driver.zeroTimeout(); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.equal(styleObj.metadata["maputnik:thunderforest_access_token"], apiKey); }) it("style renderer", async function() { - const selector = await $(wd.$("modal:settings.maputnik:renderer")); - await selector.selectByAttribute('value', "ol"); - const elem = await $(wd.$("modal:settings.name")); - await elem.click(); - await browser.flushReactUpdates(); + await driver.selectFromDropdown(driver.getDataAttribute("modal:settings.maputnik:renderer"), "ol"); + await driver.click(driver.getDataAttribute("modal:settings.name")); + await driver.zeroTimeout(); - var styleObj = await helper.getStyleStore(browser); + var styleObj = await driver.getStyleStore(); assert.equal(styleObj.metadata["maputnik:renderer"], "ol"); }) }) diff --git a/test/functional/screenshots/index.js b/test/functional/screenshots/index.js index 5f044023b..f01229d93 100644 --- a/test/functional/screenshots/index.js +++ b/test/functional/screenshots/index.js @@ -1,6 +1,4 @@ -var config = require("../../config/specs"); -var helper = require("../helper"); -var wd = require("../../wd-helper"); +var driver = require("../driver"); // These will get used in the marketing material. They are also useful to do a quick manual check of the styling across browsers @@ -8,104 +6,57 @@ var wd = require("../../wd-helper"); describe('screenshots', function() { beforeEach(async function() { - await browser.setWindowSize(1280, 800) + await driver.setWindowSize(1280, 800) }) it("front_page", async function() { - await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ - "geojson:example" - ])); - await browser.acceptAlert(); - const elem = await $(".maputnik-toolbar-link"); - await elem.waitForExist(); - await browser.flushReactUpdates(); - - await browser.takeScreenShot("/front_page.png") + await driver.setStyle(["geojson:example"]); + + await driver.takeScreenShot("/front_page.png") }) it("open", async function() { - await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ - "geojson:example" - ])); - await browser.acceptAlert(); - const elem = await $(".maputnik-toolbar-link"); - await elem.waitForExist(); - await browser.flushReactUpdates(); - - const nav_open = await $(wd.$("nav:open")); - await nav_open.click(); - await nav_open.waitForExist(); - await browser.flushReactUpdates(); - - await browser.takeScreenShot("/open.png") + await driver.setStyle(["geojson:example"]); + await driver.click(driver.getDataAttribute("nav:open")); + await driver.zeroTimeout(); + + await driver.takeScreenShot("/open.png") }) it("export", async function() { - await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ - "geojson:example" - ])); - await browser.acceptAlert(); - const elem = await $(".maputnik-toolbar-link") - await elem.waitForExist() - await browser.flushReactUpdates(); - - const nav_export = await $(wd.$("nav:export")); - await nav_export.click(); - await nav_export.waitForExist(); - await browser.flushReactUpdates(); - - await browser.takeScreenShot("/export.png") + await driver.setStyle(["geojson:example"]); + + await driver.click(driver.getDataAttribute("nav:export")); + await driver.zeroTimeout(); + + await driver.takeScreenShot("/export.png") }) it("sources", async function() { - await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ - "geojson:example" - ])); - await browser.acceptAlert(); - const elem = await $(".maputnik-toolbar-link") - await elem.waitForExist() - await browser.flushReactUpdates(); - - const nav_sources = await $(wd.$("nav:sources")); - await nav_sources.click(); - await nav_sources.waitForExist(); - await browser.flushReactUpdates(); - - await browser.takeScreenShot("/sources.png") + await driver.setStyle(["geojson:example"]); + + await driver.click(driver.getDataAttribute("nav:sources")); + await driver.zeroTimeout(); + + await driver.takeScreenShot("/sources.png") }) it("style settings", async function() { - await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ - "geojson:example" - ])); - await browser.acceptAlert(); - const elem = await $(".maputnik-toolbar-link") - await elem.waitForExist() - await browser.flushReactUpdates(); - - const nav_settings = await $(wd.$("nav:settings")); - await nav_settings.click(); - await nav_settings.waitForExist(); - await browser.flushReactUpdates(); - - await browser.takeScreenShot("/settings.png") + await driver.setStyle(["geojson:example"]); + + await driver.click(driver.getDataAttribute("nav:settings")); + await driver.zeroTimeout(); + + await driver.takeScreenShot("/settings.png") }) it("inspect", async function() { - await browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ - "geojson:example" - ])); - await browser.acceptAlert(); - const elem = await $(".maputnik-toolbar-link") - await elem.waitForExist() - await browser.flushReactUpdates(); - - const selectBox = await $(wd.$("nav:inspect", "select")); - await selectBox.selectByAttribute('value', 'inspect'); + await driver.setStyle(["geojson:example"]); - await browser.flushReactUpdates(); + await driver.selectFromDropdown(driver.getDataAttribute("nav:inspect", "select"), 'inspect'); + await driver.zeroTimeout(); - await browser.takeScreenShot("/inspect.png") + await driver.takeScreenShot("/inspect.png") }) }) diff --git a/test/functional/util/webdriverio-ext.js b/test/functional/util/webdriverio-ext.js deleted file mode 100644 index 4804fa6a2..000000000 --- a/test/functional/util/webdriverio-ext.js +++ /dev/null @@ -1,63 +0,0 @@ -var artifacts = require("../../artifacts"); -var path = require("path"); - -const extendWebdriverIO = async function() { - await browser.setTimeout({ 'script': 20 * 1000 }); - await browser.setTimeout({ 'implicit': 20 * 1000 }); - - var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots"); - - /** - * Sometimes chrome driver can result in the wrong text. - * - * See - */ - try { - await browser.addCommand('setValueSafe', async function (selector, text) { - for (var i = 0; i < 10; i++) { - const elem = await $(selector); - await elem.waitForDisplayed(500); - - var elements = await browser.findElements("css selector", selector); - if (elements.length > 1) { - throw "Too many elements found"; - } - - const elem2 = await $(selector); - await elem2.setValue(text); - - var browserText = await elem2.getValue(); - - if (browserText == text) { - return; - } - else { - console.error("Warning: setValue failed, trying again"); - } - } - - // Wait for change events to fire and state updated - await browser.flushReactUpdates(); - }) - - await browser.addCommand('takeScreenShot', async function (filepath) { - var savepath = path.join(SCREENSHOTS_PATH, filepath); - await browser.saveScreenshot(savepath); - }); - - await browser.addCommand('flushReactUpdates', async function () { - await browser.executeAsync(function (done) { - // For any events to propagate - setTimeout(function () { - // For the DOM to be updated. - setTimeout(done, 0); - }, 0) - }) - }) - - } catch (err) { - console.error(">>> Ignored error: " + err); - } -} - -module.exports = extendWebdriverIO; \ No newline at end of file diff --git a/test/wd-helper.js b/test/wd-helper.js deleted file mode 100644 index c16912955..000000000 --- a/test/wd-helper.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - "$": function(key, selector) { - selector = selector || ""; - return "*[data-wd-key='"+key+"'] "+selector; - } -}