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

package/src/test-utils/__tests__/ResizeObserver.ts

@@ -1,171 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { waitFor } from "@testing-library/react";
-import {
-  ResizeObserverManager,
-  resizeObserverManager,
-} from "../../useResizeObserver.js";
-import {
-  cleanupResizeObserverAfterEach,
-  createResizeObserverEntry,
-  setupResizeObserverMock,
-} from "../ResizeObserver.js";
-
-describe("ResizeObserverMock", () => {
-  cleanupResizeObserverAfterEach();
-
-  it("should throw an error when the resizeElement function is called for an element that is not being watched", () => {
-    const baseRect = document.body.getBoundingClientRect();
-    const resizeObserver = setupResizeObserverMock();
-    const element = document.createElement("div");
-
-    const onUpdate = jest.fn();
-    resizeObserverManager.subscribe({
-      element,
-      onUpdate,
-      disableHeight: false,
-      disableWidth: false,
-    });
-    expect(onUpdate).toHaveBeenCalledTimes(1);
-
-    expect(() =>
-      resizeObserver.resizeElement(document.createElement("div"))
-    ).toThrow(
-      "The `ResizeObserverMock` is not watching the target element and cannot be resized"
-    );
-
-    resizeObserver.resizeElement(element, { height: 100, width: 100 });
-    expect(onUpdate).toHaveBeenCalledTimes(2);
-
-    resizeObserver.resizeElement(element, (target) => ({
-      target,
-      contentRect: {
-        ...baseRect,
-        height: 20,
-        width: 20,
-      },
-      borderBoxSize: [{ inlineSize: 100, blockSize: 100 }],
-      contentBoxSize: [{ inlineSize: 40, blockSize: 80 }],
-      devicePixelContentBoxSize: [],
-    }));
-    expect(onUpdate).toHaveBeenCalledTimes(3);
-    expect(onUpdate).toHaveBeenLastCalledWith({
-      target: element,
-      contentRect: {
-        ...baseRect,
-        height: 20,
-        width: 20,
-      },
-      borderBoxSize: [{ inlineSize: 100, blockSize: 100 }],
-      contentBoxSize: [{ inlineSize: 40, blockSize: 80 }],
-      devicePixelContentBoxSize: [],
-    });
-
-    resizeObserver.disconnect();
-    expect(() =>
-      resizeObserver.resizeElement(element, (target) =>
-        createResizeObserverEntry(target, { width: 50, height: 100 })
-      )
-    ).toThrow(
-      "The `ResizeObserverMock` is not watching the target element and cannot be resized"
-    );
-  });
-
-  it("should support resizing all elements so that you can do fun stuff with jest spies", () => {
-    const baseRect = document.body.getBoundingClientRect();
-    const element1 = document.createElement("div");
-    const element2 = document.createElement("div");
-    const element3 = document.createElement("div");
-    const element4 = document.createElement("div");
-
-    const rect1 = jest
-      .spyOn(element1, "getBoundingClientRect")
-      .mockReturnValue({
-        ...baseRect,
-        height: 100,
-        width: 150,
-      });
-    jest.spyOn(element2, "getBoundingClientRect").mockReturnValue({
-      ...baseRect,
-      height: 100,
-      width: 150,
-    });
-    jest.spyOn(element3, "getBoundingClientRect").mockReturnValue({
-      ...baseRect,
-      height: 100,
-      width: 150,
-    });
-    const rect4 = jest
-      .spyOn(element4, "getBoundingClientRect")
-      .mockReturnValue({
-        ...baseRect,
-        height: 100,
-        width: 150,
-      });
-
-    const update1 = jest.fn();
-    const update2 = jest.fn();
-    const update3 = jest.fn();
-    const update4 = jest.fn();
-    const resizeObserver = setupResizeObserverMock();
-
-    resizeObserverManager.subscribe({
-      element: element1,
-      onUpdate: update1,
-      disableHeight: false,
-      disableWidth: false,
-    });
-    resizeObserverManager.subscribe({
-      element: element2,
-      onUpdate: update2,
-      disableHeight: false,
-      disableWidth: false,
-    });
-    resizeObserverManager.subscribe({
-      element: element3,
-      onUpdate: update3,
-      disableHeight: false,
-      disableWidth: false,
-    });
-    resizeObserverManager.subscribe({
-      element: element4,
-      onUpdate: update4,
-      disableHeight: false,
-      disableWidth: false,
-    });
-    expect(update1).toHaveBeenCalledTimes(1);
-    expect(update2).toHaveBeenCalledTimes(1);
-    expect(update3).toHaveBeenCalledTimes(1);
-    expect(update4).toHaveBeenCalledTimes(1);
-
-    rect1.mockReturnValue({ ...baseRect, height: 200, width: 100 });
-    rect4.mockReturnValue({ ...baseRect, height: 50, width: 200 });
-    resizeObserver.resizeAllElements();
-    expect(update1).toHaveBeenCalledTimes(2);
-    expect(update2).toHaveBeenCalledTimes(1);
-    expect(update3).toHaveBeenCalledTimes(1);
-    expect(update4).toHaveBeenCalledTimes(2);
-  });
-
-  it("should support animation frames to mimic real behavior", async () => {
-    const raf = jest.spyOn(window, "requestAnimationFrame");
-    const manager = new ResizeObserverManager();
-    setupResizeObserverMock({ raf: true, manager });
-    expect(raf).not.toHaveBeenCalled();
-
-    const element = document.createElement("div");
-    const onUpdate = jest.fn();
-
-    manager.subscribe({
-      element,
-      onUpdate,
-      disableHeight: false,
-      disableWidth: false,
-    });
-    expect(raf).toHaveBeenCalledTimes(1);
-    expect(onUpdate).not.toHaveBeenCalled();
-
-    await waitFor(() => {
-      expect(onUpdate).toHaveBeenCalled();
-    });
-  });
-});

