added new electron tests supporting date mocking (#2947)

first PR for #2942 

- added new electron tests for calendar which test new css classes from
https://github.com/MichMich/MagicMirror/pull/2939
- moved some compliments tests from `e2e` to `electron` because of date
mocking
- removed mock stuff from compliments module

CHANGELOG.md

@@ -46,6 +46,7 @@ Special thanks to: @BKeyport, @buxxi, @davide125, @khassel, @kolbyjack, @krukle,
 - New scripts `install-mm` (and `install-mm:dev`) for simplifying mm installation (now: `npm run install-mm`) and adding params `--no-audit --no-fund --no-update-notifier` for less noise.
 - New `showTimeToday` option in calendar module shows time for current-day events even if `timeFormat` is `"relative"`.
 - Added hourly forecasts, apparent temperature & custom location name to SMHI weather provider.
+- Added new electron tests for calendar and moved some compliments tests from `e2e` to `electron` because of date mocking, removed mock stuff from compliments module.
 
 ### Removed
 

modules/default/compliments/compliments.js

@@ -21,8 +21,7 @@ Module.register("compliments", {
 		morningEndTime: 12,
 		afternoonStartTime: 12,
 		afternoonEndTime: 17,
-		random: true,
+		random: true
-		mockDate: null
 	},
 	lastIndexUsed: -1,
 	// Set currentweather from module
@@ -85,7 +84,7 @@ Module.register("compliments", {
 	 */
 	complimentArray: function () {
 		const hour = moment().hour();
-		const date = this.config.mockDate ? this.config.mockDate : moment().format("YYYY-MM-DD");
+		const date = moment().format("YYYY-MM-DD");
 		let compliments;
 
 		if (hour >= this.config.morningStartTime && hour < this.config.morningEndTime && this.config.compliments.hasOwnProperty("morning")) {

package.json

@@ -118,6 +118,9 @@
 				"displayName": "electron",
 				"testMatch": [
 					"**/tests/electron/**/*.[jt]s?(x)"
+				],
+				"testPathIgnorePatterns": [
+					"<rootDir>/tests/electron/helpers/"
 				]
 			},
 			{

tests/configs/modules/compliments/compliments_date.js

@@ -11,7 +11,6 @@ let config = {
 			module: "compliments",
 			position: "middle_center",
 			config: {
-				mockDate: "2020-01-01",
 				compliments: {
 					morning: [],
 					afternoon: [],

tests/e2e/modules/compliments_spec.js

@@ -18,37 +18,6 @@ describe("Compliments module", () => {
 		await helpers.stopApplication();
 	});
 
-	describe("parts of days", () => {
-		beforeAll(async () => {
-			helpers.startApplication("tests/configs/modules/compliments/compliments_parts_day.js");
-			await helpers.getDocument();
-		});
-
-		it("if Morning compliments for that part of day", async () => {
-			const hour = new Date().getHours();
-			if (hour >= 3 && hour < 12) {
-				// if morning check
-				await doTest(["Hi", "Good Morning", "Morning test"]);
-			}
-		});
-
-		it("if Afternoon show Compliments for that part of day", async () => {
-			const hour = new Date().getHours();
-			if (hour >= 12 && hour < 17) {
-				// if afternoon check
-				await doTest(["Hello", "Good Afternoon", "Afternoon test"]);
-			}
-		});
-
-		it("if Evening show Compliments for that part of day", async () => {
-			const hour = new Date().getHours();
-			if (!(hour >= 3 && hour < 12) && !(hour >= 12 && hour < 17)) {
-				// if evening check
-				await doTest(["Hello There", "Good Evening", "Evening test"]);
-			}
-		});
-	});
-
 	describe("Feature anytime in compliments module", () => {
 		describe("Set anytime and empty compliments for morning, evening and afternoon ", () => {
 			beforeAll(async () => {
@@ -73,19 +42,6 @@ describe("Compliments module", () => {
 		});
 	});
 
-	describe("Feature date in compliments module", () => {
-		describe("Set date and empty compliments for anytime, morning, evening and afternoon", () => {
-			beforeAll(async () => {
-				helpers.startApplication("tests/configs/modules/compliments/compliments_date.js");
-				await helpers.getDocument();
-			});
-
-			it("Show happy new year compliment on new years day", async () => {
-				await doTest(["Happy new year!"]);
-			});
-		});
-	});
-
 	describe("remoteFile option", () => {
 		beforeAll(async () => {
 			helpers.startApplication("tests/configs/modules/compliments/compliments_remote.js");

tests/electron/env_spec.js

@@ -1,42 +1,32 @@
-// see https://playwright.dev/docs/api/class-electronapplication
+const helpers = require("./helpers/global-setup");
-
-const { _electron: electron } = require("playwright");
-
-let electronApp = null;
-process.env.MM_CONFIG_FILE = "tests/configs/modules/display.js";
-jest.retryTimes(3);
 
 describe("Electron app environment", () => {
 	beforeEach(async () => {
-		electronApp = await electron.launch({ args: ["js/electron.js"] });
+		await helpers.startApplication("tests/configs/modules/display.js");
 	});
 
 	afterEach(async () => {
-		await electronApp.close();
+		await helpers.stopApplication();
 	});
 
 	it("should open browserwindow", async () => {
-		expect(await electronApp.windows().length).toBe(1);
+		const module = await helpers.getElement("#module_0_helloworld");
-		const page = await electronApp.firstWindow();
-		expect(await page.title()).toBe("MagicMirror²");
-		expect(await page.isVisible("body")).toBe(true);
-		const module = page.locator("#module_0_helloworld");
-		await module.waitFor();
 		expect(await module.textContent()).toContain("Test Display Header");
+		expect(await global.electronApp.windows().length).toBe(1);
 	});
 });
 
 describe("Development console tests", () => {
 	beforeEach(async () => {
-		electronApp = await electron.launch({ args: ["js/electron.js", "dev"] });
+		await helpers.startApplication("tests/configs/modules/display.js", null, ["js/electron.js", "dev"]);
 	});
 
 	afterEach(async () => {
-		await electronApp.close();
+		await helpers.stopApplication();
 	});
 
 	it("should open browserwindow and dev console", async () => {
-		const pageArray = await electronApp.windows();
+		const pageArray = await global.electronApp.windows();
 		expect(pageArray.length).toBe(2);
 		for (const page of pageArray) {
 			expect(["MagicMirror²", "DevTools"]).toContain(await page.title());

tests/electron/helpers/global-setup.js

@@ -0,0 +1,43 @@
+// see https://playwright.dev/docs/api/class-electronapplication
+// https://github.com/microsoft/playwright/issues/6347#issuecomment-1085850728
+// https://www.anycodings.com/1questions/958135/can-i-set-the-date-for-playwright-browser
+const { _electron: electron } = require("playwright");
+
+exports.startApplication = async (configFilename, systemDate = null, electronParams = ["js/electron.js"]) => {
+	global.electronApp = null;
+	global.page = null;
+	process.env.MM_CONFIG_FILE = configFilename;
+	process.env.TZ = "GMT";
+	jest.retryTimes(3);
+	global.electronApp = await electron.launch({ args: electronParams });
+	expect(global.electronApp);
+
+	if ((await global.electronApp.windows().length) === 1) {
+		global.page = await global.electronApp.firstWindow();
+		if (systemDate) {
+			await global.page.evaluate((systemDate) => {
+				Date.now = () => {
+					return new Date(systemDate);
+				};
+			}, systemDate);
+		}
+		expect(await global.page.title()).toBe("MagicMirror²");
+		expect(await global.page.isVisible("body")).toBe(true);
+	}
+};
+
+exports.stopApplication = async () => {
+	if (global.electronApp) {
+		await global.electronApp.close();
+	}
+	global.electronApp = null;
+	global.page = null;
+};
+
+exports.getElement = async (selector) => {
+	expect(global.page);
+	let elem = global.page.locator(selector);
+	await elem.waitFor();
+	expect(elem).not.toBe(null);
+	return elem;
+};

tests/electron/modules/calendar_spec.js

@@ -0,0 +1,32 @@
+const helpers = require("../helpers/global-setup");
+
+describe("Calendar module", () => {
+	/**
+	 * move similar tests in function doTest
+	 *
+	 * @param {string} cssClass css selector
+	 */
+	const doTest = async (cssClass) => {
+		await helpers.getElement(".calendar");
+		await helpers.getElement(".module-content");
+		const events = await global.page.locator(".event");
+		const elem = await events.locator(cssClass);
+		expect(elem).not.toBe(null);
+	};
+
+	afterEach(async () => {
+		await helpers.stopApplication();
+	});
+
+	describe("Test css classes", () => {
+		it("has css class today", async () => {
+			await helpers.startApplication("tests/configs/modules/calendar/custom.js", "01 Jan 2030 12:30:00 GMT");
+			await doTest(".today");
+		});
+
+		it("has css class tomorrow", async () => {
+			await helpers.startApplication("tests/configs/modules/calendar/custom.js", "31 Dez 2029 12:30:00 GMT");
+			await doTest(".tomorrow");
+		});
+	});
+});

tests/electron/modules/compliments_spec.js

@@ -0,0 +1,45 @@
+const helpers = require("../helpers/global-setup");
+
+describe("Compliments module", () => {
+	/**
+	 * move similar tests in function doTest
+	 *
+	 * @param {Array} complimentsArray The array of compliments.
+	 */
+	const doTest = async (complimentsArray) => {
+		await helpers.getElement(".compliments");
+		const elem = await helpers.getElement(".module-content");
+		expect(elem).not.toBe(null);
+		expect(complimentsArray).toContain(await elem.textContent());
+	};
+
+	afterEach(async () => {
+		await helpers.stopApplication();
+	});
+
+	describe("parts of days", () => {
+		it("Morning compliments for that part of day", async () => {
+			await helpers.startApplication("tests/configs/modules/compliments/compliments_parts_day.js", "01 Oct 2022 10:00:00 GMT");
+			await doTest(["Hi", "Good Morning", "Morning test"]);
+		});
+
+		it("Afternoon show Compliments for that part of day", async () => {
+			await helpers.startApplication("tests/configs/modules/compliments/compliments_parts_day.js", "01 Oct 2022 15:00:00 GMT");
+			await doTest(["Hello", "Good Afternoon", "Afternoon test"]);
+		});
+
+		it("Evening show Compliments for that part of day", async () => {
+			await helpers.startApplication("tests/configs/modules/compliments/compliments_parts_day.js", "01 Oct 2022 20:00:00 GMT");
+			await doTest(["Hello There", "Good Evening", "Evening test"]);
+		});
+	});
+
+	describe("Feature date in compliments module", () => {
+		describe("Set date and empty compliments for anytime, morning, evening and afternoon", () => {
+			it("Show happy new year compliment on new years day", async () => {
+				await helpers.startApplication("tests/configs/modules/compliments/compliments_date.js", "01 Jan 2022 10:00:00 GMT");
+				await doTest(["Happy new year!"]);
+			});
+		});
+	});
+});