From 9b27dfceab223ecfea0bbf85c1eecdb54bb3ecb0 Mon Sep 17 00:00:00 2001 From: skjameela Date: Mon, 14 Oct 2024 16:14:57 +0530 Subject: [PATCH 1/7] fix:- added elipsis and tooltip to the button content in table widget component --- .../component/TableStyledWrappers.tsx | 1 + .../cellComponents/AutoToolTipComponent.tsx | 42 +++++++++++++++--- .../component/cellComponents/Button.tsx | 43 ++++++++++++------- 3 files changed, 63 insertions(+), 23 deletions(-) diff --git a/app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx b/app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx index 76cc4267ef2e..d212ac791530 100644 --- a/app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx @@ -473,6 +473,7 @@ export const MenuColumnWrapper = styled.div<{ selected: boolean }>` export const ActionWrapper = styled.div<{ disabled: boolean }>` margin: 0 5px 0 0; + max-width: 100%; ${(props) => (props.disabled ? "cursor: not-allowed;" : null)} &&&&&& { .bp3-button { diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx index 7d264fdb9aaf..1685a3952ead 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx @@ -36,23 +36,40 @@ const MAX_WIDTH = 500; const TOOLTIP_OPEN_DELAY = 500; const MAX_CHARS_ALLOWED_IN_TOOLTIP = 200; -function useToolTip(children: React.ReactNode, title?: string) { +function isButtonTextTruncated(element: HTMLElement) { + const spanElement = element.querySelector("span"); + const offsetWidth = spanElement?.offsetWidth ?? 0; + const scrollWidth = spanElement?.scrollWidth ?? 0; + + return scrollWidth > offsetWidth; +} + +function useToolTip( + children: React.ReactNode, + title?: string, + isButton?: boolean, +) { const ref = createRef(); const [requiresTooltip, setRequiresTooltip] = useState(false); useEffect(() => { let timeout: ReturnType; + const currentRef = ref.current; - const mouseEnterHandler = () => { - const element = ref.current?.querySelector("div") as HTMLDivElement; + if (!currentRef) return; - /* - * Using setTimeout to simulate hoverOpenDelay of the tooltip - * during initial render - */ + const mouseEnterHandler = () => { timeout = setTimeout(() => { + const element = ref.current?.querySelector("div") as HTMLDivElement; + + /* + * Using setTimeout to simulate hoverOpenDelay of the tooltip + * during initial render + */ if (element && element.offsetWidth < element.scrollWidth) { setRequiresTooltip(true); + } else if (isButton && element && isButtonTextTruncated(element)) { + setRequiresTooltip(true); } else { setRequiresTooltip(false); } @@ -63,6 +80,7 @@ function useToolTip(children: React.ReactNode, title?: string) { }; const mouseLeaveHandler = () => { + setRequiresTooltip(false); clearTimeout(timeout); }; @@ -158,6 +176,12 @@ function LinkWrapper(props: Props) { ); } +function ButtonWrapper(props: Props) { + const content = useToolTip(props.children, props.title, true); + + return content; +} + function AutoToolTipComponent(props: Props) { const content = useToolTip(props.children, props.title); @@ -165,6 +189,10 @@ function AutoToolTipComponent(props: Props) { return ; } + if (props.columnType === ColumnTypes.BUTTON && props.title) { + return ; + } + return ( - {props.isCellVisible && props.action.isVisible ? ( - - ) : null} + {props.isCellVisible && props.action.isVisible + ? props.action.label && ( + + + + ) + : null} ); } From 48d92df73bbebd1962defc679e6fa00276d14de5 Mon Sep 17 00:00:00 2001 From: skjameela Date: Mon, 21 Oct 2024 15:58:28 +0530 Subject: [PATCH 2/7] resolved review comments --- .../cellComponents/AutoToolTipComponent.tsx | 23 +++----- .../component/cellComponents/Button.tsx | 55 +++++++++---------- 2 files changed, 36 insertions(+), 42 deletions(-) diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx index 1685a3952ead..b7b0ba1ed2bc 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx @@ -60,7 +60,7 @@ function useToolTip( const mouseEnterHandler = () => { timeout = setTimeout(() => { - const element = ref.current?.querySelector("div") as HTMLDivElement; + const element = currentRef?.querySelector("div") as HTMLDivElement; /* * Using setTimeout to simulate hoverOpenDelay of the tooltip @@ -74,8 +74,8 @@ function useToolTip( setRequiresTooltip(false); } - ref.current?.removeEventListener("mouseenter", mouseEnterHandler); - ref.current?.removeEventListener("mouseleave", mouseLeaveHandler); + currentRef?.removeEventListener("mouseenter", mouseEnterHandler); + currentRef?.removeEventListener("mouseleave", mouseLeaveHandler); }, TOOLTIP_OPEN_DELAY); }; @@ -84,12 +84,12 @@ function useToolTip( clearTimeout(timeout); }; - ref.current?.addEventListener("mouseenter", mouseEnterHandler); - ref.current?.addEventListener("mouseleave", mouseLeaveHandler); + currentRef?.addEventListener("mouseenter", mouseEnterHandler); + currentRef?.addEventListener("mouseleave", mouseLeaveHandler); return () => { - ref.current?.removeEventListener("mouseenter", mouseEnterHandler); - ref.current?.removeEventListener("mouseleave", mouseLeaveHandler); + currentRef?.removeEventListener("mouseenter", mouseEnterHandler); + currentRef?.removeEventListener("mouseleave", mouseLeaveHandler); clearTimeout(timeout); }; }, [children]); @@ -176,12 +176,6 @@ function LinkWrapper(props: Props) { ); } -function ButtonWrapper(props: Props) { - const content = useToolTip(props.children, props.title, true); - - return content; -} - function AutoToolTipComponent(props: Props) { const content = useToolTip(props.children, props.title); @@ -190,7 +184,8 @@ function AutoToolTipComponent(props: Props) { } if (props.columnType === ColumnTypes.BUTTON && props.title) { - return ; + const buttonContent = useToolTip(props.children, props.title, true); + return buttonContent; } return ( diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx index 1717e257b272..c8e010a0daf5 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx @@ -43,33 +43,32 @@ export function Button(props: ButtonProps) { return ( { - e.stopPropagation(); - }} - > - {props.isCellVisible && props.action.isVisible - ? props.action.label && ( - - - - ) - : null} - + disabled={!!props.isDisabled} + onClick={(e) => { + e.stopPropagation(); + }} + > + {props.isCellVisible && props.action.isVisible && props.action.label ? ( + + + + ) + : null} + ); } From 92a26c95c8ce4b07409efcd7f893ebfd599f60ab Mon Sep 17 00:00:00 2001 From: skjameela Date: Mon, 21 Oct 2024 16:08:59 +0530 Subject: [PATCH 3/7] resolved review comments for button tooltip --- .../component/cellComponents/AutoToolTipComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx index b7b0ba1ed2bc..30242dda8002 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx @@ -92,7 +92,7 @@ function useToolTip( currentRef?.removeEventListener("mouseleave", mouseLeaveHandler); clearTimeout(timeout); }; - }, [children]); + }, [children,isButton]); return requiresTooltip && children ? ( Date: Tue, 22 Oct 2024 15:23:33 +0530 Subject: [PATCH 4/7] resolved the prettier and linting issues --- .../cellComponents/AutoToolTipComponent.tsx | 83 ++++++++++--------- .../component/cellComponents/Button.tsx | 54 ++++++------ 2 files changed, 69 insertions(+), 68 deletions(-) diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx index 30242dda8002..8bf5312aecc5 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx @@ -52,47 +52,50 @@ function useToolTip( const ref = createRef(); const [requiresTooltip, setRequiresTooltip] = useState(false); - useEffect(() => { - let timeout: ReturnType; - const currentRef = ref.current; - - if (!currentRef) return; - - const mouseEnterHandler = () => { - timeout = setTimeout(() => { - const element = currentRef?.querySelector("div") as HTMLDivElement; - - /* - * Using setTimeout to simulate hoverOpenDelay of the tooltip - * during initial render - */ - if (element && element.offsetWidth < element.scrollWidth) { - setRequiresTooltip(true); - } else if (isButton && element && isButtonTextTruncated(element)) { - setRequiresTooltip(true); - } else { - setRequiresTooltip(false); - } - + useEffect( + function setupMouseHandlers() { + let timeout: ReturnType; + const currentRef = ref.current; + + if (!currentRef) return; + + const mouseEnterHandler = () => { + timeout = setTimeout(() => { + const element = currentRef?.querySelector("div") as HTMLDivElement; + + /* + * Using setTimeout to simulate hoverOpenDelay of the tooltip + * during initial render + */ + if (element && element.offsetWidth < element.scrollWidth) { + setRequiresTooltip(true); + } else if (isButton && element && isButtonTextTruncated(element)) { + setRequiresTooltip(true); + } else { + setRequiresTooltip(false); + } + + currentRef?.removeEventListener("mouseenter", mouseEnterHandler); + currentRef?.removeEventListener("mouseleave", mouseLeaveHandler); + }, TOOLTIP_OPEN_DELAY); + }; + + const mouseLeaveHandler = () => { + setRequiresTooltip(false); + clearTimeout(timeout); + }; + + currentRef?.addEventListener("mouseenter", mouseEnterHandler); + currentRef?.addEventListener("mouseleave", mouseLeaveHandler); + + return () => { currentRef?.removeEventListener("mouseenter", mouseEnterHandler); currentRef?.removeEventListener("mouseleave", mouseLeaveHandler); - }, TOOLTIP_OPEN_DELAY); - }; - - const mouseLeaveHandler = () => { - setRequiresTooltip(false); - clearTimeout(timeout); - }; - - currentRef?.addEventListener("mouseenter", mouseEnterHandler); - currentRef?.addEventListener("mouseleave", mouseLeaveHandler); - - return () => { - currentRef?.removeEventListener("mouseenter", mouseEnterHandler); - currentRef?.removeEventListener("mouseleave", mouseLeaveHandler); - clearTimeout(timeout); - }; - }, [children,isButton]); + clearTimeout(timeout); + }; + }, + [children, isButton, ref], + ); return requiresTooltip && children ? ( ; } if (props.columnType === ColumnTypes.BUTTON && props.title) { - const buttonContent = useToolTip(props.children, props.title, true); return buttonContent; } diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx index c8e010a0daf5..3eca9af7bd3c 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx @@ -41,34 +41,32 @@ export function Button(props: ButtonProps) { props.onCommandClick(props.action.dynamicTrigger, onComplete); }; + const stopPropagation = (e: React.MouseEvent) => { + e.stopPropagation(); + }; + return ( - { - e.stopPropagation(); - }} - > - {props.isCellVisible && props.action.isVisible && props.action.label ? ( - - - - ) - : null} - + + {props.isCellVisible && props.action.isVisible && props.action.label ? ( + + + + ) : null} + ); } From 8f9d8d8995318b33022ea2b6dc2eab9870317459 Mon Sep 17 00:00:00 2001 From: skjameela Date: Thu, 24 Oct 2024 15:49:33 +0530 Subject: [PATCH 5/7] resolved review comments and added test cases --- .../cellComponents/AutoToolTipComponent.tsx | 22 ++- .../AutoTooltipCpmponent.test.tsx | 182 ++++++++++++++++++ 2 files changed, 197 insertions(+), 7 deletions(-) create mode 100644 app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoTooltipCpmponent.test.tsx diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx index 8bf5312aecc5..86b3c41caec3 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx @@ -36,10 +36,15 @@ const MAX_WIDTH = 500; const TOOLTIP_OPEN_DELAY = 500; const MAX_CHARS_ALLOWED_IN_TOOLTIP = 200; -function isButtonTextTruncated(element: HTMLElement) { +export function isButtonTextTruncated(element: HTMLElement): boolean { const spanElement = element.querySelector("span"); - const offsetWidth = spanElement?.offsetWidth ?? 0; - const scrollWidth = spanElement?.scrollWidth ?? 0; + + if (!spanElement) { + return false; + } + + const offsetWidth = spanElement.offsetWidth; + const scrollWidth = spanElement.scrollWidth; return scrollWidth > offsetWidth; } @@ -179,16 +184,19 @@ function LinkWrapper(props: Props) { ); } -function AutoToolTipComponent(props: Props) { - const content = useToolTip(props.children, props.title); - const buttonContent = useToolTip(props.children, props.title, true); +export function AutoToolTipComponent(props: Props) { + const content = useToolTip( + props.children, + props.title, + props.columnType === ColumnTypes.BUTTON, + ); if (props.columnType === ColumnTypes.URL && props.title) { return ; } if (props.columnType === ColumnTypes.BUTTON && props.title) { - return buttonContent; + return content; } return ( diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoTooltipCpmponent.test.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoTooltipCpmponent.test.tsx new file mode 100644 index 000000000000..966d2b9847c1 --- /dev/null +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoTooltipCpmponent.test.tsx @@ -0,0 +1,182 @@ +import React from "react"; +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { fireEvent, render, screen, waitFor } from "@testing-library/react"; +import AutoToolTipComponent from "./AutoToolTipComponent"; +import { ColumnTypes } from "widgets/TableWidgetV2/constants"; +import "@testing-library/jest-dom"; +import { isButtonTextTruncated } from "./AutoToolTipComponent"; + +jest.mock("react", () => ({ + ...jest.requireActual("react"), + useState: (initial: unknown) => [initial, jest.fn()], +})); + +test("shows tooltip on hover for BUTTON column type", async () => { + const { getByText } = render( + + + , + ); + + fireEvent.mouseEnter(getByText("Hover to see tooltip")); + await screen.findByText("Hover to see tooltip"); +}); + +test("does not show tooltip for non-button types", () => { + const { getByText } = render( + + Not a button + , + ); + + expect(getByText("Not a button")).toBeInTheDocument(); + expect(screen.queryByRole("dialog")).not.toBeInTheDocument(); +}); + +test("handles empty tooltip", () => { + const { getByText } = render( + + + , + ); + + expect(getByText("Empty button")).toBeInTheDocument(); + expect(screen.queryByRole("dialog")).not.toBeInTheDocument(); +}); + +test("renders Link for URL column type", () => { + render( + + Go to Google + , + ); + expect(screen.getByText("Go to Google")).toBeInTheDocument(); +}); + +test("renders content without tooltip for normal text", () => { + const { getByText } = render( + + Normal Text + , + ); + + expect(getByText("Normal Text")).toBeInTheDocument(); + expect(screen.queryByRole("dialog")).not.toBeInTheDocument(); +}); + +test("shows tooltip for truncated text", async () => { + const longText = "This is a long text that will be truncated"; + const { getByText } = render( + + + {longText} + + , + ); + + fireEvent.mouseEnter(getByText(longText)); + await screen.findByText(longText); +}); + +test("does not show tooltip for non-truncated text", () => { + const shortText = "Short text"; + const { getByText } = render( + + {shortText} + , + ); + + fireEvent.mouseEnter(getByText(shortText)); + expect(screen.queryByRole("dialog")).not.toBeInTheDocument(); +}); + +test("shows tooltip for truncated button text", async () => { + const longText = "This is a long text that will be truncated in the button"; + const { getByText } = render( + + + {longText} + + , + ); + + fireEvent.mouseEnter(getByText(longText)); + await screen.findByText(longText); +}); + +test("opens a new tab for URL column type when clicked", () => { + const openSpy = jest.spyOn(window, "open").mockImplementation(() => null); + + render( + + Go to Google + , + ); + + fireEvent.click(screen.getByText("Go to Google")); + expect(openSpy).toHaveBeenCalledWith("https://www.google.com", "_blank"); + + openSpy.mockRestore(); +}); + +describe("isButtonTextTruncated", () => { + function mockElementWidths( + offsetWidth: number, + scrollWidth: number, + ): HTMLElement { + const spanElement = document.createElement("span"); + + Object.defineProperty(spanElement, "offsetWidth", { value: offsetWidth }); + Object.defineProperty(spanElement, "scrollWidth", { value: scrollWidth }); + const container = document.createElement("div"); + + container.appendChild(spanElement); + + return container; + } + + test("returns true when text is truncated (scrollWidth > offsetWidth)", () => { + const element = mockElementWidths(100, 150); + + expect(isButtonTextTruncated(element)).toBe(true); + }); + + test("returns false when text is not truncated (scrollWidth <= offsetWidth)", () => { + const element = mockElementWidths(150, 150); + + expect(isButtonTextTruncated(element)).toBe(false); + }); + + test("returns false when no span element is found", () => { + const element = document.createElement("div"); + + expect(isButtonTextTruncated(element)).toBe(false); + }); +}); From 47983507f2188f5946a8e1b680d288b2c197c58b Mon Sep 17 00:00:00 2001 From: skjameela Date: Thu, 24 Oct 2024 16:19:44 +0530 Subject: [PATCH 6/7] removed duplicate test cases --- .../AutoTooltipCpmponent.test.tsx | 139 ++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoTooltipCpmponent.test.tsx diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoTooltipCpmponent.test.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoTooltipCpmponent.test.tsx new file mode 100644 index 000000000000..968f1727ba69 --- /dev/null +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoTooltipCpmponent.test.tsx @@ -0,0 +1,139 @@ +import React from "react"; +import { fireEvent, render, screen } from "@testing-library/react"; +import AutoToolTipComponent from "./AutoToolTipComponent"; +import { ColumnTypes } from "widgets/TableWidgetV2/constants"; +import "@testing-library/jest-dom"; +import { isButtonTextTruncated } from "./AutoToolTipComponent"; + +jest.mock("react", () => { + const actualReact = jest.requireActual("react"); + + return { + ...actualReact, + useState: jest.fn((initial) => [initial, jest.fn()]), + }; +}); + +test.each([ + ["truncated text", "This is a long text that will be truncated"], + [ + "truncated button text", + "This is a long text that will be truncated in the button", + ], +])("shows tooltip for %s", async (_, longText) => { + const { getByText } = render( + + + {longText} + + , + ); + + fireEvent.mouseEnter(getByText(longText)); + await screen.findByText(longText); +}); + +// Other test cases remain unchanged +test("does not show tooltip for non-button types", () => { + const { getByText } = render( + + Not a button + , + ); + + expect(getByText("Not a button")).toBeInTheDocument(); + expect(screen.queryByRole("dialog")).not.toBeInTheDocument(); +}); + +test("handles empty tooltip", () => { + const { getByText } = render( + + + , + ); + + expect(getByText("Empty button")).toBeInTheDocument(); + expect(screen.queryByRole("dialog")).not.toBeInTheDocument(); +}); + +test("renders content without tooltip for normal text", () => { + const { getByText } = render( + + Normal Text + , + ); + + expect(getByText("Normal Text")).toBeInTheDocument(); + expect(screen.queryByRole("dialog")).not.toBeInTheDocument(); +}); + +test("does not show tooltip for non-truncated text", () => { + const shortText = "Short text"; + const { getByText } = render( + + {shortText} + , + ); + + fireEvent.mouseEnter(getByText(shortText)); + expect(screen.queryByRole("dialog")).not.toBeInTheDocument(); +}); + +test("opens a new tab for URL column type when clicked", () => { + const openSpy = jest.spyOn(window, "open").mockImplementation(() => null); + + render( + + Go to Google + , + ); + + fireEvent.click(screen.getByText("Go to Google")); + expect(openSpy).toHaveBeenCalledWith("https://www.google.com", "_blank"); + + openSpy.mockRestore(); +}); + +describe("isButtonTextTruncated", () => { + function mockElementWidths(offsetWidth: number, scrollWidth: number) { + const spanElement = document.createElement("span"); + + Object.defineProperty(spanElement, "offsetWidth", { value: offsetWidth }); + Object.defineProperty(spanElement, "scrollWidth", { value: scrollWidth }); + const container = document.createElement("div"); + + container.appendChild(spanElement); + + return container; + } + + test("returns true when text is truncated (scrollWidth > offsetWidth)", () => { + const element = mockElementWidths(100, 150); + + expect(isButtonTextTruncated(element)).toBe(true); + }); + + test("returns false when text is not truncated (scrollWidth <= offsetWidth)", () => { + const element = mockElementWidths(150, 150); + + expect(isButtonTextTruncated(element)).toBe(false); + }); + + test("returns false when no span element is found", () => { + const element = document.createElement("div"); + + expect(isButtonTextTruncated(element)).toBe(false); + }); +}); From 36bfa53c3924444fc2cc0db5d2b1af225d4d4b47 Mon Sep 17 00:00:00 2001 From: skjameela Date: Mon, 28 Oct 2024 13:51:53 +0530 Subject: [PATCH 7/7] resolved linting and prettier issues --- ...pmponent.test.tsx => AutoTooltipComponent.test.tsx} | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) rename app/client/src/widgets/TableWidgetV2/component/cellComponents/{AutoTooltipCpmponent.test.tsx => AutoTooltipComponent.test.tsx} (94%) diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoTooltipCpmponent.test.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoTooltipComponent.test.tsx similarity index 94% rename from app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoTooltipCpmponent.test.tsx rename to app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoTooltipComponent.test.tsx index f32f1a02e75e..8a9a5721c716 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoTooltipCpmponent.test.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoTooltipComponent.test.tsx @@ -1,6 +1,5 @@ import React from "react"; -// eslint-disable-next-line @typescript-eslint/no-unused-vars -import { fireEvent, render, screen, waitFor } from "@testing-library/react"; +import { fireEvent, render, screen } from "@testing-library/react"; import AutoToolTipComponent from "./AutoToolTipComponent"; import { ColumnTypes } from "widgets/TableWidgetV2/constants"; import "@testing-library/jest-dom"; @@ -21,7 +20,7 @@ test.each([ "truncated button text", "This is a long text that will be truncated in the button", ], -])("shows tooltip for %s", async (_, longText) => { +])("shows tooltip for %s", (_, longText) => { const { getByText } = render( { @@ -62,7 +61,7 @@ test("handles empty tooltip", () => { expect(getByText("Empty button")).toBeInTheDocument(); expect(screen.queryByRole("dialog")).not.toBeInTheDocument(); -}) +}); test("renders content without tooltip for normal text", () => { const { getByText } = render( @@ -75,7 +74,6 @@ test("renders content without tooltip for normal text", () => { expect(screen.queryByRole("dialog")).not.toBeInTheDocument(); }); - test("does not show tooltip for non-truncated text", () => { const shortText = "Short text"; const { getByText } = render(