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

package/src/form/__tests__/useFormReset.tsx

@@ -1,194 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { useRef, useState, type ReactElement } from "react";
-import { Button } from "../../button/Button.js";
-import { act, rmdRender, screen, userEvent } from "../../test-utils/index.js";
-import { useFormReset } from "../useFormReset.js";
-
-interface TestImplementationProps {
-  form?: string;
-  defaultValue?: string;
-}
-
-function TestImplementation({
-  form,
-  defaultValue = "Default Value",
-}: TestImplementationProps): ReactElement {
-  const elementRef = useRef<HTMLInputElement>(null);
-  const [value, setValue] = useState(defaultValue);
-  useFormReset({
-    form,
-    elementRef,
-    defaultValue,
-  });
-
-  return (
-    <label>
-      Input
-      <input
-        ref={elementRef}
-        form={form}
-        type="text"
-        value={value}
-        onChange={(event) => setValue(event.currentTarget.value)}
-      />
-    </label>
-  );
-}
-
-describe("useFormReset", () => {
-  it("should reset the value when a form is reset", async () => {
-    const user = userEvent.setup();
-    const onReset = jest.fn();
-    function Test(): ReactElement {
-      return (
-        <form name="form" onReset={onReset}>
-          <TestImplementation />
-          <Button type="reset">Reset</Button>
-        </form>
-      );
-    }
-
-    rmdRender(<Test />);
-
-    const form = screen.getByRole<HTMLFormElement>("form");
-    const reset = screen.getByRole("button", { name: "Reset" });
-    const input = screen.getByRole("textbox", { name: "Input" });
-
-    expect(input).toHaveValue("Default Value");
-    await user.click(reset);
-    expect(onReset).toHaveBeenCalledTimes(1);
-
-    await user.clear(input);
-    await user.type(input, "New Value");
-    expect(input).toHaveValue("New Value");
-    await user.click(reset);
-    expect(onReset).toHaveBeenCalledTimes(2);
-    expect(input).toHaveValue("Default Value");
-
-    await user.clear(input);
-    await user.type(input, "New Value");
-    expect(input).toHaveValue("New Value");
-    act(() => {
-      form.reset();
-    });
-    expect(onReset).toHaveBeenCalledTimes(3);
-    expect(input).toHaveValue("Default Value");
-  });
-
-  it("should be able to find a form by using the form prop", async () => {
-    const user = userEvent.setup();
-    function Test(): ReactElement {
-      return (
-        <>
-          <TestImplementation form="main-form" />
-          <form id="main-form" name="form">
-            <Button type="reset">Reset</Button>
-          </form>
-        </>
-      );
-    }
-
-    rmdRender(<Test />);
-
-    const reset = screen.getByRole("button", { name: "Reset" });
-    const input = screen.getByRole("textbox", { name: "Input" });
-    await user.clear(input);
-    await user.type(input, "New Value");
-    expect(input).toHaveValue("New Value");
-    await user.click(reset);
-    expect(input).toHaveValue("Default Value");
-  });
-
-  it("should do nothing if an elementRef was not set", async () => {
-    const user = userEvent.setup();
-    const onReset = jest.fn();
-
-    function Broken(): ReactElement {
-      const elementRef = useRef<HTMLInputElement>(null);
-      const [value, setValue] = useState("Default Value");
-      useFormReset({
-        elementRef,
-        defaultValue: "Default Value",
-      });
-
-      return (
-        <label>
-          Input
-          <input
-            type="text"
-            value={value}
-            onChange={(event) => setValue(event.currentTarget.value)}
-          />
-        </label>
-      );
-    }
-
-    function Test(): ReactElement {
-      return (
-        <form name="form" onReset={onReset}>
-          <Broken />
-          <Button type="reset">Reset</Button>
-        </form>
-      );
-    }
-
-    rmdRender(<Test />);
-    const reset = screen.getByRole("button", { name: "Reset" });
-    const input = screen.getByRole("textbox", { name: "Input" });
-
-    await user.clear(input);
-    await user.type(input, "New Value");
-    expect(input).toHaveValue("New Value");
-
-    await user.click(reset);
-    expect(input).toHaveValue("New Value");
-  });
-
-  it("should do nothing if a form cannot be found", async () => {
-    const user = userEvent.setup();
-    const onReset = jest.fn();
-
-    function Broken(): ReactElement {
-      const elementRef = useRef<HTMLInputElement>(null);
-      const [value, setValue] = useState("Default Value");
-      useFormReset({
-        elementRef,
-        defaultValue: "Default Value",
-      });
-
-      return (
-        <label>
-          Input
-          <input
-            ref={elementRef}
-            type="text"
-            value={value}
-            onChange={(event) => setValue(event.currentTarget.value)}
-          />
-        </label>
-      );
-    }
-
-    function Test(): ReactElement {
-      return (
-        <>
-          <Broken />
-          <form name="form" onReset={onReset}>
-            <Button type="reset">Reset</Button>
-          </form>
-        </>
-      );
-    }
-
-    rmdRender(<Test />);
-    const reset = screen.getByRole("button", { name: "Reset" });
-    const input = screen.getByRole("textbox", { name: "Input" });
-
-    await user.clear(input);
-    await user.type(input, "New Value");
-    expect(input).toHaveValue("New Value");
-
-    await user.click(reset);
-    expect(input).toHaveValue("New Value");
-  });
-});

