fix(test): refactor AnimateCSS tests after jsdom 27 upgrade

Author: KristjanESPERANTO

CHANGELOG.md

@@ -45,7 +45,7 @@ Thanks to: @dathbe.
 ### Updated
 
 - [calendar] Update defaultSymbol name and also the link to the icon search site (#3879)
-- [core] Update dependencies including electron to v38 as well as github actions (#3831, #3849, #3857, #3858, #3872, #3876, #3882)
+- [core] Update dependencies including electron to v38 as well as github actions (#3831, #3849, #3857, #3858, #3872, #3876, #3882, #3891)
 - [weather] Update feels_like temperature calculation formula (#3869)
 
 ### Fixed
@@ -56,6 +56,7 @@ Thanks to: @dathbe.
 - [calendar] Fix regression handling of limit days (#3840)
 - [calendar] Fixed regression of calendarfetcherutils.shouldEventBeExcluded (#3841)
 - [core] Fixed socket.io timeout when server is slow to send notification, notification lost at client (#3380)
+- [tests] refactor AnimateCSS tests after jsdom 27 upgrade (#3891)
 - [weather] Use `apparent_temperature` data from openmeteo's hourly weather for current feelsLikeTemp (#3868).
 
 ## [2.32.0] - 2025-07-01

tests/e2e/animateCSS_spec.js

@@ -1,73 +1,109 @@
 const helpers = require("./helpers/global-setup");
 
+// Validate Animate.css integration for compliments module using class toggling.
+// We intentionally ignore computed animation styles (jsdom doesn't simulate real animations).
 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 inverted 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";
+	// Config variants under test
+	const TEST_CONFIG_ANIM = "tests/configs/modules/compliments/compliments_animateCSS.js";
+	const TEST_CONFIG_FALLBACK = "tests/configs/modules/compliments/compliments_animateCSS_fallbackToDefault.js"; // invalid animation names
+	const TEST_CONFIG_INVERTED = "tests/configs/modules/compliments/compliments_animateCSS_invertedAnimationName.js"; // in/out swapped
+	const TEST_CONFIG_NONE = "tests/configs/modules/compliments/compliments_anytime.js"; // no animations defined
 
 	/**
-	 * 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.
-	 * @returns {boolean} result
+	 * Get the compliments container element (waits until available).
+	 * @returns {Promise<HTMLElement>} compliments root element
 	 */
-	const doTest = async (animationIn, animationOut) => {
+	async function getComplimentsElement () {
 		await helpers.getDocument();
-		let elem = await helpers.waitForElement(".compliments");
-		expect(elem).not.toBeNull();
-		let styles = window.getComputedStyle(elem);
+		const el = await helpers.waitForElement(".compliments");
+		expect(el).not.toBeNull();
+		return el;
+	}
 
-		if (animationIn && animationIn !== "") {
-			expect(styles._values.get("animation-name")).toBe(animationIn);
-		} else {
-			expect(styles._values.get("animation-name")).toBeUndefined();
+	/**
+	 * Wait for an Animate.css class to appear and persist briefly.
+	 * @param {string} cls Animation class name without leading dot (e.g. animate__flipInX)
+	 * @param {{timeout?: number}} [options] Poll timeout in ms (default 6000)
+	 * @returns {Promise<boolean>} true if class detected in time
+	 */
+	async function waitForAnimationClass (cls, { timeout = 6000 } = {}) {
+		const start = Date.now();
+		while (Date.now() - start < timeout) {
+			if (document.querySelector(`.compliments.animate__animated.${cls}`)) {
+				// small stability wait
+				await new Promise((r) => setTimeout(r, 50));
+				if (document.querySelector(`.compliments.animate__animated.${cls}`)) return true;
+			}
+			await new Promise((r) => setTimeout(r, 100));
 		}
+		throw new Error(`Timeout waiting for class ${cls}`);
+	}
 
-		if (animationOut && animationOut !== "") {
-			elem = await helpers.waitForElement(`.compliments.animate__animated.animate__${animationOut}`);
-			expect(elem).not.toBeNull();
-			styles = window.getComputedStyle(elem);
-			expect(styles._values.get("animation-name")).toBe(animationOut);
-		} else {
-			expect(styles._values.get("animation-name")).toBeUndefined();
+	/**
+	 * Assert that no Animate.css animation class is applied within a time window.
+	 * @param {number} [ms] Observation period in ms (default 2000)
+	 * @returns {Promise<void>}
+	 */
+	async function assertNoAnimationWithin (ms = 2000) {
+		const start = Date.now();
+		while (Date.now() - start < ms) {
+			if (document.querySelector(".compliments.animate__animated")) {
+				throw new Error("Unexpected animate__animated class present in non-animation scenario");
+			}
+			await new Promise((r) => setTimeout(r, 100));
+		}
+	}
+
+	/**
+	 * Run one animation test scenario.
+	 * @param {string} [animationIn] Expected animate-in name
+	 * @param {string} [animationOut] Expected animate-out name
+	 * @returns {Promise<boolean>} true when scenario assertions pass
+	 */
+	async function runAnimationTest (animationIn, animationOut) {
+		await getComplimentsElement();
+		if (!animationIn && !animationOut) {
+			await assertNoAnimationWithin(2000);
+			return true;
+		}
+		if (animationIn) await waitForAnimationClass(`animate__${animationIn}`);
+		if (animationOut) {
+			// Wait just beyond one update cycle (updateInterval=2000ms) before expecting animateOut.
+			await new Promise((r) => setTimeout(r, 2100));
+			await waitForAnimationClass(`animate__${animationOut}`);
 		}
 		return true;
-	};
+	}
 
 	afterEach(async () => {
 		await helpers.stopApplication();
 	});
 
 	describe("animateIn and animateOut Test", () => {
 		it("with flipInX and flipOutX animation", async () => {
-			await helpers.startApplication(testConfigFile);
-			await expect(doTest("flipInX", "flipOutX")).resolves.toBe(true);
+			await helpers.startApplication(TEST_CONFIG_ANIM);
+			await expect(runAnimationTest("flipInX", "flipOutX")).resolves.toBe(true);
 		});
 	});
 
 	describe("use animateOut name for animateIn (vice versa) Test", () => {
-		it("without animation", async () => {
-			await helpers.startApplication(testConfigFileInvertedAnimationName);
-			await expect(doTest()).resolves.toBe(true);
+		it("without animation (inverted names)", async () => {
+			await helpers.startApplication(TEST_CONFIG_INVERTED);
+			await expect(runAnimationTest()).resolves.toBe(true);
 		});
 	});
 
 	describe("false Animation name test", () => {
-		it("without animation", async () => {
-			await helpers.startApplication(testConfigFileFallbackToDefault);
-			await expect(doTest()).resolves.toBe(true);
+		it("without animation (invalid names)", async () => {
+			await helpers.startApplication(TEST_CONFIG_FALLBACK);
+			await expect(runAnimationTest()).resolves.toBe(true);
 		});
 	});
 
 	describe("no Animation defined test", () => {
-		it("without animation", async () => {
-			await helpers.startApplication(testConfigByDefault);
-			await expect(doTest()).resolves.toBe(true);
+		it("without animation (no config)", async () => {
+			await helpers.startApplication(TEST_CONFIG_NONE);
+			await expect(runAnimationTest()).resolves.toBe(true);
 		});
 	});
 });