improve waitForElement

tests/e2e/env_spec.js

@@ -25,8 +25,9 @@ describe("App environment", function () {
 	});
 
 	it("should show the title MagicMirror²", function () {
-		const elem = document.querySelector("title");
+		helpers.waitForElement("title").then((elem) => {
-		expect(elem).not.toBe(null);
+			expect(elem).not.toBe(null);
-		expect(elem.textContent).toBe("MagicMirror²");
+			expect(elem.textContent).toBe("MagicMirror²");
+		});
 	});
 });

tests/e2e/global-setup.js

@@ -23,7 +23,6 @@ exports.stopApplication = function () {
 };
 
 exports.getDocument = function (callback, ms) {
-	if (!ms || ms < 1000) ms = 1000;
 	const url = "http://" + (config.address || "localhost") + ":" + (config.port || "8080");
 	jsdom.JSDOM.fromURL(url, { resources: "usable", runScripts: "dangerously" }).then((dom) => {
 		dom.window.name = "jsdom";
@@ -37,22 +36,22 @@ exports.getDocument = function (callback, ms) {
 	});
 };
 
-exports.waitForElement = function(selector) {
+exports.waitForElement = function (selector) {
-	return new Promise(resolve => {
+	return new Promise((resolve) => {
-			if (document.querySelector(selector)) {
+		if (document.querySelector(selector) && document.querySelector(selector).value !== undefined) {
-					return resolve(document.querySelector(selector));
+			return resolve(document.querySelector(selector));
+		}
+
+		const observer = new MutationObserver(() => {
+			if (document.querySelector(selector) && document.querySelector(selector).value !== undefined) {
+				resolve(document.querySelector(selector));
+				observer.disconnect();
 			}
+		});
 
-			const observer = new MutationObserver(() => {
+		observer.observe(document.body, {
-					if (document.querySelector(selector)) {
+			childList: true,
-							resolve(document.querySelector(selector));
+			subtree: true
-							observer.disconnect();
+		});
-					}
-			});
-
-			observer.observe(document.body, {
-					childList: true,
-					subtree: true
-			});
 	});
 };

tests/e2e/modules/alert_spec.js

@@ -3,15 +3,16 @@ const helpers = require("../global-setup");
 describe("Alert module", function () {
 	beforeAll(function (done) {
 		helpers.startApplication("tests/configs/modules/alert/default.js");
-		helpers.getDocument(done, 3000);
+		helpers.getDocument(done);
 	});
 	afterAll(function () {
 		helpers.stopApplication();
 	});
 
 	it("should show the welcome message", function () {
-		const elem = document.querySelector(".ns-box .ns-box-inner .light.bright.small");
+		helpers.waitForElement(".ns-box .ns-box-inner .light.bright.small").then((elem) => {
-		expect(elem).not.toBe(null);
+			expect(elem).not.toBe(null);
-		expect(elem.textContent).toContain("Welcome, start was successful!");
+			expect(elem.textContent).toContain("Welcome, start was successful!");
+		});
 	});
 });

tests/e2e/modules/calendar_spec.js

@@ -1,6 +1,5 @@
 const helpers = require("../global-setup");
 const serverBasicAuth = require("./basic-auth.js");
-const testDelay = 4000;
 
 describe("Calendar module", function () {
 	/**
@@ -16,14 +15,15 @@ describe("Calendar module", function () {
 			} else {
 				expect(elem.length).toBe(result);
 			}
-		})
+		});
 	}
 
 	const testTextContain = function (element, text) {
-		const elem = document.querySelector(".calendar");
+		helpers.waitForElement(element).then((elem) => {
-		expect(elem).not.toBe(null);
+			expect(elem).not.toBe(null);
-		expect(elem.textContent).toContain(text);
+			expect(elem.textContent).toContain(text);
-	}
+		});
+	};
 
 	afterAll(function () {
 		helpers.stopApplication();
@@ -86,7 +86,7 @@ describe("Calendar module", function () {
 					return i * 60;
 				};
 				helpers.startApplication("tests/configs/modules/calendar/recurring.js");
-				helpers.getDocument(done, testDelay);
+				helpers.getDocument(done);
 			});
 
 			it('should contain text "Mar 25th" in timezone UTC ' + -i, () => {
@@ -148,7 +148,7 @@ describe("Calendar module", function () {
 		beforeAll(function (done) {
 			helpers.startApplication("tests/configs/modules/calendar/fail-basic-auth.js");
 			serverBasicAuth.listen(8020);
-			helpers.getDocument(done, testDelay);
+			helpers.getDocument(done);
 		});
 
 		afterAll(function (done) {

tests/e2e/modules/clock_es_spec.js

@@ -6,15 +6,16 @@ describe("Clock set to spanish language module", function () {
 	});
 
 	const testMatch = function (element, regex) {
-		const elem = document.querySelector(element);
+		helpers.waitForElement(element).then((elem) => {
-		expect(elem).not.toBe(null);
+			expect(elem).not.toBe(null);
-		expect(elem.textContent).toMatch(regex);
+			expect(elem.textContent).toMatch(regex);
+		});
 	};
 
 	describe("with default 24hr clock config", function () {
 		beforeAll(function (done) {
 			helpers.startApplication("tests/configs/modules/clock/es/clock_24hr.js");
-			helpers.getDocument(done, 1000);
+			helpers.getDocument(done);
 		});
 
 		it("shows date with correct format", function () {
@@ -31,7 +32,7 @@ describe("Clock set to spanish language module", function () {
 	describe("with default 12hr clock config", function () {
 		beforeAll(function (done) {
 			helpers.startApplication("tests/configs/modules/clock/es/clock_12hr.js");
-			helpers.getDocument(done, 1000);
+			helpers.getDocument(done);
 		});
 
 		it("shows date with correct format", function () {
@@ -48,7 +49,7 @@ describe("Clock set to spanish language module", function () {
 	describe("with showPeriodUpper config enabled", function () {
 		beforeAll(function (done) {
 			helpers.startApplication("tests/configs/modules/clock/es/clock_showPeriodUpper.js");
-			helpers.getDocument(done, 1000);
+			helpers.getDocument(done);
 		});
 
 		it("shows 12hr time with upper case AM/PM", function () {
@@ -60,7 +61,7 @@ describe("Clock set to spanish language module", function () {
 	describe("with showWeek config enabled", function () {
 		beforeAll(function (done) {
 			helpers.startApplication("tests/configs/modules/clock/es/clock_showWeek.js");
-			helpers.getDocument(done, 1000);
+			helpers.getDocument(done);
 		});
 
 		it("shows week with correct format", function () {

tests/e2e/modules/clock_spec.js

@@ -7,9 +7,10 @@ describe("Clock module", function () {
 	});
 
 	const testMatch = function (element, regex) {
-		const elem = document.querySelector(element);
+		helpers.waitForElement(element).then((elem) => {
-		expect(elem).not.toBe(null);
+			expect(elem).not.toBe(null);
-		expect(elem.textContent).toMatch(regex);
+			expect(elem.textContent).toMatch(regex);
+		});
 	};
 
 	describe("with default 24hr clock config", function () {
@@ -77,8 +78,9 @@ describe("Clock module", function () {
 		});
 
 		it("should show not show the time when digital clock is shown", function () {
-			const elem = document.querySelector(".clock .digital .time");
+			helpers.waitForElement(".clock .digital .time").then((elem) => {
-			expect(elem).toBe(null);
+				expect(elem).toBe(null);
+			});
 		});
 	});
 
@@ -96,9 +98,10 @@ describe("Clock module", function () {
 		it("should show the week with the correct number of week of year", function () {
 			const currentWeekNumber = moment().week();
 			const weekToShow = "Week " + currentWeekNumber;
-			const elem = document.querySelector(".clock .week");
+			helpers.waitForElement(".clock .week").then((elem) => {
-			expect(elem).not.toBe(null);
+				expect(elem).not.toBe(null);
-			expect(elem.textContent).toBe(weekToShow);
+				expect(elem.textContent).toBe(weekToShow);
+			});
 		});
 	});
 
@@ -109,8 +112,9 @@ describe("Clock module", function () {
 		});
 
 		it("should show the analog clock face", () => {
-			const elem = document.querySelector(".clockCircle");
+			helpers.waitForElement(".clockCircle").then((elem) => {
-			expect(elem).not.toBe(null);
+				expect(elem).not.toBe(null);
+			});
 		});
 	});
 });

tests/e2e/modules/compliments_spec.js

@@ -6,11 +6,13 @@ const helpers = require("../global-setup");
  * @param {Array} complimentsArray The array of compliments.
  */
 function doTest(complimentsArray) {
-	let elem = document.querySelector(".compliments");
+	helpers.waitForElement(".compliments").then((elem) => {
-	expect(elem).not.toBe(null);
+		expect(elem).not.toBe(null);
-	elem = document.querySelector(".module-content");
+		helpers.waitForElement(".module-content").then((elem) => {
-	expect(elem).not.toBe(null);
+			expect(elem).not.toBe(null);
-	expect(complimentsArray).toContain(elem.textContent);
+			expect(complimentsArray).toContain(elem.textContent);
+		});
+	});
 }
 
 describe("Compliments module", function () {
@@ -21,7 +23,7 @@ describe("Compliments module", function () {
 	describe("parts of days", function () {
 		beforeAll(function (done) {
 			helpers.startApplication("tests/configs/modules/compliments/compliments_parts_day.js");
-			helpers.getDocument(done, 1000);
+			helpers.getDocument(done);
 		});
 
 		it("if Morning compliments for that part of day", function () {
@@ -53,7 +55,7 @@ describe("Compliments module", function () {
 		describe("Set anytime and empty compliments for morning, evening and afternoon ", function () {
 			beforeAll(function (done) {
 				helpers.startApplication("tests/configs/modules/compliments/compliments_anytime.js");
-				helpers.getDocument(done, 1000);
+				helpers.getDocument(done);
 			});
 
 			it("Show anytime because if configure empty parts of day compliments and set anytime compliments", function () {
@@ -64,7 +66,7 @@ describe("Compliments module", function () {
 		describe("Only anytime present in configuration compliments", function () {
 			beforeAll(function (done) {
 				helpers.startApplication("tests/configs/modules/compliments/compliments_only_anytime.js");
-				helpers.getDocument(done, 1000);
+				helpers.getDocument(done);
 			});
 
 			it("Show anytime compliments", function () {
@@ -77,7 +79,7 @@ describe("Compliments module", function () {
 		describe("Set date and empty compliments for anytime, morning, evening and afternoon", function () {
 			beforeAll(function (done) {
 				helpers.startApplication("tests/configs/modules/compliments/compliments_date.js");
-				helpers.getDocument(done, 1000);
+				helpers.getDocument(done);
 			});
 
 			it("Show happy new year compliment on new years day", function () {

tests/e2e/modules/helloworld_spec.js

@@ -8,26 +8,28 @@ describe("Test helloworld module", function () {
 	describe("helloworld set config text", function () {
 		beforeAll(function (done) {
 			helpers.startApplication("tests/configs/modules/helloworld/helloworld.js");
-			helpers.getDocument(done, 1000);
+			helpers.getDocument(done);
 		});
 
 		it("Test message helloworld module", function () {
-			const elem = document.querySelector(".helloworld");
+			helpers.waitForElement(".helloworld").then((elem) => {
-			expect(elem).not.toBe(null);
+				expect(elem).not.toBe(null);
-			expect(elem.textContent).toContain("Test HelloWorld Module");
+				expect(elem.textContent).toContain("Test HelloWorld Module");
+			});
 		});
 	});
 
 	describe("helloworld default config text", function () {
 		beforeAll(function (done) {
 			helpers.startApplication("tests/configs/modules/helloworld/helloworld_default.js");
-			helpers.getDocument(done, 1000);
+			helpers.getDocument(done);
 		});
 
 		it("Test message helloworld module", function () {
-			const elem = document.querySelector(".helloworld");
+			helpers.waitForElement(".helloworld").then((elem) => {
-			expect(elem).not.toBe(null);
+				expect(elem).not.toBe(null);
-			expect(elem.textContent).toContain("Hello World!");
+				expect(elem.textContent).toContain("Hello World!");
+			});
 		});
 	});
 });

tests/e2e/modules/newsfeed_spec.js

@@ -1,5 +1,4 @@
 const helpers = require("../global-setup");
-const testDelay = 4000;
 
 describe("Newsfeed module", function () {
 	afterAll(function () {
@@ -9,69 +8,76 @@ describe("Newsfeed module", function () {
 	describe("Default configuration", function () {
 		beforeAll(function (done) {
 			helpers.startApplication("tests/configs/modules/newsfeed/default.js");
-			helpers.getDocument(done, testDelay);
+			helpers.getDocument(done);
 		});
 
 		it("should show the newsfeed title", function () {
-			const elem = document.querySelector(".newsfeed .newsfeed-source");
+			helpers.waitForElement(".newsfeed .newsfeed-source").then((elem) => {
-			expect(elem).not.toBe(null);
+				expect(elem).not.toBe(null);
-			expect(elem.textContent).toContain("Rodrigo Ramirez Blog");
+				expect(elem.textContent).toContain("Rodrigo Ramirez Blog");
+			});
 		});
 
 		it("should show the newsfeed article", function () {
-			const elem = document.querySelector(".newsfeed .newsfeed-title");
+			helpers.waitForElement(".newsfeed .newsfeed-title").then((elem) => {
-			expect(elem).not.toBe(null);
+				expect(elem).not.toBe(null);
-			expect(elem.textContent).toContain("QPanel");
+				expect(elem.textContent).toContain("QPanel");
+			});
 		});
 
 		it("should NOT show the newsfeed description", () => {
-			const elem = document.querySelector(".newsfeed .newsfeed-desc");
+			helpers.waitForElement(".newsfeed .newsfeed-desc").then((elem) => {
-			expect(elem).toBe(null);
+				expect(elem).toBe(null);
+			});
 		});
 	});
 
 	describe("Custom configuration", function () {
 		beforeAll(function (done) {
 			helpers.startApplication("tests/configs/modules/newsfeed/prohibited_words.js");
-			helpers.getDocument(done, testDelay);
+			helpers.getDocument(done);
 		});
 
 		it("should not show articles with prohibited words", function () {
-			const elem = document.querySelector(".newsfeed .newsfeed-title");
+			helpers.waitForElement(".newsfeed .newsfeed-title").then((elem) => {
-			expect(elem).not.toBe(null);
+				expect(elem).not.toBe(null);
-			expect(elem.textContent).toContain("Problema VirtualBox");
+				expect(elem.textContent).toContain("Problema VirtualBox");
+			});
 		});
 
 		it("should show the newsfeed description", () => {
-			const elem = document.querySelector(".newsfeed .newsfeed-desc");
+			helpers.waitForElement(".newsfeed .newsfeed-desc").then((elem) => {
-			expect(elem).not.toBe(null);
+				expect(elem).not.toBe(null);
-			expect(elem.textContent.length).not.toBe(0);
+				expect(elem.textContent.length).not.toBe(0);
+			});
 		});
 	});
 
 	describe("Invalid configuration", function () {
 		beforeAll(function (done) {
 			helpers.startApplication("tests/configs/modules/newsfeed/incorrect_url.js");
-			helpers.getDocument(done, testDelay);
+			helpers.getDocument(done);
 		});
 
 		it("should show malformed url warning", function () {
-			const elem = document.querySelector(".newsfeed .small");
+			helpers.waitForElement(".newsfeed .small").then((elem) => {
-			expect(elem).not.toBe(null);
+				expect(elem).not.toBe(null);
-			expect(elem.textContent).toContain("Error in the Newsfeed module. Malformed url.");
+				expect(elem.textContent).toContain("Error in the Newsfeed module. Malformed url.");
+			});
 		});
 	});
 
 	describe("Ignore items", function () {
 		beforeAll(function (done) {
 			helpers.startApplication("tests/configs/modules/newsfeed/ignore_items.js");
-			helpers.getDocument(done, testDelay);
+			helpers.getDocument(done);
 		});
 
 		it("should show empty items info message", function () {
-			const elem = document.querySelector(".newsfeed .small");
+			helpers.waitForElement(".newsfeed .small").then((elem) => {
-			expect(elem).not.toBe(null);
+				expect(elem).not.toBe(null);
-			expect(elem.textContent).toContain("No news at the moment.");
+				expect(elem.textContent).toContain("No news at the moment.");
+			});
 		});
 	});
 });

tests/e2e/modules_display_spec.js

@@ -3,22 +3,24 @@ const helpers = require("./global-setup");
 describe("Display of modules", function () {
 	beforeAll(function (done) {
 		helpers.startApplication("tests/configs/modules/display.js");
-		helpers.getDocument(done, 3000);
+		helpers.getDocument(done);
 	});
 	afterAll(function () {
 		helpers.stopApplication();
 	});
 
 	it("should show the test header", function () {
-		const elem = document.querySelector("#module_0_helloworld .module-header");
+		helpers.waitForElement("#module_0_helloworld .module-header").then((elem) => {
-		expect(elem).not.toBe(null);
+			expect(elem).not.toBe(null);
-		// textContent gibt hier lowercase zurück, das uppercase wird durch css realisiert, was daher nicht in textContent landet
+			// textContent gibt hier lowercase zurück, das uppercase wird durch css realisiert, was daher nicht in textContent landet
-		expect(elem.textContent).toBe("test_header");
+			expect(elem.textContent).toBe("test_header");
+		});
 	});
 
 	it("should show no header if no header text is specified", function () {
-		const elem = document.querySelector("#module_1_helloworld .module-header");
+		helpers.waitForElement("#module_1_helloworld .module-header").then((elem) => {
-		expect(elem).not.toBe(null);
+			expect(elem).not.toBe(null);
-		expect(elem.textContent).toBe("undefined");
+			expect(elem.textContent).toBe("undefined");
+		});
 	});
 });

tests/e2e/modules_position_spec.js

@@ -3,7 +3,7 @@ const helpers = require("./global-setup");
 describe("Position of modules", function () {
 	beforeAll(function (done) {
 		helpers.startApplication("tests/configs/modules/positions.js");
-		helpers.getDocument(done, 3000);
+		helpers.getDocument(done);
 	});
 	afterAll(function () {
 		helpers.stopApplication();
@@ -14,9 +14,10 @@ describe("Position of modules", function () {
 	for (const position of positions) {
 		const className = position.replace("_", ".");
 		it("should show text in " + position, function () {
-			const elem = document.querySelector("." + className);
+			helpers.waitForElement("." + className).then((elem) => {
-			expect(elem).not.toBe(null);
+				expect(elem).not.toBe(null);
-			expect(elem.textContent).toContain("Text in " + position);
+				expect(elem.textContent).toContain("Text in " + position);
+			});
 		});
 	}
 });

tests/e2e/without_modules.js

@@ -10,14 +10,16 @@ describe("Check configuration without modules", function () {
 	});
 
 	it("Show the message MagicMirror title", function () {
-		const elem = document.querySelector("#module_1_helloworld .module-content");
+		helpers.waitForElement("#module_1_helloworld .module-content").then((elem) => {
-		expect(elem).not.toBe(null);
+			expect(elem).not.toBe(null);
-		expect(elem.textContent).toContain("Magic Mirror2");
+			expect(elem.textContent).toContain("Magic Mirror2");
+		});
 	});
 
 	it("Show the text Michael's website", function () {
-		const elem = document.querySelector("#module_5_helloworld .module-content");
+		helpers.waitForElement("#module_5_helloworld .module-content").then((elem) => {
-		expect(elem).not.toBe(null);
+			expect(elem).not.toBe(null);
-		expect(elem.textContent).toContain("www.michaelteeuw.nl");
+			expect(elem.textContent).toContain("www.michaelteeuw.nl");
+		});
 	});
 });