@sproutsocial/seeds-react-tooltip 1.1.20 → 1.1.28

package/src/__tests__/Tooltip.test.tsx

@@ -1,32 +1,13 @@
-/* eslint-disable testing-library/no-unnecessary-act */
 import React from "react";
 import {
   render,
   screen,
-  fireEvent,
-  act,
+  waitFor,
 } from "@sproutsocial/seeds-react-testing-library";
 import Icon from "@sproutsocial/seeds-react-icon";
 import Tooltip from "../Tooltip";
 import Button from "@sproutsocial/seeds-react-button";
 
-jest.mock("popper.js", () => {
-  const PopperJS = jest.requireActual("popper.js");
-  const mockDestroy = jest.fn();
-  const mockScheduleUpdate = jest.fn();
-
-  return class Popper {
-    static placements = PopperJS.placements;
-
-    constructor() {
-      return {
-        destroy: mockDestroy,
-        scheduleUpdate: mockScheduleUpdate,
-      };
-    }
-  };
-});
-
 jest.mock("@sproutsocial/seeds-react-portal", () => {
   const Portal = ({ children }: { children: React.ReactNode }) => (
     <div>{children}</div>
@@ -38,28 +19,21 @@ jest.mock("@sproutsocial/seeds-react-portal", () => {
     DisablePortalToBodyContext: Portal.DisablePortalToBodyContext,
   };
 });
+
 describe("Tooltip", () => {
   describe("rendering all valid `React.Node`s", () => {
     it("should render string content", async () => {
       const contentText = "hey";
-      render(<Tooltip content={contentText}>hi</Tooltip>);
-      // This will cause a console error (but still pass) until react 16.9
-      act(() => {
-        fireEvent.mouseOver(screen.getByText("hi"));
-      });
+      const { user } = render(<Tooltip content={contentText}>hi</Tooltip>);
+      await user.hover(screen.getByText("hi"));
       await screen.findByText(contentText);
       expect(screen.getByText(contentText)).toBeInTheDocument();
-
-      // TODO
-      // await runA11yCheck();
     });
 
     it("should render number content", async () => {
       const contentText = 123;
-      render(<Tooltip content={contentText}>hi</Tooltip>);
-      act(() => {
-        fireEvent.mouseOver(screen.getByText("hi"));
-      });
+      const { user } = render(<Tooltip content={contentText}>hi</Tooltip>);
+      await user.hover(screen.getByText("hi"));
       await screen.findByDataQaLabel({
         "popout-isopen": "true",
       });
@@ -67,10 +41,8 @@ describe("Tooltip", () => {
     });
 
     it("should render React Element content", async () => {
-      render(<Tooltip content={<p>hey</p>}>hi</Tooltip>);
-      act(() => {
-        fireEvent.mouseOver(screen.getByText("hi"));
-      });
+      const { user } = render(<Tooltip content={<p>hey</p>}>hi</Tooltip>);
+      await user.hover(screen.getByText("hi"));
       await screen.findByDataQaLabel({
         "popout-isopen": "true",
       });
@@ -78,10 +50,10 @@ describe("Tooltip", () => {
     });
 
     it("should render $Iterable<string> content", async () => {
-      render(<Tooltip content={["hello", "world"]}>hi</Tooltip>);
-      act(() => {
-        fireEvent.mouseOver(screen.getByText("hi"));
-      });
+      const { user } = render(
+        <Tooltip content={["hello", "world"]}>hi</Tooltip>
+      );
+      await user.hover(screen.getByText("hi"));
       await screen.findByText(/hello/i);
       expect(screen.getByText(/hello/i)).toBeInTheDocument();
       await screen.findByText(/world/i);
@@ -89,14 +61,12 @@ describe("Tooltip", () => {
     });
 
     it("should render $Iterable<React$Element<any>> content", async () => {
-      render(
+      const { user } = render(
         <Tooltip content={[<p key="1">hello</p>, <p key="2">world</p>]}>
           hi
         </Tooltip>
       );
-      act(() => {
-        fireEvent.mouseOver(screen.getByText("hi"));
-      });
+      await user.hover(screen.getByText("hi"));
       await screen.findByText(/hello/i);
       expect(screen.getByText(/hello/i)).toBeInTheDocument();
       await screen.findByText(/world/i);
@@ -105,11 +75,8 @@ describe("Tooltip", () => {
 
     it("should not render null content", async () => {
       expect.assertions(1);
-      render(<Tooltip content={null}>hi</Tooltip>);
-      act(() => {
-        fireEvent.mouseOver(screen.getByText("hi"));
-      });
-      // @see https://jestjs.io/docs/tutorial-async#rejects
+      const { user } = render(<Tooltip content={null}>hi</Tooltip>);
+      await user.hover(screen.getByText("hi"));
       await expect(
         screen.findByDataQaLabel({
           "popout-isopen": "true",
@@ -119,11 +86,8 @@ describe("Tooltip", () => {
 
     it("should not render undefined content", async () => {
       expect.assertions(1);
-      render(<Tooltip content={undefined}>hi</Tooltip>);
-      act(() => {
-        fireEvent.mouseOver(screen.getByText("hi"));
-      });
-      // @see https://jestjs.io/docs/tutorial-async#rejects
+      const { user } = render(<Tooltip content={undefined}>hi</Tooltip>);
+      await user.hover(screen.getByText("hi"));
       await expect(
         screen.findByDataQaLabel({
           "popout-isopen": "true",
@@ -132,7 +96,7 @@ describe("Tooltip", () => {
     });
 
     it("should not add aria-expanded to elements without it", async () => {
-      render(
+      const { user } = render(
         <Tooltip content="hello">
           <Button>hi</Button>
         </Tooltip>
@@ -140,23 +104,17 @@ describe("Tooltip", () => {
 
       const button = screen.getByRole("button", { name: "hi" });
 
-      // Should not have aria-expanded initially
       expect(button).not.toHaveAttribute("aria-expanded");
 
-      // Hover to open tooltip
-      act(() => {
-        fireEvent.mouseOver(button);
-      });
+      await user.hover(button.closest("[data-qa-tooltip]")!);
 
-      // Wait for tooltip
       await screen.findByText(/hello/i);
 
-      // Should still not have aria-expanded (tooltips don't use this attribute)
       expect(button).not.toHaveAttribute("aria-expanded");
     });
 
     it("should preserve existing aria-expanded attribute", async () => {
-      render(
+      const { user } = render(
         <Tooltip content="hello">
           <Button aria-expanded="false">hi</Button>
         </Tooltip>
@@ -164,18 +122,12 @@ describe("Tooltip", () => {
 
       const button = screen.getByRole("button", { name: "hi" });
 
-      // Should preserve the existing aria-expanded value
       expect(button).toHaveAttribute("aria-expanded", "false");
 
-      // Hover to open tooltip
-      act(() => {
-        fireEvent.mouseOver(button);
-      });
+      await user.hover(button.closest("[data-qa-tooltip]")!);
 
-      // Wait for tooltip
       await screen.findByText(/hello/i);
 
-      // Should still preserve aria-expanded="false" (drawer/disclosure pattern)
       expect(button).toHaveAttribute("aria-expanded", "false");
     });
 
@@ -188,13 +140,12 @@ describe("Tooltip", () => {
 
       const textElement = screen.getByTestId("text-element");
 
-      // Non-interactive elements should not get aria-expanded
       expect(textElement).not.toHaveAttribute("aria-expanded");
     });
   });
 
   it("should render when wrapped around an icon", async () => {
-    render(
+    const { user } = render(
       <Tooltip content="hey">
         <Icon
           data-testid="icon"
@@ -203,10 +154,7 @@ describe("Tooltip", () => {
         />
       </Tooltip>
     );
-    // This will cause a console error (but still pass) until react 16.9
-    act(() => {
-      fireEvent.mouseOver(screen.getByTestId("icon"));
-    });
+    await user.hover(screen.getByTestId("icon").closest("[data-qa-tooltip]")!);
     await expect(
       screen.findByDataQaLabel({
         "popout-isopen": "true",
@@ -227,7 +175,7 @@ describe("Tooltip", () => {
     });
 
     it("should have aria-describedby when tooltip is open", async () => {
-      render(
+      const { user } = render(
         <Tooltip content="Tooltip content">
           <Button data-testid="trigger">Trigger</Button>
         </Tooltip>
@@ -235,15 +183,10 @@ describe("Tooltip", () => {
 
       const trigger = screen.getByTestId("trigger");
 
-      // Hover to open tooltip
-      act(() => {
-        fireEvent.mouseOver(trigger);
-      });
+      await user.hover(trigger.closest("[data-qa-tooltip]")!);
 
-      // Wait for tooltip to appear
       await screen.findByText("Tooltip content");
 
-      // Check that aria-describedby is now present
       expect(trigger).toHaveAttribute("aria-describedby");
       const tooltipId = trigger.getAttribute("aria-describedby");
       expect(tooltipId).toBeTruthy();
@@ -251,7 +194,7 @@ describe("Tooltip", () => {
     });
 
     it("should remove aria-describedby when tooltip closes", async () => {
-      render(
+      const { user } = render(
         <Tooltip content="Tooltip content">
           <Button data-testid="trigger">Trigger</Button>
         </Tooltip>
@@ -259,33 +202,21 @@ describe("Tooltip", () => {
 
       const trigger = screen.getByTestId("trigger");
 
-      // Open tooltip
-      act(() => {
-        fireEvent.mouseOver(trigger);
-      });
+      await user.hover(trigger.closest("[data-qa-tooltip]")!);
 
-      // Wait for tooltip to appear
       await screen.findByText("Tooltip content");
 
-      // Verify aria-describedby is present
       expect(trigger).toHaveAttribute("aria-describedby");
 
-      // Close tooltip
-      act(() => {
-        fireEvent.mouseOut(trigger);
-      });
+      await user.unhover(trigger.closest("[data-qa-tooltip]")!);
 
-      // Wait for tooltip to close (using a small delay)
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 200));
+      await waitFor(() => {
+        expect(trigger).not.toHaveAttribute("aria-describedby");
       });
-
-      // Verify aria-describedby is removed
-      expect(trigger).not.toHaveAttribute("aria-describedby");
     });
 
     it("should have aria-describedby pointing to element with role='tooltip'", async () => {
-      render(
+      const { user } = render(
         <Tooltip content="Tooltip content">
           <Button data-testid="trigger">Trigger</Button>
         </Tooltip>
@@ -293,33 +224,25 @@ describe("Tooltip", () => {
 
       const trigger = screen.getByTestId("trigger");
 
-      // Open tooltip
-      act(() => {
-        fireEvent.mouseOver(trigger);
-      });
+      await user.hover(trigger.closest("[data-qa-tooltip]")!);
 
-      // Wait for tooltip to appear
       const tooltipElement = await screen.findByText("Tooltip content");
 
-      // Get the aria-describedby value
       const tooltipId = trigger.getAttribute("aria-describedby");
       expect(tooltipId).toBeTruthy();
 
-      // Find the tooltip by role
       const tooltipByRole = screen.getByRole("tooltip");
       expect(tooltipByRole).toBeInTheDocument();
 
-      // Verify the ID matches
       expect(tooltipByRole).toHaveAttribute("id", tooltipId);
 
-      // Verify the tooltip contains the content
       expect(tooltipByRole).toContainElement(tooltipElement);
     });
   });
 
   describe("legacyMouseInteraction prop", () => {
     it("should allow hovering over tooltip content when legacyMouseInteraction is true", async () => {
-      render(
+      const { user } = render(
         <Tooltip content="Tooltip content" legacyMouseInteraction>
           <Button data-testid="trigger">Trigger</Button>
         </Tooltip>
@@ -327,44 +250,23 @@ describe("Tooltip", () => {
 
       const trigger = screen.getByTestId("trigger");
 
-      // Hover over trigger to open tooltip
-      act(() => {
-        fireEvent.mouseOver(trigger);
-      });
+      await user.hover(trigger.closest("[data-qa-tooltip]")!);
 
-      // Wait for tooltip to appear
       const tooltipContent = await screen.findByText("Tooltip content");
       expect(tooltipContent).toBeInTheDocument();
 
-      // Move mouse away from trigger
-      act(() => {
-        fireEvent.mouseOut(trigger);
-      });
-
-      // Hover over the tooltip content itself
-      act(() => {
-        fireEvent.mouseEnter(tooltipContent);
-      });
-
-      // Tooltip should remain open
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 200));
-      });
-      expect(tooltipContent).toBeInTheDocument();
+      await user.unhover(trigger.closest("[data-qa-tooltip]")!);
+      await user.hover(tooltipContent);
 
-      // Move mouse away from tooltip content
-      act(() => {
-        fireEvent.mouseLeave(tooltipContent);
+      await waitFor(() => {
+        expect(tooltipContent).toBeInTheDocument();
       });
 
-      // Tooltip should eventually close
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 200));
-      });
+      await user.unhover(tooltipContent);
     });
 
     it("should not have mouse handlers on tooltip content when legacyMouseInteraction is false", async () => {
-      render(
+      const { user } = render(
         <Tooltip content="Tooltip content">
           <Button data-testid="trigger">Trigger</Button>
         </Tooltip>
@@ -372,24 +274,12 @@ describe("Tooltip", () => {
 
       const trigger = screen.getByTestId("trigger");
 
-      // Hover over trigger to open tooltip
-      act(() => {
-        fireEvent.mouseOver(trigger);
-      });
+      await user.hover(trigger.closest("[data-qa-tooltip]")!);
 
-      // Wait for tooltip to appear
       const tooltipContent = await screen.findByText("Tooltip content");
       expect(tooltipContent).toBeInTheDocument();
 
-      // Verify mouse handlers are not attached (tooltip should close immediately when leaving trigger)
-      act(() => {
-        fireEvent.mouseOut(trigger);
-      });
-
-      // Without legacyMouseInteraction, tooltip closes immediately (exitDelay: 0)
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 100));
-      });
+      await user.unhover(trigger.closest("[data-qa-tooltip]")!);
     });
   });
 });

package/src/__tests__/mapPlacement.test.ts

@@ -0,0 +1,56 @@
+import { mapPlacement } from "../Tooltip";
+
+describe("mapPlacement", () => {
+  it("maps top placements", () => {
+    expect(mapPlacement("top")).toEqual({ side: "top", align: "center" });
+    expect(mapPlacement("top-start")).toEqual({ side: "top", align: "start" });
+    expect(mapPlacement("top-end")).toEqual({ side: "top", align: "end" });
+  });
+
+  it("maps bottom placements", () => {
+    expect(mapPlacement("bottom")).toEqual({ side: "bottom", align: "center" });
+    expect(mapPlacement("bottom-start")).toEqual({
+      side: "bottom",
+      align: "start",
+    });
+    expect(mapPlacement("bottom-end")).toEqual({
+      side: "bottom",
+      align: "end",
+    });
+  });
+
+  it("maps left placements", () => {
+    expect(mapPlacement("left")).toEqual({ side: "left", align: "center" });
+    expect(mapPlacement("left-start")).toEqual({
+      side: "left",
+      align: "start",
+    });
+    expect(mapPlacement("left-end")).toEqual({ side: "left", align: "end" });
+  });
+
+  it("maps right placements", () => {
+    expect(mapPlacement("right")).toEqual({ side: "right", align: "center" });
+    expect(mapPlacement("right-start")).toEqual({
+      side: "right",
+      align: "start",
+    });
+    expect(mapPlacement("right-end")).toEqual({ side: "right", align: "end" });
+  });
+
+  // `auto*` deliberately anchors to `side: "top"` and relies on base-ui's
+  // runtime collision flipping rather than Popper-style best-initial-side
+  // selection. This is the documented, intentional behavior — see the
+  // changeset and the `placement` prop JSDoc in TooltipTypes.ts.
+  it("anchors auto placements to top with align from the suffix", () => {
+    expect(mapPlacement("auto")).toEqual({ side: "top", align: "center" });
+    expect(mapPlacement("auto-start")).toEqual({
+      side: "top",
+      align: "start",
+    });
+    expect(mapPlacement("auto-end")).toEqual({ side: "top", align: "end" });
+  });
+
+  it("falls back to top/center for unknown placements", () => {
+    expect(mapPlacement("nonsense")).toEqual({ side: "top", align: "center" });
+  });
+});