diff --git a/packages/components/src/DataList/components/DataListActions/DataListActions.test.tsx b/packages/components/src/DataList/components/DataListActions/DataListActions.test.tsx index 02ed6f657e..3edba25bbf 100644 --- a/packages/components/src/DataList/components/DataListActions/DataListActions.test.tsx +++ b/packages/components/src/DataList/components/DataListActions/DataListActions.test.tsx @@ -136,36 +136,42 @@ describe("DataListActions", () => { const label = "Foo"; const moreLabel = "More actions"; + const setupAlwaysVisible = (alwaysVisible = true) => { + render( + + true} + /> + , + ); + }; + describe("is true", () => { it("should not render the more actions icon", () => { - render( - - true} - /> - , - ); + setupAlwaysVisible(); expect(screen.queryByLabelText(moreLabel)).not.toBeInTheDocument(); expect(screen.getByLabelText(label)).toBeInTheDocument(); }); + + it("should not render the tooltip", async () => { + setupAlwaysVisible(); + + const actionButton = screen.getByLabelText(label); + await userEvent.hover(actionButton); + + expect( + document.querySelector("div[role='tooltip']"), + ).not.toBeInTheDocument(); + }); }); describe("is false", () => { it("should render the more actions icon", () => { - render( - - true} - /> - , - ); + setupAlwaysVisible(false); expect(screen.getByLabelText(moreLabel)).toBeInTheDocument(); }); @@ -177,6 +183,17 @@ describe("DataListActions", () => { expect(screen.getByLabelText("More actions")).toBeInTheDocument(); }); + + it("should render the tooltip", async () => { + renderComponent(); + + const moreButton = screen.getByLabelText("More actions"); + await userEvent.hover(moreButton); + + expect( + document.querySelector("div[role='tooltip']"), + ).toBeInTheDocument(); + }); }); }); }); diff --git a/packages/components/src/DataList/components/DataListActions/DataListActions.tsx b/packages/components/src/DataList/components/DataListActions/DataListActions.tsx index 372a73dcb9..a0816317b8 100644 --- a/packages/components/src/DataList/components/DataListActions/DataListActions.tsx +++ b/packages/components/src/DataList/components/DataListActions/DataListActions.tsx @@ -46,7 +46,7 @@ export function DataListActions({ const actionLabel = getActionLabel(); // If the action is always visible, we don't want a tooltip. - if (props.alwaysVisibled) { + if (props.alwaysVisible) { return (