diff --git a/CHANGELOG.md b/CHANGELOG.md index 16a21961..543792ca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ## [Unreleased] +### Added + +- `` + - prove useage of `usePlaceholder` by jest test coverage + ## [24.4.1] - 2025-08-25 ### Fixed diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx index 7d078753..671d7cf5 100644 --- a/src/components/Tooltip/Tooltip.stories.tsx +++ b/src/components/Tooltip/Tooltip.stories.tsx @@ -2,6 +2,7 @@ import React from "react"; import { loremIpsum } from "react-lorem-ipsum"; import { OverlaysProvider } from "@blueprintjs/core"; import { Meta, StoryFn } from "@storybook/react"; +import { fn } from "@storybook/test"; import { Tooltip } from "../../index"; @@ -34,6 +35,7 @@ Default.args = { children: "hover me", content: testContent, addIndicator: true, + onOpening: fn(), }; export const MarkdownSupport = Template.bind({}); diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx new file mode 100644 index 00000000..69fa7720 --- /dev/null +++ b/src/components/Tooltip/Tooltip.test.tsx @@ -0,0 +1,63 @@ +import React from "react"; +import { fireEvent, render, screen, waitFor } from "@testing-library/react"; + +import "@testing-library/jest-dom"; + +import { CLASSPREFIX as eccgui } from "../../configuration/constants"; + +import Tooltip from "./Tooltip"; +import { Default as TooltipStory } from "./Tooltip.stories"; + +const checkForPlaceholderClass = (container: HTMLElement, tobe: number) => { + expect(container.getElementsByClassName(`${eccgui}-tooltip__wrapper--placeholder`).length).toBe(tobe); +}; + +describe("Tooltip", () => { + it("should render placeholder automatically for text tooltip", () => { + const { container } = render(); + checkForPlaceholderClass(container, 1); + }); + it("should render no placeholder automatically for html tooltip", () => { + const { container } = render( + this is a simple text tooltip} /> + ); + checkForPlaceholderClass(container, 0); + }); + it("should render placeholder when `usePlaceholder===true`", () => { + const { container } = render( + this is a simple text tooltip} usePlaceholder={true} /> + ); + checkForPlaceholderClass(container, 1); + }); + it("should render no placeholder when `usePlaceholder===false`", () => { + const { container } = render( + + ); + checkForPlaceholderClass(container, 0); + }); + it("should be displayed on first mouse hover when no placeholder is used", async () => { + const { container } = render(); + fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]); + expect(await screen.findByText(TooltipStory.args.content)).toBeVisible(); + }); + it("should not be displayed on first mouse hover when placeholder is used but placeholder markup is swapped", async () => { + const { container } = render(); + fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper--placeholder`)[0]); + checkForPlaceholderClass(container, 1); + await waitFor(() => { + expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0); + checkForPlaceholderClass(container, 0); + }); + }); + it("should be displayed on two continues mouse hover when placeholder is used", async () => { + const { container } = render(); + fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]); + checkForPlaceholderClass(container, 1); + await waitFor(async () => { + expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0); + checkForPlaceholderClass(container, 0); + fireEvent.mouseOver(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]); + expect(await screen.findByText(TooltipStory.args.content)).toBeVisible(); + }); + }); +}); diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index b470e96e..5af36740 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -199,7 +199,9 @@ export const Tooltip = ({ targetProps={ { ...otherTooltipProps.targetProps, - "data-postplaceholder": `id${eventMemory.current}${searchId.current}`, + "data-postplaceholder": eventMemory.current + ? `id${eventMemory.current}${searchId.current}` + : undefined, } as React.HTMLProps } >