@react-md/core 1.0.0-next.0 → 1.0.0-next.2

package/src/tooltip/__tests__/Tooltip.tsx

@@ -1,15 +1,25 @@
-import { afterEach, describe, expect, it, jest } from "@jest/globals";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from "@jest/globals";
 import { type ReactElement } from "react";
 import {
   act,
   fireEvent,
   rmdRender,
+  screen,
   userEvent,
   waitFor,
+  waitForElementToBeRemoved,
 } from "../../test-utils/index.js";
 
 import { Button } from "../../button/Button.js";
 import { FontIcon } from "../../icon/FontIcon.js";
+import { TRANSITION_CONFIG } from "../../transition/config.js";
 import { isElementVisible } from "../../utils/isElementVisible.js";
 import { parseCssLengthUnit } from "../../utils/parseCssLengthUnit.js";
 import { Tooltip, type TooltipProps } from "../Tooltip.js";
@@ -32,11 +42,17 @@ function Test(props: TestProps): ReactElement {
     hideTooltip,
     setVisible,
     visible,
+    overflowRef,
   } = useTooltip(options);
 
   return (
     <>
-      <Button {...elementProps}>Button</Button>
+      <Button {...elementProps}>
+        Button
+        {options.overflowOnly && (
+          <span ref={overflowRef} data-testid="resize-node" />
+        )}
+      </Button>
       <Tooltip {...tooltipProps} {...tooltip}>
         Tooltip
       </Tooltip>
@@ -53,6 +69,10 @@ function Test(props: TestProps): ReactElement {
 }
 
 describe("Tooltip", () => {
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   afterEach(() => {
     jest.clearAllTimers();
     jest.useRealTimers();
@@ -60,55 +80,54 @@ describe("Tooltip", () => {
 
   it("should display the tooltip after hovering for 1s by default", () => {
     jest.useFakeTimers();
-    const { getByRole } = rmdRender(<Test />);
-    const button = getByRole("button", { name: "Button" });
-    const tooltip = getByRole("tooltip");
-    expect(tooltip).toBeInTheDocument();
+    rmdRender(<Test />);
+    const button = screen.getByRole("button", { name: "Button" });
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     fireEvent.mouseEnter(button);
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     act(() => {
       jest.advanceTimersByTime(800);
     });
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     fireEvent.mouseLeave(button);
     act(() => {
       jest.runAllTimers();
     });
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     fireEvent.mouseEnter(button);
     act(() => {
       jest.runAllTimers();
     });
-    expect(isElementVisible(tooltip)).toBe(true);
+    expect(() => screen.getByRole("tooltip")).not.toThrow();
   });
 
   it("should display the tooltip after focusing for 1s by default only in keyboard mode", () => {
     jest.useFakeTimers();
-    const { getByRole } = rmdRender(<Test />);
-    const button = getByRole("button", { name: "Button" });
-    const tooltip = getByRole("tooltip");
+    rmdRender(<Test />);
+    const button = screen.getByRole("button", { name: "Button" });
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
-    expect(isElementVisible(tooltip)).toBe(false);
     fireEvent.focus(button);
     act(() => {
       jest.advanceTimersByTime(1000);
     });
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
+
     act(() => {
       jest.runAllTimers();
     });
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     fireEvent.keyDown(document.body);
     fireEvent.focus(button);
     act(() => {
       jest.advanceTimersByTime(1000);
     });
-    expect(isElementVisible(tooltip)).toBe(true);
+    const tooltip = screen.getByRole("tooltip");
     act(() => {
       jest.runAllTimers();
     });
@@ -123,31 +142,30 @@ describe("Tooltip", () => {
     act(() => {
       jest.runAllTimers();
     });
-    expect(isElementVisible(tooltip)).toBe(false);
-    expect(tooltip).toMatchSnapshot();
+    expect(tooltip).not.toBeInTheDocument();
   });
 
-  it("should show the tooltip after touching for the hoverTime or if the onContextMenu is called on mobile", () => {
+  it("should show the tooltip after touching for the hoverTimeout or if the onContextMenu is called on mobile", () => {
     // some mobile devices will trigger the context menu for long presses, so
     // need to make sure that does not happen for tooltipped elements on mobile
     jest.useFakeTimers();
 
-    const { getByRole } = rmdRender(<Test />);
-    const button = getByRole("button", { name: "Button" });
-    const tooltip = getByRole("tooltip");
+    rmdRender(<Test />);
+    const button = screen.getByRole("button", { name: "Button" });
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     fireEvent.touchStart(button);
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
     act(() => {
       jest.advanceTimersByTime(1000);
     });
-    expect(isElementVisible(tooltip)).toBe(true);
+    const tooltip = screen.getByRole("tooltip");
     expect(tooltip).toHaveClass("rmd-tooltip--enter");
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(isElementVisible(tooltip)).toBe(true);
+    expect(tooltip).toBeInTheDocument();
     expect(tooltip).not.toHaveClass("rmd-tooltip--enter");
 
     fireEvent.touchEnd(button);
@@ -156,7 +174,7 @@ describe("Tooltip", () => {
     act(() => {
       jest.runAllTimers();
     });
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(tooltip).not.toBeInTheDocument();
 
     fireEvent.click(document.body);
     fireEvent.mouseEnter(button);
@@ -164,21 +182,21 @@ describe("Tooltip", () => {
     act(() => {
       jest.runAllTimers();
     });
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     fireEvent.touchStart(button);
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
     act(() => {
       jest.advanceTimersByTime(800);
     });
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     const empty = jest.spyOn(Selection.prototype, "empty");
     fireEvent.contextMenu(button);
     act(() => {
       jest.runAllTimers();
     });
-    expect(isElementVisible(tooltip)).toBe(true);
+    expect(() => screen.getByRole("tooltip")).not.toThrow();
     expect(empty).not.toHaveBeenCalled();
 
     const empty2 = jest.fn();
@@ -195,16 +213,17 @@ describe("Tooltip", () => {
 
   it("should support controlling the visibility manually with the setVisible and hideTooltip returned functions", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test />);
+    rmdRender(<Test />);
 
-    const button = getByRole("button", { name: "Button" });
-    const tooltip = getByRole("tooltip");
-    const toggleTooltip = getByRole("button", { name: "Toggle Tooltip" });
-    expect(tooltip).toBeInTheDocument();
+    const button = screen.getByRole("button", { name: "Button" });
+    const toggleTooltip = screen.getByRole("button", {
+      name: "Toggle Tooltip",
+    });
+    expect(() => screen.getByRole("tooltip")).toThrow();
     expect(button).not.toHaveAttribute("aria-describedby");
 
     await user.click(toggleTooltip);
-    expect(isElementVisible(tooltip)).toBe(true);
+    let tooltip = await screen.findByRole("tooltip");
     expect(button).toHaveAttribute("aria-describedby");
     expect(tooltip).toMatchSnapshot();
     await waitFor(() => {
@@ -213,95 +232,83 @@ describe("Tooltip", () => {
     expect(tooltip).toMatchSnapshot();
 
     await user.click(toggleTooltip);
-    await waitFor(() => {
-      expect(isElementVisible(tooltip)).toBe(false);
-    });
-    expect(tooltip).toMatchSnapshot();
+    await waitForElementToBeRemoved(tooltip);
 
     await user.click(toggleTooltip);
+    tooltip = await screen.findByRole("tooltip");
     await waitFor(() => {
       expect(tooltip).not.toHaveClass("rmd-tooltip--enter");
     });
 
-    await user.click(getByRole("button", { name: "Hide Tooltip" }));
-    await waitFor(() => {
-      expect(isElementVisible(tooltip)).toBe(false);
-    });
-    expect(tooltip).toMatchSnapshot();
+    await user.click(screen.getByRole("button", { name: "Hide Tooltip" }));
+    await waitForElementToBeRemoved(tooltip);
   });
 
-  it("should support rendering the tooltip temporarily instead of using display: none", async () => {
+  it("should support rendering the tooltip using display: none instead of temporarily", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(
-      <Test tooltip={{ temporary: true }} hoverTime={0} />
-    );
-
-    expect(() => getByRole("tooltip")).toThrow();
+    rmdRender(<Test tooltip={{ temporary: false }} hoverTimeout={0} />);
+    expect(() => screen.getByRole("tooltip")).not.toThrow();
 
     await user.tab();
     await waitFor(() => {
-      expect(() => getByRole("tooltip", { name: "Tooltip" })).not.toThrow();
+      expect(() =>
+        screen.getByRole("tooltip", { name: "Tooltip" })
+      ).not.toThrow();
     });
   });
 
   it("should close the tooltip whenever the escape key is pressed", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test hoverTime={0} />);
-    const tooltip = getByRole("tooltip");
+    rmdRender(<Test hoverTimeout={0} />);
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     await user.tab();
+    const tooltip = await screen.findByRole("tooltip");
     await waitFor(() => {
-      expect(isElementVisible(tooltip)).toBe(true);
       expect(tooltip).not.toHaveClass("rmd-tooltip--enter");
     });
 
     await user.keyboard("[Escape]");
-    await waitFor(() => {
-      expect(isElementVisible(tooltip)).toBe(false);
-    });
+    await waitForElementToBeRemoved(tooltip);
   });
 
   it("should close the tooltip whenever the page is scrolled", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test hoverTime={0} />);
-    const tooltip = getByRole("tooltip");
+    rmdRender(<Test hoverTimeout={0} />);
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     await user.tab();
+    const tooltip = await screen.findByRole("tooltip");
     await waitFor(() => {
-      expect(isElementVisible(tooltip)).toBe(true);
       expect(tooltip).not.toHaveClass("rmd-tooltip--enter");
     });
 
     fireEvent.scroll(document.body);
-    await waitFor(() => {
-      expect(isElementVisible(tooltip)).toBe(false);
-    });
+    await waitForElementToBeRemoved(tooltip);
   });
 
   it("should hide the tooltip when the page becomes inactive or blurs and not show the tooltip again on focus", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test hoverTime={0} />);
-    const button = getByRole("button", { name: "Button" });
-    const tooltip = getByRole("tooltip");
+    rmdRender(<Test hoverTimeout={0} />);
+    const button = screen.getByRole("button", { name: "Button" });
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     await user.tab();
-    expect(isElementVisible(tooltip)).toBe(true);
+    let tooltip = await screen.findByRole("tooltip");
     await waitFor(() => {
       expect(tooltip).not.toHaveClass("rmd-tooltip--enter");
     });
 
     fireEvent.blur(window);
-    await waitFor(() => {
-      expect(isElementVisible(tooltip)).toBe(false);
-    });
+    await waitForElementToBeRemoved(tooltip);
 
     fireEvent.focus(button);
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     await user.tab();
     await user.tab({ shift: true });
     expect(document.activeElement).toBe(button);
-    expect(isElementVisible(tooltip)).toBe(true);
+    tooltip = await screen.findByRole("tooltip");
     await waitFor(() => {
       expect(tooltip).not.toHaveClass("rmd-tooltip--enter");
     });
@@ -314,15 +321,13 @@ describe("Tooltip", () => {
     act(() => {
       document.dispatchEvent(new Event("visibilitychange"));
     });
-    await waitFor(() => {
-      expect(isElementVisible(tooltip)).toBe(false);
-    });
+    await waitForElementToBeRemoved(tooltip);
 
     act(() => {
       document.dispatchEvent(new Event("visibilitychange"));
     });
     fireEvent.focus(button);
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
   });
 
   it("should use the position prop when provided instead of determining a position within the viewport", async () => {
@@ -330,9 +335,9 @@ describe("Tooltip", () => {
     expect(window.innerHeight).toBe(vh);
 
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test hoverTime={0} position="above" />);
-    const button = getByRole("button", { name: "Button" });
-    const tooltip = getByRole("tooltip");
+    rmdRender(<Test hoverTimeout={0} position="above" />);
+    const button = screen.getByRole("button", { name: "Button" });
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     const baseRect = document.body.getBoundingClientRect();
     jest.spyOn(button, "getBoundingClientRect").mockReturnValue({
@@ -341,55 +346,57 @@ describe("Tooltip", () => {
     });
 
     await user.tab();
+    let tooltip = await screen.findByRole("tooltip");
     await waitFor(() => {
       expect(isElementVisible(tooltip)).toBe(true);
+    });
+    await waitFor(() => {
       expect(tooltip).toHaveClass("rmd-tooltip--above");
     });
 
     await user.tab();
-    await waitFor(() => {
-      expect(isElementVisible(tooltip)).toBe(false);
-    });
+    await waitForElementToBeRemoved(tooltip);
 
     jest.spyOn(button, "getBoundingClientRect").mockReturnValue({
       ...baseRect,
       top: 0,
     });
     await user.tab({ shift: true });
+    tooltip = await screen.findByRole("tooltip");
     expect(isElementVisible(tooltip)).toBe(true);
     expect(tooltip).toHaveClass("rmd-tooltip--above");
   });
 
   it("should never display the tooltip if the disabled option is true", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test hoverTime={0} disabled />);
-    const button = getByRole("button", { name: "Button" });
-    const tooltip = getByRole("tooltip");
+    rmdRender(<Test hoverTimeout={0} disabled />);
+    const button = screen.getByRole("button", { name: "Button" });
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     await user.tab();
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     await user.tab();
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     await user.hover(button);
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     await user.unhover(button);
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     fireEvent.touchStart(button);
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     fireEvent.touchEnd(button);
-    expect(isElementVisible(tooltip)).toBe(false);
+    expect(() => screen.getByRole("tooltip")).toThrow();
   });
 
   it("should automatically attempt to determine the spacing based on the computed style of the spacing custom property", async () => {
     const user = userEvent.setup();
-    const { getByRole, rerender } = rmdRender(<Test hoverTime={0} />);
-    const button = getByRole("button", { name: "Button" });
-    const tooltip = getByRole("tooltip");
+    const { rerender } = rmdRender(<Test hoverTimeout={0} />);
+    const button = screen.getByRole("button", { name: "Button" });
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     const spacing = "0.825rem";
     const spacingPixels = parseCssLengthUnit({ value: spacing });
@@ -406,16 +413,17 @@ describe("Tooltip", () => {
       );
 
     await user.hover(button);
+    let tooltip = await screen.findByRole("tooltip");
     await waitFor(() => {
       expect(isElementVisible(tooltip)).toBe(true);
+    });
+    await waitFor(() => {
       expect(tooltip).not.toHaveClass("rmd-tooltip--enter");
     });
     expect(tooltip.style.top).toBe(`${spacingPixels}px`);
 
     await user.unhover(button);
-    await waitFor(() => {
-      expect(isElementVisible(tooltip)).toBe(false);
-    });
+    await waitForElementToBeRemoved(tooltip);
 
     getComputedStyle.mockImplementation(
       // @ts-expect-error
@@ -427,8 +435,11 @@ describe("Tooltip", () => {
     );
 
     await user.hover(button);
+    tooltip = await screen.findByRole("tooltip");
     await waitFor(() => {
       expect(isElementVisible(tooltip)).toBe(true);
+    });
+    await waitFor(() => {
       expect(tooltip).not.toHaveClass("rmd-tooltip--enter");
     });
 
@@ -438,15 +449,16 @@ describe("Tooltip", () => {
     expect(tooltip.style.top).toBe(`${defaultSpacingPixels}px`);
 
     await user.unhover(button);
-    await waitFor(() => {
-      expect(isElementVisible(tooltip)).toBe(false);
-    });
+    await waitForElementToBeRemoved(tooltip);
 
-    rerender(<Test dense disableAutoSpacing hoverTime={0} />);
-    expect(tooltip).toBeInTheDocument();
+    rerender(<Test dense disableAutoSpacing hoverTimeout={0} />);
+    expect(() => screen.getByRole("tooltip")).toThrow();
     await user.hover(button);
+    tooltip = await screen.findByRole("tooltip");
     await waitFor(() => {
       expect(isElementVisible(tooltip)).toBe(true);
+    });
+    await waitFor(() => {
       expect(tooltip).not.toHaveClass("rmd-tooltip--enter");
     });
 
@@ -455,4 +467,35 @@ describe("Tooltip", () => {
     });
     expect(tooltip.style.top).toBe(`${denseSpacingPixels}px`);
   });
+
+  it("should support displaying a tooltip only when the text is overflown", async () => {
+    const user = userEvent.setup();
+    rmdRender(<Test overflowOnly />);
+
+    const resizeNode = screen.getByTestId("resize-node");
+    const button = screen.getByRole("button", { name: "Button" });
+    expect(() => screen.getByRole("tooltip")).toThrow();
+
+    const rect = resizeNode.getBoundingClientRect();
+    jest.spyOn(resizeNode, "scrollWidth", "get").mockReturnValue(300);
+    const offsetWidth = jest
+      .spyOn(resizeNode, "offsetWidth", "get")
+      .mockReturnValue(300);
+    const getBoundingClientRect = jest
+      .spyOn(resizeNode, "getBoundingClientRect")
+      .mockReturnValue({ ...rect, width: 300 });
+
+    await user.hover(button);
+    expect(() => screen.getByRole("tooltip")).toThrow();
+
+    await user.unhover(button);
+    expect(() => screen.getByRole("tooltip")).toThrow();
+
+    offsetWidth.mockReturnValue(150);
+    getBoundingClientRect.mockReturnValue({ ...rect, width: 150 });
+    await user.hover(button);
+    await waitFor(() => {
+      expect(() => screen.getByRole("tooltip")).not.toThrow();
+    });
+  });
 });

package/src/tooltip/__tests__/TooltipHoverModeProvider.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "@jest/globals";
+import { beforeEach, describe, expect, it } from "@jest/globals";
 import { type ReactElement } from "react";
 import {
   render,
@@ -9,6 +9,7 @@ import {
 } from "../../test-utils/index.js";
 
 import { Button } from "../../button/Button.js";
+import { TRANSITION_CONFIG } from "../../transition/config.js";
 import { Tooltip } from "../Tooltip.js";
 import { TooltipHoverModeProvider } from "../TooltipHoverModeProvider.js";
 import { useTooltip } from "../useTooltip.js";
@@ -16,8 +17,8 @@ import { useTooltip } from "../useTooltip.js";
 function TooltippedButton({ index }: { index: number }): ReactElement {
   const { elementProps, tooltipProps } = useTooltip({
     // make it so Button 3 always requires 1s of hovering
-    hoverTime: index === 2 ? 1000 : undefined,
-    leaveTime: index === 2 ? 1000 : undefined,
+    hoverTimeout: index === 2 ? 1000 : undefined,
+    leaveTimeout: index === 2 ? 1000 : undefined,
   });
 
   return (
@@ -40,6 +41,10 @@ function Test(): ReactElement {
 }
 
 describe("TooltipHoverModeProvider", () => {
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   it("should support hover mode behavior", async () => {
     const user = userEvent.setup();
     render(<Test />);

package/src/tooltip/__tests__/__snapshots__/Tooltip.tsx.snap

@@ -11,17 +11,6 @@ exports[`Tooltip should display the tooltip after focusing for 1s by default onl
 </span>
 `;
 
-exports[`Tooltip should display the tooltip after focusing for 1s by default only in keyboard mode 2`] = `
-<span
-  class="rmd-tooltip rmd-tooltip--below rmd-display-none"
-  id=":r2:-tooltip"
-  role="tooltip"
-  style="position: fixed; left: 16px; top: 24px;"
->
-  Tooltip
-</span>
-`;
-
 exports[`Tooltip should support controlling the visibility manually with the setVisible and hideTooltip returned functions 1`] = `
 <span
   class="rmd-tooltip rmd-tooltip--below rmd-tooltip--enter rmd-tooltip--visible"
@@ -43,25 +32,3 @@ exports[`Tooltip should support controlling the visibility manually with the set
   Tooltip
 </span>
 `;
-
-exports[`Tooltip should support controlling the visibility manually with the setVisible and hideTooltip returned functions 3`] = `
-<span
-  class="rmd-tooltip rmd-tooltip--below rmd-display-none"
-  id=":r6:-tooltip"
-  role="tooltip"
-  style="position: fixed; left: 16px; top: 24px;"
->
-  Tooltip
-</span>
-`;
-
-exports[`Tooltip should support controlling the visibility manually with the setVisible and hideTooltip returned functions 4`] = `
-<span
-  class="rmd-tooltip rmd-tooltip--below rmd-display-none"
-  id=":r6:-tooltip"
-  role="tooltip"
-  style="position: fixed; left: 16px; top: 24px;"
->
-  Tooltip
-</span>
-`;