@sproutsocial/seeds-react-menu 0.2.0 → 0.2.1

package/src/MultiSelectMenu/__tests__/MultiSelectMenu.test.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable testing-library/prefer-find-by */
+/* eslint-disable testing-library/no-wait-for-multiple-assertions */
 /* eslint-disable testing-library/no-unnecessary-act */
 import {
   MultiSelectMenu,
@@ -9,9 +11,6 @@ import {
 import {
   render,
   screen,
-  fireEvent,
-  act,
-  cleanup,
   waitFor,
 } from "@sproutsocial/seeds-react-testing-library";
 
@@ -23,11 +22,7 @@ const menuItems = [
 ];
 
 describe("MultiSelectMenu", () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  it("should render the menuItemSelectables when provided as children", async () => {
+  it("should render the MenuItems when provided as children", async () => {
     const { user } = render(
       <MultiSelectMenu
         menuToggleElement={
@@ -70,7 +65,7 @@ describe("MultiSelectMenu", () => {
     });
   });
 
-  xit("should allow for multiple items to be selected", async () => {
+  it("should allow for multiple items to be selected", async () => {
     const { user } = render(
       <MultiSelectMenu
         menuToggleElement={
@@ -113,20 +108,22 @@ describe("MultiSelectMenu", () => {
 
     await waitFor(() => {
       // Check that the first item is selected
-      expect(item1).toHaveAttribute("aria-checked", "true");
+      expect(item1).toHaveAttribute("aria-selected", "true");
     });
 
     // Select second item
-    // TODO: can this be done in the same act as the first item?
     await user.click(item2);
 
     await waitFor(() => {
       // Check that the second item is selected
-      expect(item2).toHaveAttribute("aria-checked", "true");
+      expect(item2).toHaveAttribute("aria-selected", "true");
     });
+
+    // check that first item is still selected
+    expect(item1).toHaveAttribute("aria-selected", "true");
   });
 
-  xit("Should maintain selected state when closed and reopened", async () => {
+  it("Should maintain selected state when closed and reopened", async () => {
     const { user } = render(
       <MultiSelectMenu
         menuToggleElement={
@@ -167,27 +164,29 @@ describe("MultiSelectMenu", () => {
     await user.click(item1);
 
     await waitFor(() => {
-      expect(item1).toHaveAttribute("aria-checked", "true");
+      expect(item1).toHaveAttribute("aria-selected", "true");
     });
 
     // Close Menu (MultiSelect does not close automatically)
     await user.click(toggleButton);
 
     // Make sure the menu is closed
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    await waitFor(() =>
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+    );
 
     // Open menu again
     await user.click(toggleButton);
 
-    await waitFor(() => {
-      // Make sure the menu is open
-      expect(screen.getByRole("listbox")).toBeInTheDocument();
-      // Make sure the item is still selected
-      expect(item1).toHaveAttribute("aria-checked", "true");
-    });
+    // Make sure the menu is open
+    await waitFor(() =>
+      expect(screen.getByRole("listbox")).toBeInTheDocument()
+    );
+    // Make sure the item is still selected
+    expect(item1).toHaveAttribute("aria-selected", "true");
   });
 
-  xit("should be able to navigate using the keyboard", async () => {
+  it("should be able to navigate using the keyboard", async () => {
     const { user } = render(
       <MultiSelectMenu
         menuToggleElement={
@@ -213,137 +212,139 @@ describe("MultiSelectMenu", () => {
       </MultiSelectMenu>
     );
 
-    const toggleButton = screen.getByRole("button", { name: "testable menu" });
+    // Open Menu
+    await user.keyboard("{Tab}{Enter}");
+    expect(await screen.findByRole("listbox")).toBeInTheDocument();
 
-    // Open Menu;
-    fireEvent.focus(toggleButton);
-    await user.keyboard("{Enter}");
+    // Check that the first item is highlighted
     await user.keyboard("{ArrowDown}");
-
-    await waitFor(() => {
-      // Check that the first item is highlighted
-      const item1 = screen.getByRole("option", { name: "Item 1" });
-      expect(item1).toHaveFocus();
-    });
+    expect(screen.getByRole("listbox")).toHaveAttribute(
+      "aria-activedescendant",
+      screen.getByRole("option", { name: "Item 1" }).getAttribute("id")
+    );
 
     // Select the first item
     await user.keyboard("{Enter}");
-    await user.keyboard("{ArrowDown}");
+
     // select the second item
+    await user.keyboard("{ArrowDown}");
     await user.keyboard(" ");
 
+    // Check that the second item is highlighted and selected
+    const item2 = screen.getByRole("option", { name: "Item 2" });
+    await waitFor(() => expect(item2).toHaveAttribute("aria-selected", "true"));
+    expect(screen.getByRole("listbox")).toHaveAttribute(
+      "aria-activedescendant",
+      item2.getAttribute("id")
+    );
+
+    // Check that the first item is still selected
+    const item1 = screen.getByRole("option", { name: "Item 1" });
+    expect(item1).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("Should work with a initially selected items", async () => {
+    const { user } = render(
+      <MultiSelectMenu
+        menuToggleElement={
+          <MenuToggleButton aria-label="testable menu" role="button">
+            Testable Menu
+          </MenuToggleButton>
+        }
+        selectedItems={[menuItems[1], menuItems[2]]}
+      >
+        <MenuContent>
+          <MenuGroup>
+            {menuItems.map((item) => (
+              <MenuItem
+                key={item.id}
+                id={item.id}
+                data-testid={item.id}
+                label={item.label}
+              >
+                {item.label}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </MultiSelectMenu>
+    );
+
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+    const toggleButton = screen.getByRole("button", {
+      name: "testable menu",
+    });
+
+    // Open Menu
+    await user.click(toggleButton);
+
+    const item1 = screen.getByRole("option", { name: "Item 1" });
+    const item2 = screen.getByRole("option", { name: "Item 2" });
+    const item3 = screen.getByRole("option", { name: "Item 3" });
+
     await waitFor(() => {
-      // Check that the second item is focused and selected
-      const item2 = screen.getByRole("option", { name: "Item 2" });
-      expect(item2).toHaveFocus();
-      expect(item2).toBeChecked();
-
-      // Check that the first item is still selected
-      const item1 = screen.getByRole("menuitem", { name: "Item 1" });
-      expect(item1).toBeChecked();
+      expect(item1).not.toHaveStyle("pointer-events: none");
     });
 
-    xit("should stay open after menu item selection", async () => {
-      const { user } = render(
-        <MultiSelectMenu
-          menuToggleElement={
-            <MenuToggleButton aria-label="testable menu" role="button">
-              Testable Menu
-            </MenuToggleButton>
-          }
-        >
-          <MenuContent>
-            <MenuGroup>
-              {menuItems.map((item) => (
-                <MenuItem
-                  key={item.id}
-                  id={item.id}
-                  data-testid={item.id}
-                  label={item.label}
-                >
-                  {item.label}
-                </MenuItem>
-              ))}
-            </MenuGroup>
-          </MenuContent>
-        </MultiSelectMenu>
-      );
-
-      const menuContentContainer = screen.queryByRole("listbox");
-
-      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-
-      const toggleButton = screen.getByRole("button", {
-        name: "testable menu",
-      });
-
-      // Open Menu
-      await user.click(toggleButton);
-
-      const item1 = screen.getByRole("option", { name: "Item 1" });
-
-      await waitFor(() => {
-        expect(item1).not.toHaveStyle("pointer-events: none");
-      });
-
-      // Select Item 1
-      await user.click(item1);
-
-      await waitFor(() => {
-        expect(menuContentContainer).toBeInTheDocument();
-      });
+    // Check that the first item is not selected
+    expect(item1).not.toHaveAttribute("aria-selected", "true");
+    // Check that the second item is selected
+    expect(item2).toHaveAttribute("aria-selected", "true");
+    // Check that the third item is selected
+    expect(item3).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("should stay open after menu item selection", async () => {
+    const mockSelectedItemsChange = jest.fn();
+    const { user } = render(
+      <MultiSelectMenu
+        menuToggleElement={
+          <MenuToggleButton aria-label="testable menu" role="button">
+            Testable Menu
+          </MenuToggleButton>
+        }
+        onSelectedItemsChange={mockSelectedItemsChange}
+      >
+        <MenuContent>
+          <MenuGroup>
+            {menuItems.map((item) => (
+              <MenuItem
+                key={item.id}
+                id={item.id}
+                data-testid={item.id}
+                label={item.label}
+              >
+                {item.label}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </MultiSelectMenu>
+    );
+
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+    const toggleButton = screen.getByRole("button", {
+      name: "testable menu",
     });
 
-    xit("Should work with a initially selected items", async () => {
-      const { user } = render(
-        <MultiSelectMenu
-          menuToggleElement={
-            <MenuToggleButton aria-label="testable menu" role="button">
-              Testable Menu
-            </MenuToggleButton>
-          }
-          defaultSelectedItems={[menuItems[1], menuItems[2]]}
-        >
-          <MenuContent>
-            <MenuGroup>
-              {menuItems.map((item) => (
-                <MenuItem
-                  key={item.id}
-                  id={item.id}
-                  data-testid={item.id}
-                  label={item.label}
-                >
-                  {item.label}
-                </MenuItem>
-              ))}
-            </MenuGroup>
-          </MenuContent>
-        </MultiSelectMenu>
-      );
-
-      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-
-      const toggleButton = screen.getByRole("button", {
-        name: "testable menu",
-      });
-
-      // Open Menu
-      await user.click(toggleButton);
-
-      const item1 = screen.getByRole("option", { name: "Item 1" });
-      const item2 = screen.getByRole("option", { name: "Item 2" });
-      const item3 = screen.getByRole("option", { name: "Item 3" });
-
-      await waitFor(() => {
-        expect(item1).not.toHaveStyle("pointer-events: none");
-      });
-
-      act(() => {
-        // Check that the second item is selected
-        expect(item2).toHaveAttribute("aria-checked", "true");
-        // Check that the third item is selected
-        expect(item3).toHaveAttribute("aria-checked", "true");
-      });
+    // Open Menu
+    await user.click(toggleButton);
+
+    const item1 = screen.getByRole("option", { name: "Item 1" });
+
+    await waitFor(() => {
+      expect(item1).not.toHaveStyle("pointer-events: none");
     });
+
+    // Select Item 1
+    await user.click(item1);
+
+    // Check that the menu is still open
+    expect(await screen.findByRole("listbox")).toBeInTheDocument();
+
+    // Check that callback called
+    expect(mockSelectedItemsChange).toHaveBeenCalledTimes(1);
   });
 });

package/src/SingleSelectMenu/SingleSelectMenu.tsx

@@ -36,6 +36,7 @@ export const SingleSelectMenu = ({
     itemToString,
     stateReducer: (state, actionAndChanges) => {
       let newState: Partial<UseSelectState<TypeDefaultItemProps>>;
+      // eslint-disable-next-line react-hooks/rules-of-hooks, prefer-const
       newState = useSelectStateReducer(state, actionAndChanges);
       return externalStateReducer
         ? externalStateReducer(state, {

package/src/hooks/useItemsFromChildren.tsx

@@ -16,6 +16,7 @@ const walkAllChildren = (
     // console.log("element", element);
     callback(element, parents);
     const newParents = [...parents, element];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const children = (element as any).props?.children;
     React.Children.toArray(children).forEach((child) => {
       walk(child, newParents);

package/tsconfig.json

@@ -8,5 +8,5 @@
     "verbatimModuleSyntax": true
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "coverage"]
 }