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

chore: Expand withTooltip unit tests

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2023-04-20 08:51:27 -04:00
parent 4f4c7e7b56
commit 4bb37df1cd
2 changed files with 146 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
packages/ui-components/tooltip/src/__snapshots__/withTooltip.test.tsx.snap
View File

@ -10,32 +10,85 @@ exports[`withTooltip tests does not render a tooltip when not specified 1`] = `
</body> </body>
`; `;
exports[`withTooltip tests renders a tooltip when specified 1`] = `
<body>
<div>
<div>
foobar
</div>
</div>
</body>
`;
exports[`withTooltip tests renders a tooltip when specified via tooltip props 1`] = `
<body>
<div>
<div>
foobar
</div>
</div>
</body>
`;
exports[`withTooltip tests renders a tooltip when specified without id 1`] = ` exports[`withTooltip tests renders a tooltip when specified without id 1`] = `
<body> <body>
<div> <div>
<div> <div
id="tooltip_target_2"
>
foobar foobar
<div />
</div> </div>
</div> </div>
</body> </body>
`; `;
exports[`withTooltip tests when a tooltip ReactNode and id is specified renders 1`] = `
<body>
<div>
<div
data-testid="my-test-id"
id="bat"
>
foobar
<div />
</div>
</div>
</body>
`;
exports[`withTooltip tests when a tooltip ReactNode and id is specified when hovering the component renders 1`] = `
<body>
<div>
<div
data-testid="my-test-id"
id="bat"
>
foobar
<div />
</div>
</div>
<div
class="Tooltip narrow right formatter"
role="tooltip"
style="left: 10px; top: 0px;"
>
my-tooltip
</div>
</body>
`;
exports[`withTooltip tests when a tooltip via props and id is specified renders 1`] = `
<body>
<div>
<div
data-testid="my-test-id"
id="bat"
>
foobar
<div />
</div>
</div>
</body>
`;
exports[`withTooltip tests when a tooltip via props and id is specified when hovering the component renders 1`] = `
<body>
<div>
<div
data-testid="my-test-id"
id="bat"
>
foobar
<div />
</div>
</div>
<div
class="Tooltip narrow right formatter"
role="tooltip"
style="left: 10px; top: 0px;"
>
my-tooltip
</div>
</body>
`;

88
packages/ui-components/tooltip/src/withTooltip.test.tsx
View File

@ -4,7 +4,8 @@
*/ */
import type { SingleOrMany } from "@k8slens/utilities"; 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 React from "react";
import { withTooltip } from "./withTooltip"; import { withTooltip } from "./withTooltip";
@ -12,9 +13,17 @@ type MyComponentProps = {
text: string; text: string;
id?: string; id?: string;
children?: SingleOrMany<React.ReactNode>; children?: SingleOrMany<React.ReactNode>;
"data-testid"?: string;
}; };
const MyComponent = withTooltip(({ text }: MyComponentProps) => <div>{text}</div>); const MyComponent = withTooltip(
({ text, "data-testid": testId, id, children }: MyComponentProps) => (
<div id={id} data-testid={testId}>
{text}
{children}
</div>
),
);
describe("withTooltip tests", () => { describe("withTooltip tests", () => {
it("does not render a tooltip when not specified", () => { it("does not render a tooltip when not specified", () => {
@ -23,23 +32,70 @@ describe("withTooltip tests", () => {
expect(result.baseElement).toMatchSnapshot(); expect(result.baseElement).toMatchSnapshot();
}); });
it("renders a tooltip when specified", () => {
const result = render(<MyComponent text="foobar" tooltip="my-tooltip" id="bat" />);
expect(result.baseElement).toMatchSnapshot();
});
it("renders a tooltip when specified via tooltip props", () => {
const result = render(
<MyComponent text="foobar" tooltip={{ children: "my-tooltip" }} id="bat" />,
);
expect(result.baseElement).toMatchSnapshot();
});
it("renders a tooltip when specified without id", () => { it("renders a tooltip when specified without id", () => {
const result = render(<MyComponent text="foobar" tooltip="my-tooltip" />); const result = render(<MyComponent text="foobar" tooltip="my-tooltip" />);
expect(result.baseElement).toMatchSnapshot(); expect(result.baseElement).toMatchSnapshot();
}); });
describe("when a tooltip ReactNode and id is specified", () => {
let result: RenderResult;
beforeEach(() => {
result = render(
<MyComponent text="foobar" data-testid="my-test-id" tooltip="my-tooltip" id="bat" />,
);
});
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(
<MyComponent
text="foobar"
data-testid="my-test-id"
tooltip={{ children: "my-tooltip" }}
id="bat"
/>,
);
});
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();
});
});
});
}); });