package/src/form/__tests__/useRadioGroup.tsx

@@ -1,227 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { type ReactElement } from "react";
-import { fireEvent, render, screen } from "../../test-utils/index.js";
-
-import { Button } from "../../button/Button.js";
-import { AppSizeProvider } from "../../media-queries/AppSizeProvider.js";
-import { DropdownMenu } from "../../menu/DropdownMenu.js";
-import { Form } from "../Form.js";
-import { MenuItemRadio } from "../MenuItemRadio.js";
-import { Radio } from "../Radio.js";
-import { useRadioGroup } from "../useRadioGroup.js";
-
-describe("useRadioGroup", () => {
-  it("should not check any radio elements by default", () => {
-    function Test(): ReactElement {
-      const { getRadioProps } = useRadioGroup({ name: "example" });
-
-      return (
-        <Form>
-          <Radio {...getRadioProps("a")} label="First" />
-          <Radio {...getRadioProps("b")} label="Second" />
-          <Radio {...getRadioProps("c")} label="Third" />
-          <Radio {...getRadioProps("d")} label="Forth" />
-        </Form>
-      );
-    }
-
-    const { container } = render(<Test />);
-
-    const radio1 = screen.getByRole("radio", { name: "First" });
-    const radio2 = screen.getByRole("radio", { name: "Second" });
-    const radio3 = screen.getByRole("radio", { name: "Third" });
-    const radio4 = screen.getByRole("radio", { name: "Forth" });
-    expect(radio1).toHaveAttribute("value", "a");
-    expect(radio2).toHaveAttribute("value", "b");
-    expect(radio3).toHaveAttribute("value", "c");
-    expect(radio4).toHaveAttribute("value", "d");
-    expect(radio1).not.toBeChecked();
-    expect(radio2).not.toBeChecked();
-    expect(radio3).not.toBeChecked();
-    expect(radio4).not.toBeChecked();
-    expect(container).toMatchSnapshot();
-
-    fireEvent.click(radio1);
-    expect(radio1).toBeChecked();
-    expect(radio2).not.toBeChecked();
-    expect(radio3).not.toBeChecked();
-    expect(radio4).not.toBeChecked();
-    expect(container).toMatchSnapshot();
-
-    fireEvent.click(radio1);
-    expect(radio1).toBeChecked();
-    expect(radio2).not.toBeChecked();
-    expect(radio3).not.toBeChecked();
-    expect(radio4).not.toBeChecked();
-    expect(container).toMatchSnapshot();
-
-    fireEvent.click(radio3);
-    expect(radio1).not.toBeChecked();
-    expect(radio2).not.toBeChecked();
-    expect(radio3).toBeChecked();
-    expect(radio4).not.toBeChecked();
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should support creating a required radio group", () => {
-    const onInvalid = jest.fn();
-    function Test(): ReactElement {
-      const { getRadioProps } = useRadioGroup({
-        name: "example",
-        required: true,
-        onInvalid,
-      });
-
-      return (
-        <Form>
-          <Radio {...getRadioProps("a")} label="First" />
-          <Radio {...getRadioProps("b")} label="Second" />
-          <Radio {...getRadioProps("c")} label="Third" />
-          <Radio {...getRadioProps("d")} label="Forth" />
-          <Button type="submit">Submit</Button>
-        </Form>
-      );
-    }
-
-    const { container } = render(<Test />);
-    expect(onInvalid).not.toHaveBeenCalled();
-
-    const submit = screen.getByRole("button", { name: "Submit" });
-    const radio1 = screen.getByRole("radio", { name: "First" });
-
-    fireEvent.click(submit);
-
-    expect(onInvalid).toHaveBeenCalledTimes(4);
-    expect(container).toMatchSnapshot();
-
-    fireEvent.click(radio1);
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should support a default value and inferring the valid types from that default value", () => {
-    type ExampleValue = "a" | "b" | "c" | "d";
-
-    const onChange = jest.fn();
-    const defaultValue: ExampleValue = "a";
-
-    function Test(): ReactElement {
-      const { getRadioProps } = useRadioGroup({
-        name: "example",
-        onChange,
-        defaultValue,
-      });
-
-      // @ts-expect-error
-      getRadioProps("invalid");
-
-      return (
-        <Form>
-          <Radio {...getRadioProps("a")} label="First" />
-          <Radio {...getRadioProps("b")} label="Second" />
-          <Radio {...getRadioProps("c")} label="Third" />
-          <Radio {...getRadioProps("d")} label="Forth" />
-        </Form>
-      );
-    }
-
-    render(<Test />);
-
-    const radio1 = screen.getByRole("radio", { name: "First" });
-    const radio2 = screen.getByRole("radio", { name: "Second" });
-    expect(onChange).not.toHaveBeenCalled();
-    expect(radio1).toBeChecked();
-    expect(radio2).not.toBeChecked();
-
-    fireEvent.click(radio1);
-    expect(onChange).not.toHaveBeenCalled();
-    expect(radio1).toBeChecked();
-    expect(radio2).not.toBeChecked();
-
-    fireEvent.click(radio2);
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(radio1).not.toBeChecked();
-    expect(radio2).toBeChecked();
-  });
-
-  it("should support resetting to the default value", () => {
-    function Test(): ReactElement {
-      const { getRadioProps, reset } = useRadioGroup({
-        name: "example",
-        defaultValue: () => "c",
-      });
-
-      return (
-        <Form onReset={reset}>
-          <Radio {...getRadioProps("a")} label="First" />
-          <Radio {...getRadioProps("b")} label="Second" />
-          <Radio {...getRadioProps("c")} label="Third" />
-          <Radio {...getRadioProps("d")} label="Forth" />
-          <Button type="reset">Reset</Button>
-        </Form>
-      );
-    }
-
-    render(<Test />);
-
-    const radio1 = screen.getByRole("radio", { name: "First" });
-    const radio2 = screen.getByRole("radio", { name: "Second" });
-    const radio3 = screen.getByRole("radio", { name: "Third" });
-    const radio4 = screen.getByRole("radio", { name: "Forth" });
-    expect(radio1).not.toBeChecked();
-    expect(radio2).not.toBeChecked();
-    expect(radio3).toBeChecked();
-    expect(radio4).not.toBeChecked();
-
-    fireEvent.click(radio2);
-    expect(radio1).not.toBeChecked();
-    expect(radio2).toBeChecked();
-    expect(radio3).not.toBeChecked();
-    expect(radio4).not.toBeChecked();
-
-    fireEvent.click(screen.getByRole("button", { name: "Reset" }));
-    expect(radio1).not.toBeChecked();
-    expect(radio2).not.toBeChecked();
-    expect(radio3).toBeChecked();
-    expect(radio4).not.toBeChecked();
-  });
-
-  it("should support rendering within a menu", () => {
-    type Value = 1 | 2 | 3 | 4;
-
-    function Test() {
-      const { getRadioProps } = useRadioGroup<Value>({
-        menu: true,
-        defaultValue: 3,
-      });
-
-      return (
-        <DropdownMenu buttonChildren="Toggle">
-          <MenuItemRadio {...getRadioProps(1)}>First</MenuItemRadio>
-          <MenuItemRadio {...getRadioProps(2)}>Second</MenuItemRadio>
-          <MenuItemRadio {...getRadioProps(3)}>Third</MenuItemRadio>
-          <MenuItemRadio {...getRadioProps(4)}>Forth</MenuItemRadio>
-        </DropdownMenu>
-      );
-    }
-
-    render(<Test />, { wrapper: AppSizeProvider });
-
-    fireEvent.click(screen.getByRole("button", { name: "Toggle" }));
-    expect(screen.getByRole("menu")).toMatchSnapshot();
-
-    const radio1 = screen.getByRole("menuitemradio", { name: "First" });
-    const radio2 = screen.getByRole("menuitemradio", { name: "Second" });
-    const radio3 = screen.getByRole("menuitemradio", { name: "Third" });
-    const radio4 = screen.getByRole("menuitemradio", { name: "Forth" });
-    expect(radio1).not.toBeChecked();
-    expect(radio2).not.toBeChecked();
-    expect(radio3).toBeChecked();
-    expect(radio4).not.toBeChecked();
-
-    fireEvent.click(radio1);
-    expect(radio1).toBeChecked();
-    expect(radio2).not.toBeChecked();
-    expect(radio3).not.toBeChecked();
-    expect(radio4).not.toBeChecked();
-  });
-});

