From a7739584036a9a58f38636e75d3e4be6c7020304 Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 10 Jan 2018 13:19:34 +0000 Subject: [PATCH] Tidy tests. --- config/wdio.conf.js | 2 +- test/functional/advanced.js | 1077 ----------------------- test/functional/helper.js | 79 ++ test/functional/history/index.js | 205 +++++ test/functional/index.js | 33 + test/functional/layers/index.js | 497 +++++++++++ test/functional/map/index.js | 35 + test/functional/modals/index.js | 203 +++++ test/functional/screenshots/index.js | 93 ++ test/functional/util/coverage.js | 26 + test/functional/util/webdriverio-ext.js | 56 ++ 11 files changed, 1228 insertions(+), 1078 deletions(-) delete mode 100644 test/functional/advanced.js create mode 100644 test/functional/helper.js create mode 100644 test/functional/history/index.js create mode 100644 test/functional/index.js create mode 100644 test/functional/layers/index.js create mode 100644 test/functional/map/index.js create mode 100644 test/functional/modals/index.js create mode 100644 test/functional/screenshots/index.js create mode 100644 test/functional/util/coverage.js create mode 100644 test/functional/util/webdriverio-ext.js diff --git a/config/wdio.conf.js b/config/wdio.conf.js index 41fe910d..9109e7a7 100644 --- a/config/wdio.conf.js +++ b/config/wdio.conf.js @@ -11,7 +11,7 @@ var SCREENSHOT_PATH = artifacts.pathSync("screenshots"); exports.config = { specs: [ - './test/functional/advanced.js' + './test/functional/index.js' ], exclude: [ ], diff --git a/test/functional/advanced.js b/test/functional/advanced.js deleted file mode 100644 index 0f77f106..00000000 --- a/test/functional/advanced.js +++ /dev/null @@ -1,1077 +0,0 @@ -var assert = require('assert'); -var config = require("../config/specs"); -var uuid = require('uuid/v1'); -var geoServer = require("../geojson-server"); -var wd = require("../wd-helper"); -var fs = require("fs"); -var path = require("path"); -var mkdirp = require("mkdirp"); -var artifacts = require("../artifacts"); -var istanbulCov = require('istanbul-lib-coverage'); - -var COVERAGE_PATH = artifacts.pathSync("/coverage"); -var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots"); - - -browser.timeoutsAsyncScript(10*1000); -browser.timeoutsImplicitWait(10*1000); - - - -var modelCommands = { - addLayer: { - open: function() { - var selector = wd.$('layer-list:add-layer'); - browser.click(selector); - - // Wait for events - browser.flushReactUpdates(); - - browser.waitForExist(wd.$('modal:add-layer')); - browser.isVisible(wd.$('modal:add-layer')); - browser.isVisibleWithinViewport(wd.$('modal:add-layer')); - - // Wait for events - browser.flushReactUpdates(); - }, - fill: function(opts) { - var type = opts.type; - var layer = opts.layer; - var id; - if(opts.id) { - id = opts.id - } - else { - id = type+":"+uuid(); - } - - browser.selectByValue(wd.$("add-layer.layer-type", "select"), type); - browser.flushReactUpdates(); - - browser.setValueSafe(wd.$("add-layer.layer-id", "input"), id); - if(layer) { - browser.setValueSafe(wd.$("add-layer.layer-source-block", "input"), layer); - } - - browser.flushReactUpdates(); - browser.click(wd.$("add-layer")); - - return id; - } - } -} - -/** - * Sometimes chrome driver can result in the wrong text. - * - * See - */ -try { -browser.addCommand('setValueSafe', function(selector, text) { - for(var i=0; i<10; i++) { - console.log(">>>> waiting for visible"); - browser.waitForVisible(selector); - - var elements = browser.elements(selector); - if(elements.length > 1) { - console.error(">>> Too many elements found"); - throw "Too many elements found"; - } - - console.log(">>>> setting value"); - browser.setValue(selector, text); - var browserText = browser.getValue(selector); - - console.log("browserText='%s' test='%s'", browserText, text); - - 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 data = browser.screenshot(); - fs.writeFileSync(path.join(SCREENSHOTS_PATH, filepath), data.value, 'base64'); -}); - -browser.addCommand('flushReactUpdates', function() { - browser.executeAsync(function(done) { - // For any events to propogate - setImmediate(function() { - // For the DOM to be updated. - setImmediate(done); - }) - }) -}) - -} catch(err) { - console.error(err); -} - -describe('maputnik', function() { - var geoserver; - - before(function(done) { - // Start style server - geoserver = geoServer.listen(9002, done); - }); - - function getStyleStore(browser) { - var result = browser.executeAsync(function(done) { - window.debug.get("maputnik", "styleStore").latestStyle(done); - }) - return result.value; - } - - function getRevisionStore(browser) { - var result = browser.execute(function(done) { - var rs = window.debug.get("maputnik", "revisionStore") - - return { - currentIdx: rs.currentIdx, - revisions: rs.revisions - }; - }) - return result.value; - } - - function getStyleUrl(styles) { - var port = geoserver.address().port; - return "http://localhost:"+port+"/styles/empty/"+styles.join(","); - } - - function getGeoServerUrl(urlPath) { - var port = geoserver.address().port; - return "http://localhost:"+port+"/"+urlPath; - } - - beforeEach(function() { - browser.url(config.baseUrl+"?debug&style="+getStyleUrl([ - "geojson:example", - "raster:raster" - ])); - browser.waitForExist(".maputnik-toolbar-link"); - browser.flushReactUpdates(); - }); - - it('check logo exists', function () { - var src = browser.getAttribute(".maputnik-toolbar-link img", "src"); - assert.equal(src, config.baseUrl+'/img/logo-color.svg'); - }); - - function closeModal(wdKey) { - console.log(">> A"); - browser.waitUntil(function() { - return browser.isVisibleWithinViewport(wd.$(wdKey)); - }); - - console.log(">> B"); - var closeBtnSelector = wd.$(wdKey+".close-modal"); - browser.click(closeBtnSelector); - - console.log(">> C"); - browser.waitUntil(function() { - return !browser.isVisibleWithinViewport(wd.$(wdKey)); - }); - } - - describe("modal", function() { - describe("open", function() { - var styleFilePath = __dirname+"/../example-style.json"; - var styleFileData = JSON.parse(fs.readFileSync(styleFilePath)); - - beforeEach(function() { - browser.url(config.baseUrl+"?debug"); - - browser.waitForExist(".maputnik-toolbar-link"); - browser.flushReactUpdates(); - - browser.click(wd.$("nav:open")) - browser.flushReactUpdates(); - }); - - it("close", function() { - closeModal("open-modal"); - }); - - it("upload", function() { - browser.waitForExist("*[type='file']") - browser.chooseFile("*[type='file']", styleFilePath); - - var styleObj = getStyleStore(browser); - console.log("styleObj", styleObj); - assert.deepEqual(styleFileData, styleObj); - }); - - it("load from url", function() { - var styleFileUrl = getGeoServerUrl("example-style.json"); - - browser.setValueSafe(wd.$("open-modal.url.input"), styleFileUrl); - - var selector = wd.$("open-modal.url.button"); - console.log("selector", selector); - browser.click(selector); - - // Allow the network request to happen - // NOTE: Its localhost so this should be fast. - browser.pause(300); - - var styleObj = getStyleStore(browser); - console.log("styleObj", styleObj); - console.log("styleFileData", styleFileData); - assert.deepEqual(styleFileData, styleObj); - }); - - // TODO: Need to work out how to mock out the end points - it("gallery") - }) - - describe("export", function() { - - beforeEach(function() { - browser.url(config.baseUrl+"?debug"); - - browser.waitForExist(".maputnik-toolbar-link"); - browser.flushReactUpdates(); - - browser.click(wd.$("nav:export")) - browser.flushReactUpdates(); - }); - - it("close", function() { - closeModal("export-modal"); - }); - - // TODO: Work out how to download a file and check the contents - it("download") - // TODO: Work out how to mock the end git points - it("save to gist") - }) - - describe("sources", function() { - it("active sources") - it("public source") - it("add new source") - }) - - describe("inspect", function() { - it("toggle", function() { - browser.url(config.baseUrl+"?debug&style="+getStyleUrl([ - "geojson:example" - ])); - - browser.click(wd.$("nav:inspect")); - }) - }) - - describe("style settings", function() { - beforeEach(function() { - browser.url(config.baseUrl+"?debug"); - - browser.waitForExist(".maputnik-toolbar-link"); - browser.flushReactUpdates(); - - browser.click(wd.$("nav:settings")) - browser.flushReactUpdates(); - }); - - it("name", function() { - browser.setValueSafe(wd.$("modal-settings.name"), "foobar") - browser.click(wd.$("modal-settings.owner")) - browser.flushReactUpdates(); - - var styleObj = getStyleStore(browser); - console.log("styleObj", styleObj); - assert.equal(styleObj.name, "foobar"); - }) - it("owner", function() { - browser.setValueSafe(wd.$("modal-settings.owner"), "foobar") - browser.click(wd.$("modal-settings.name")) - browser.flushReactUpdates(); - - var styleObj = getStyleStore(browser); - console.log("styleObj", styleObj); - assert.equal(styleObj.owner, "foobar"); - }) - it("sprite url", function() { - browser.setValueSafe(wd.$("modal-settings.sprite"), "http://example.com") - browser.click(wd.$("modal-settings.name")) - browser.flushReactUpdates(); - - var styleObj = getStyleStore(browser); - console.log("styleObj", styleObj); - assert.equal(styleObj.sprite, "http://example.com"); - }) - 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")) - browser.flushReactUpdates(); - - var styleObj = getStyleStore(browser); - console.log("styleObj", styleObj); - assert.equal(styleObj.glyphs, glyphsUrl); - }) - - it("mapbox access token", function() { - var apiKey = "testing123"; - browser.setValueSafe(wd.$("modal-settings.maputnik:mapbox_access_token"), apiKey); - browser.click(wd.$("modal-settings.name")) - browser.flushReactUpdates(); - - var styleObj = getStyleStore(browser); - console.log("styleObj", styleObj); - browser.waitUntil(function() { - return styleObj.metadata["maputnik:mapbox_access_token"] == apiKey; - }) - }) - - it("open map tiles access token", function() { - var apiKey = "testing123"; - browser.setValueSafe(wd.$("modal-settings.maputnik:openmaptiles_access_token"), apiKey); - browser.click(wd.$("modal-settings.name")) - browser.flushReactUpdates(); - - var styleObj = getStyleStore(browser); - console.log("styleObj", styleObj); - assert.equal(styleObj.metadata["maputnik:openmaptiles_access_token"], apiKey); - }) - - it("style renderer", function() { - var selector = wd.$("modal-settings.maputnik:renderer"); - browser.selectByValue(selector, "ol3"); - browser.click(wd.$("modal-settings.name")) - browser.flushReactUpdates(); - - var styleObj = getStyleStore(browser); - console.log("styleObj", styleObj); - assert.equal(styleObj.metadata["maputnik:renderer"], "ol3"); - }) - }) - - describe("sources", function() { - it("toggle") - }) - }) - - describe.skip("zoom level", function() { - it("via url", function() { - var zoomLevel = "12.37" - browser.url(config.baseUrl+"?debug&style="+getStyleUrl([ - "geojson:example" - ])+"#"+zoomLevel+"/41.3805/2.1635"); - - browser.waitUntil(function () { - return ( - browser.isVisible(".mapboxgl-ctrl-zoom") - && browser.getText(".mapboxgl-ctrl-zoom") === "Zoom level: "+(zoomLevel) - ); - }, 10*1000) - }) - it("via map controls", function() { - var zoomLevel = 12.37; - browser.url(config.baseUrl+"?debug&style="+getStyleUrl([ - "geojson:example" - ])+"#"+zoomLevel+"/41.3805/2.1635"); - - browser.click(".mapboxgl-ctrl-zoom-in") - browser.waitUntil(function () { - var text = browser.getText(".mapboxgl-ctrl-zoom") - return text === "Zoom level: "+(zoomLevel+1); - }, 10*1000) - }) - }) - - describe.skip("groups", function() { - it("simple", function() { - browser.url(config.baseUrl+"?debug&style="+getStyleUrl([ - "geojson:example" - ])); - - modelCommands.addLayer.open(); - var aId = modelCommands.addLayer.fill({ - id: "foo", - type: "background" - }) - - modelCommands.addLayer.open(); - var bId = modelCommands.addLayer.fill({ - id: "foo_bar", - type: "background" - }) - - modelCommands.addLayer.open(); - var bId = modelCommands.addLayer.fill({ - id: "foo_baz", - type: "background" - }) - - browser.waitForExist(wd.$("layer-list-group:foo-0")); - - assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo")), false); - assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo_bar")), false); - assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo_baz")), false); - - browser.click(wd.$("layer-list-group:foo-0")); - - assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo")), true); - assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo_bar")), true); - assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo_baz")), true); - }) - }) - - describe.skip("history", function() { - /** - * See - */ - it("undo/redo", function() { - var styleObj; - - browser.url(config.baseUrl+"?debug&style="+getStyleUrl([ - "geojson:example" - ])); - - modelCommands.addLayer.open(); - - styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, []); - - modelCommands.addLayer.fill({ - id: "step 1", - type: "background" - }) - - styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": "step 1", - "type": 'background' - } - ]); - - modelCommands.addLayer.open(); - modelCommands.addLayer.fill({ - id: "step 2", - type: "background" - }) - - styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": "step 1", - "type": 'background' - }, - { - "id": "step 2", - "type": 'background' - } - ]); - - console.log(">>> LOGS", JSON.stringify(browser.log("browser"), null, 2)) - - browser - .keys(['Control', 'z']) - .keys(['Control']); - styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": "step 1", - "type": 'background' - } - ]); - - console.log(">>> LOGS", JSON.stringify(browser.log("browser"), null, 2)) - - browser - .keys(['Control', 'z']) - .keys(['Control']); - styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - ]); - - console.log(">>> LOGS", JSON.stringify(browser.log("browser"), null, 2)) - - browser - .keys(['Control', 'y']) - .keys(['Control']); - styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": "step 1", - "type": 'background' - } - ]); - - console.log(">>> LOGS", JSON.stringify(browser.log("browser"), null, 2)) - - browser - .keys(['Control', 'y']) - .keys(['Control']); - styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": "step 1", - "type": 'background' - }, - { - "id": "step 2", - "type": 'background' - } - ]); - - console.log(">>> LOGS", JSON.stringify(browser.log("browser"), null, 2)) - }); - }) - - describe("layers", function() { - beforeEach(function() { - modelCommands.addLayer.open(); - }); - - describe("ops", function() { - it("delete", function() { - var styleObj; - var id = modelCommands.addLayer.fill({ - type: "background" - }) - - styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": id, - "type": 'background' - }, - ]); - - browser.click(wd.$("layer-list-item:"+id+":delete", "")); - - styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - ]); - }); - - it("duplicate", function() { - var styleObj; - var id = modelCommands.addLayer.fill({ - type: "background" - }) - - styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": id, - "type": 'background' - }, - ]); - - browser.click(wd.$("layer-list-item:"+id+":copy", "")); - - styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": id+"-copy", - "type": "background" - }, - { - "id": id, - "type": "background" - }, - ]); - }); - - it("hide", function() { - var styleObj; - var id = modelCommands.addLayer.fill({ - type: "background" - }) - - styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": id, - "type": 'background' - }, - ]); - - browser.click(wd.$("layer-list-item:"+id+":toggle-visibility", "")); - - styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": id, - "type": "background", - "layout": { - "visibility": "none" - } - }, - ]); - - browser.click(wd.$("layer-list-item:"+id+":toggle-visibility", "")); - - styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": id, - "type": "background", - "layout": { - "visibility": "visible" - } - }, - ]); - }) - }) - - describe("grouped", function() { - it("with underscore") - it("no without underscore") - it("double underscore only grouped once") - }) - - describe("tooltips", function() { - }) - - describe("help", function() { - }) - - - describe('background', function () { - - it.skip("add", function() { - var id = modelCommands.addLayer.fill({ - type: "background" - }) - - browser.waitUntil(function() { - var styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": id, - "type": 'background' - } - ]); - }); - }); - - describe("modify", function() { - function createBackground() { - // Setup - var id = uuid(); - - browser.selectByValue(wd.$("add-layer.layer-type", "select"), "background"); - browser.flushReactUpdates(); - browser.setValueSafe(wd.$("add-layer.layer-id", "input"), "background:"+id); - - browser.click(wd.$("add-layer")); - - var styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": 'background:'+id, - "type": 'background' - } - ]); - return id; - } - - // ====> THESE SHOULD BE FROM THE SPEC - describe("layer", function() { - it("expand/collapse"); - it("id", function() { - var bgId = createBackground(); - - browser.click(wd.$("layer-list-item:background:"+bgId)) - - var id = uuid(); - browser.setValueSafe(wd.$("layer-editor.layer-id", "input"), "foobar:"+id) - browser.click(wd.$("min-zoom")) - - var styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": 'foobar:'+id, - "type": 'background' - } - ]); - }); - - // NOTE: This needs to be removed from the code - it("type"); - - 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")); - - var styleObj = getStyleStore(browser); - console.log("styleObj", styleObj); - assert.deepEqual(styleObj.layers, [ - { - "id": 'background:'+bgId, - "type": 'background', - "minzoom": 1 - } - ]); - - // AND RESET! - // browser.setValueSafe(wd.$("min-zoom", "input"), "") - // browser.click(wd.$("max-zoom", "input")); - - // var styleObj = getStyleStore(browser); - // console.log("styleObj", styleObj); - - // assert.deepEqual(styleObj.layers, [ - // { - // "id": 'background:'+bgId, - // "type": 'background' - // } - // ]); - }); - - 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")); - - var styleObj = getStyleStore(browser); - console.log("styleObj", styleObj); - assert.deepEqual(styleObj.layers, [ - { - "id": 'background:'+bgId, - "type": 'background', - "maxzoom": 1 - } - ]); - }); - - it("comments", function() { - var bgId = createBackground(); - var id = uuid(); - - browser.click(wd.$("layer-list-item:background:"+bgId)); - browser.setValueSafe(wd.$("layer-comment", "textarea"), id); - browser.click(wd.$("layer-editor.layer-id", "input")); - - var styleObj = getStyleStore(browser); - console.log("styleObj", styleObj); - assert.deepEqual(styleObj.layers, [ - { - "id": 'background:'+bgId, - "type": 'background', - metadata: { - 'maputnik:comment': id - } - } - ]); - - // Unset it again. - // TODO: This fails - // browser.setValueSafe(wd.$("layer-comment", "textarea"), ""); - // browser.click(wd.$("min-zoom", "input")); - // browser.flushReactUpdates(); - - // var styleObj = getStyleStore(browser); - // console.log("styleObj", styleObj); - // assert.deepEqual(styleObj.layers, [ - // { - // "id": 'background:'+bgId, - // "type": 'background' - // } - // ]); - }); - - it("color", null, function() { - var bgId = createBackground(); - var id = uuid(); - - browser.click(wd.$("layer-list-item:background:"+bgId)); - - browser.click(wd.$("spec-field:background-color", "input")) - // browser.debug(); - - var styleObj = getStyleStore(browser); - console.log("styleObj", styleObj); - assert.deepEqual(styleObj.layers, [ - { - "id": 'background:'+bgId, - "type": 'background' - } - ]); - - }) - }) - - describe("filter", function() { - it("expand/collapse"); - it("compound filter"); - }) - - describe("paint", function() { - it("expand/collapse"); - it("color"); - it("pattern"); - it("opacity"); - }) - // <===== - - describe("json-editor", function() { - it("expand/collapse"); - it("modify"); - - // TODO - it.skip("parse error", function() { - var bgId = createBackground(); - var id = uuid(); - - browser.click(wd.$("layer-list-item:background:"+bgId)); - - var errorSelector = ".CodeMirror-lint-marker-error"; - assert.equal(browser.isExisting(errorSelector), false); - - browser.click(".CodeMirror") - browser.keys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"); - browser.waitForExist(errorSelector) - - browser.click(wd.$("layer-editor.layer-id")); - }); - }); - }) - }); - - describe('fill', function () { - it.skip("add", function() { - // browser.debug(); - - var id = modelCommands.addLayer.fill({ - type: "fill", - layer: "example" - }); - - var styleObj = getStyleStore(browser); - console.log("STYLEOBJ", styleObj); - assert.deepEqual(styleObj.layers, [ - { - "id": id, - "type": 'fill', - "source": "example" - } - ]); - }) - - // TODO: Change source - it("change source") - }); - - describe('line', function () { - it.skip("add", function() { - var id = modelCommands.addLayer.fill({ - type: "line", - layer: "example" - }); - - var styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": id, - "type": "line", - "source": "example", - } - ]); - }); - - it("groups", null, function() { - // TODO - // Click each of the layer groups. - }) - }); - - describe('symbol', function () { - it.skip("add", function() { - var id = modelCommands.addLayer.fill({ - type: "symbol", - layer: "example" - }); - - var styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": id, - "type": "symbol", - "source": "example", - } - ]); - }); - }); - - describe('raster', function () { - it.skip("add", function() { - var id = modelCommands.addLayer.fill({ - type: "raster", - layer: "raster" - }); - - var styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": id, - "type": "raster", - "source": "raster", - } - ]); - }); - }); - - describe('circle', function () { - it.skip("add", function() { - var id = modelCommands.addLayer.fill({ - type: "circle", - layer: "example" - }); - - var styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": id, - "type": "circle", - "source": "example", - } - ]); - }); - - }); - - describe('fill extrusion', function () { - it.skip("add", function() { - var id = modelCommands.addLayer.fill({ - type: "fill-extrusion", - layer: "example" - }); - - var styleObj = getStyleStore(browser); - assert.deepEqual(styleObj.layers, [ - { - "id": id, - "type": 'fill-extrusion', - "source": "example" - } - ]); - }); - }); - - // These get used in the marketing material. They are also useful to do a quick manual check of the styling across browsers - // NOTE: These duplicate some of the tests, however this is indended becuase it's likely these will change for aesthetic reasons over time - }); - - // describe('screenshots', function() { - - // beforeEach(function() { - // browser.windowHandleSize({ - // width: 1280, - // height: 800 - // }); - // }) - - // it("front_page", function() { - // browser.url(config.baseUrl+"?debug&style="+getStyleUrl([ - // "geojson:example" - // ])); - // browser.waitForExist(".maputnik-toolbar-link"); - // browser.flushReactUpdates(); - - // browser.takeScreenShot("/front_page.png") - // }) - - // it("open", function() { - // browser.url(config.baseUrl+"?debug&style="+getStyleUrl([ - // "geojson:example" - // ])); - // browser.waitForExist(".maputnik-toolbar-link"); - // browser.flushReactUpdates(); - - // browser.click(wd.$("nav:open")) - // browser.flushReactUpdates(); - - // browser.takeScreenShot("/open.png") - // }) - - // it("export", function() { - // browser.url(config.baseUrl+"?debug&style="+getStyleUrl([ - // "geojson:example" - // ])); - // browser.waitForExist(".maputnik-toolbar-link"); - // browser.flushReactUpdates(); - - // browser.click(wd.$("nav:export")) - // browser.flushReactUpdates(); - - // browser.takeScreenShot("/export.png") - // }) - - // it("sources", function() { - // browser.url(config.baseUrl+"?debug&style="+getStyleUrl([ - // "geojson:example" - // ])); - // browser.waitForExist(".maputnik-toolbar-link"); - // browser.flushReactUpdates(); - - // browser.click(wd.$("nav:sources")) - // browser.flushReactUpdates(); - - // browser.takeScreenShot("/sources.png") - // }) - - // it("style settings", function() { - // browser.url(config.baseUrl+"?debug&style="+getStyleUrl([ - // "geojson:example" - // ])); - // browser.waitForExist(".maputnik-toolbar-link"); - // browser.flushReactUpdates(); - - // browser.click(wd.$("nav:settings")) - // browser.flushReactUpdates(); - - // browser.takeScreenShot("/settings.png") - // }) - - // it("inspect", function() { - // browser.url(config.baseUrl+"?debug&style="+getStyleUrl([ - // "geojson:example" - // ])); - // browser.waitForExist(".maputnik-toolbar-link"); - // browser.flushReactUpdates(); - - // browser.click(wd.$("nav:inspect")) - // browser.flushReactUpdates(); - - // browser.takeScreenShot("/inspect.png") - // }) - // }) - - var coverage = istanbulCov.createCoverageMap({}); - - afterEach(function() { - // Code coverage - var results = browser.execute(function() { - return window.__coverage__; - }); - - coverage.merge(results.value); - }) - - after(function() { - var jsonStr = JSON.stringify(coverage, null, 2); - fs.writeFileSync(COVERAGE_PATH+"/coverage.json", jsonStr); - }) - -}); - diff --git a/test/functional/helper.js b/test/functional/helper.js new file mode 100644 index 00000000..310265a9 --- /dev/null +++ b/test/functional/helper.js @@ -0,0 +1,79 @@ +var wd = require("../wd-helper"); +var uuid = require('uuid/v1'); +var geoServer = require("../geojson-server"); + + +// This should be sync... +var geoserver = geoServer.listen(9002); + + +module.exports = { + getStyleUrl: function(styles) { + var port = geoserver.address().port; + return "http://localhost:"+port+"/styles/empty/"+styles.join(","); + }, + getGeoServerUrl: function(urlPath) { + var port = geoserver.address().port; + return "http://localhost:"+port+"/"+urlPath; + }, + getStyleStore: function(browser) { + var result = browser.executeAsync(function(done) { + window.debug.get("maputnik", "styleStore").latestStyle(done); + }) + return result.value; + }, + getRevisionStore: function(browser) { + var result = browser.execute(function(done) { + var rs = window.debug.get("maputnik", "revisionStore") + + return { + currentIdx: rs.currentIdx, + revisions: rs.revisions + }; + }) + return result.value; + }, + modal: { + addLayer: { + open: function() { + var selector = wd.$('layer-list:add-layer'); + browser.click(selector); + + // Wait for events + browser.flushReactUpdates(); + + browser.waitForExist(wd.$('modal:add-layer')); + browser.isVisible(wd.$('modal:add-layer')); + browser.isVisibleWithinViewport(wd.$('modal:add-layer')); + + // Wait for events + browser.flushReactUpdates(); + }, + fill: function(opts) { + var type = opts.type; + var layer = opts.layer; + var id; + if(opts.id) { + id = opts.id + } + else { + id = type+":"+uuid(); + } + + browser.selectByValue(wd.$("add-layer.layer-type", "select"), type); + browser.flushReactUpdates(); + + browser.setValueSafe(wd.$("add-layer.layer-id", "input"), id); + if(layer) { + browser.setValueSafe(wd.$("add-layer.layer-source-block", "input"), layer); + } + + browser.flushReactUpdates(); + browser.click(wd.$("add-layer")); + + return id; + } + } + } +} + diff --git a/test/functional/history/index.js b/test/functional/history/index.js new file mode 100644 index 00000000..41895562 --- /dev/null +++ b/test/functional/history/index.js @@ -0,0 +1,205 @@ +var assert = require("assert"); +var config = require("../../config/specs"); +var helper = require("../helper"); +var wd = require("../../wd-helper"); + + +describe.skip("history", function() { + /** + * See + */ + it("undo/redo", function() { + var styleObj; + + browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ + "geojson:example" + ])); + + helper.modal.addLayer.open(); + + styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, []); + + helper.modal.addLayer.fill({ + id: "step 1", + type: "background" + }) + + styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": "step 1", + "type": 'background' + } + ]); + + helper.modal.addLayer.open(); + helper.modal.addLayer.fill({ + id: "step 2", + type: "background" + }) + + styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": "step 1", + "type": 'background' + }, + { + "id": "step 2", + "type": 'background' + } + ]); + + console.log(">>> LOGS", JSON.stringify(browser.log("browser"), null, 2)) + + browser + .keys(['Control', 'z']) + .keys(['Control']); + styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": "step 1", + "type": 'background' + } + ]); + + console.log(">>> LOGS", JSON.stringify(browser.log("browser"), null, 2)) + + browser + .keys(['Control', 'z']) + .keys(['Control']); + styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + ]); + + console.log(">>> LOGS", JSON.stringify(browser.log("browser"), null, 2)) + + browser + .keys(['Control', 'y']) + .keys(['Control']); + styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": "step 1", + "type": 'background' + } + ]); + + console.log(">>> LOGS", JSON.stringify(browser.log("browser"), null, 2)) + + browser + .keys(['Control', 'y']) + .keys(['Control']); + styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": "step 1", + "type": 'background' + }, + { + "id": "step 2", + "type": 'background' + } + ]); + + console.log(">>> LOGS", JSON.stringify(browser.log("browser"), null, 2)) + }); + + + // /** + // * See + // */ + // it("undo/redo", function() { + // var styleObj; + + // browser.debug(); + + // browser.url(helper.config.baseUrl+"?debug&style="+helper.getStyleUrl([ + // "geojson:example" + // ])); + // browser.waitForExist(".maputnik-toolbar-link"); + + // helper.modalCommands.addLayer.open(browser); + + // styleObj = helper.helper.getStyleStore(browser); + // console.log("styleObj", styleObj); + // assert.deepEqual(styleObj.layers, []); + + // helper.modalCommands.addLayer.fill(browser, { + // id: "step 1", + // type: "background" + // }) + + // styleObj = helper.helper.getStyleStore(browser); + // assert.deepEqual(styleObj.layers, [ + // { + // "id": "step 1", + // "type": 'background' + // } + // ]); + + // helper.modalCommands.addLayer.open(browser); + // helper.modalCommands.addLayer.fill(browser, { + // id: "step 2", + // type: "background" + // }) + + // styleObj = helper.helper.getStyleStore(browser); + // assert.deepEqual(styleObj.layers, [ + // { + // "id": "step 1", + // "type": 'background' + // }, + // { + // "id": "step 2", + // "type": 'background' + // } + // ]); + + // browser + // .keys(['Control', 'z']) + // .keys(['Control']); + // styleObj = helper.helper.getStyleStore(browser); + // assert.deepEqual(styleObj.layers, [ + // { + // "id": "step 1", + // "type": 'background' + // } + // ]); + + // browser + // .keys(['Control', 'z']) + // .keys(['Control']); + // styleObj = helper.helper.getStyleStore(browser); + // assert.deepEqual(styleObj.layers, [ + // ]); + + // browser + // .keys(['Control', 'y']) + // .keys(['Control']); + // styleObj = helper.helper.getStyleStore(browser); + // assert.deepEqual(styleObj.layers, [ + // { + // "id": "step 1", + // "type": 'background' + // } + // ]); + + // browser + // .keys(['Control', 'y']) + // .keys(['Control']); + // styleObj = helper.helper.getStyleStore(browser); + // assert.deepEqual(styleObj.layers, [ + // { + // "id": "step 1", + // "type": 'background' + // }, + // { + // "id": "step 2", + // "type": 'background' + // } + // ]); + + // }) +}) diff --git a/test/functional/index.js b/test/functional/index.js new file mode 100644 index 00000000..34d5e626 --- /dev/null +++ b/test/functional/index.js @@ -0,0 +1,33 @@ +var assert = require('assert'); +var config = require("../config/specs"); +var geoServer = require("../geojson-server"); +var helper = require("./helper"); + +require("./util/webdriverio-ext"); + + +describe('maputnik', function() { + + beforeEach(function() { + browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ + "geojson:example", + "raster:raster" + ])); + browser.waitForExist(".maputnik-toolbar-link"); + browser.flushReactUpdates(); + }); + + // -------- setup -------- + require("./util/coverage"); + // ----------------------- + + // ---- All the tests ---- + require("./history"); + require("./layers"); + require("./map"); + require("./modals"); + // require("./screenshots"); + // ------------------------ + +}); + diff --git a/test/functional/layers/index.js b/test/functional/layers/index.js new file mode 100644 index 00000000..d8f4acfd --- /dev/null +++ b/test/functional/layers/index.js @@ -0,0 +1,497 @@ +var assert = require("assert"); +var config = require("../../config/specs"); +var helper = require("../helper"); +var uuid = require('uuid/v1'); +var wd = require("../../wd-helper"); + + +describe("layers", function() { + beforeEach(function() { + browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ + "geojson:example", + "raster:raster" + ])); + browser.waitForExist(".maputnik-toolbar-link"); + browser.flushReactUpdates(); + + helper.modal.addLayer.open(); + }); + + describe("ops", function() { + it("delete", function() { + var styleObj; + var id = helper.modal.addLayer.fill({ + type: "background" + }) + + styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": id, + "type": 'background' + }, + ]); + + browser.click(wd.$("layer-list-item:"+id+":delete", "")); + + styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + ]); + }); + + it("duplicate", function() { + var styleObj; + var id = helper.modal.addLayer.fill({ + type: "background" + }) + + styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": id, + "type": 'background' + }, + ]); + + browser.click(wd.$("layer-list-item:"+id+":copy", "")); + + styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": id+"-copy", + "type": "background" + }, + { + "id": id, + "type": "background" + }, + ]); + }); + + it("hide", function() { + var styleObj; + var id = helper.modal.addLayer.fill({ + type: "background" + }) + + styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": id, + "type": 'background' + }, + ]); + + browser.click(wd.$("layer-list-item:"+id+":toggle-visibility", "")); + + styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": id, + "type": "background", + "layout": { + "visibility": "none" + } + }, + ]); + + browser.click(wd.$("layer-list-item:"+id+":toggle-visibility", "")); + + styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": id, + "type": "background", + "layout": { + "visibility": "visible" + } + }, + ]); + }) + }) + + describe("grouped", function() { + it("with underscore") + it("no without underscore") + it("double underscore only grouped once") + }) + + describe("tooltips", function() { + }) + + describe("help", function() { + }) + + + describe('background', function () { + + it.skip("add", function() { + var id = helper.modal.addLayer.fill({ + type: "background" + }) + + browser.waitUntil(function() { + var styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": id, + "type": 'background' + } + ]); + }); + }); + + describe("modify", function() { + function createBackground() { + // Setup + var id = uuid(); + + browser.selectByValue(wd.$("add-layer.layer-type", "select"), "background"); + browser.flushReactUpdates(); + browser.setValueSafe(wd.$("add-layer.layer-id", "input"), "background:"+id); + + browser.click(wd.$("add-layer")); + + var styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": 'background:'+id, + "type": 'background' + } + ]); + return id; + } + + // ====> THESE SHOULD BE FROM THE SPEC + describe("layer", function() { + it("expand/collapse"); + it("id", function() { + var bgId = createBackground(); + + browser.click(wd.$("layer-list-item:background:"+bgId)) + + var id = uuid(); + browser.setValueSafe(wd.$("layer-editor.layer-id", "input"), "foobar:"+id) + browser.click(wd.$("min-zoom")) + + var styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": 'foobar:'+id, + "type": 'background' + } + ]); + }); + + // NOTE: This needs to be removed from the code + it("type"); + + 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")); + + var styleObj = helper.getStyleStore(browser); + console.log("styleObj", styleObj); + assert.deepEqual(styleObj.layers, [ + { + "id": 'background:'+bgId, + "type": 'background', + "minzoom": 1 + } + ]); + + // AND RESET! + // browser.setValueSafe(wd.$("min-zoom", "input"), "") + // browser.click(wd.$("max-zoom", "input")); + + // var styleObj = helper.getStyleStore(browser); + // console.log("styleObj", styleObj); + + // assert.deepEqual(styleObj.layers, [ + // { + // "id": 'background:'+bgId, + // "type": 'background' + // } + // ]); + }); + + 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")); + + var styleObj = helper.getStyleStore(browser); + console.log("styleObj", styleObj); + assert.deepEqual(styleObj.layers, [ + { + "id": 'background:'+bgId, + "type": 'background', + "maxzoom": 1 + } + ]); + }); + + it("comments", function() { + var bgId = createBackground(); + var id = uuid(); + + browser.click(wd.$("layer-list-item:background:"+bgId)); + browser.setValueSafe(wd.$("layer-comment", "textarea"), id); + browser.click(wd.$("layer-editor.layer-id", "input")); + + var styleObj = helper.getStyleStore(browser); + console.log("styleObj", styleObj); + assert.deepEqual(styleObj.layers, [ + { + "id": 'background:'+bgId, + "type": 'background', + metadata: { + 'maputnik:comment': id + } + } + ]); + + // Unset it again. + // TODO: This fails + // browser.setValueSafe(wd.$("layer-comment", "textarea"), ""); + // browser.click(wd.$("min-zoom", "input")); + // browser.flushReactUpdates(); + + // var styleObj = helper.getStyleStore(browser); + // console.log("styleObj", styleObj); + // assert.deepEqual(styleObj.layers, [ + // { + // "id": 'background:'+bgId, + // "type": 'background' + // } + // ]); + }); + + it("color", null, function() { + var bgId = createBackground(); + var id = uuid(); + + browser.click(wd.$("layer-list-item:background:"+bgId)); + + browser.click(wd.$("spec-field:background-color", "input")) + // browser.debug(); + + var styleObj = helper.getStyleStore(browser); + console.log("styleObj", styleObj); + assert.deepEqual(styleObj.layers, [ + { + "id": 'background:'+bgId, + "type": 'background' + } + ]); + + }) + }) + + describe("filter", function() { + it("expand/collapse"); + it("compound filter"); + }) + + describe("paint", function() { + it("expand/collapse"); + it("color"); + it("pattern"); + it("opacity"); + }) + // <===== + + describe("json-editor", function() { + it("expand/collapse"); + it("modify"); + + // TODO + it.skip("parse error", function() { + var bgId = createBackground(); + var id = uuid(); + + browser.click(wd.$("layer-list-item:background:"+bgId)); + + var errorSelector = ".CodeMirror-lint-marker-error"; + assert.equal(browser.isExisting(errorSelector), false); + + browser.click(".CodeMirror") + browser.keys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"); + browser.waitForExist(errorSelector) + + browser.click(wd.$("layer-editor.layer-id")); + }); + }); + }) + }); + + describe('fill', function () { + it.skip("add", function() { + // browser.debug(); + + var id = helper.modal.addLayer.fill({ + type: "fill", + layer: "example" + }); + + var styleObj = helper.getStyleStore(browser); + console.log("STYLEOBJ", styleObj); + assert.deepEqual(styleObj.layers, [ + { + "id": id, + "type": 'fill', + "source": "example" + } + ]); + }) + + // TODO: Change source + it("change source") + }); + + describe('line', function () { + it.skip("add", function() { + var id = helper.modal.addLayer.fill({ + type: "line", + layer: "example" + }); + + var styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": id, + "type": "line", + "source": "example", + } + ]); + }); + + it("groups", null, function() { + // TODO + // Click each of the layer groups. + }) + }); + + describe('symbol', function () { + it.skip("add", function() { + var id = helper.modal.addLayer.fill({ + type: "symbol", + layer: "example" + }); + + var styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": id, + "type": "symbol", + "source": "example", + } + ]); + }); + }); + + describe('raster', function () { + it.skip("add", function() { + var id = helper.modal.addLayer.fill({ + type: "raster", + layer: "raster" + }); + + var styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": id, + "type": "raster", + "source": "raster", + } + ]); + }); + }); + + describe('circle', function () { + it.skip("add", function() { + var id = helper.modal.addLayer.fill({ + type: "circle", + layer: "example" + }); + + var styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": id, + "type": "circle", + "source": "example", + } + ]); + }); + + }); + + describe('fill extrusion', function () { + it.skip("add", function() { + var id = helper.modal.addLayer.fill({ + type: "fill-extrusion", + layer: "example" + }); + + var styleObj = helper.getStyleStore(browser); + assert.deepEqual(styleObj.layers, [ + { + "id": id, + "type": 'fill-extrusion', + "source": "example" + } + ]); + }); + }); + + // These get used in the marketing material. They are also useful to do a quick manual check of the styling across browsers + // NOTE: These duplicate some of the tests, however this is indended becuase it's likely these will change for aesthetic reasons over time + // + + + + describe.skip("groups", function() { + it("simple", function() { + browser.url(config.baseUrl+"?debug&style="+getStyleUrl([ + "geojson:example" + ])); + + helper.modal.addLayer.open(); + var aId = helper.modal.addLayer.fill({ + id: "foo", + type: "background" + }) + + helper.modal.addLayer.open(); + var bId = helper.modal.addLayer.fill({ + id: "foo_bar", + type: "background" + }) + + helper.modal.addLayer.open(); + var bId = helper.modal.addLayer.fill({ + id: "foo_baz", + type: "background" + }) + + browser.waitForExist(wd.$("layer-list-group:foo-0")); + + assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo")), false); + assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo_bar")), false); + assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo_baz")), false); + + browser.click(wd.$("layer-list-group:foo-0")); + + assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo")), true); + assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo_bar")), true); + assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo_baz")), true); + }) + }) +}); + diff --git a/test/functional/map/index.js b/test/functional/map/index.js new file mode 100644 index 00000000..498c0a1d --- /dev/null +++ b/test/functional/map/index.js @@ -0,0 +1,35 @@ +var assert = require('assert'); +var wd = require("../../wd-helper"); +var config = require("../../config/specs"); +var helper = require("../helper"); + + +describe("map", function() { + describe.skip("zoom level", function() { + it("via url", function() { + var zoomLevel = "12.37" + browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ + "geojson:example" + ])+"#"+zoomLevel+"/41.3805/2.1635"); + + browser.waitUntil(function () { + return ( + browser.isVisible(".mapboxgl-ctrl-zoom") + && browser.getText(".mapboxgl-ctrl-zoom") === "Zoom level: "+(zoomLevel) + ); + }, 10*1000) + }) + it("via map controls", function() { + var zoomLevel = 12.37; + browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ + "geojson:example" + ])+"#"+zoomLevel+"/41.3805/2.1635"); + + browser.click(".mapboxgl-ctrl-zoom-in") + browser.waitUntil(function () { + var text = browser.getText(".mapboxgl-ctrl-zoom") + return text === "Zoom level: "+(zoomLevel+1); + }, 10*1000) + }) + }) +}) diff --git a/test/functional/modals/index.js b/test/functional/modals/index.js new file mode 100644 index 00000000..3a5a897a --- /dev/null +++ b/test/functional/modals/index.js @@ -0,0 +1,203 @@ +var assert = require('assert'); +var fs = require("fs"); +var wd = require("../../wd-helper"); +var config = require("../../config/specs"); +var helper = require("../helper"); + + + +// TODO: Is this needed? +function closeModal(wdKey) { + console.log(">> A"); + browser.waitUntil(function() { + return browser.isVisibleWithinViewport(wd.$(wdKey)); + }); + + console.log(">> B"); + var closeBtnSelector = wd.$(wdKey+".close-modal"); + browser.click(closeBtnSelector); + + console.log(">> C"); + browser.waitUntil(function() { + return !browser.isVisibleWithinViewport(wd.$(wdKey)); + }); +} + +describe("modals", function() { + describe("open", function() { + var styleFilePath = __dirname+"/../../example-style.json"; + var styleFileData = JSON.parse(fs.readFileSync(styleFilePath)); + + beforeEach(function() { + browser.url(config.baseUrl+"?debug"); + + browser.waitForExist(".maputnik-toolbar-link"); + browser.flushReactUpdates(); + + browser.click(wd.$("nav:open")) + browser.flushReactUpdates(); + }); + + it("close", function() { + closeModal("open-modal"); + }); + + it("upload", function() { + browser.waitForExist("*[type='file']") + browser.chooseFile("*[type='file']", styleFilePath); + + var styleObj = helper.getStyleStore(browser); + console.log("styleObj", styleObj); + assert.deepEqual(styleFileData, styleObj); + }); + + it("load from url", function() { + var styleFileUrl = helper.getGeoServerUrl("example-style.json"); + + browser.setValueSafe(wd.$("open-modal.url.input"), styleFileUrl); + + var selector = wd.$("open-modal.url.button"); + console.log("selector", selector); + browser.click(selector); + + // Allow the network request to happen + // NOTE: Its localhost so this should be fast. + browser.pause(300); + + var styleObj = helper.getStyleStore(browser); + console.log("styleObj", styleObj); + console.log("styleFileData", styleFileData); + assert.deepEqual(styleFileData, styleObj); + }); + + // TODO: Need to work out how to mock out the end points + it("gallery") + }) + + describe("export", function() { + + beforeEach(function() { + browser.url(config.baseUrl+"?debug"); + + browser.waitForExist(".maputnik-toolbar-link"); + browser.flushReactUpdates(); + + browser.click(wd.$("nav:export")) + browser.flushReactUpdates(); + }); + + it("close", function() { + closeModal("export-modal"); + }); + + // TODO: Work out how to download a file and check the contents + it("download") + // TODO: Work out how to mock the end git points + it("save to gist") + }) + + describe("sources", function() { + it("active sources") + it("public source") + it("add new source") + }) + + describe("inspect", function() { + it("toggle", function() { + browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ + "geojson:example" + ])); + + browser.click(wd.$("nav:inspect")); + }) + }) + + describe("style settings", function() { + beforeEach(function() { + browser.url(config.baseUrl+"?debug"); + + browser.waitForExist(".maputnik-toolbar-link"); + browser.flushReactUpdates(); + + browser.click(wd.$("nav:settings")) + browser.flushReactUpdates(); + }); + + it("name", function() { + browser.setValueSafe(wd.$("modal-settings.name"), "foobar") + browser.click(wd.$("modal-settings.owner")) + browser.flushReactUpdates(); + + var styleObj = helper.getStyleStore(browser); + console.log("styleObj", styleObj); + assert.equal(styleObj.name, "foobar"); + }) + it("owner", function() { + browser.setValueSafe(wd.$("modal-settings.owner"), "foobar") + browser.click(wd.$("modal-settings.name")) + browser.flushReactUpdates(); + + var styleObj = helper.getStyleStore(browser); + console.log("styleObj", styleObj); + assert.equal(styleObj.owner, "foobar"); + }) + it("sprite url", function() { + browser.setValueSafe(wd.$("modal-settings.sprite"), "http://example.com") + browser.click(wd.$("modal-settings.name")) + browser.flushReactUpdates(); + + var styleObj = helper.getStyleStore(browser); + console.log("styleObj", styleObj); + assert.equal(styleObj.sprite, "http://example.com"); + }) + 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")) + browser.flushReactUpdates(); + + var styleObj = helper.getStyleStore(browser); + console.log("styleObj", styleObj); + assert.equal(styleObj.glyphs, glyphsUrl); + }) + + it("mapbox access token", function() { + var apiKey = "testing123"; + browser.setValueSafe(wd.$("modal-settings.maputnik:mapbox_access_token"), apiKey); + browser.click(wd.$("modal-settings.name")) + browser.flushReactUpdates(); + + var styleObj = helper.getStyleStore(browser); + console.log("styleObj", styleObj); + browser.waitUntil(function() { + return styleObj.metadata["maputnik:mapbox_access_token"] == apiKey; + }) + }) + + it("open map tiles access token", function() { + var apiKey = "testing123"; + browser.setValueSafe(wd.$("modal-settings.maputnik:openmaptiles_access_token"), apiKey); + browser.click(wd.$("modal-settings.name")) + browser.flushReactUpdates(); + + var styleObj = helper.getStyleStore(browser); + console.log("styleObj", styleObj); + assert.equal(styleObj.metadata["maputnik:openmaptiles_access_token"], apiKey); + }) + + it("style renderer", function() { + var selector = wd.$("modal-settings.maputnik:renderer"); + browser.selectByValue(selector, "ol3"); + browser.click(wd.$("modal-settings.name")) + browser.flushReactUpdates(); + + var styleObj = helper.getStyleStore(browser); + console.log("styleObj", styleObj); + assert.equal(styleObj.metadata["maputnik:renderer"], "ol3"); + }) + }) + + describe("sources", function() { + it("toggle") + }) +}) diff --git a/test/functional/screenshots/index.js b/test/functional/screenshots/index.js new file mode 100644 index 00000000..ad206b48 --- /dev/null +++ b/test/functional/screenshots/index.js @@ -0,0 +1,93 @@ +var artifacts = require("../../artifacts"); +var config = require("../../config/specs"); +var helper = require("../helper"); +var wd = require("../../wd-helper"); + +var SCREENSHOTS_PATH = artifacts.pathSync("/screenshots"); + + +describe('screenshots', function() { + + beforeEach(function() { + browser.windowHandleSize({ + width: 1280, + height: 800 + }); + }) + + it("front_page", function() { + browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ + "geojson:example" + ])); + browser.waitForExist(".maputnik-toolbar-link"); + browser.flushReactUpdates(); + + browser.takeScreenShot("/front_page.png") + }) + + it("open", function() { + browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ + "geojson:example" + ])); + browser.waitForExist(".maputnik-toolbar-link"); + browser.flushReactUpdates(); + + browser.click(wd.$("nav:open")) + browser.flushReactUpdates(); + + browser.takeScreenShot("/open.png") + }) + + it("export", function() { + browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ + "geojson:example" + ])); + browser.waitForExist(".maputnik-toolbar-link"); + browser.flushReactUpdates(); + + browser.click(wd.$("nav:export")) + browser.flushReactUpdates(); + + browser.takeScreenShot("/export.png") + }) + + it("sources", function() { + browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ + "geojson:example" + ])); + browser.waitForExist(".maputnik-toolbar-link"); + browser.flushReactUpdates(); + + browser.click(wd.$("nav:sources")) + browser.flushReactUpdates(); + + browser.takeScreenShot("/sources.png") + }) + + it("style settings", function() { + browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ + "geojson:example" + ])); + browser.waitForExist(".maputnik-toolbar-link"); + browser.flushReactUpdates(); + + browser.click(wd.$("nav:settings")) + browser.flushReactUpdates(); + + browser.takeScreenShot("/settings.png") + }) + + it("inspect", function() { + browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([ + "geojson:example" + ])); + browser.waitForExist(".maputnik-toolbar-link"); + browser.flushReactUpdates(); + + browser.click(wd.$("nav:inspect")) + browser.flushReactUpdates(); + + browser.takeScreenShot("/inspect.png") + }) +}) + diff --git a/test/functional/util/coverage.js b/test/functional/util/coverage.js new file mode 100644 index 00000000..335decd1 --- /dev/null +++ b/test/functional/util/coverage.js @@ -0,0 +1,26 @@ +var artifacts = require("../../artifacts"); +var fs = require("fs"); +var istanbulCov = require('istanbul-lib-coverage'); + +var COVERAGE_PATH = artifacts.pathSync("/coverage"); + + +var coverage = istanbulCov.createCoverageMap({}); + +describe("coverage", function() { + // Capture the coverage after each test + afterEach(function() { + // Code coverage + var results = browser.execute(function() { + return window.__coverage__; + }); + + coverage.merge(results.value); + }) + + // Dump the coverage to a file + after(function() { + var jsonStr = JSON.stringify(coverage, null, 2); + fs.writeFileSync(COVERAGE_PATH+"/coverage.json", jsonStr); + }) +}) diff --git a/test/functional/util/webdriverio-ext.js b/test/functional/util/webdriverio-ext.js new file mode 100644 index 00000000..bfd7fbbd --- /dev/null +++ b/test/functional/util/webdriverio-ext.js @@ -0,0 +1,56 @@ +browser.timeoutsAsyncScript(10*1000); +browser.timeoutsImplicitWait(10*1000); + +/** + * Sometimes chrome driver can result in the wrong text. + * + * See + */ +try { + browser.addCommand('setValueSafe', function(selector, text) { + for(var i=0; i<10; i++) { + console.log(">>>> waiting for visible"); + browser.waitForVisible(selector); + + var elements = browser.elements(selector); + if(elements.length > 1) { + console.error(">>> Too many elements found"); + throw "Too many elements found"; + } + + console.log(">>>> setting value"); + browser.setValue(selector, text); + var browserText = browser.getValue(selector); + + console.log("browserText='%s' test='%s'", browserText, text); + + 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 data = browser.screenshot(); + fs.writeFileSync(path.join(SCREENSHOTS_PATH, filepath), data.value, 'base64'); + }); + + browser.addCommand('flushReactUpdates', function() { + browser.executeAsync(function(done) { + // For any events to propogate + setImmediate(function() { + // For the DOM to be updated. + setImmediate(done); + }) + }) + }) + +} catch(err) { + console.error(">>> Ignored error: "+err); +}