AnimateCSS integration in tests suite (#3206)

Hi,

Just because, i never try to code a test
I purpose to supervise this work

After, perhaps it is not necessary to integrate it in develop branch. 
It's up to you to decide

CHANGELOG.md

@@ -21,6 +21,7 @@ _This release is scheduled to be released on 2023-10-01._
 - Apply AnimateIn rules on the first start
 - Added automatic client page reload when server was restarted by setting `reloadAfterServerRestart: true` in `config.js`, per default `false` (#3105)
 - Added eventClass option for customEvents on the default calendar
+- Added AnimateCSS integration in tests suite (#3206)
 
 ### Removed
 

tests/configs/modules/compliments/compliments_animateCSS.js

@@ -0,0 +1,28 @@
+/* MagicMirror² Test config sample for AnimateCSS integration with compliments module
+ *
+ * By bugsounet https://github.com/bugsounet
+ * 09/2023
+ * MIT Licensed.
+ */
+let config = {
+	modules: [
+		{
+			module: "compliments",
+			position: "lower_third",
+			animateIn: "flipInX",
+			animateOut: "flipOutX",
+			config: {
+				compliments: {
+					anytime: ["AnimateCSS Testing..."]
+				},
+				updateInterval: 2000,
+				fadeSpeed: 1000
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/configs/modules/compliments/compliments_animateCSS_fallbackToDefault.js

@@ -0,0 +1,29 @@
+/* MagicMirror² Test config sample for AnimateCSS integration with compliments module
+ * --> if animation name is not an AnimateCSS animation
+ * --> must fallback to default (no animation)
+ * By bugsounet https://github.com/bugsounet
+ * 09/2023
+ * MIT Licensed.
+ */
+let config = {
+	modules: [
+		{
+			module: "compliments",
+			position: "lower_third",
+			animateIn: "foo",
+			animateOut: "bar",
+			config: {
+				compliments: {
+					anytime: ["AnimateCSS Testing..."]
+				},
+				updateInterval: 2000,
+				fadeSpeed: 1000
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/configs/modules/compliments/compliments_animateCSS_invertedAnimationName.js

@@ -0,0 +1,28 @@
+/* MagicMirror² Test config sample for AnimateCSS integration with compliments module
+ * --> inversed name animation : in for out and vice versa (must return no animation)
+ * By bugsounet https://github.com/bugsounet
+ * 09/2023
+ * MIT Licensed.
+ */
+let config = {
+	modules: [
+		{
+			module: "compliments",
+			position: "lower_third",
+			animateIn: "flipOutX",
+			animateOut: "flipInX",
+			config: {
+				compliments: {
+					anytime: ["AnimateCSS Testing..."]
+				},
+				updateInterval: 2000,
+				fadeSpeed: 1000
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/e2e/animateCSS_spec.js

@@ -0,0 +1,78 @@
+/* AnimateCSS integration Test with compliments module
+ *
+ * By bugsounet https://github.com/bugsounet
+ * and helped by khassel
+ * 09/2023
+ * MIT Licensed.
+ */
+const helpers = require("./helpers/global-setup.js");
+
+describe("AnimateCSS integration Test", () => {
+	// define config file for testing
+	let testConfigFile = "tests/configs/modules/compliments/compliments_animateCSS.js";
+	// define config file to fallback to default: wrong animation name (must return no animation)
+	let testConfigFileFallbackToDefault = "tests/configs/modules/compliments/compliments_animateCSS_fallbackToDefault.js";
+	// define config file with an inversed name animation : in for out and vice versa (must return no animation)
+	let testConfigFileInvertedAnimationName = "tests/configs/modules/compliments/compliments_animateCSS_invertedAnimationName.js";
+	// define config file with no animation defined
+	let testConfigByDefault = "tests/configs/modules/compliments/compliments_anytime.js";
+
+	/**
+	 * move similar tests in function doTest
+	 * @param {string} [animationIn] animation in name of AnimateCSS to test.
+	 * @param {string} [animationOut] animation out name of AnimateCSS to test.
+	 */
+	const doTest = async (animationIn, animationOut) => {
+		await helpers.getDocument();
+		let elem = await helpers.waitForElement(`.compliments`);
+		expect(elem).not.toBe(null);
+		let styles = window.getComputedStyle(elem);
+
+		if (animationIn && animationIn !== "") {
+			expect(styles._values["animation-name"]).toBe(animationIn);
+		} else {
+			expect(styles._values["animation-name"]).toBe(undefined);
+		}
+
+		if (animationOut && animationOut !== "") {
+			elem = await helpers.waitForElement(`.compliments.animate__animated.animate__${animationOut}`);
+			expect(elem).not.toBe(null);
+			styles = window.getComputedStyle(elem);
+			expect(styles._values["animation-name"]).toBe(animationOut);
+		} else {
+			expect(styles._values["animation-name"]).toBe(undefined);
+		}
+	};
+
+	afterEach(async () => {
+		await helpers.stopApplication();
+	});
+
+	describe("animateIn and animateOut Test", () => {
+		it("with flipInX and flipOutX animation", async () => {
+			await helpers.startApplication(testConfigFile);
+			await doTest("flipInX", "flipOutX");
+		});
+	});
+
+	describe("use animateOut name for animateIn (vice versa) Test", () => {
+		it("without animation", async () => {
+			await helpers.startApplication(testConfigFileInvertedAnimationName);
+			await doTest();
+		});
+	});
+
+	describe("false Animation name test", () => {
+		it("without animation", async () => {
+			await helpers.startApplication(testConfigFileFallbackToDefault);
+			await doTest();
+		});
+	});
+
+	describe("no Animation defined test", () => {
+		it("without animation", async () => {
+			await helpers.startApplication(testConfigByDefault);
+			await doTest();
+		});
+	});
+});

tests/e2e/helpers/global-setup.js

@@ -30,6 +30,7 @@ exports.getDocument = () => {
 		const url = `http://${config.address || "localhost"}:${config.port || "8080"}`;
 		jsdom.JSDOM.fromURL(url, { resources: "usable", runScripts: "dangerously" }).then((dom) => {
 			dom.window.name = "jsdom";
+			global.window = dom.window;
 			dom.window.fetch = fetch;
 			dom.window.onload = () => {
 				global.document = dom.window.document;