diff --git a/frontend/src/metabase/core/components/Input/Input.tsx b/frontend/src/metabase/core/components/Input/Input.tsx index 06e9dcbd3779480bceae0df5106b08f967fdaa7a..d3f119f4e64465a2ee924f26fc3d11916660b5c1 100644 --- a/frontend/src/metabase/core/components/Input/Input.tsx +++ b/frontend/src/metabase/core/components/Input/Input.tsx @@ -93,9 +93,10 @@ const Input = forwardRef(function Input( {leftIcon && ( <Tooltip tooltip={leftIconTooltip} placement="left"> <InputLeftButton + data-testid="input-left-icon-button" size={size} onClick={onLeftIconClick} - disabled={!leftIconTooltip || !onLeftIconClick} + disabled={!leftIconTooltip && !onLeftIconClick} > <Icon name={leftIcon} /> </InputLeftButton> @@ -104,9 +105,10 @@ const Input = forwardRef(function Input( {rightIcon && ( <Tooltip tooltip={rightIconTooltip} placement="right"> <InputRightButton + data-testid="input-right-icon-button" size={size} onClick={onRightIconClick} - disabled={!rightIconTooltip || !onRightIconClick} + disabled={!rightIconTooltip && !onRightIconClick} > <Icon name={rightIcon} /> </InputRightButton> diff --git a/frontend/src/metabase/core/components/Input/Input.unit.spec.tsx b/frontend/src/metabase/core/components/Input/Input.unit.spec.tsx new file mode 100644 index 0000000000000000000000000000000000000000..c68bc5d9be1930be18bc356bed43943f51119473 --- /dev/null +++ b/frontend/src/metabase/core/components/Input/Input.unit.spec.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import Input from "./Input"; + +describe("Input", () => { + it("should render icon tooltips when hover them", () => { + const { getByTestId, getByText } = render( + <Input + leftIconTooltip="left tooltip" + rightIconTooltip="right tooltip" + leftIcon="search" + rightIcon="check" + />, + ); + + const leftIcon = getByTestId("input-left-icon-button"); + userEvent.hover(leftIcon); + expect(getByText("left tooltip")).toBeInTheDocument(); + + const rightIcon = getByTestId("input-right-icon-button"); + userEvent.hover(rightIcon); + expect(getByText("right tooltip")).toBeInTheDocument(); + }); +});