hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Fix Tooltip not showing when switching hotbars (#5519)

Browse Source
This commit is contained in:
Sebastian Malton 2022-06-03 08:55:11 -04:00 committed by GitHub
parent b414f9e06d
commit fba5892c8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 118 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/renderer/components/tooltip/__snapshots__/tooltip.test.tsx.snap Normal file
View File

@ -0,0 +1,50 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Tooltip /> does not render to DOM if not visibile 1`] = `
<body>
<div>
<div
id="my-target"
>
Target Text
</div>
</div>
</body>
`;
exports[`<Tooltip /> renders to DOM when forced to by visibile prop 1`] = `
<body>
<div>
<div
class="Tooltip visible"
role="tooltip"
>
I am a tooltip
</div>
<div
id="my-target"
>
Target Text
</div>
</div>
</body>
`;
exports[`<Tooltip /> renders to DOM when hovering over target 1`] = `
<body>
<div>
<div
class="Tooltip right"
role="tooltip"
style="left: 10px; top: 0px;"
>
I am a tooltip
</div>
<div
id="my-target"
>
Target Text
</div>
</div>
</body>
`;

63
src/renderer/components/tooltip/tooltip.test.tsx Normal file
View File

@ -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("<Tooltip />", () => {
it("does not render to DOM if not visibile", () => {
const result = render((
<>
<Tooltip targetId="my-target" usePortal={false}>I am a tooltip</Tooltip>
<div id="my-target">Target Text</div>
</>
));
expect(result.baseElement).toMatchSnapshot();
});
it("renders to DOM when hovering over target", () => {
const result = render((
<>
<Tooltip
targetId="my-target"
data-testid="tooltip"
usePortal={false}
>
I am a tooltip
</Tooltip>
<div id="my-target">Target Text</div>
</>
));
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((
<>
<Tooltip
targetId="my-target"
data-testid="tooltip"
visible={true}
usePortal={false}
>
I am a tooltip
</Tooltip>
<div id="my-target">Target Text</div>
</>
));
expect(result.baseElement).toMatchSnapshot();
});
});

9
src/renderer/components/tooltip/tooltip.tsx
View File

@ -55,7 +55,7 @@ export class Tooltip extends React.Component<TooltipProps> {
@observable.ref elem: HTMLDivElement | null = null; @observable.ref elem: HTMLDivElement | null = null;
@observable activePosition?: TooltipPosition; @observable activePosition?: TooltipPosition;
@observable isVisible = this.props.visible ?? false; @observable isVisible = false;
@observable isContentVisible = false; // animation manager @observable isContentVisible = false; // animation manager
constructor(props: TooltipProps) { constructor(props: TooltipProps) {
@ -217,13 +217,14 @@ export class Tooltip extends React.Component<TooltipProps> {
} }
render() { render() {
if (!this.isVisible) { const { style, formatters, usePortal, children, visible = this.isVisible } = this.props;
if (!visible) {
return null; return null;
} }
const { style, formatters, usePortal, children } = this.props;
const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, { const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
visible: this.isContentVisible, visible: this.isContentVisible || this.props.visible,
formatter: !!formatters, formatter: !!formatters,
}); });
const tooltip = ( const tooltip = (