From ad665a7a336a497dc2808ba1e8cfc98d6d0b4101 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bugsounet=20-=20C=C3=A9dric?= Date: Mon, 25 Sep 2023 22:27:52 +0200 Subject: [PATCH] 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 | 1 + .../compliments/compliments_animateCSS.js | 28 +++++++ ...ompliments_animateCSS_fallbackToDefault.js | 29 +++++++ ...iments_animateCSS_invertedAnimationName.js | 28 +++++++ tests/e2e/animateCSS_spec.js | 78 +++++++++++++++++++ tests/e2e/helpers/global-setup.js | 1 + 6 files changed, 165 insertions(+) create mode 100644 tests/configs/modules/compliments/compliments_animateCSS.js create mode 100644 tests/configs/modules/compliments/compliments_animateCSS_fallbackToDefault.js create mode 100644 tests/configs/modules/compliments/compliments_animateCSS_invertedAnimationName.js create mode 100644 tests/e2e/animateCSS_spec.js diff --git a/CHANGELOG.md b/CHANGELOG.md index e59f84c6..bfbce86b 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/tests/configs/modules/compliments/compliments_animateCSS.js b/tests/configs/modules/compliments/compliments_animateCSS.js new file mode 100644 index 00000000..24e27360 --- /dev/null +++ b/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; +} diff --git a/tests/configs/modules/compliments/compliments_animateCSS_fallbackToDefault.js b/tests/configs/modules/compliments/compliments_animateCSS_fallbackToDefault.js new file mode 100644 index 00000000..89c06944 --- /dev/null +++ b/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; +} diff --git a/tests/configs/modules/compliments/compliments_animateCSS_invertedAnimationName.js b/tests/configs/modules/compliments/compliments_animateCSS_invertedAnimationName.js new file mode 100644 index 00000000..eb4af0ca --- /dev/null +++ b/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; +} diff --git a/tests/e2e/animateCSS_spec.js b/tests/e2e/animateCSS_spec.js new file mode 100644 index 00000000..3f7cac83 --- /dev/null +++ b/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(); + }); + }); +}); diff --git a/tests/e2e/helpers/global-setup.js b/tests/e2e/helpers/global-setup.js index d5506024..d20156e5 100644 --- a/tests/e2e/helpers/global-setup.js +++ b/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;