test(form): Added new for menu item tests

packages/form/package.json

@@ -56,6 +56,7 @@
     "classnames": "^2.3.1"
   },
   "devDependencies": {
+    "@react-md/menu": "^2.7.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.1"
   },

packages/form/src/menu/MenuItemInputToggle.tsx

@@ -178,13 +178,9 @@ export const MenuItemInputToggle = forwardRef<
       disableRipple
       aria-disabled={disabled || undefined}
       aria-checked={checked}
-      role={type === "radio" ? "radio" : "menuitemcheckbox"}
+      role={type === "radio" ? "menuitemradio" : "menuitemcheckbox"}
       onClick={(event) => {
         onClick?.(event);
-        if (event.isPropagationStopped()) {
-          return;
-        }
-
         onCheckedChange(!checked, event);
       }}
       ref={ref}

packages/form/src/menu/__tests__/MenuItemCheckbox.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { DropdownMenu } from "@react-md/menu";
+
+import { MenuItemCheckbox } from "../MenuItemCheckbox";
+
+describe("MenuItemCheckbox", () => {
+  it("should update the state and close the menu once clicked", () => {
+    function Test() {
+      const [checked, setChecked] = useState(false);
+
+      return (
+        <DropdownMenu
+          id="menu-id"
+          items={[
+            <MenuItemCheckbox
+              key="item-1"
+              id="menu-id-1"
+              checked={checked}
+              onCheckedChange={(nextChecked) => setChecked(nextChecked)}
+            >
+              Checkbox
+            </MenuItemCheckbox>,
+          ]}
+        >
+          Button
+        </DropdownMenu>
+      );
+    }
+    const { getByRole } = render(<Test />);
+    const button = getByRole("button", { name: "Button" });
+
+    fireEvent.click(button);
+
+    let checkbox = getByRole("menuitemcheckbox", { name: "Checkbox" });
+    expect(checkbox).toHaveAttribute("aria-checked", "false");
+    expect(checkbox).toMatchSnapshot();
+
+    fireEvent.click(checkbox);
+    waitFor(() => expect(checkbox).not.toBeInTheDocument());
+
+    fireEvent.click(button);
+    checkbox = getByRole("menuitemcheckbox", { name: "Checkbox" });
+    expect(checkbox).toHaveAttribute("aria-checked", "true");
+    expect(checkbox).toMatchSnapshot();
+  });
+});

packages/form/src/menu/__tests__/MenuItemInputToggle.tsx