package/src/theme/__tests__/LocalStorageColorSchemeProvider.tsx

@@ -1,162 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { type ChangeEvent, type ReactElement } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { type UseStateSetter } from "../../types.js";
-import { LocalStorageColorSchemeProvider } from "../LocalStorageColorSchemeProvider.js";
-import {
-  useColorScheme,
-  type ColorScheme,
-  type ColorSchemeMode,
-} from "../useColorScheme.js";
-
-function ControllableTest(): ReactElement {
-  const { colorScheme, colorSchemeMode, setColorSchemeMode } = useColorScheme();
-
-  const onChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    const { value } = event.currentTarget;
-    if (value === "light" || value === "dark" || value === "system") {
-      setColorSchemeMode(value);
-    }
-  };
-
-  return (
-    <>
-      <span data-testid="color-scheme">{colorScheme}</span>
-      <label>
-        Light
-        <input
-          type="checkbox"
-          value="light"
-          checked={colorSchemeMode === "light"}
-          onChange={onChange}
-        />
-      </label>
-      <label>
-        Dark
-        <input
-          type="checkbox"
-          value="dark"
-          checked={colorSchemeMode === "dark"}
-          onChange={onChange}
-        />
-      </label>
-      <label>
-        System
-        <input
-          type="checkbox"
-          value="system"
-          checked={colorSchemeMode === "system"}
-          onChange={onChange}
-        />
-      </label>
-    </>
-  );
-}
-
-describe("LocalStorageColorSchemeProvider", () => {
-  it("should default to the light color scheme and allow the useColorScheme hook to change the values", () => {
-    render(
-      <LocalStorageColorSchemeProvider>
-        <ControllableTest />
-      </LocalStorageColorSchemeProvider>
-    );
-
-    const lightTheme = screen.getByRole("checkbox", { name: "Light" });
-    const darkTheme = screen.getByRole("checkbox", { name: "Dark" });
-    const systemTheme = screen.getByRole("checkbox", { name: "System" });
-    expect(lightTheme).toBeChecked();
-    expect(darkTheme).not.toBeChecked();
-    expect(systemTheme).not.toBeChecked();
-  });
-
-  it("should throw an error if the setColorSchemeMode from the useColorScheme hook is used without a ColorSchemeProvider", () => {
-    let setColorSchemeMode: UseStateSetter<ColorSchemeMode> | undefined;
-    function Test(): null {
-      ({ setColorSchemeMode } = useColorScheme());
-      return null;
-    }
-
-    jest.spyOn(console, "error").mockImplementation(() => {});
-    render(<Test />);
-
-    expect(() => setColorSchemeMode?.("dark")).toThrow(
-      "The `ColorSchemeProvider` has not been initialized."
-    );
-  });
-
-  it("should return dark when the mode is system and the prefers-color-scheme media query matches dark", () => {
-    const onchange = jest.fn();
-    const addListener = jest.fn();
-    const addEventListener = jest.fn();
-    const removeListener = jest.fn();
-    const removeEventListener = jest.fn();
-    const dispatchEvent = jest.fn(() => false);
-
-    const baseQueryList: Omit<MediaQueryList, "matches"> = {
-      media: "",
-      onchange,
-      addListener,
-      addEventListener,
-      removeEventListener,
-      removeListener,
-      dispatchEvent,
-    };
-
-    const matchMedia = jest
-      .spyOn(window, "matchMedia")
-      .mockImplementation((query) => ({
-        matches: query.includes("dark"),
-        ...baseQueryList,
-      }));
-
-    let colorScheme: ColorScheme | undefined;
-    function Test(): null {
-      ({ colorScheme } = useColorScheme());
-
-      return null;
-    }
-
-    render(
-      <LocalStorageColorSchemeProvider defaultColorSchemeMode="system">
-        <Test />
-      </LocalStorageColorSchemeProvider>
-    );
-
-    expect(colorScheme).toBe("dark");
-    expect(matchMedia).toHaveBeenCalledWith("(prefers-color-scheme: dark)");
-    expect(matchMedia).toHaveBeenCalledTimes(2);
-  });
-
-  it("should set the initial value to the stored value in local storage if it is valid", () => {
-    const localStorageKey = "colorScheme";
-    localStorage.setItem(localStorageKey, "light");
-    render(
-      <LocalStorageColorSchemeProvider
-        localStorageKey={localStorageKey}
-        defaultColorSchemeMode="system"
-      >
-        <ControllableTest />
-      </LocalStorageColorSchemeProvider>
-    );
-
-    expect(screen.getByRole("checkbox", { name: "Light" })).toBeChecked();
-    expect(localStorage.getItem(localStorageKey)).toBe("light");
-  });
-
-  it("should set the initial value to the defaultColorSchemeMode if there is an invalid value in local storage", () => {
-    const localStorageKey = "colorScheme";
-    localStorage.setItem(localStorageKey, "invalid");
-    render(
-      <LocalStorageColorSchemeProvider
-        localStorageKey={localStorageKey}
-        defaultColorSchemeMode="system"
-      >
-        <ControllableTest />
-      </LocalStorageColorSchemeProvider>
-    );
-
-    expect(screen.getByRole("checkbox", { name: "System" })).toBeChecked();
-    expect(localStorage.getItem(localStorageKey)).toBe("system");
-  });
-});

