@react-md/core 1.0.0-next.15 → 1.0.0-next.16

package/src/__tests__/useResizeObserver.tsx

@@ -1,258 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { useEffect, type ReactElement } from "react";
-import {
-  act,
-  cleanupResizeObserverAfterEach,
-  createResizeObserverEntry,
-  render,
-  screen,
-  setupResizeObserverMock,
-  waitFor,
-} from "../test-utils/index.js";
-
-import {
-  useResizeObserver,
-  type ResizeObserverEntryCallback,
-} from "../useResizeObserver.js";
-
-describe("useResizeObserver", () => {
-  cleanupResizeObserverAfterEach();
-
-  it("should only create a single shared observer to improve performance", () => {
-    const observe = jest.fn();
-    const resizeObserverSpy = jest
-      .spyOn(window, "ResizeObserver")
-      .mockImplementation(() => ({
-        observe,
-        disconnect: jest.fn(),
-        unobserve: jest.fn(),
-      }));
-
-    function UpdateTest({
-      onUpdate,
-    }: {
-      onUpdate: ResizeObserverEntryCallback;
-    }): ReactElement {
-      const ref = useResizeObserver({ onUpdate });
-      return <div ref={ref} />;
-    }
-
-    const onUpdate1 = jest.fn();
-    const onUpdate2 = jest.fn();
-    const onUpdate3 = jest.fn();
-    const onUpdate4 = jest.fn();
-    const onUpdate5 = jest.fn();
-
-    function Test(): ReactElement {
-      return (
-        <>
-          <UpdateTest onUpdate={onUpdate1} />
-          <UpdateTest onUpdate={onUpdate2} />
-          <UpdateTest onUpdate={onUpdate3} />
-          <UpdateTest onUpdate={onUpdate4} />
-          <UpdateTest onUpdate={onUpdate5} />
-        </>
-      );
-    }
-
-    render(<Test />);
-    expect(observe).toHaveBeenCalledTimes(5);
-    expect(resizeObserverSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it("should do nothing when disabled, both the height and width are disabled, or there is no element", async () => {
-    const resizeObserverSpy = jest.spyOn(window, "ResizeObserver");
-    const noRefUpdate = jest.fn();
-    const disabledUpdate = jest.fn();
-    const disabledSizesUpdate = jest.fn();
-
-    function Test(): ReactElement {
-      useResizeObserver({ onUpdate: noRefUpdate });
-      const disabledRef = useResizeObserver({
-        disabled: true,
-        onUpdate: disabledUpdate,
-      });
-      const disabledSizesRef = useResizeObserver({
-        disableHeight: true,
-        disableWidth: true,
-        onUpdate: disabledSizesUpdate,
-      });
-
-      return (
-        <>
-          <div ref={disabledRef} />
-          <div ref={disabledSizesRef} />
-        </>
-      );
-    }
-
-    expect(resizeObserverSpy).toHaveBeenCalledTimes(0);
-    render(<Test />);
-    expect(resizeObserverSpy).toHaveBeenCalledTimes(0);
-  });
-
-  it("should wait an animation frame before updating the entries to prevent the `ResizeObserver loop limit exceeded` error", async () => {
-    const frameCalled = jest.fn();
-    const onUpdate = jest.fn();
-    function Test(): ReactElement {
-      const ref = useResizeObserver({ onUpdate });
-      useEffect(() => {
-        window.requestAnimationFrame(frameCalled);
-      }, []);
-      return <div ref={ref} data-testid="div" />;
-    }
-
-    render(<Test />);
-    const div = screen.getByTestId("div");
-    expect(frameCalled).not.toHaveBeenCalled();
-    expect(onUpdate).not.toHaveBeenCalled();
-
-    const contentRect = div.getBoundingClientRect();
-    const size: ResizeObserverSize = {
-      blockSize: contentRect.height,
-      inlineSize: contentRect.width,
-    };
-
-    await waitFor(() => {
-      expect(frameCalled).toHaveBeenCalled();
-    });
-    await waitFor(() => {
-      expect(onUpdate).toHaveBeenCalledWith({
-        target: div,
-        contentRect,
-        borderBoxSize: [size],
-        contentBoxSize: [size],
-        devicePixelContentBoxSize: [],
-      });
-    });
-  });
-
-  it("should only trigger the onUpdate callback if the height and width have changed and the height or width change is not disabled", () => {
-    const resizeObserver = setupResizeObserverMock();
-
-    const allowBothUpdate = jest.fn();
-    const allowHeightUpdate = jest.fn();
-    const allowWidthUpdate = jest.fn();
-
-    function Test(): ReactElement {
-      const ref1 = useResizeObserver({
-        onUpdate: allowBothUpdate,
-      });
-      const ref2 = useResizeObserver({
-        onUpdate: allowHeightUpdate,
-        disableWidth: true,
-      });
-      const ref3 = useResizeObserver({
-        onUpdate: allowWidthUpdate,
-        disableHeight: true,
-      });
-
-      return (
-        <>
-          <div data-testid="allow-both" ref={ref1} />
-          <div data-testid="allow-height" ref={ref2} />
-          <div data-testid="allow-width" ref={ref3} />
-        </>
-      );
-    }
-
-    render(<Test />);
-
-    const allowBoth = screen.getByTestId("allow-both");
-    const allowHeight = screen.getByTestId("allow-height");
-    const allowWidth = screen.getByTestId("allow-width");
-
-    expect(allowBothUpdate).toHaveBeenCalledTimes(1);
-    expect(allowBothUpdate).toHaveBeenCalledWith(
-      createResizeObserverEntry(allowBoth)
-    );
-    expect(allowHeightUpdate).toHaveBeenCalledTimes(1);
-    expect(allowHeightUpdate).toHaveBeenCalledWith(
-      createResizeObserverEntry(allowHeight)
-    );
-    expect(allowWidthUpdate).toHaveBeenCalledTimes(1);
-    expect(allowWidthUpdate).toHaveBeenCalledWith(
-      createResizeObserverEntry(allowWidth)
-    );
-
-    const allowBothHeightEntry = createResizeObserverEntry(allowBoth, {
-      height: 100,
-      width: 0,
-    });
-    act(() => {
-      resizeObserver.resizeElement(allowBoth, allowBothHeightEntry);
-    });
-    expect(allowBothUpdate).toHaveBeenCalledTimes(2);
-    expect(allowBothUpdate).toHaveBeenCalledWith(allowBothHeightEntry);
-    expect(allowHeightUpdate).toHaveBeenCalledTimes(1);
-    expect(allowWidthUpdate).toHaveBeenCalledTimes(1);
-
-    const allowBothWidthEntry = createResizeObserverEntry(allowBoth, {
-      height: 100,
-      width: 100,
-    });
-    act(() => {
-      resizeObserver.resizeElement(allowBoth, allowBothWidthEntry);
-    });
-    expect(allowBothUpdate).toHaveBeenCalledTimes(3);
-    expect(allowBothUpdate).toHaveBeenCalledWith(allowBothWidthEntry);
-    expect(allowHeightUpdate).toHaveBeenCalledTimes(1);
-    expect(allowWidthUpdate).toHaveBeenCalledTimes(1);
-
-    // should not be called since there are no changes
-    act(() => {
-      resizeObserver.resizeElement(allowBoth, allowBothWidthEntry);
-    });
-    expect(allowBothUpdate).toHaveBeenCalledTimes(3);
-    expect(allowHeightUpdate).toHaveBeenCalledTimes(1);
-    expect(allowWidthUpdate).toHaveBeenCalledTimes(1);
-
-    // should not be fired
-    const allowHeightInvalidEntry = createResizeObserverEntry(allowHeight, {
-      height: 0,
-      width: 100,
-    });
-    act(() => {
-      resizeObserver.resizeElement(allowHeight, allowHeightInvalidEntry);
-    });
-    expect(allowBothUpdate).toHaveBeenCalledTimes(3);
-    expect(allowHeightUpdate).toHaveBeenCalledTimes(1);
-    expect(allowWidthUpdate).toHaveBeenCalledTimes(1);
-
-    const allowHeightValidEntry = createResizeObserverEntry(allowHeight, {
-      width: 100,
-      height: 100,
-    });
-    act(() => {
-      resizeObserver.resizeElement(allowHeight, allowHeightValidEntry);
-    });
-    expect(allowBothUpdate).toHaveBeenCalledTimes(3);
-    expect(allowHeightUpdate).toHaveBeenCalledTimes(2);
-    expect(allowHeightUpdate).toHaveBeenCalledWith(allowHeightValidEntry);
-    expect(allowWidthUpdate).toHaveBeenCalledTimes(1);
-
-    // should not be fired
-    const allowWidthInvalidEntry = createResizeObserverEntry(allowWidth, {
-      height: 100,
-      width: 0,
-    });
-    act(() => {
-      resizeObserver.resizeElement(allowWidth, allowWidthInvalidEntry);
-    });
-    expect(allowBothUpdate).toHaveBeenCalledTimes(3);
-    expect(allowWidthUpdate).toHaveBeenCalledTimes(1);
-    expect(allowWidthUpdate).toHaveBeenCalledTimes(1);
-
-    const allowWidthValidEntry = createResizeObserverEntry(allowWidth, {
-      width: 100,
-      height: 100,
-    });
-    act(() => {
-      resizeObserver.resizeElement(allowWidth, allowWidthValidEntry);
-    });
-    expect(allowBothUpdate).toHaveBeenCalledTimes(3);
-    expect(allowHeightUpdate).toHaveBeenCalledTimes(2);
-    expect(allowWidthUpdate).toHaveBeenCalledTimes(2);
-    expect(allowWidthUpdate).toHaveBeenCalledWith(allowWidthValidEntry);
-  });
-});

package/src/__tests__/useThrottledFunction.tsx

@@ -1,226 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import {
-  useEffect,
-  useState,
-  type MutableRefObject,
-  type ReactElement,
-} from "react";
-import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  userEvent,
-  waitFor,
-} from "../test-utils/index.js";
-
-import { Button } from "../button/Button.js";
-import { TextField } from "../form/TextField.js";
-import { useThrottledFunction } from "../useThrottledFunction.js";
-
-function SyncTest(): ReactElement {
-  const [throttledValue, setThrottledValue] = useState("");
-  const [normalValue, setNormalValue] = useState("");
-  const throttled = useThrottledFunction((value: string) => {
-    setThrottledValue(value);
-  }, 500);
-
-  return (
-    <>
-      <div data-testid="value">{throttledValue}</div>
-      <TextField
-        label="Field"
-        value={normalValue}
-        onChange={(event) => {
-          const { value } = event.currentTarget;
-
-          setNormalValue(value);
-          throttled(value);
-        }}
-      />
-    </>
-  );
-}
-
-const fakeFetch = jest.fn((search: string) =>
-  Promise.resolve({
-    json: () => Promise.resolve({ search }),
-  })
-);
-
-interface AsyncTestProps {
-  unmounted: MutableRefObject<boolean>;
-  onUnmounted(): void;
-}
-
-function AsyncTest(props: AsyncTestProps): ReactElement {
-  const { unmounted, onUnmounted } = props;
-
-  const [normalValue, setNormalValue] = useState("");
-  const [throttledValue, setThrottledValue] = useState("");
-  const throttled = useThrottledFunction(async (value: string) => {
-    const response = await fakeFetch(value);
-    const json = await response.json();
-    if (unmounted.current) {
-      onUnmounted();
-      return;
-    }
-
-    // have to wrap in act since it's async updates
-    act(() => {
-      setThrottledValue(json.search);
-    });
-  }, 500);
-
-  useEffect(() => {
-    return () => {
-      unmounted.current = true;
-    };
-  }, [unmounted]);
-
-  return (
-    <>
-      <div data-testid="value">{throttledValue}</div>
-      <TextField
-        label="Field"
-        value={normalValue}
-        onChange={(event) => {
-          const { value } = event.currentTarget;
-
-          setNormalValue(value);
-          throttled(value);
-        }}
-      />
-    </>
-  );
-}
-
-describe("useThrottledFunction", () => {
-  it("should throttle functions correctly by prevent setting state after unmounting and preventing stale closures during re-rendering", async () => {
-    const user = userEvent.setup();
-    const { unmount } = render(<SyncTest />);
-    const value = screen.getByTestId("value");
-    const field = screen.getByRole("textbox", { name: "Field" });
-    expect(value).toHaveTextContent("");
-    expect(field).toHaveValue("");
-
-    await user.type(field, "Hello");
-    expect(value).toHaveTextContent("H");
-    expect(field).toHaveValue("Hello");
-
-    await waitFor(() => {
-      expect(value).toHaveTextContent("Hello");
-    });
-    await waitFor(() => {
-      expect(field).toHaveValue("Hello");
-    });
-
-    await user.type(field, " world!");
-    expect(value).toHaveTextContent("Hello");
-    expect(field).toHaveValue("Hello world!");
-
-    unmount();
-    expect(value).toHaveTextContent("Hello");
-    expect(field).toHaveValue("Hello world!");
-    expect(value).not.toBeInTheDocument();
-    expect(field).not.toBeInTheDocument();
-  });
-
-  it("should support async functions but they require custom unmount logic", () => {
-    jest.useFakeTimers();
-
-    const unmounted = { current: false };
-    const onUnmounted = jest.fn();
-    render(<AsyncTest unmounted={unmounted} onUnmounted={onUnmounted} />);
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    const value = screen.getByTestId("value");
-    const field = screen.getByRole("textbox", { name: "Field" });
-    expect(value).toHaveTextContent("");
-    expect(field).toHaveValue("");
-    expect(onUnmounted).not.toHaveBeenCalled();
-    expect(unmounted.current).toBe(false);
-
-    // pretend typing. can't use userEvent here since I have fake timers
-    fireEvent.change(field, { value: "H" });
-    act(() => {
-      jest.advanceTimersByTime(20);
-    });
-    fireEvent.change(field, { target: { value: "He" } });
-    act(() => {
-      jest.advanceTimersByTime(20);
-    });
-    fireEvent.change(field, { target: { value: "Hel" } });
-    act(() => {
-      jest.advanceTimersByTime(20);
-    });
-    fireEvent.change(field, { target: { value: "Hell" } });
-    act(() => {
-      jest.advanceTimersByTime(20);
-    });
-    fireEvent.change(field, { target: { value: "Hello" } });
-
-    expect(value).toHaveTextContent("");
-    expect(field).toHaveValue("Hello");
-    act(() => {
-      jest.runOnlyPendingTimers();
-    });
-    expect(value).toHaveTextContent("");
-    expect(field).toHaveValue("Hello");
-  });
-
-  it("should allow the timeout to be cancelled", async () => {
-    jest.useFakeTimers();
-    const user = userEvent.setup({ delay: null });
-    const fired = jest.fn();
-
-    function Test() {
-      const [value, setValue] = useState("");
-      const handleChange = useThrottledFunction((value: string) => {
-        fired(value);
-        setValue(value);
-      }, 500);
-
-      return (
-        <>
-          <div data-testid="output">{value}</div>
-          <TextField
-            label="Field"
-            onChange={(event) => handleChange(event.currentTarget.value)}
-          />
-          <Button
-            onClick={() => {
-              handleChange.cancel();
-            }}
-          >
-            Cancel
-          </Button>
-        </>
-      );
-    }
-
-    render(<Test />);
-    const field = screen.getByRole("textbox", { name: "Field" });
-    const output = screen.getByTestId("output");
-    const cancel = screen.getByRole("button", { name: "Cancel" });
-
-    expect(output).toHaveTextContent("");
-    expect(field).toHaveValue("");
-
-    await user.type(field, "Hello, world!");
-    expect(fired).toHaveBeenCalledWith("H");
-    expect(output).toHaveTextContent("H");
-    expect(field).toHaveValue("Hello, world!");
-
-    await user.click(cancel);
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    expect(fired).toHaveBeenCalledTimes(1);
-    expect(output).toHaveTextContent("H");
-    expect(field).toHaveValue("Hello, world!");
-  });
-});

package/src/__tests__/useToggle.tsx

@@ -1,78 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { type ReactElement } from "react";
-import { fireEvent, render, screen } from "../test-utils/index.js";
-
-import { useToggle } from "../useToggle.js";
-
-function Test(): ReactElement {
-  const { toggle, toggled, enable, disable } = useToggle();
-
-  return (
-    <>
-      <div data-testid="output">{`${toggled}`}</div>
-      <button type="button" onClick={toggle}>
-        Toggle
-      </button>
-      <button type="button" onClick={enable}>
-        Enable
-      </button>
-      <button type="button" onClick={disable}>
-        Disable
-      </button>
-    </>
-  );
-}
-
-describe("useToggle", () => {
-  it("should work as expected with no arguments", () => {
-    render(<Test />);
-
-    const output = screen.getByTestId("output");
-    const toggle = screen.getByRole("button", { name: "Toggle" });
-    const enable = screen.getByRole("button", { name: "Enable" });
-    const disable = screen.getByRole("button", { name: "Disable" });
-    expect(output).toHaveTextContent("false");
-
-    fireEvent.click(toggle);
-    expect(output).toHaveTextContent("true");
-    fireEvent.click(toggle);
-    expect(output).toHaveTextContent("false");
-
-    fireEvent.click(disable);
-    expect(output).toHaveTextContent("false");
-
-    fireEvent.click(enable);
-    expect(output).toHaveTextContent("true");
-    fireEvent.click(enable);
-    expect(output).toHaveTextContent("true");
-
-    fireEvent.click(disable);
-    expect(output).toHaveTextContent("false");
-  });
-
-  it("should allow for a default state", () => {
-    function Test(): ReactElement {
-      const { toggled } = useToggle(true);
-
-      return <div data-testid="output">{`${toggled}`}</div>;
-    }
-
-    render(<Test />);
-
-    const output = screen.getByTestId("output");
-    expect(output).toHaveTextContent("true");
-  });
-
-  it("should allow for a default state using a callback function", () => {
-    function Test(): ReactElement {
-      const { toggled } = useToggle(() => true);
-
-      return <div data-testid="output">{`${toggled}`}</div>;
-    }
-
-    render(<Test />);
-
-    const output = screen.getByTestId("output");
-    expect(output).toHaveTextContent("true");
-  });
-});

package/src/__tests__/useWindowSize.node.tsx

@@ -1,56 +0,0 @@
-/** @jest-environment node */
-
-import { describe, expect, it } from "@jest/globals";
-import { type MutableRefObject } from "react";
-import { renderToString } from "react-dom/server";
-import { type ElementSize } from "../types.js";
-import { useWindowSize } from "../useWindowSize.js";
-
-describe("useWindowSize", () => {
-  it("should default to 0 in ssr", () => {
-    const sizeRef: MutableRefObject<ElementSize | null> = {
-      current: null,
-    };
-    function Test(): null {
-      const { height, width } = useWindowSize();
-      sizeRef.current = {
-        height,
-        width,
-      };
-
-      return null;
-    }
-
-    expect(renderToString(<Test />)).toBe("");
-    expect(sizeRef.current).toEqual({
-      height: 0,
-      width: 0,
-    });
-  });
-
-  it("should allow for custom ssr default values", () => {
-    const ssrHeight = 1080;
-    const ssrWidth = 1920;
-    const sizeRef: MutableRefObject<ElementSize | null> = {
-      current: null,
-    };
-    function Test(): null {
-      const { height, width } = useWindowSize({
-        ssrHeight,
-        ssrWidth,
-      });
-      sizeRef.current = {
-        height,
-        width,
-      };
-
-      return null;
-    }
-
-    expect(renderToString(<Test />)).toBe("");
-    expect(sizeRef.current).toEqual({
-      height: ssrHeight,
-      width: ssrWidth,
-    });
-  });
-});