@@ -0,0 +1,164 @@
+import React, { useState } from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { DropdownMenu } from "@react-md/menu";
+
+import {
+  BaseMenuItemInputToggleProps,
+  MenuItemInputToggle,
+} from "../MenuItemInputToggle";
+
+function Test({
+  iconAfter,
+  addon,
+  addonType,
+  addonPosition,
+  onClick,
+}: Partial<BaseMenuItemInputToggleProps>) {
+  const [checkboxChecked, setCheckboxChecked] = useState(false);
+  const [switchChecked, setSwitchChecked] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  return (
+    <DropdownMenu
+      id="menu-id"
+      items={[
+        <MenuItemInputToggle
+          key="checkbox-1"
+          id="menu-id-1"
+          type="checkbox"
+          checked={checkboxChecked}
+          onCheckedChange={(nextChecked) => setCheckboxChecked(nextChecked)}
+          onClick={onClick}
+          iconAfter={iconAfter}
+          addon={addon}
+          addonType={addonType}
+          addonPosition={addonPosition}
+        >
+          Checkbox
+        </MenuItemInputToggle>,
+        <MenuItemInputToggle
+          type="radio"
+          key="radio-1"
+          id="menu-id-2"
+          onClick={onClick}
+          checked={selectedIndex === 0}
+          onCheckedChange={() => {
+            setSelectedIndex(0);
+          }}
+          iconAfter={iconAfter}
+          addon={addon}
+          addonType={addonType}
+          addonPosition={addonPosition}
+        >
+          Radio 1
+        </MenuItemInputToggle>,
+        <MenuItemInputToggle
+          type="radio"
+          key="radio-2"
+          id="menu-id-3"
+          onClick={onClick}
+          checked={selectedIndex === 1}
+          onCheckedChange={() => {
+            setSelectedIndex(1);
+          }}
+          iconAfter={iconAfter}
+          addon={addon}
+          addonType={addonType}
+          addonPosition={addonPosition}
+        >
+          Radio 2
+        </MenuItemInputToggle>,
+        <MenuItemInputToggle
+          key="switch"
+          type="switch"
+          id="menu-id-4"
+          checked={switchChecked}
+          onCheckedChange={(nextChecked) => setSwitchChecked(nextChecked)}
+          onClick={onClick}
+          iconAfter={iconAfter}
+          addon={addon}
+          addonType={addonType}
+          addonPosition={addonPosition}
+        >
+          Switch
+        </MenuItemInputToggle>,
+      ]}
+    >
+      Button
+    </DropdownMenu>
+  );
+}
+
+describe("MenuItemInputToggle", () => {
+  it("should render correctly", () => {
+    const { getByRole, rerender } = render(<Test />);
+    const button = getByRole("button", { name: "Button" });
+    fireEvent.click(button);
+
+    let checkbox = getByRole("menuitemcheckbox", { name: "Checkbox" });
+    let radio1 = getByRole("menuitemradio", { name: "Radio 1" });
+    let radio2 = getByRole("menuitemradio", { name: "Radio 2" });
+    let switchEl = getByRole("menuitemcheckbox", { name: "Switch" });
+    expect(checkbox).toMatchSnapshot();
+    expect(checkbox).toHaveAttribute("aria-checked", "false");
+    expect(radio1).toMatchSnapshot();
+    expect(radio1).toHaveAttribute("aria-checked", "true");
+    expect(radio2).toMatchSnapshot();
+    expect(radio2).toHaveAttribute("aria-checked", "false");
+    expect(switchEl).toMatchSnapshot();
+    expect(switchEl).toHaveAttribute("aria-checked", "false");
+
+    fireEvent.click(checkbox);
+    waitFor(() => expect(checkbox).not.toBeInTheDocument());
+
+    fireEvent.click(button);
+    checkbox = getByRole("menuitemcheckbox", { name: "Checkbox" });
+    radio1 = getByRole("menuitemradio", { name: "Radio 1" });
+    radio2 = getByRole("menuitemradio", { name: "Radio 2" });
+    switchEl = getByRole("menuitemcheckbox", { name: "Switch" });
+    expect(checkbox).toMatchSnapshot();
+    expect(checkbox).toHaveAttribute("aria-checked", "true");
+    expect(radio1).toMatchSnapshot();
+    expect(radio1).toHaveAttribute("aria-checked", "true");
+    expect(radio2).toMatchSnapshot();
+    expect(radio2).toHaveAttribute("aria-checked", "false");
+    expect(switchEl).toMatchSnapshot();
+    expect(switchEl).toHaveAttribute("aria-checked", "false");
+
+    rerender(<Test iconAfter />);
+    fireEvent.click(button);
+    checkbox = getByRole("menuitemcheckbox", { name: "Checkbox" });
+    radio1 = getByRole("menuitemradio", { name: "Radio 1" });
+    radio2 = getByRole("menuitemradio", { name: "Radio 2" });
+    switchEl = getByRole("menuitemcheckbox", { name: "Switch" });
+    expect(checkbox).toMatchSnapshot();
+    expect(checkbox).toHaveAttribute("aria-checked", "true");
+    expect(radio1).toMatchSnapshot();
+    expect(radio1).toHaveAttribute("aria-checked", "true");
+    expect(radio2).toMatchSnapshot();
+    expect(radio2).toHaveAttribute("aria-checked", "false");
+    expect(switchEl).toMatchSnapshot();
+    expect(switchEl).toHaveAttribute("aria-checked", "false");
+
+    rerender(
+      <Test
+        addon={<span data-testid="addon" />}
+        addonType="media"
+        addonPosition="bottom"
+      />
+    );
+    fireEvent.click(button);
+    checkbox = getByRole("menuitemcheckbox", { name: "Checkbox" });
+    radio1 = getByRole("menuitemradio", { name: "Radio 1" });
+    radio2 = getByRole("menuitemradio", { name: "Radio 2" });
+    switchEl = getByRole("menuitemcheckbox", { name: "Switch" });
+    expect(checkbox).toMatchSnapshot();
+    expect(checkbox).toHaveAttribute("aria-checked", "true");
+    expect(radio1).toMatchSnapshot();
+    expect(radio1).toHaveAttribute("aria-checked", "true");
+    expect(radio2).toMatchSnapshot();
+    expect(radio2).toHaveAttribute("aria-checked", "false");
+    expect(switchEl).toMatchSnapshot();
+    expect(switchEl).toHaveAttribute("aria-checked", "false");
+  });
+});