package/src/theme/__tests__/ThemeProvider.tsx

@@ -1,90 +0,0 @@
-import { beforeEach, describe, expect, it, jest } from "@jest/globals";
-import lodash from "lodash";
-import { render } from "../../test-utils/index.js";
-
-import {
-  DEFAULT_DARK_THEME,
-  DEFAULT_LIGHT_THEME,
-  ThemeProvider,
-  useTheme,
-  type ConfigurableThemeColors,
-} from "../ThemeProvider.js";
-
-beforeEach(() => {
-  jest.clearAllMocks();
-});
-
-describe("ThemeProvider", () => {
-  it("should throw an error if the useTheme hook is called without initializing the ThemeProvider", () => {
-    function Test(): null {
-      useTheme();
-      return null;
-    }
-
-    const error = jest.spyOn(console, "error");
-    // hide React uncaught error message
-    error.mockImplementation(() => {});
-
-    expect(() => render(<Test />)).toThrow(
-      "The `ThemeProvider` has not been initialized."
-    );
-  });
-
-  it("should attempt to derive the theme from the documentElement if the theme prop is not provided", () => {
-    const defaultComputedStyle = window.getComputedStyle(
-      document.documentElement
-    );
-    const getComputedStyle = jest
-      .spyOn(window, "getComputedStyle")
-      .mockReturnValue({
-        ...defaultComputedStyle,
-        getPropertyValue(property) {
-          const name = lodash.camelCase(
-            property.replace("--rmd-", "")
-          ) as "backgroundColor";
-          return DEFAULT_LIGHT_THEME[name] ?? "";
-        },
-      });
-
-    let theme: ConfigurableThemeColors | undefined;
-    function Test(): null {
-      theme = useTheme();
-      return null;
-    }
-
-    render(
-      <ThemeProvider>
-        <Test />
-      </ThemeProvider>
-    );
-
-    expect(getComputedStyle).toHaveBeenCalledTimes(1);
-    expect(theme).toEqual({
-      ...DEFAULT_LIGHT_THEME,
-      derived: true,
-      setDerivedTheme: expect.any(Function),
-    });
-  });
-
-  it("should use the provided theme if it was provided", () => {
-    const getComputedStyle = jest.spyOn(window, "getComputedStyle");
-    let theme: ConfigurableThemeColors | undefined;
-    function Test(): null {
-      theme = useTheme();
-      return null;
-    }
-
-    render(
-      <ThemeProvider theme={DEFAULT_DARK_THEME}>
-        <Test />
-      </ThemeProvider>
-    );
-
-    expect(getComputedStyle).not.toHaveBeenCalled();
-    expect(theme).toEqual({
-      ...DEFAULT_DARK_THEME,
-      derived: false,
-      setDerivedTheme: expect.any(Function),
-    });
-  });
-});

