diff --git a/src/renderer/components/tooltip/__snapshots__/tooltip.test.tsx.snap b/src/renderer/components/tooltip/__snapshots__/tooltip.test.tsx.snap new file mode 100644 index 0000000000..253a79f941 --- /dev/null +++ b/src/renderer/components/tooltip/__snapshots__/tooltip.test.tsx.snap @@ -0,0 +1,50 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` does not render to DOM if not visibile 1`] = ` + +
+
+ Target Text +
+
+ +`; + +exports[` renders to DOM when forced to by visibile prop 1`] = ` + +
+ +
+ Target Text +
+
+ +`; + +exports[` renders to DOM when hovering over target 1`] = ` + +
+ +
+ Target Text +
+
+ +`; diff --git a/src/renderer/components/tooltip/tooltip.test.tsx b/src/renderer/components/tooltip/tooltip.test.tsx new file mode 100644 index 0000000000..0f51e5b2f1 --- /dev/null +++ b/src/renderer/components/tooltip/tooltip.test.tsx @@ -0,0 +1,63 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import { render } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import assert from "assert"; +import React from "react"; +import { Tooltip } from "./tooltip"; + +describe("", () => { + it("does not render to DOM if not visibile", () => { + const result = render(( + <> + I am a tooltip +
Target Text
+ + )); + + expect(result.baseElement).toMatchSnapshot(); + }); + + it("renders to DOM when hovering over target", () => { + const result = render(( + <> + + I am a tooltip + +
Target Text
+ + )); + + const target = result.baseElement.querySelector("#my-target"); + + assert(target); + + userEvent.hover(target); + expect(result.baseElement).toMatchSnapshot(); + }); + + it("renders to DOM when forced to by visibile prop", () => { + const result = render(( + <> + + I am a tooltip + +
Target Text
+ + )); + + expect(result.baseElement).toMatchSnapshot(); + }); +}); diff --git a/src/renderer/components/tooltip/tooltip.tsx b/src/renderer/components/tooltip/tooltip.tsx index b993a0a368..f8a4898efc 100644 --- a/src/renderer/components/tooltip/tooltip.tsx +++ b/src/renderer/components/tooltip/tooltip.tsx @@ -10,7 +10,7 @@ import { createPortal } from "react-dom"; import { observer } from "mobx-react"; import type { IClassName } from "../../utils"; import { cssNames, autoBind } from "../../utils"; -import { observable, makeObservable, action } from "mobx"; +import { observable, makeObservable, action, computed } from "mobx"; export enum TooltipPosition { TOP = "top", @@ -55,7 +55,7 @@ export class Tooltip extends React.Component { @observable.ref elem: HTMLDivElement | null = null; @observable activePosition?: TooltipPosition; - @observable isVisible = this.props.visible ?? false; + @observable isVisible = false; @observable isContentVisible = false; // animation manager constructor(props: TooltipProps) { @@ -64,6 +64,10 @@ export class Tooltip extends React.Component { autoBind(this); } + @computed get renderToDOM() { + return this.props.visible ?? this.isVisible; + } + get targetElem(): HTMLElement | null { return document.getElementById(this.props.targetId); } @@ -217,13 +221,13 @@ export class Tooltip extends React.Component { } render() { - if (!this.isVisible) { + if (!this.renderToDOM) { return null; } const { style, formatters, usePortal, children } = this.props; const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, { - visible: this.isContentVisible, + visible: this.isContentVisible || this.props.visible, formatter: !!formatters, }); const tooltip = (