packages/form/src/menu/__tests__/MenuItemRadio.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { DropdownMenu } from "@react-md/menu";
+
+import { MenuItemRadio } from "../MenuItemRadio";
+
+describe("MenuItemRadio", () => {
+  it("should update the state and close the menu once clicked", () => {
+    function Test() {
+      const [selectedIndex, setSelectedIndex] = useState(0);
+
+      return (
+        <DropdownMenu
+          id="menu-id"
+          items={[
+            <MenuItemRadio
+              key="item-1"
+              id="menu-id-1"
+              checked={selectedIndex === 0}
+              onCheckedChange={() => {
+                setSelectedIndex(0);
+              }}
+            >
+              Radio 1
+            </MenuItemRadio>,
+            <MenuItemRadio
+              key="item-2"
+              id="menu-id-2"
+              checked={selectedIndex === 1}
+              onCheckedChange={() => {
+                setSelectedIndex(1);
+              }}
+            >
+              Radio 2
+            </MenuItemRadio>,
+          ]}
+        >
+          Button
+        </DropdownMenu>
+      );
+    }
+    const { getByRole } = render(<Test />);
+    const button = getByRole("button", { name: "Button" });
+
+    fireEvent.click(button);
+
+    let radio1 = getByRole("menuitemradio", { name: "Radio 1" });
+    let radio2 = getByRole("menuitemradio", { name: "Radio 2" });
+    expect(radio1).toHaveAttribute("aria-checked", "true");
+    expect(radio2).toHaveAttribute("aria-checked", "false");
+    expect(radio1).toMatchSnapshot();
+    expect(radio2).toMatchSnapshot();
+
+    fireEvent.click(radio2);
+    waitFor(() => expect(radio1).not.toBeInTheDocument());
+
+    fireEvent.click(button);
+    radio1 = getByRole("menuitemradio", { name: "Radio 1" });
+    radio2 = getByRole("menuitemradio", { name: "Radio 2" });
+    expect(radio1).toHaveAttribute("aria-checked", "false");
+    expect(radio2).toHaveAttribute("aria-checked", "true");
+    expect(radio1).toMatchSnapshot();
+    expect(radio2).toMatchSnapshot();
+  });
+});

packages/form/src/menu/__tests__/MenuItemSwitch.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { DropdownMenu } from "@react-md/menu";
+
+import { MenuItemSwitch } from "../MenuItemSwitch";
+
+describe("MenuItemSwitch", () => {
+  it("should update the state and close the menu once clicked", () => {
+    function Test() {
+      const [checked, setChecked] = useState(false);
+
+      return (
+        <DropdownMenu
+          id="menu-id"
+          items={[
+            <MenuItemSwitch
+              key="item-1"
+              id="menu-id-1"
+              checked={checked}
+              onCheckedChange={(nextChecked) => setChecked(nextChecked)}
+            >
+              Switch
+            </MenuItemSwitch>,
+          ]}
+        >
+          Button
+        </DropdownMenu>
+      );
+    }
+    const { getByRole } = render(<Test />);
+    const button = getByRole("button", { name: "Button" });
+
+    fireEvent.click(button);
+
+    let switchEl = getByRole("menuitemcheckbox", { name: "Switch" });
+    expect(switchEl).toHaveAttribute("aria-checked", "false");
+    expect(switchEl).toMatchSnapshot();
+
+    fireEvent.click(switchEl);
+    waitFor(() => expect(switchEl).not.toBeInTheDocument());
+
+    fireEvent.click(button);
+    switchEl = getByRole("menuitemcheckbox", { name: "Switch" });
+    expect(switchEl).toHaveAttribute("aria-checked", "true");
+    expect(switchEl).toMatchSnapshot();
+  });
+});