package/src/theme/__tests__/__snapshots__/useCSSVariables.tsx.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`useCSSVariables should allow for a custom root node using refs 1`] = `
-<div
-  data-testid="div"
-  style="--test: 100px;"
->
-  <button
-    type="button"
-  >
-    Style
-  </button>
-</div>
-`;
-
-exports[`useCSSVariables should allow for a custom root node using refs 2`] = `
-<div
-  data-testid="div"
-  style="--test: 100px; background: red;"
->
-  <button
-    type="button"
-  >
-    Style
-  </button>
-</div>
-`;

package/src/theme/__tests__/__snapshots__/useColorSchemeMetaTag.tsx.snap

@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`useColorSchemeMetaTag should modify create and update a color-scheme meta tag for the current color scheme 1`] = `
-<meta
-  content="light"
-  name="color-scheme"
-/>
-`;
-
-exports[`useColorSchemeMetaTag should modify create and update a color-scheme meta tag for the current color scheme 2`] = `
-<meta
-  content="dark"
-  name="color-scheme"
-/>
-`;

package/src/theme/__tests__/useCSSVariables.tsx

@@ -1,177 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import {
-  useMemo,
-  useRef,
-  useState,
-  type CSSProperties,
-  type ReactElement,
-  type RefObject,
-} from "react";
-import { fireEvent, render, screen } from "../../test-utils/index.js";
-
-import { textPrimaryColorVar } from "../cssVars.js";
-import { type CSSVariableName, type DefinedCSSVariableName } from "../types.js";
-import {
-  useCSSVariables,
-  type ReadonlyCSSVariableList,
-} from "../useCSSVariables.js";
-
-declare module "react" {
-  interface CSSProperties {
-    "--test-defined"?: string | number;
-  }
-}
-
-describe("useCSSVariables", () => {
-  it("should modify the html element with the custom properties by default", () => {
-    function Test(): null {
-      useCSSVariables([{ name: "--test", value: "3rem" }]);
-      return null;
-    }
-
-    const html = document.documentElement;
-    expect(html.style.getPropertyValue("--test")).toBe("");
-
-    const { unmount } = render(<Test />);
-    expect(html.style.getPropertyValue("--test")).toBe("3rem");
-
-    unmount();
-    expect(html.style.getPropertyValue("--test")).toBe("");
-  });
-
-  it("should return a style object if the local argument is `true`", () => {
-    let style: CSSProperties | undefined;
-    function Test(): ReactElement {
-      // this is an error because the global CSSProperties have not been augmented
-      // @ts-expect-error
-      style = useCSSVariables([{ name: "--test", value: "3rem" }], true);
-
-      // this one should work without issue since it was added at the top of the test
-      const _style2 = useCSSVariables(
-        [{ name: "--test-defined", value: "1" }],
-        true
-      );
-      return <div style={style} />;
-    }
-
-    const html = document.documentElement;
-    expect(html.style.getPropertyValue("--test")).toBe("");
-
-    const { unmount } = render(<Test />);
-    expect(html.style.getPropertyValue("--test")).toBe("");
-    expect(style).toEqual({ "--test": "3rem" });
-
-    unmount();
-    expect(html.style.getPropertyValue("--test")).toBe("");
-  });
-
-  it("should warn about overriding variables for non-production environments", () => {
-    expect(process.env.NODE_ENV).not.toBe("production");
-    const html = document.documentElement;
-    const warn = jest.spyOn(console, "warn").mockImplementation(() => {});
-    html.style.setProperty("--test", "1rem");
-
-    function Test(): null {
-      useCSSVariables([{ name: "--test", value: "3rem" }]);
-      return null;
-    }
-
-    expect(warn).not.toHaveBeenCalled();
-    render(<Test />);
-    expect(warn).toHaveBeenCalledWith(
-      `The "--test" css variable has already been set to "1rem" ` +
-        `on the root element and will be overwritten to "3rem". There might be conflicting overrides.`
-    );
-  });
-
-  it("should allow for a custom root node using refs", () => {
-    function Child(props: { rootRef: RefObject<HTMLElement> }): null {
-      const { rootRef } = props;
-
-      const variables = useMemo<ReadonlyCSSVariableList<CSSVariableName>>(
-        () => [{ name: "--test", value: "100px" }],
-        []
-      );
-      useCSSVariables(variables, rootRef);
-
-      return null;
-    }
-
-    function Test(): ReactElement {
-      const rootRef = useRef<HTMLDivElement>(null);
-      const [style, setStyle] = useState<CSSProperties | undefined>();
-
-      return (
-        <div data-testid="div" ref={rootRef} style={style}>
-          <button
-            type="button"
-            onClick={() => {
-              setStyle({ background: "red" });
-            }}
-          >
-            Style
-          </button>
-          <Child rootRef={rootRef} />
-        </div>
-      );
-    }
-
-    render(<Test />);
-    const div = screen.getByTestId("div");
-    const button = screen.getByRole("button", { name: "Style" });
-
-    expect(div.style.getPropertyValue("--test")).toBe("100px");
-    expect(div).toMatchSnapshot();
-
-    // this is just to make sure that adding inline style does not remove the
-    // custom properties
-    fireEvent.click(button);
-    expect(div.style.getPropertyValue("--test")).toBe("100px");
-    expect(div.style.backgroundColor).toBe("red");
-    expect(div).toMatchSnapshot();
-  });
-
-  it("should allow strictly typing the css variable names to react-md theme variables", () => {
-    function Test(): null {
-      useCSSVariables<DefinedCSSVariableName>([
-        {
-          name: "--rmd-background-color",
-          value: "#000",
-        },
-        {
-          name: textPrimaryColorVar,
-          value: "rgba(0, 0, 0, 0.12)",
-        },
-        {
-          // @ts-expect-error
-          name: "--rdm-on-primary-color",
-          value: "orange",
-        },
-        // @ts-expect-error
-        { name: "--test", value: "3rem" },
-      ]);
-      return null;
-    }
-
-    const html = document.documentElement;
-    expect(html.style.getPropertyValue("--rmd-background-color")).toBe("");
-    expect(html.style.getPropertyValue(textPrimaryColorVar)).toBe("");
-    expect(html.style.getPropertyValue("--rdm-on-primary-color")).toBe("");
-    expect(html.style.getPropertyValue("--test")).toBe("");
-
-    const { unmount } = render(<Test />);
-    expect(html.style.getPropertyValue("--rmd-background-color")).toBe("#000");
-    expect(html.style.getPropertyValue(textPrimaryColorVar)).toBe(
-      "rgba(0, 0, 0, 0.12)"
-    );
-    expect(html.style.getPropertyValue("--rdm-on-primary-color")).toBe(
-      "orange"
-    );
-    expect(html.style.getPropertyValue("--test")).toBe("3rem");
-
-    unmount();
-    expect(html.style.getPropertyValue("--rmd-background-color")).toBe("");
-    expect(html.style.getPropertyValue("--rdm-on-primary-color")).toBe("");
-    expect(html.style.getPropertyValue("--test")).toBe("");
-  });
-});

