Skip to content

DBTooltip - local test failing after update to version > 2.1.2 #4400

Open
@MihajloLazar1

Description

@MihajloLazar1

Which generators are impacted?

  • All
  • HTML
  • React
  • Angular
  • Vue
  • Web components
  • Power Apps

Reproduction case

The issue appears in one of our tests which is run by Playwright, so I'm not sure if it can be reproduced easily, but I'll try and explain what is happening.

We have a fairly simple (error boundary) component with a render method looking like this :

render() {
	const rootElementClassName = clsx('random-classname', this.props.className);

	if (this.state.hasError) {
		return (
			<div id={this.props.id} className={rootElementClassName}>
				<DBIcon icon="exclamation_mark_circle" />
					Text 1
				<DBButton
					type="button"
					onClick={this.reload}
					icon="circular_arrows"
					noText={true}
					variant="ghost"
				>
					<DBTooltip showArrow={false} width="fixed" animation={false}>
						Text 2
					</DBTooltip>
				</DBButton>
			</div>
		);
	}

	return this.props.children;
}

Let's imagine we enter the if (this.state.hasError) condition.
We get some elements displayed, but the 2 most important ones are the DBTooltip and its parent DBButton. When we hover that parent DBButton element, the browser renders a tooltip. Once we click the DBButton element, we set state.hasError to false, all elements in the if condition are removed from the screen and the error boundary component renders its children. When doing this (humanly) in a browser, everything is working fine.
But when the same functionality is done programatically (via vitest and Playwright) in one of our tests, we get an error (please see the attached screenshot).

I did a little bit of debugging, and the issue starts with the DBTooltip component version 2.2.0 (we currently use the version 2.1.2, and it is working fine). This seems to be the problematic pease of code: https://github.com/db-ux-design-system/core-web/blob/v2.2.0/packages/components/src/components/tooltip/tooltip.lite.tsx#L58.

My guess is, before the test clicks the DBButton element, a hover happens which triggers the functionality for placing the tooltip BUT with a delay.
The if (_ref) (link) is at the moment of hover truly, but because the test runs fast, at the time of utilsDelay is done, the _ref is empty, becase our error bounday component removed all previously rendered elements.

We tried using fake timers and similar, but it didn't help. What did help is to first hover the DBButton element, do setTimeout with 10ms and then click the DBButton. Either that, or commenting the utilsDelay line out of the DBTooltip production build :).

Maybe checking if the _ref is still truly before executing handleFixedPopover would help?

Expected Behaviour

The DBTooltip component doesn't fail on non-existing references.

Screenshots

Image

Browser version

None

Add any other context about the problem here.

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions