diff --git a/packages/ui-components/tooltip/jest.config.js b/packages/ui-components/tooltip/jest.config.js index 38d54ab7b6..1013f3076d 100644 --- a/packages/ui-components/tooltip/jest.config.js +++ b/packages/ui-components/tooltip/jest.config.js @@ -1 +1,13 @@ -module.exports = require("@k8slens/jest").monorepoPackageConfig(__dirname).configForReact; +const { configForReact } = require("@k8slens/jest").monorepoPackageConfig(__dirname); + +module.exports = { + ...configForReact, + coverageThreshold: { + global: { + statements: 84, + branches: 67, + lines: 84, + functions: 92, + }, + }, +}; diff --git a/packages/ui-components/tooltip/src/__snapshots__/tooltip.test.tsx.snap b/packages/ui-components/tooltip/src/__snapshots__/tooltip.test.tsx.snap index 2dccf6e421..76c7911fa9 100644 --- a/packages/ui-components/tooltip/src/__snapshots__/tooltip.test.tsx.snap +++ b/packages/ui-components/tooltip/src/__snapshots__/tooltip.test.tsx.snap @@ -1,17 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` does not render to DOM if not visibile 1`] = ` - -
-
- Target Text -
-
- -`; - exports[` does not render to DOM if not visible 1`] = `
@@ -24,25 +12,6 @@ exports[` does not render to DOM if not visible 1`] = ` `; -exports[` renders to DOM when forced to by visibile prop 1`] = ` - -
- -
- Target Text -
-
- -`; - exports[` renders to DOM when forced to by visible prop 1`] = `
diff --git a/packages/ui-components/tooltip/src/tooltip.tsx b/packages/ui-components/tooltip/src/tooltip.tsx index be590f8ceb..f8713730e5 100644 --- a/packages/ui-components/tooltip/src/tooltip.tsx +++ b/packages/ui-components/tooltip/src/tooltip.tsx @@ -10,7 +10,7 @@ import { createPortal } from "react-dom"; import { observer } from "mobx-react"; import type { IClassName } from "@k8slens/utilities"; import { cssNames } from "@k8slens/utilities"; -import { observable, makeObservable, action } from "mobx"; +import { observable, makeObservable, action, runInAction } from "mobx"; import autoBindReact from "auto-bind/react"; export enum TooltipPosition { @@ -45,13 +45,13 @@ export interface TooltipContentFormatters { tableView?: boolean; } -const defaultProps: Partial = { +const defaultProps = { usePortal: true, offset: 10, }; @observer -export class Tooltip extends React.Component { +class DefaultedTooltip extends React.Component { static defaultProps = defaultProps as object; @observable.ref elem: HTMLDivElement | null = null; @@ -62,7 +62,7 @@ export class Tooltip extends React.Component { @observable isContentVisible = false; // animation manager - constructor(props: TooltipProps) { + constructor(props: TooltipProps & typeof defaultProps) { super(props); makeObservable(this); autoBindReact(this); @@ -141,8 +141,10 @@ export class Tooltip extends React.Component { left >= 0 && top >= 0 && right <= viewportWidth && bottom <= viewportHeight; if (fitsToWindow) { - this.activePosition = pos; - this.setPosition(elem, { top, left }); + runInAction(() => { + this.activePosition = pos; + this.setPosition(elem, { top, left }); + }); return; } @@ -164,8 +166,7 @@ export class Tooltip extends React.Component { protected getPosition(position: TooltipPosition, tooltipBounds: DOMRect, targetBounds: DOMRect) { let left: number; let top: number; - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const offset = this.props.offset!; + const offset = this.props.offset; const horizontalCenter = targetBounds.left + (targetBounds.width - tooltipBounds.width) / 2; const verticalCenter = targetBounds.top + (targetBounds.height - tooltipBounds.height) / 2; const topCenter = targetBounds.top - tooltipBounds.height - offset; @@ -205,7 +206,7 @@ export class Tooltip extends React.Component { left = targetBounds.right - tooltipBounds.width; break; default: - throw new TypeError("Invalid props.postition value"); + throw new TypeError("Invalid props.position value"); } return { @@ -240,3 +241,5 @@ export class Tooltip extends React.Component { return tooltip; } } + +export const Tooltip = DefaultedTooltip as React.ComponentClass;