package/src/theme/__tests__/useColorSchemeMetaTag.tsx

@@ -1,36 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { render } from "../../test-utils/index.js";
-import {
-  useColorSchemeMetaTag,
-  type ColorSchemeMetaTagOptions,
-} from "../useColorSchemeMetaTag.js";
-
-const getColorSchemeMetaTag = (): HTMLMetaElement | null =>
-  document.querySelector('meta[name="color-scheme"]');
-
-function Test(props: ColorSchemeMetaTagOptions): null {
-  useColorSchemeMetaTag(props);
-
-  return null;
-}
-
-describe("useColorSchemeMetaTag", () => {
-  it("should modify create and update a color-scheme meta tag for the current color scheme", () => {
-    expect(getColorSchemeMetaTag()).toBe(null);
-    const { rerender } = render(<Test colorScheme="light" />);
-
-    let meta = getColorSchemeMetaTag();
-    expect(meta).toHaveAttribute("content", "light");
-    expect(meta).toMatchSnapshot();
-
-    rerender(<Test colorScheme="dark" />);
-    expect(meta).not.toBeInTheDocument();
-    meta = getColorSchemeMetaTag();
-    expect(meta).toHaveAttribute("content", "dark");
-    expect(meta).toMatchSnapshot();
-
-    rerender(<Test colorScheme="dark" disabled />);
-    expect(meta).not.toBeInTheDocument();
-    expect(getColorSchemeMetaTag()).toBe(null);
-  });
-});