Skip to content
Snippets Groups Projects
Unverified Commit f186deb2 authored by Oisin Coveney's avatar Oisin Coveney Committed by GitHub
Browse files

Remove phantom tooltips when there is no label on tooltip (#47539)

parent 4dda4801
No related merge requests found
......@@ -89,7 +89,11 @@ const BaseInput = forwardRef(function Input(
onChange={onChange}
/>
{leftIcon && (
<Tooltip label={leftIconTooltip} position="left">
<Tooltip
disabled={!leftIconTooltip}
label={leftIconTooltip}
position="left"
>
<InputLeftButton
data-testid="input-left-icon-button"
size={size}
......@@ -101,7 +105,11 @@ const BaseInput = forwardRef(function Input(
</Tooltip>
)}
{rightIcon && (
<Tooltip label={rightIconTooltip} position="right">
<Tooltip
disabled={!rightIconTooltip}
label={rightIconTooltip}
position="right"
>
<InputRightButton
data-testid="input-right-icon-button"
size={size}
......
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Input from "./Input";
import { render, screen } from "__support__/ui";
import Input, { type InputProps } from "./Input";
const setup = (props: InputProps = {}) => {
render(<Input {...props} />);
};
describe("Input", () => {
it("should render icon tooltips when hover them", async () => {
render(
<Input
leftIconTooltip="left tooltip"
rightIconTooltip="right tooltip"
leftIcon="search"
rightIcon="check"
/>,
);
const leftIcon = screen.getByTestId("input-left-icon-button");
await userEvent.hover(leftIcon);
expect(screen.getByText("left tooltip")).toBeInTheDocument();
const rightIcon = screen.getByTestId("input-right-icon-button");
await userEvent.hover(rightIcon);
expect(screen.getByText("right tooltip")).toBeInTheDocument();
describe("when rendering basic elements", () => {
it("renders input field", () => {
setup({ placeholder: "Enter text" });
expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument();
});
it("renders subtitle when provided", () => {
setup({ subtitle: "Test subtitle" });
expect(screen.getByText("Test subtitle")).toBeInTheDocument();
});
});
describe("when rendering icons", () => {
it("renders left icon when provided", () => {
setup({ leftIcon: "search" });
expect(screen.getByTestId("input-left-icon-button")).toBeInTheDocument();
});
it("renders right icon when provided", () => {
setup({ rightIcon: "close" });
expect(screen.getByTestId("input-right-icon-button")).toBeInTheDocument();
});
it("renders reset button when value is present and onResetClick is provided", () => {
setup({ value: "Test", onChange: jest.fn(), onResetClick: jest.fn() });
expect(screen.getByTestId("input-reset-button")).toBeInTheDocument();
});
});
describe("when handling user interactions", () => {
it("calls onLeftIconClick when left icon is clicked", async () => {
const onLeftIconClick = jest.fn();
setup({ leftIcon: "search", onLeftIconClick });
await userEvent.click(screen.getByTestId("input-left-icon-button"));
expect(onLeftIconClick).toHaveBeenCalledTimes(1);
});
it("calls onRightIconClick when right icon is clicked", async () => {
const onRightIconClick = jest.fn();
setup({ rightIcon: "close", onRightIconClick });
await userEvent.click(screen.getByTestId("input-right-icon-button"));
expect(onRightIconClick).toHaveBeenCalledTimes(1);
});
it("calls onResetClick when reset button is clicked", async () => {
const onResetClick = jest.fn();
setup({ value: "Test", onChange: jest.fn(), onResetClick });
await userEvent.click(screen.getByTestId("input-reset-button"));
expect(onResetClick).toHaveBeenCalledTimes(1);
});
it("calls onChange when input value changes", async () => {
const onChange = jest.fn();
setup({ onChange });
await userEvent.type(screen.getByRole("textbox"), "Test input");
expect(onChange).toHaveBeenCalledTimes(10);
});
});
describe("when handling tooltips", () => {
describe("for left icon", () => {
it("shows tooltip on hover when leftIconTooltip is provided", async () => {
setup({ leftIcon: "search", leftIconTooltip: "Search" });
const leftIcon = screen.getByTestId("input-left-icon-button");
expect(screen.queryByText("Search")).not.toBeInTheDocument();
await userEvent.hover(leftIcon);
expect(screen.getByText("Search")).toBeInTheDocument();
});
it("does not show tooltip when leftIconTooltip is not provided", async () => {
setup({ leftIcon: "search" });
const leftIcon = screen.getByTestId("input-left-icon-button");
await userEvent.hover(leftIcon);
expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
});
});
describe("for right icon", () => {
it("shows tooltip on hover when rightIconTooltip is provided", async () => {
setup({ rightIcon: "close", rightIconTooltip: "Close" });
const rightIcon = screen.getByTestId("input-right-icon-button");
expect(screen.queryByText("Close")).not.toBeInTheDocument();
await userEvent.hover(rightIcon);
expect(screen.getByText("Close")).toBeInTheDocument();
});
it("does not show tooltip when rightIconTooltip is not provided", async () => {
setup({ rightIcon: "close" });
const rightIcon = screen.getByTestId("input-right-icon-button");
await userEvent.hover(rightIcon);
expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
});
});
describe("for reset button", () => {
it("shows tooltip on hover", async () => {
setup({ value: "Test", onChange: jest.fn(), onResetClick: jest.fn() });
const resetButton = screen.getByTestId("input-reset-button");
expect(screen.queryByText("Clear")).not.toBeInTheDocument();
await userEvent.hover(resetButton);
expect(screen.getByText("Clear")).toBeInTheDocument();
});
});
});
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment