diff --git a/packages/ui-components/tooltip/src/__snapshots__/withTooltip.test.tsx.snap b/packages/ui-components/tooltip/src/__snapshots__/withTooltip.test.tsx.snap index fe7661fc9f..6ddc5fc6fe 100644 --- a/packages/ui-components/tooltip/src/__snapshots__/withTooltip.test.tsx.snap +++ b/packages/ui-components/tooltip/src/__snapshots__/withTooltip.test.tsx.snap @@ -10,32 +10,85 @@ exports[`withTooltip tests does not render a tooltip when not specified 1`] = ` `; -exports[`withTooltip tests renders a tooltip when specified 1`] = ` - -
-
- foobar -
-
- -`; - -exports[`withTooltip tests renders a tooltip when specified via tooltip props 1`] = ` - -
-
- foobar -
-
- -`; - exports[`withTooltip tests renders a tooltip when specified without id 1`] = `
-
+
foobar +
`; + +exports[`withTooltip tests when a tooltip ReactNode and id is specified renders 1`] = ` + +
+
+ foobar +
+
+
+ +`; + +exports[`withTooltip tests when a tooltip ReactNode and id is specified when hovering the component renders 1`] = ` + +
+
+ foobar +
+
+
+ + +`; + +exports[`withTooltip tests when a tooltip via props and id is specified renders 1`] = ` + +
+
+ foobar +
+
+
+ +`; + +exports[`withTooltip tests when a tooltip via props and id is specified when hovering the component renders 1`] = ` + +
+
+ foobar +
+
+
+ + +`; diff --git a/packages/ui-components/tooltip/src/withTooltip.test.tsx b/packages/ui-components/tooltip/src/withTooltip.test.tsx index a42985b795..abc670f526 100644 --- a/packages/ui-components/tooltip/src/withTooltip.test.tsx +++ b/packages/ui-components/tooltip/src/withTooltip.test.tsx @@ -4,7 +4,8 @@ */ import type { SingleOrMany } from "@k8slens/utilities"; -import { render } from "@testing-library/react"; +import { render, RenderResult } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import React from "react"; import { withTooltip } from "./withTooltip"; @@ -12,9 +13,17 @@ type MyComponentProps = { text: string; id?: string; children?: SingleOrMany; + "data-testid"?: string; }; -const MyComponent = withTooltip(({ text }: MyComponentProps) =>
{text}
); +const MyComponent = withTooltip( + ({ text, "data-testid": testId, id, children }: MyComponentProps) => ( +
+ {text} + {children} +
+ ), +); describe("withTooltip tests", () => { it("does not render a tooltip when not specified", () => { @@ -23,23 +32,70 @@ describe("withTooltip tests", () => { expect(result.baseElement).toMatchSnapshot(); }); - it("renders a tooltip when specified", () => { - const result = render(); - - expect(result.baseElement).toMatchSnapshot(); - }); - - it("renders a tooltip when specified via tooltip props", () => { - const result = render( - , - ); - - expect(result.baseElement).toMatchSnapshot(); - }); - it("renders a tooltip when specified without id", () => { const result = render(); expect(result.baseElement).toMatchSnapshot(); }); + + describe("when a tooltip ReactNode and id is specified", () => { + let result: RenderResult; + + beforeEach(() => { + result = render( + , + ); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + describe("when hovering the component", () => { + beforeEach(() => { + userEvent.hover(result.getByTestId("my-test-id")); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it("shows the tooltip", () => { + expect(result.getByText("my-tooltip")).toBeInTheDocument(); + }); + }); + }); + + describe("when a tooltip via props and id is specified", () => { + let result: RenderResult; + + beforeEach(() => { + result = render( + , + ); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + describe("when hovering the component", () => { + beforeEach(() => { + userEvent.hover(result.getByTestId("my-test-id")); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it("shows the tooltip", () => { + expect(result.getByText("my-tooltip")).toBeInTheDocument(); + }); + }); + }); });