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

Merge pull request #696 from orangemug/feature/add-more-functional-tests

Browse source 
Added more webdriver tests
This commit is contained in:
Orange Mug 2020-05-31 16:05:28 +01:00 committed by GitHub
commit d07b40ccef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 254 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/Toolbar.jsx
View file

@ -185,18 +185,21 @@ export default class Toolbar extends React.Component {
>
{/* Keyboard accessible quick links */}
<button
data-wd-key="root:skip:layer-list"
className="maputnik-toolbar-skip"
onClick={e => this.onSkip("layer-list")}
>
Layers list
</button>
<button
data-wd-key="root:skip:layer-editor"
className="maputnik-toolbar-skip"
onClick={e => this.onSkip("layer-editor")}
>
Layer editor
</button>
<button
data-wd-key="root:skip:map-view"
className="maputnik-toolbar-skip"
onClick={e => this.onSkip("map")}
>

2
src/components/modals/DebugModal.js
View file

@ -24,7 +24,7 @@ class DebugModal extends React.Component {
const osmLat = Number.parseFloat(mapView.center.lat).toFixed(5);
return <Modal
data-wd-key="debug-modal"
data-wd-key="modal:debug"
isOpen={this.props.isOpen}
onOpenToggle={this.props.onOpenToggle}
title={'Debug'}

2
src/components/modals/ExportModal.jsx
View file

@ -61,7 +61,7 @@ class ExportModal extends React.Component {
render() {
return <Modal
data-wd-key="export-modal"
data-wd-key="modal:export"
isOpen={this.props.isOpen}
onOpenToggle={this.props.onOpenToggle}
title={'Export Style'}

2
src/components/modals/LoadingModal.jsx
View file

@ -20,7 +20,7 @@ class LoadingModal extends React.Component {
render() {
return <Modal
data-wd-key="loading-modal"
data-wd-key="modal:loading"
isOpen={this.props.isOpen}
underlayClickExits={false}
underlayProps={{

6
src/components/modals/OpenModal.jsx
View file

@ -191,7 +191,7 @@ class OpenModal extends React.Component {
return (
<div>
<Modal
data-wd-key="open-modal"
data-wd-key="modal:open"
isOpen={this.props.isOpen}
onOpenToggle={() => this.onOpenToggle()}
title={'Open Style'}
@ -212,7 +212,7 @@ class OpenModal extends React.Component {
</p>
<form onSubmit={this.onSubmitUrl}>
<UrlInput
data-wd-key="open-modal.url.input"
data-wd-key="modal:open.url.input"
type="text"
className="maputnik-input"
default="Enter URL..."
@ -222,7 +222,7 @@ class OpenModal extends React.Component {
/>
<div>
<Button
data-wd-key="open-modal.url.button"
data-wd-key="modal:open.url.button"
type="submit"
className="maputnik-big-button"
disabled={this.state.styleUrl.length < 1}

20
src/components/modals/SettingsModal.jsx
View file

@ -81,29 +81,29 @@ class SettingsModal extends React.Component {
const transition = this.props.mapStyle.transition || {};
return <Modal
data-wd-key="modal-settings"
data-wd-key="modal:settings"
isOpen={this.props.isOpen}
onOpenToggle={this.props.onOpenToggle}
title={'Style Settings'}
>
<div className="modal-settings">
<div className="modal:settings">
<InputBlock label={"Name"} fieldSpec={latest.$root.name}>
<StringInput {...inputProps}
data-wd-key="modal-settings.name"
data-wd-key="modal:settings.name"
value={this.props.mapStyle.name}
onChange={this.changeStyleProperty.bind(this, "name")}
/>
</InputBlock>
<InputBlock label={"Owner"} fieldSpec={{doc: "Owner ID of the style. Used by Mapbox or future style APIs."}}>
<StringInput {...inputProps}
data-wd-key="modal-settings.owner"
data-wd-key="modal:settings.owner"
value={this.props.mapStyle.owner}
onChange={this.changeStyleProperty.bind(this, "owner")}
/>
</InputBlock>
<InputBlock label={"Sprite URL"} fieldSpec={latest.$root.sprite}>
<UrlInput {...inputProps}
data-wd-key="modal-settings.sprite"
data-wd-key="modal:settings.sprite"
value={this.props.mapStyle.sprite}
onChange={this.changeStyleProperty.bind(this, "sprite")}
/>
@ -111,7 +111,7 @@ class SettingsModal extends React.Component {
<InputBlock label={"Glyphs URL"} fieldSpec={latest.$root.glyphs}>
<UrlInput {...inputProps}
data-wd-key="modal-settings.glyphs"
data-wd-key="modal:settings.glyphs"
value={this.props.mapStyle.glyphs}
onChange={this.changeStyleProperty.bind(this, "glyphs")}
/>
@ -122,7 +122,7 @@ class SettingsModal extends React.Component {
fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
>
<StringInput {...inputProps}
data-wd-key="modal-settings.maputnik:mapbox_access_token"
data-wd-key="modal:settings.maputnik:mapbox_access_token"
value={metadata['maputnik:mapbox_access_token']}
onChange={onChangeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
/>
@ -133,7 +133,7 @@ class SettingsModal extends React.Component {
fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
>
<StringInput {...inputProps}
data-wd-key="modal-settings.maputnik:openmaptiles_access_token"
data-wd-key="modal:settings.maputnik:openmaptiles_access_token"
value={metadata['maputnik:openmaptiles_access_token']}
onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
/>
@ -144,7 +144,7 @@ class SettingsModal extends React.Component {
fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
>
<StringInput {...inputProps}
data-wd-key="modal-settings.maputnik:thunderforest_access_token"
data-wd-key="modal:settings.maputnik:thunderforest_access_token"
value={metadata['maputnik:thunderforest_access_token']}
onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
/>
@ -250,7 +250,7 @@ class SettingsModal extends React.Component {
fieldSpec={fieldSpecAdditional.maputnik.style_renderer}
>
<SelectInput {...inputProps}
data-wd-key="modal-settings.maputnik:renderer"
data-wd-key="modal:settings.maputnik:renderer"
options={[
['mbgljs', 'MapboxGL JS'],
['ol', 'Open Layers (experimental)'],

2
src/components/modals/ShortcutsModal.jsx
View file

@ -100,7 +100,7 @@ class ShortcutsModal extends React.Component {
return <Modal
data-wd-key="shortcuts-modal"
data-wd-key="modal:shortcuts"
isOpen={this.props.isOpen}
onOpenToggle={this.props.onOpenToggle}
title={'Shortcuts'}

1
src/components/modals/SourcesModal.jsx
View file

@ -286,6 +286,7 @@ class SourcesModal extends React.Component {
const inputProps = { }
return <Modal
data-wd-key="modal:sources"
isOpen={this.props.isOpen}
onOpenToggle={this.props.onOpenToggle}
title={'Sources'}

2
src/components/modals/SurveyModal.jsx
View file

@ -20,7 +20,7 @@ class SurveyModal extends React.Component {
render() {
return <Modal
data-wd-key="modal-survey"
data-wd-key="modal:survey"
isOpen={this.props.isOpen}
onOpenToggle={this.props.onOpenToggle}
title="Maputnik Survey"

18
test/example-layer-style.json Normal file
View file

@ -0,0 +1,18 @@
{
"id": "test-style",
"version": 8,
"name": "Test Style",
"metadata": {
"maputnik:renderer": "mbgljs"
},
"sources": {},
"glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
"sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
"layers": [
{
"id": "background",
"type": "background"
}
]
}

3
test/functional/accessibility/index.js Normal file
View file

@ -0,0 +1,3 @@
describe("accessibility", function () {
require("./skip-links");
})

51
test/functional/accessibility/skip-links.js Normal file
View file

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

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

@ -3,17 +3,33 @@ var config = require("../../config/specs");
var helper = require("../helper");
describe.skip("history", function() {
describe("history", function() {
let undoKeyCombo;
let undoKeyComboReset;
let redoKeyCombo;
let redoKeyComboReset;
before(function() {
const isMac = browser.execute(function() {
return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
});
undoKeyCombo = ['Meta', 'z'];
undoKeyComboReset = ['Meta'];
redoKeyCombo = isMac ? ['Meta', 'Shift', 'z'] : ['Meta', 'y'];
redoKeyComboReset = isMac ? ['Meta', 'Shift'] : ['Meta'];
});
/**
* See <https://github.com/webdriverio/webdriverio/issues/1126>
*/
it("undo/redo", function() {
it.skip("undo/redo", function() {
var styleObj;
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.acceptAlert();
helper.modal.addLayer.open();
@ -51,9 +67,8 @@ describe.skip("history", function() {
}
]);
browser
.keys(['Control', 'z'])
.keys(['Control']);
browser.keys(undoKeyCombo)
browser.keys(undoKeyComboReset);
styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
@ -62,16 +77,14 @@ describe.skip("history", function() {
}
]);
browser
.keys(['Control', 'z'])
.keys(['Control']);
browser.keys(undoKeyCombo)
browser.keys(undoKeyComboReset);
styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
]);
browser
.keys(['Control', 'y'])
.keys(['Control']);
browser.keys(redoKeyCombo)
browser.keys(redoKeyComboReset);
styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
@ -80,9 +93,8 @@ describe.skip("history", function() {
}
]);
browser
.keys(['Control', 'y'])
.keys(['Control']);
browser.keys(redoKeyCombo)
browser.keys(redoKeyComboReset);
styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{

2
test/functional/index.js
View file

@ -37,6 +37,8 @@ describe('maputnik', function() {
require("./map");
require("./modals");
require("./screenshots");
require("./accessibility");
require("./keyboard");
// ------------------------
});

58
test/functional/keyboard/index.js Normal file
View file

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

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

@ -115,12 +115,6 @@ describe("layers", function() {
})
})
describe("grouped", function() {
it("with underscore")
it("no without underscore")
it("double underscore only grouped once")
})
describe("tooltips", function() {
})
@ -130,20 +124,18 @@ describe("layers", function() {
describe('background', function () {
it.skip("add", function() {
it("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'
}
]);
});
var styleObj = helper.getStyleStore(browser);
assert.deepEqual(styleObj.layers, [
{
"id": id,
"type": 'background'
}
]);
});
describe("modify", function() {
@ -192,9 +184,6 @@ describe("layers", function() {
]);
});
// NOTE: This needs to be removed from the code
it("type");
it("min-zoom", function() {
var bgId = createBackground();
@ -340,7 +329,7 @@ describe("layers", function() {
});
describe('fill', function () {
it.skip("add", function() {
it("add", function() {
// browser.debug();
var id = helper.modal.addLayer.fill({
@ -363,7 +352,7 @@ describe("layers", function() {
});
describe('line', function () {
it.skip("add", function() {
it("add", function() {
var id = helper.modal.addLayer.fill({
type: "line",
layer: "example"
@ -386,7 +375,7 @@ describe("layers", function() {
});
describe('symbol', function () {
it.skip("add", function() {
it("add", function() {
var id = helper.modal.addLayer.fill({
type: "symbol",
layer: "example"
@ -404,7 +393,7 @@ describe("layers", function() {
});
describe('raster', function () {
it.skip("add", function() {
it("add", function() {
var id = helper.modal.addLayer.fill({
type: "raster",
layer: "raster"
@ -422,7 +411,7 @@ describe("layers", function() {
});
describe('circle', function () {
it.skip("add", function() {
it("add", function() {
var id = helper.modal.addLayer.fill({
type: "circle",
layer: "example"
@ -441,7 +430,7 @@ describe("layers", function() {
});
describe('fill extrusion', function () {
it.skip("add", function() {
it("add", function() {
var id = helper.modal.addLayer.fill({
type: "fill-extrusion",
layer: "example"
@ -459,12 +448,12 @@ describe("layers", function() {
});
describe.skip("groups", function() {
describe("groups", function() {
it("simple", function() {
browser.url(config.baseUrl+"?debug&style="+getStyleUrl([
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
browser.alertAccept();
browser.acceptAlert();
helper.modal.addLayer.open();
var aId = helper.modal.addLayer.fill({
@ -480,21 +469,22 @@ describe("layers", function() {
helper.modal.addLayer.open();
var bId = helper.modal.addLayer.fill({
id: "foo_baz",
id: "foo_bar_baz",
type: "background"
})
browser.waitForExist(wd.$("layer-list-group:foo-0"));
const groupEl = $(wd.$("layer-list-group:foo-0"));
groupEl.isDisplayed();
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);
assert.equal($(wd.$("layer-list-item:foo")).isDisplayedInViewport(), true);
assert.equal($(wd.$("layer-list-item:foo_bar")).isDisplayedInViewport(), false);
assert.equal($(wd.$("layer-list-item:foo_bar_baz")).isDisplayedInViewport(), false);
browser.click(wd.$("layer-list-group:foo-0"));
groupEl.click();
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);
assert.equal($(wd.$("layer-list-item:foo")).isDisplayedInViewport(), true);
assert.equal($(wd.$("layer-list-item:foo_bar")).isDisplayedInViewport(), true);
assert.equal($(wd.$("layer-list-item:foo_bar_baz")).isDisplayedInViewport(), true);
})
})
});

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

@ -41,7 +41,7 @@ describe("modals", function() {
});
it("close", function() {
closeModal("open-modal");
closeModal("modal:open");
});
// "chooseFile" command currently not available for wdio v5 https://github.com/webdriverio/webdriverio/pull/3632
@ -57,9 +57,9 @@ describe("modals", function() {
it("load from url", function() {
var styleFileUrl = helper.getGeoServerUrl("example-style.json");
browser.setValueSafe(wd.$("open-modal.url.input"), styleFileUrl);
browser.setValueSafe(wd.$("modal:open.url.input"), styleFileUrl);
const selector = $(wd.$("open-modal.url.button"));
const selector = $(wd.$("modal:open.url.button"));
selector.click();
// Allow the network request to happen
@ -74,6 +74,24 @@ describe("modals", function() {
it("gallery")
})
describe("shortcuts", function() {
it("open/close", function() {
browser.url(config.baseUrl+"?debug");
const elem = $(".maputnik-toolbar-link");
elem.waitForExist();
browser.flushReactUpdates();
browser.keys(["?"]);
const modalEl = $(wd.$("modal:shortcuts"))
assert(modalEl.isDisplayed());
closeModal("modal:shortcuts");
});
});
describe("export", function() {
beforeEach(function() {
@ -89,14 +107,12 @@ describe("modals", function() {
});
it("close", function() {
closeModal("export-modal");
closeModal("modal:export");
});
// 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() {
@ -131,8 +147,8 @@ describe("modals", function() {
});
it("name", function() {
browser.setValueSafe(wd.$("modal-settings.name"), "foobar")
const elem = $(wd.$("modal-settings.owner"));
browser.setValueSafe(wd.$("modal:settings.name"), "foobar")
const elem = $(wd.$("modal:settings.owner"));
elem.click();
browser.flushReactUpdates();
@ -140,8 +156,8 @@ describe("modals", function() {
assert.equal(styleObj.name, "foobar");
})
it("owner", function() {
browser.setValueSafe(wd.$("modal-settings.owner"), "foobar")
const elem = $(wd.$("modal-settings.name"));
browser.setValueSafe(wd.$("modal:settings.owner"), "foobar")
const elem = $(wd.$("modal:settings.name"));
elem.click();
browser.flushReactUpdates();
@ -149,8 +165,8 @@ describe("modals", function() {
assert.equal(styleObj.owner, "foobar");
})
it("sprite url", function() {
browser.setValueSafe(wd.$("modal-settings.sprite"), "http://example.com")
const elem = $(wd.$("modal-settings.name"));
browser.setValueSafe(wd.$("modal:settings.sprite"), "http://example.com")
const elem = $(wd.$("modal:settings.name"));
elem.click();
browser.flushReactUpdates();
@ -159,8 +175,8 @@ describe("modals", function() {
})
it("glyphs url", function() {
var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"
browser.setValueSafe(wd.$("modal-settings.glyphs"), glyphsUrl)
const elem = $(wd.$("modal-settings.name"));
browser.setValueSafe(wd.$("modal:settings.glyphs"), glyphsUrl)
const elem = $(wd.$("modal:settings.name"));
elem.click();
browser.flushReactUpdates();
@ -170,8 +186,8 @@ describe("modals", function() {
it("mapbox access token", function() {
var apiKey = "testing123";
browser.setValueSafe(wd.$("modal-settings.maputnik:mapbox_access_token"), apiKey);
const elem = $(wd.$("modal-settings.name"));
browser.setValueSafe(wd.$("modal:settings.maputnik:mapbox_access_token"), apiKey);
const elem = $(wd.$("modal:settings.name"));
elem.click();
browser.flushReactUpdates();
@ -183,8 +199,8 @@ describe("modals", function() {
it("maptiler access token", function() {
var apiKey = "testing123";
browser.setValueSafe(wd.$("modal-settings.maputnik:openmaptiles_access_token"), apiKey);
const elem = $(wd.$("modal-settings.name"));
browser.setValueSafe(wd.$("modal:settings.maputnik:openmaptiles_access_token"), apiKey);
const elem = $(wd.$("modal:settings.name"));
elem.click();
browser.flushReactUpdates();
@ -194,8 +210,8 @@ describe("modals", function() {
it("thunderforest access token", function() {
var apiKey = "testing123";
browser.setValueSafe(wd.$("modal-settings.maputnik:thunderforest_access_token"), apiKey);
const elem = $(wd.$("modal-settings.name"));
browser.setValueSafe(wd.$("modal:settings.maputnik:thunderforest_access_token"), apiKey);
const elem = $(wd.$("modal:settings.name"));
elem.click();
browser.flushReactUpdates();
@ -204,9 +220,9 @@ describe("modals", function() {
})
it("style renderer", function() {
const selector = $(wd.$("modal-settings.maputnik:renderer"));
const selector = $(wd.$("modal:settings.maputnik:renderer"));
selector.selectByAttribute('value', "ol");
const elem = $(wd.$("modal-settings.name"));
const elem = $(wd.$("modal:settings.name"));
elem.click();
browser.flushReactUpdates();

8
test/geojson-server.js
View file

@ -78,6 +78,14 @@ app.get("/styles/empty/:sources", function(req, res) {
res.send(json);
})
app.get("/example-layer-style.json", function(req, res) {
res.json(
JSON.parse(
fs.readFileSync(__dirname+"/example-layer-style.json").toString()
)
);
})
app.get("/example-style.json", function(req, res) {
res.json(
JSON.parse(