@sproutsocial/seeds-react-menu 0.1.0 → 0.2.1

package/src/MenuItem/__tests__/MenuItem.test.tsx

@@ -1,18 +1,35 @@
 /* eslint-disable testing-library/no-unnecessary-act */
+import React from "react";
 import {
   screen,
   render,
   waitFor,
 } from "@sproutsocial/seeds-react-testing-library";
-import { PointerEventsCheckLevel } from "@testing-library/user-event";
+import {
+  PointerEventsCheckLevel,
+  type UserEvent,
+} from "@testing-library/user-event";
+import type { ByRoleMatcher, ByRoleOptions } from "@testing-library/react";
 import { theme } from "@sproutsocial/seeds-react-theme";
 import {
+  ActionMenu,
   MenuItem,
   MenuToggleButton,
   MenuContent,
-  ActionMenu,
+  MultiSelectMenu,
+  INPUT_TYPES,
 } from "../../index";
-import { TestWithMenuRoot } from "../../menuTestingUtils";
+import { TestWithMenuRoot, TestWithMockedMenu } from "../../menuTestingUtils";
+
+const books = [
+  {
+    index: 0,
+    id: "book-1",
+    author: "Harper Lee",
+    title: "To Kill a Mockingbird",
+  },
+  { index: 1, id: "book-2", author: "Lev Tolstoy", title: "War and Peace" },
+];
 
 const menuItemProps = {
   key: "book123",
@@ -31,198 +48,458 @@ const testMenuContext = {
   getItemProps: jest.fn((props) => ({ ...props })),
   isListbox: false,
 };
-const testTriggerElement = <MenuToggleButton>Open</MenuToggleButton>;
-
-describe("MenuItem User Behavior", () => {
-  describe("MenuItem is clickable", () => {
-    it("fires onClick event when clicked and not disabled", async () => {
-      const handleClick = jest.fn();
-      const { user } = render(
-        <TestWithMenuRoot
-          triggerElement={testTriggerElement}
-          {...testMenuContext}
-        >
-          <MenuContent>
-            <MenuItem {...menuItemProps} onClick={handleClick} />
-          </MenuContent>
-        </TestWithMenuRoot>
-      );
+const testMenuToggleElement = <MenuToggleButton>Open</MenuToggleButton>;
 
+const INTERACTION_TYPES = {
+  click: {
+    action: "clicking with mouse",
+    activate: async (
+      user: UserEvent,
+      role: ByRoleMatcher = "option",
+      options: ByRoleOptions = {}
+    ) => {
+      const firstItem = screen.getByRole(role, {
+        name: books[0].title,
+        ...options,
+      });
+      await user
+        .setup({
+          pointerEventsCheck: PointerEventsCheckLevel.Never,
+        })
+        .click(firstItem);
+    },
+    deactivate: async (
+      user: UserEvent,
+      role: ByRoleMatcher = "option",
+      options: ByRoleOptions = {}
+    ) => {
+      const firstItem = screen.getByRole(role, {
+        name: books[0].title,
+        ...options,
+      });
       await user
         .setup({
           pointerEventsCheck: PointerEventsCheckLevel.Never,
         })
-        .click(screen.getByRole("menuitem"));
+        .click(firstItem);
+    },
+  },
+  enter: {
+    action: "pressing the Enter key",
+    activate: async (user: UserEvent) => {
+      await user.keyboard("{arrowdown}{enter}");
+    },
+    deactivate: async (user: UserEvent) => {
+      await user.keyboard("{enter}");
+    },
+  },
+  space: {
+    action: "pressing the Space key",
+    activate: async (user: UserEvent) => {
+      await user.keyboard("{arrowdown} ");
+    },
+    deactivate: async (user: UserEvent) => {
+      await user.keyboard(" ");
+    },
+  },
+};
 
-      await waitFor(() => expect(handleClick).toHaveBeenCalledTimes(1));
+describe("MenuItem when not isListbox", () => {
+  describe("User Behavior", () => {
+    describe("is clickable", () => {
+      it("fires onClick event when clicked and not disabled", async () => {
+        const handleClick = jest.fn();
+        const { user } = render(
+          <TestWithMenuRoot
+            menuToggleElement={testMenuToggleElement}
+            {...testMenuContext}
+          >
+            <MenuContent>
+              <MenuItem {...menuItemProps} onClick={handleClick} />
+            </MenuContent>
+          </TestWithMenuRoot>
+        );
+
+        await user
+          .setup({
+            pointerEventsCheck: PointerEventsCheckLevel.Never,
+          })
+          .click(screen.getByRole("menuitem"));
+
+        await waitFor(() => expect(handleClick).toHaveBeenCalledTimes(1));
+      });
     });
-  });
 
-  describe("MenuItem can be triggered via keyboard", () => {
-    it(`fires onClick event when enter and not disabled`, async () => {
-      const handleClick = jest.fn();
-      const handleStateChange = jest.fn();
+    describe("MenuItem can be triggered via keyboard", () => {
+      it(`fires onClick event when enter and not disabled`, async () => {
+        const handleClick = jest.fn();
+        const handleStateChange = jest.fn();
+
+        const { user } = render(
+          <ActionMenu
+            menuToggleElement={testMenuToggleElement}
+            isOpen
+            onStateChange={handleStateChange}
+          >
+            <MenuContent>
+              <MenuItem
+                {...menuItemProps}
+                data-testid="menu-test"
+                key={0}
+                onKeyDown={handleClick}
+                tabIndex={0}
+              />
+            </MenuContent>
+          </ActionMenu>
+        );
+        const targetElem = screen.getByTestId("menu-test");
+
+        await user.tab();
+        expect(targetElem).toHaveFocus();
+
+        await user.keyboard("{enter}");
+
+        await waitFor(() =>
+          expect(handleStateChange).toHaveBeenCalledWith({
+            isOpen: false,
+            type: "__togglebutton_keydown_enter__",
+          })
+        );
+        expect(handleClick).toHaveBeenCalled();
+      });
+      it(`fires onClick event when space and not disabled`, async () => {
+        const handleClick = jest.fn();
+        const handleStateChange = jest.fn();
+
+        const { user } = render(
+          <ActionMenu
+            menuToggleElement={testMenuToggleElement}
+            isOpen
+            onStateChange={handleStateChange}
+          >
+            <MenuContent>
+              <MenuItem
+                {...menuItemProps}
+                data-testid="menu-test"
+                key={0}
+                onKeyDown={handleClick}
+                tabIndex={0}
+              />
+            </MenuContent>
+          </ActionMenu>
+        );
+        const targetElem = screen.getByTestId("menu-test");
+
+        await user.tab();
+        expect(targetElem).toHaveFocus();
+
+        await user.keyboard(" ");
+
+        await waitFor(() =>
+          expect(handleStateChange).toHaveBeenCalledWith({
+            isOpen: false,
+            type: "__togglebutton_keydown_space_button__",
+          })
+        );
+
+        expect(handleClick).toHaveBeenCalled();
+      });
+    });
+
+    test.each(Object.values(INTERACTION_TYPES))(
+      `does not fire onClick event when disabled and $action`,
+      async ({ activate }) => {
+        const handleClick = jest.fn();
+
+        const testItem = books[0];
+
+        const { user } = render(
+          <ActionMenu
+            menuToggleElement={<MenuToggleButton>Open</MenuToggleButton>}
+            isOpen
+          >
+            <MenuContent>
+              <MenuItem id={testItem.id} disabled={true} onClick={handleClick}>
+                {testItem.title}
+              </MenuItem>
+            </MenuContent>
+          </ActionMenu>
+        );
 
-      const { user } = render(
+        await activate(user, "menuitem");
+
+        expect(handleClick).not.toHaveBeenCalled();
+      }
+    );
+  });
+
+  describe("API", () => {
+    it("accepts children", () => {
+      render(
         <ActionMenu
-          triggerElement={testTriggerElement}
+          id="test-menu-item-selectable"
+          menuToggleElement={testMenuToggleElement}
           isOpen
-          onStateChange={handleStateChange}
         >
           <MenuContent>
-            <MenuItem
-              {...menuItemProps}
-              data-testid="menu-test"
-              key={0}
-              onKeyDown={handleClick}
-              tabIndex={0}
-            />
+            <MenuItem onClick={() => {}} id="test">
+              Hello world!
+              <span>testing</span>
+            </MenuItem>
           </MenuContent>
         </ActionMenu>
       );
-      const targetElem = screen.getByTestId("menu-test");
-
-      await user.tab();
-      expect(targetElem).toHaveFocus();
 
-      await user.keyboard("{enter}");
-
-      await waitFor(() =>
-        expect(handleStateChange).toHaveBeenCalledWith({
-          isOpen: false,
-          type: "__togglebutton_keydown_enter__",
-        })
-      );
-      expect(handleClick).toHaveBeenCalled();
+      const menuItem = screen.getByText("Hello world!");
+      const span = screen.getByText("testing");
+      expect(menuItem).toContainElement(span);
     });
-    it(`fires onClick event when space and not disabled`, async () => {
-      const handleClick = jest.fn();
-      const handleStateChange = jest.fn();
 
-      const { user } = render(
+    it("accepts box & system Props", () => {
+      render(
         <ActionMenu
-          triggerElement={testTriggerElement}
+          id="test-menu-item-selectable"
+          menuToggleElement={testMenuToggleElement}
           isOpen
-          onStateChange={handleStateChange}
         >
           <MenuContent>
-            <MenuItem
-              {...menuItemProps}
-              data-testid="menu-test"
-              key={0}
-              onKeyDown={handleClick}
-              tabIndex={0}
-            />
+            <MenuItem display="flex" p={300} onClick={() => {}} id="test">
+              Hello world!
+              <span>testing</span>
+            </MenuItem>
           </MenuContent>
         </ActionMenu>
       );
-      const targetElem = screen.getByTestId("menu-test");
 
-      await user.tab();
-      expect(targetElem).toHaveFocus();
+      const menuItem = screen.getByRole("menuitem");
+      expect(menuItem).toHaveStyle(`padding: ${theme.space[300]}`);
+      expect(menuItem).toHaveStyle(`display: flex`);
+    });
+  });
+});
 
-      await user.keyboard(" ");
+const testByType = {
+  [INPUT_TYPES.CHECKBOX]: {
+    isSelected: () => {
+      expect(
+        screen.getByRole("checkbox", { checked: true })
+      ).toBeInTheDocument();
+    },
+    isNotSelected: () => {
+      expect(
+        screen.queryByRole("checkbox", { checked: true })
+      ).not.toBeInTheDocument();
+    },
+  },
+  [INPUT_TYPES.RADIO]: {
+    isSelected: () => {
+      expect(screen.getByRole("radio", { checked: true })).toBeInTheDocument();
+    },
+    isNotSelected: () => {
+      expect(
+        screen.queryByRole("radio", { checked: true })
+      ).not.toBeInTheDocument();
+    },
+  },
+  [INPUT_TYPES.SWITCH]: {
+    isSelected: () => {
+      expect(screen.getByRole("switch", { checked: true })).toBeInTheDocument();
+    },
+    isNotSelected: () => {
+      expect(
+        screen.queryByRole("switch", { checked: true })
+      ).not.toBeInTheDocument();
+    },
+  },
+  [INPUT_TYPES.ICON]: {
+    isSelected: () => {
+      expect(
+        screen.getByDataQaLabel({ icon: "check-solid" })
+      ).toBeInTheDocument();
+    },
+    isNotSelected: () => {
+      expect(
+        screen.queryByDataQaLabel({ icon: "check-solid" })
+      ).not.toBeInTheDocument();
+    },
+  },
+};
 
-      await waitFor(() =>
-        expect(handleStateChange).toHaveBeenCalledWith({
-          isOpen: false,
-          type: "__togglebutton_keydown_space_button__",
-        })
-      );
+describe("MenuItem when isListbox", () => {
+  describe("User Behavior", () => {
+    describe.each([
+      INPUT_TYPES.CHECKBOX,
+      INPUT_TYPES.RADIO,
+      INPUT_TYPES.SWITCH,
+      INPUT_TYPES.ICON,
+    ])("when the input type is %s", (inputType) => {
+      test.each(Object.values(INTERACTION_TYPES))(
+        "can be checked and unchecked when $action",
+        async ({ activate, deactivate }) => {
+          const { user } = render(
+            <MultiSelectMenu
+              menuToggleElement={<MenuToggleButton>Open</MenuToggleButton>}
+              defaultIsOpen
+            >
+              <MenuContent>
+                {books.map((book) => {
+                  return (
+                    <MenuItem key={book.id} id={book.id} inputType={inputType}>
+                      {book.title}
+                    </MenuItem>
+                  );
+                })}
+              </MenuContent>
+            </MultiSelectMenu>
+          );
+
+          // check that menu is visible
+          expect(
+            screen.getByRole("option", {
+              name: books[0].title,
+              selected: false,
+            })
+          ).toBeInTheDocument();
+
+          // Check that checkboxes are rendered
+          if (inputType !== INPUT_TYPES.ICON)
+            expect(screen.getAllByRole(inputType)).toHaveLength(books.length);
+
+          // Perform the action to select the item
+          await activate(user);
+
+          expect(
+            await screen.findByRole("option", {
+              name: books[0].title,
+              selected: true,
+            })
+          ).toBeInTheDocument();
 
-      expect(handleClick).toHaveBeenCalled();
+          testByType[inputType].isSelected();
+
+          // Perform the action to deselect the item
+          deactivate(user);
+
+          expect(
+            await screen.findByRole("option", {
+              name: books[0].title,
+              selected: false,
+            })
+          ).toBeInTheDocument();
+
+          testByType[inputType].isNotSelected();
+        }
+      );
     });
+  });
 
-    it(`does not fire onClick event when disabled`, async () => {
-      const handleClick = jest.fn();
-      const handleStateChange = jest.fn();
-
-      const books = [
-        {
-          index: 0,
-          id: "book-1",
-          author: "Harper Lee",
-          title: "To Kill a Mockingbird",
-        },
-        {
-          index: 1,
-          id: "book-2",
-          author: "Lev Tolstoy",
-          title: "War and Peace",
-        },
-      ];
+  describe("API", () => {
+    test.each([INPUT_TYPES.CHECKBOX, INPUT_TYPES.RADIO, INPUT_TYPES.SWITCH])(
+      "supports %s input types",
+      (inputType) => {
+        const testItem = books[0];
+        render(
+          <TestWithMockedMenu context={{ items: books, isListbox: true }}>
+            <MenuItem id={testItem.id} inputType={inputType}>
+              {testItem.title}
+            </MenuItem>
+          </TestWithMockedMenu>
+        );
 
-      const testItem = books[0];
+        expect(screen.getByRole(inputType)).toBeInTheDocument();
+      }
+    );
 
-      const { user } = render(
-        <TestWithMenuRoot
-          triggerElement={<MenuToggleButton>Open</MenuToggleButton>}
-          {...{
-            ...testMenuContext,
-            items: books,
-            selectedItem: testItem,
-          }}
+    it("uses the check icon by default when no inputType provided", () => {
+      const testItem = books[0];
+      render(
+        <TestWithMockedMenu
+          context={{ items: books, selectedItem: testItem, isListbox: true }}
         >
-          <MenuItem
-            id={testItem.id}
-            disabled={true}
-            onClick={handleStateChange}
-          >
-            {testItem.title}
-          </MenuItem>
-        </TestWithMenuRoot>
+          <MenuItem id={testItem.id}>{testItem.title}</MenuItem>
+        </TestWithMockedMenu>
       );
-      await user
-        .setup({
-          pointerEventsCheck: PointerEventsCheckLevel.Never,
-        })
-        .click(screen.getByRole("menuitem"));
 
-      expect(handleClick).not.toHaveBeenCalled();
+      expect(
+        screen.getByDataQaLabel({ icon: "check-solid" })
+      ).toBeInTheDocument();
     });
-  });
-});
 
-describe("MenuItem API", () => {
-  it("accepts children", () => {
-    render(
-      <ActionMenu
-        id="test-menu-item-selectable"
-        triggerElement={testTriggerElement}
-        isOpen
-      >
-        <MenuContent>
-          <MenuItem onClick={() => {}} id="test">
-            Hello world!
-            <span>testing</span>
-          </MenuItem>
-        </MenuContent>
-      </ActionMenu>
-    );
+    describe.each([
+      INPUT_TYPES.CHECKBOX,
+      INPUT_TYPES.RADIO,
+      INPUT_TYPES.SWITCH,
+      INPUT_TYPES.ICON,
+    ])("when the input type is %s", (inputType) => {
+      it("enables it's checked state when selected in the context", () => {
+        const testItem = books[0];
+        render(
+          <TestWithMockedMenu
+            context={{ items: books, selectedItem: testItem, isListbox: true }}
+          >
+            <MenuItem id={testItem.id} inputType={inputType}>
+              {testItem.title}
+            </MenuItem>
+          </TestWithMockedMenu>
+        );
 
-    const menuItem = screen.getByText("Hello world!");
-    const span = screen.getByText("testing");
-    expect(menuItem).toContainElement(span);
-  });
+        screen.getByRole("option", { selected: true });
+        testByType[inputType].isSelected();
+      });
 
-  it("accepts box & system Props", () => {
-    render(
-      <ActionMenu
-        id="test-menu-item-selectable"
-        triggerElement={testTriggerElement}
-        isOpen
-      >
-        <MenuContent>
-          <MenuItem display="flex" p={300} onClick={() => {}} id="test">
-            Hello world!
-            <span>testing</span>
-          </MenuItem>
-        </MenuContent>
-      </ActionMenu>
-    );
+      it("enables it's checked state when selected by default", () => {
+        const testItem = books[0];
+        render(
+          <TestWithMenuRoot
+            menuToggleElement={<MenuToggleButton>Open</MenuToggleButton>}
+            {...{
+              isOpen: true,
+              items: books,
+              selectedItem: testItem,
+            }}
+          >
+            <MenuItem id={testItem.id} inputType={inputType}>
+              {testItem.title}
+            </MenuItem>
+          </TestWithMenuRoot>
+        );
 
-    const menuItem = screen.getByRole("menuitem");
-    expect(menuItem).toHaveStyle(`padding: ${theme.space[300]}`);
-    expect(menuItem).toHaveStyle(`display: flex`);
+        screen.getByRole("option", { selected: true });
+        testByType[inputType].isSelected();
+      });
+
+      it("allows its checked state to be deselected when using the context", async () => {
+        const testItem = books[0];
+        const TestItemWithState = () => {
+          const [selectedItem, setSelectedItem] = React.useState<
+            typeof testItem | undefined
+          >(testItem);
+          return (
+            <TestWithMockedMenu context={{ items: books, selectedItem }}>
+              <MenuItem
+                id={testItem.id}
+                inputType={inputType}
+                onClick={() => setSelectedItem(undefined)}
+              >
+                {testItem.title}
+              </MenuItem>
+            </TestWithMockedMenu>
+          );
+        };
+        const { user } = render(<TestItemWithState />);
+
+        const menuItem = screen.getByRole("option", { selected: true });
+        testByType[inputType].isSelected();
+
+        await user.click(menuItem);
+
+        expect(
+          await screen.findByRole("option", {
+            selected: false,
+          })
+        ).toBeInTheDocument();
+        testByType[inputType].isNotSelected();
+      });
+    });
   });
 });