Enzyme interactive test with a tooltip

Engines Overview Engine
1

I am working on a table which uses a tooltip in one of its columns.

					<Tooltip
						text={<MyCustomHoverComponent />}>
						<Button label="a" icon />
					</Tooltip>;

I want to be able to simulate a mouse over on the tooltip and look at the hover text:

	test("Block - Master", () => {
		const container = mount(
			<Provider store={store}>
				<EDesignerContainer activity={activity} name="VordruckContainer"/>
			</Provider>
		);
		expect(container.find(".tooltip").length).toEqual(2); //ok
		expect(container.find("div").length).toEqual(87); //ok

		const el = container.find(".tooltip").at(0);
		el.simulate("mouseenter");

		expect(container.find(".hoverDiv").length).toEqual(1); //not OK!
		
	});

But this does not seem to work. Obviously the “expect” is running before the callback is completed.

If I try with “flush promises” (it seems to be the recommended way of dealing with “waiting” issues https://stackoverflow.com/questions/49934975/how-to-simulate-mouse-over-event-on-a-div-using-enzyme-for-testing-a-react-appli ) then I also have no luck.

It seems like this tooltip is doing some async magic somewhere. Is it possible to intercept the hovered text in an enzyme test?

function flushPromises() {
	return new Promise(setImmediate);
}

test("Block - Master", async () => {
		const container = mount(
			<Provider store={store}>
				<EDesignerContainer activity={activity} name="VordruckContainer"/>
			</Provider>
		);
		expect(container.find(".tooltip").length).toEqual(2); //ok
		expect(container.find("div").length).toEqual(87); //ok

		const el = container.find(".tooltip").at(0);
		el.simulate("mouseenter");

		await flushPromises();

		expect(container.find(".hoverDiv").length).toEqual(1);//not OK!

});
2

Hi @oliver-clear-slope,
Please have a look at our test for some hints:

    let wrapper: Enzyme.ReactWrapper<{}, {}>;
	let clock: Sinon.SinonFakeTimers;
	const text = "This is a text title";

	setup(() => {
		clock = Sinon.useFakeTimers();
		wrapper = Enzyme.mount(
			<Tooltip text={text}>
				<Button icon={<Icon>warning</Icon>} />
			</Tooltip>,
			{ attachTo: document.createElement("div") }
		);
	});

	teardown(() => {
		clock.restore();
		wrapper.detach();
	});

	/**
	 * Testing hint content is rendered:
	 * - Hint should be rendered when hovering the icon button.
	 * - Hint should be disappeared when leaving the icon button.
	 */
	test("rendering-hint-when-hovering-icon-button", () => {
		const button = wrapper.find(`.${addPrefix("button")}`);

		button.simulate("mouseover");
		clock.tick(200);
		Assert.strictEqual(getAllPortals().length, 1, "Hint should be rendered when hovering the icon button");

		button.simulate("mouseleave");
		clock.tick(200);
		Assert.strictEqual(getAllPortals().length, 0, "Hint should be disappeared when leaving the icon button");
	});