ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2025-12-15 18:50:01 +00:00
Code Issues Projects Releases Wiki Activity

Use driver pattern for e2e tests (#829)

Browse Source 
I've moved all the logic relevant to WBIO into a single file in order to
be able to replace it.
I have tried to upgrade WDIO in order to use the latest version and it
got stuck on my computer.
Furthermore, I was not able to run it locally which made this whole
cycle very long.
After this will be merged I will replace WDIO with cypress.
This doesn't change anything, only moves some code in the tests to a
single file, removes unneeded files and uses the driver pattern, which
will later allow switching the underline WDIO with Cypress.

cc: @nyurik
This commit is contained in:
Harel M
2023-12-17 08:14:23 +02:00
committed by GitHub
parent 31d56c9fae
commit 18f45e932b
15 changed files with 490 additions and 605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
test/functional/modals/index.js
View File

@@ -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");
})
})