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 (