Use driver pattern for e2e tests (#2)

* Initial commit

* Fix spec

* Move driver

* Fix config location

* Fix helper location

* More usage of driver

* Add click

* Fix click

* Migrate more tests

* Add setValue to driver

* Move more code to driver

* add isExisting to driver

* Change modal tests to use driver

* Fix tests

* Fix test

* Fix invalid alert wait

* Fix missing wd

* Fix tests

* Fix missing fs

* Fix test

* Fix path

* Move screenshort to driver

* Migrate keyboard

* Migrate skiplinks to driver

* Fix tests

* Try fix skip-links

* add config

* Add helper

* Fix driver?

* remove helper

* remove wd-helper

* Remove redundant file

* Remove webdriver extsions
This commit is contained in:
Harel M
2023-12-14 18:14:06 +02:00
committed by GitHub
parent b7838ad6e1
commit 73f7798a1d
15 changed files with 490 additions and 605 deletions

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