AnimateCSS integration in tests suite

[bugsounet]

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

[codecov-commenter]

Codecov Report

Merging #3206 (5b1765c) into develop (95ec309) will decrease coverage by 0.26%.
The diff coverage is n/a.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

@@             Coverage Diff             @@
##           develop    #3206      +/-   ##
===========================================
- Coverage    25.21%   24.95%   -0.26%     
===========================================
  Files           54       54              
  Lines        11925    11925              
===========================================
- Hits          3007     2976      -31     
- Misses        8918     8949      +31     

see 1 file with indirect coverage changes

[bugsounet]

On the other hand I don't know how to do the test with an animation that doesn't exist.

ie:

• must NOT contain .compliments.animate__animated.animate___${animationName}
• contain ONLY .compliments

@rejas: This can be useful too, in case you want to push this PR into develop

[khassel]

I think we should have these tests.

First of all sorry for missing test documentation, maybe I do an extra PR for this ...

We have 3 test projects

• unit: only logical tests without running mm instance
• e2e: with running mm instance
• electron: should only used for electron tests and some testcases where we have to mock special date/times

So I moved your test to tests/e2e/animateCSS_spec.js (I think it's not really module related) and did some changes:

/* AnimateCSS integration Test with compliments module
 *
 * By bugsounet https://github.com/bugsounet
 * 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";

	/**
	 * 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("Animated In and Out Test", () => {
		it("with flipInX and flipOutX animation", async () => {
			await helpers.startApplication(testConfigFile);
			await doTest("flipInX", "flipOutX");
		});
	});

	describe("no Animation in test", () => {
		it("without animation", async () => {
			await helpers.startApplication("tests/configs/modules/compliments/compliments_anytime.js");
			await doTest();
		});
	});
});

We need an additional line in tests/e2e/helpers/global-setup at position 33

			global.window = dom.window;

to get window.getComputedStyle working which is used in above test.

Feel free to use/improve ...

[bugsounet]

Thanks for explain what's this 3 projects ;)
Sure maybe a doc is welcome

I will take a look for getComputedStyle() tomorrow because... I don't know what is this (no one is perfect!)

In all case, I will check your code tomorrow

A simple copy and paste without understanding anything is useless (for me)
In my case, this is how we can move forward!

[bugsounet]

It's better like this ?

I added some tests which should not return any animation

[bugsounet]

Codecov Report

Merging #3206 (5b1765c) into develop (95ec309) will decrease coverage by 0.26%.
The diff coverage is n/a.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

@@             Coverage Diff             @@
##           develop    #3206      +/-   ##
===========================================
- Coverage    25.21%   24.95%   -0.26%     
===========================================
  Files           54       54              
  Lines        11925    11925              
===========================================
- Hits          3007     2976      -31     
- Misses        8918     8949      +31     

see 1 file with indirect coverage changes

Someone can explain me, I really don't understand what's coverage / hits / misses

Thanks again and sorry for my (bad) knowledge

[rejas]

Someone can explain me, I really don't understand what's coverage / hits / misses

Coverage is the percentage of code lines that are covered by tests, hits are the lines in absolute numbers, misses the lines that are not covered.

[khassel]

may I don't understand these reports but I would expect an increase of coverage as this PR only adds tests ...

[rejas]

Not sure if its configured correctly and checks against the master branch to compare the numbers

[khassel]

don't know anything about codecov setup but I ignore those reports because the content is always garbage. From my side we can remove codecov ...