package/src/form/__tests__/utils.ts

@@ -1,247 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import type { FileUploadStats } from "../fileUtils.js";
-import {
-  FileAccessError,
-  FileExtensionError,
-  FileSizeError,
-  GenericFileError,
-  getFileParser,
-  getSplitFileUploads,
-  isFileAccessError,
-  isFileExtensionError,
-  isGenericFileError,
-  isValidFileName,
-  TooManyFilesError,
-  validateFiles,
-} from "../fileUtils.js";
-
-function createFile(name: string, bytes: number): File {
-  const content = new Uint8Array(bytes);
-  for (let i = 0; i < bytes; i += 1) {
-    content[i] = 32 + i;
-  }
-
-  return new File([content.buffer], name);
-}
-
-const file = new File(["pretend-bytes"], "file1.txt");
-const png = new File([""], "file.png");
-const apng = new File([""], "file.apng");
-const avif = new File([""], "file.avif");
-const tiff = new File([""], "file.tiff");
-const gif = new File([""], "file.gif");
-const gifv = new File([""], "file.gifv");
-const jpg = new File([""], "file.jpg");
-const jpeg = new File([""], "file.jpeg");
-const mp3 = new File([""], "file.mp3");
-const wav = new File([""], "file.wav");
-const ogg = new File([""], "file.ogg");
-const m4p = new File([""], "file.m4p");
-const flac = new File([""], "file.flac");
-const mkv = new File([""], "file.mkv");
-const mpeg = new File([""], "file.mpeg");
-const mpg = new File([""], "file.mpg");
-const mov = new File([""], "file.mov");
-const avi = new File([""], "file.avi");
-const flv = new File([""], "file.flv");
-const webm = new File([""], "file.webm");
-const mp4 = new File([""], "file.mp4");
-const js = new File([""], "file.js");
-const jsx = new File([""], "file.jsx");
-const ts = new File([""], "file.ts");
-const tsx = new File([""], "file.tsx");
-const json = new File([""], "file.json");
-const lock = new File([""], "file.lock");
-const hbs = new File([""], "file.hbs");
-const yml = new File([""], "file.yml");
-const yaml = new File([""], "file.yaml");
-const log = new File([""], "file.log");
-const txt = new File([""], "file.txt");
-const md = new File([""], "file.md");
-
-const MEDIA_LIKE_FILES = [
-  png,
-  apng,
-  avif,
-  tiff,
-  gif,
-  gifv,
-  jpg,
-  jpeg,
-  mp3,
-  wav,
-  ogg,
-  m4p,
-  flac,
-  mkv,
-  mpeg,
-  mpg,
-  mov,
-  avi,
-  flv,
-  webm,
-  mp4,
-] as const;
-const TEXT_LIKE_FILES = [
-  js,
-  jsx,
-  ts,
-  tsx,
-  json,
-  lock,
-  hbs,
-  yml,
-  yaml,
-  log,
-  txt,
-  md,
-] as const;
-
-describe("isGenericFileError", () => {
-  it("should return true for instances of GenericFileError", () => {
-    expect(isGenericFileError(new GenericFileError([file]))).toBe(true);
-    expect(isGenericFileError(new FileAccessError())).toBe(false);
-  });
-});
-
-describe("isFileAccessError", () => {
-  it("should return true for instances of FileAccessError", () => {
-    expect(isFileAccessError(new FileAccessError())).toBe(true);
-    expect(isFileAccessError(new GenericFileError([file]))).toBe(false);
-  });
-});
-
-describe("isFileExtensionError", () => {
-  it("should return true for instances of FileExtensionError", () => {
-    expect(isFileExtensionError(new FileExtensionError([file], ["png"]))).toBe(
-      true
-    );
-    expect(isFileExtensionError(new GenericFileError([file]))).toBe(false);
-  });
-});
-
-describe("getFileParser", () => {
-  it("should have reasonable defaults for known file extensions", () => {
-    MEDIA_LIKE_FILES.forEach((file) => {
-      expect(getFileParser(file)).toBe("readAsDataURL");
-    });
-    TEXT_LIKE_FILES.forEach((file) => {
-      expect(getFileParser(file)).toBe("readAsText");
-    });
-
-    expect(getFileParser(new File([""], "file.jar"))).toBe("readAsArrayBuffer");
-    expect(getFileParser(new File([""], "file.tar"))).toBe("readAsArrayBuffer");
-    expect(getFileParser(new File([""], "file.zip"))).toBe("readAsArrayBuffer");
-  });
-});
-
-describe("validateFiles", () => {
-  it("should prevent both maxFileSize and totalFileSize errors", () => {
-    const file1 = createFile("file1.txt", 1024);
-    const file2 = createFile("file2.txt", 2048);
-    const file3 = createFile("file3.txt", 1000);
-    const result1 = validateFiles([file1, file2], {
-      maxFiles: -1,
-      extensions: [],
-      minFileSize: -1,
-      maxFileSize: 1024,
-      totalBytes: 0,
-      totalFiles: 0,
-      totalFileSize: 1024,
-      isValidFileName,
-    });
-
-    const result2 = validateFiles([file1, file3], {
-      maxFiles: -1,
-      extensions: [],
-      minFileSize: -1,
-      maxFileSize: 1024,
-      totalBytes: 0,
-      totalFiles: 0,
-      totalFileSize: 2000,
-      isValidFileName,
-    });
-
-    expect(result1).toEqual({
-      pending: [file1],
-      errors: [new FileSizeError([file2], "max", 1024)],
-    });
-    expect(result2).toEqual({
-      pending: [file1],
-      errors: [new FileSizeError([file3], "total", 2000)],
-    });
-  });
-
-  it("should only return the TooManyFilesError if all the other validation succeeded", () => {
-    const file1 = createFile("file1.txt", 1024);
-    const file2 = createFile("file2.txt", 1024);
-    const file3 = createFile("file3.txt", 1000);
-    const file4 = createFile("file3.txt", 8000);
-    const file5 = createFile("file4.png", 1024);
-    const file6 = createFile("file6.txt", 1024);
-
-    const extensions = ["txt"];
-    const files = [file1, file2, file3, file4, file5, file6];
-
-    const result = validateFiles(files, {
-      maxFiles: 1,
-      extensions,
-      minFileSize: 1024,
-      maxFileSize: 2048,
-      totalBytes: 0,
-      totalFiles: 0,
-      totalFileSize: -1,
-      isValidFileName,
-    });
-    expect(result).toEqual({
-      pending: [file1],
-      errors: [
-        new FileExtensionError([file5], extensions),
-        new FileSizeError([file3], "min", 1024),
-        new FileSizeError([file4], "max", 2048),
-        new TooManyFilesError([file2, file6], 1),
-      ],
-    });
-  });
-});
-
-describe("getSplitFileUploads", () => {
-  it("should correctly split the file upload stats", () => {
-    const file1 = createFile("file1.txt", 1024);
-    const file2 = createFile("file2.txt", 2048);
-    const file3 = createFile("file3.txt", 1000);
-    const pending: FileUploadStats[] = [
-      {
-        key: "pending-key",
-        status: "pending",
-        file: file1,
-        progress: 0,
-      },
-    ];
-    const uploading: FileUploadStats[] = [
-      {
-        key: "uploading-key",
-        status: "uploading",
-        file: file2,
-        progress: 10,
-      },
-    ];
-    const complete: FileUploadStats[] = [
-      {
-        key: "complete-key",
-        status: "complete",
-        file: file3,
-        result: "fake-contents",
-        progress: 100,
-      },
-    ];
-
-    expect(
-      getSplitFileUploads([...pending, ...complete, ...uploading])
-    ).toEqual({
-      pending,
-      uploading,
-      complete,
-    });
-  });
-});