From 1260fac281463cffe9fdb52d5a8f7f0148530762 Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Fri, 3 Jun 2022 08:55:11 -0400 Subject: [PATCH] Fix Tooltip not showing when switching hotbars (#5519) --- .../__snapshots__/tooltip.test.tsx.snap | 50 +++++++++++++++ .../components/tooltip/tooltip.test.tsx | 63 +++++++++++++++++++ src/renderer/components/tooltip/tooltip.tsx | 15 ++--- 3 files changed, 121 insertions(+), 7 deletions(-) create mode 100644 src/renderer/components/tooltip/__snapshots__/tooltip.test.tsx.snap create mode 100644 src/renderer/components/tooltip/tooltip.test.tsx 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 c244a09497..8c4686d672 100644 --- a/src/renderer/components/tooltip/tooltip.tsx +++ b/src/renderer/components/tooltip/tooltip.tsx @@ -53,9 +53,9 @@ const defaultProps: Partial = { export class Tooltip extends React.Component { static defaultProps = defaultProps as object; - @observable.ref elem: HTMLElement; - @observable activePosition: TooltipPosition; - @observable isVisible = this.props.visible ?? false; + @observable.ref elem: HTMLDivElement | null = null; + @observable activePosition?: TooltipPosition; + @observable isVisible = false; @observable isContentVisible = false; // animation manager constructor(props: TooltipProps) { @@ -219,18 +219,19 @@ export class Tooltip extends React.Component { }; } - bindRef(elem: HTMLElement) { + bindRef(elem: HTMLDivElement) { this.elem = elem; } render() { - if (!this.isVisible) { + const { style, formatters, usePortal, children, visible = this.isVisible } = this.props; + + if (!visible) { 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 = (