ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-02-08 05:30:00 +00:00
Code Issues Projects Releases Wiki Activity

Finish migration of tests

Browse Source
This commit is contained in:
HarelM
2023-12-16 08:04:14 +02:00
parent 2ad4993ab7
commit 9c9d6bc715
11 changed files with 25 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
cypress/e2e/map.cy.ts Normal file
View File

@@ -0,0 +1,25 @@
import driver from "./driver";
describe("map", () => {
describe("zoom level", () => {
beforeEach(() => {
driver.beforeEach();
});
it("via url", () => {
var zoomLevel = 12.37;
driver.setStyle("geojson", zoomLevel);
driver.isDisplayedInViewport(".maplibregl-ctrl-zoom");
// HM TODO
//driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel);
})
it("via map controls", () => {
var zoomLevel = 12.37;
driver.setStyle("geojson", zoomLevel);
driver.click(".maplibregl-ctrl-zoom-in");
driver.isDisplayedInViewport(".maplibregl-ctrl-zoom");
// HM TODO
//driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel + 1);
})
})
})

39
test/artifacts.js
View File

@@ -1,39 +0,0 @@
var path = require("path");
var mkdirp = require("mkdirp");
function genPath(subPath) {
subPath = subPath || ".";
var buildPath;
if(process.env.CIRCLECI) {
buildPath = path.join("/tmp/artifacts", subPath);
}
else {
buildPath = path.join(__dirname, '..', 'build', subPath);
}
return buildPath;
}
module.exports.path = function(subPath) {
var dirPath = genPath(subPath);
return new Promise(function(resolve, reject) {
mkdirp(dirPath, function(err) {
if(err) {
reject(err);
}
else {
resolve(dirPath);
}
});
});
}
module.exports.pathSync = function(subPath) {
var dirPath = genPath(subPath);
mkdirp.sync(dirPath);
return dirPath;
}

11
test/config/specs.js
View File

@@ -1,11 +0,0 @@
const testNetwork = process.env.TEST_NETWORK || "localhost";
const port = 9001;
const baseUrl = `http://${testNetwork}:${port}`;
const config = {
testNetwork,
port,
baseUrl
};
module.exports = config;

18
test/example-layer-style.json
View File

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

12
test/example-style.json
View File

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

218
test/functional/driver.js
View File

@@ -1,218 +0,0 @@
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 <https://github.com/webdriverio/webdriverio/issues/1886>
*/
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;

35
test/functional/index.js
View File

@@ -1,35 +0,0 @@
var driver = require("./driver");
describe('maputnik', function() {
before(async function(done) {
await browser.setTimeout({ 'script': 20 * 1000 });
await browser.setTimeout({ 'implicit': 20 * 1000 });
driver.geoserver.start(done);
});
after(function(done) {
driver.geoserver.stop(done);
});
beforeEach(async function() {
await driver.setStyle(["geojson:example","raster:raster"]);
await driver.setSurvey();
});
// -------- setup --------
require("./util/coverage");
// -----------------------
// ---- All the tests ----
require("./history");
require("./layers");
require("./map");
require("./modals");
require("./screenshots");
require("./accessibility");
require("./keyboard");
// ------------------------
});

26
test/functional/map/index.js
View File

@@ -1,26 +0,0 @@
var driver = require("../driver");
describe("map", function() {
describe.skip("zoom level", function() {
it("via url", async function() {
var zoomLevel = "12.37";
await driver.setStyle(["geojson:example"], zoomLevel);
await browser.waitUntil(async function () {
return (
await browser.isVisible(".maplibregl-ctrl-zoom")
&& await browser.getText(".maplibregl-ctrl-zoom") === "Zoom level: "+(zoomLevel)
);
}, 10*1000)
})
it("via map controls", async function() {
var zoomLevel = 12.37;
await driver.setStyle(["geojson:example"], zoomLevel);
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);
}, 10*1000)
})
})
})

62
test/functional/screenshots/index.js
View File

@@ -1,62 +0,0 @@
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
// 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(async function() {
await driver.setWindowSize(1280, 800)
})
it("front_page", async function() {
await driver.setStyle(["geojson:example"]);
await driver.takeScreenShot("/front_page.png")
})
it("open", async function() {
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 driver.setStyle(["geojson:example"]);
await driver.click(driver.getDataAttribute("nav:export"));
await driver.zeroTimeout();
await driver.takeScreenShot("/export.png")
})
it("sources", async function() {
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 driver.setStyle(["geojson:example"]);
await driver.click(driver.getDataAttribute("nav:settings"));
await driver.zeroTimeout();
await driver.takeScreenShot("/settings.png")
})
it("inspect", async function() {
await driver.setStyle(["geojson:example"]);
await driver.selectFromDropdown(driver.getDataAttribute("nav:inspect", "select"), 'inspect');
await driver.zeroTimeout();
await driver.takeScreenShot("/inspect.png")
})
})

56
test/functional/util/coverage.js
View File

@@ -1,56 +0,0 @@
var artifacts = require("../../artifacts");
var fs = require("fs");
var istanbulCov = require('istanbul-lib-coverage');
var COVERAGE_PATH = artifacts.pathSync("/coverage");
var coverage = istanbulCov.createCoverageMap({});
// Capture the coverage after each test
afterEach(async function() {
// Code coverage
var results = await browser.execute(function() {
return window.__coverage__;
});
if (results) {
coverage.merge(results);
}
})
// Dump the coverage to a file
after(function() {
// Sometimes istanbul copies same location entry with null values
// crashing the final coverage step. This is just a workaround for now,
// since istanbul will be replaced by nyc.
const coverageJson = JSON.stringify(coverage, null, 2);
let newCoverage = JSON.parse(coverageJson);
Object.values(newCoverage).forEach(fileCov => {
if (fileCov.branchMap) {
Object.values(fileCov.branchMap).forEach(branchMapEntry => {
let prevLocation = {};
branchMapEntry.locations.forEach(curLocation => {
if (curLocation.start && curLocation.end &&
curLocation.start.column && curLocation.start.line &&
curLocation.end.column && curLocation.end.line)
{
prevLocation = curLocation;
}
else
{
curLocation.start.column = prevLocation.start.column;
curLocation.start.line = prevLocation.start.line;
curLocation.end.column = prevLocation.end.column;
curLocation.end.line = prevLocation.end.line;
}
})
})
}
})
const newCoverageJson = JSON.stringify(newCoverage, null, 2);
fs.writeFileSync(COVERAGE_PATH+"/coverage.json", newCoverageJson);
})

3
test/sources/index.js
View File

@@ -1,3 +0,0 @@
module.exports = {
example: require("./example")
};