@sproutsocial/seeds-react-menu 0.1.0 → 0.2.0

package/src/MenuItemSelectable/__tests__/MenuItemSelectable.test.tsx

@@ -1,303 +0,0 @@
-/* eslint-disable testing-library/no-unnecessary-act */
-import React from "react";
-import { render, screen, act } from "@sproutsocial/seeds-react-testing-library";
-import { PointerEventsCheckLevel } from "@testing-library/user-event";
-import { type UserEvent } from "@testing-library/user-event";
-import {
-  MenuContent,
-  MenuToggleButton,
-  MenuItemSelectable,
-  MultiSelectMenu,
-  INPUT_TYPES,
-} from "../../index";
-import { Button } from "@sproutsocial/seeds-react-button";
-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 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();
-    },
-  },
-};
-
-describe("MenuItemSelectable ", () => {
-  describe("User Behavior", () => {
-    xdescribe.each([
-      INPUT_TYPES.CHECKBOX,
-      INPUT_TYPES.RADIO,
-      INPUT_TYPES.SWITCH,
-      INPUT_TYPES.ICON,
-    ])("when the input type is %s", (inputType) => {
-      test.each([
-        {
-          action: "clicking with mouse",
-          activate: async (user: UserEvent) => {
-            const firstItem = screen.getByRole("option", {
-              name: books[0].title,
-            });
-            await user
-              .setup({
-                pointerEventsCheck: PointerEventsCheckLevel.Never,
-              })
-              .click(firstItem);
-          },
-          deactivate: async (user: UserEvent) => {
-            const firstItem = screen.getByRole("option", {
-              name: books[0].title,
-            });
-            await user
-              .setup({
-                pointerEventsCheck: PointerEventsCheckLevel.Never,
-              })
-              .click(firstItem);
-          },
-        },
-        {
-          action: "pressing the Enter key",
-          activate: async (user: UserEvent) => {
-            await user.keyboard("{arrowdown}{enter}");
-          },
-          deactivate: async (user: UserEvent) => {
-            await user.keyboard("{enter}");
-          },
-        },
-        {
-          action: "pressing the Space key",
-          activate: async (user: UserEvent) => {
-            await user.keyboard("{arrowdown}{space}");
-          },
-          deactivate: async (user: UserEvent) => {
-            await user.keyboard("{space}");
-          },
-        },
-      ])(
-        "can be checked and unchecked when $action",
-        async ({ activate, deactivate }) => {
-          const { user } = render(
-            <MultiSelectMenu
-              triggerElement={<MenuToggleButton>Open</MenuToggleButton>}
-              defaultIsOpen
-            >
-              <MenuContent>
-                {books.map((book) => {
-                  return (
-                    <MenuItemSelectable
-                      key={book.id}
-                      id={book.id}
-                      inputType={inputType}
-                    >
-                      {book.title}
-                    </MenuItemSelectable>
-                  );
-                })}
-              </MenuContent>
-            </MultiSelectMenu>
-          );
-
-          // check that menu is visible
-          expect(
-            screen.getByRole("option", { name: books[0].title })
-          ).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", { selected: true })
-          ).toBeInTheDocument();
-
-          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();
-        }
-      );
-    });
-  });
-
-  describe("API", () => {
-    it("accepts children", () => {
-      render(
-        <MenuItemSelectable id="test-menu-item-selectable">
-          Hello world!
-          <Button>Hello menu item!</Button>
-        </MenuItemSelectable>
-      );
-
-      const menuItemSelectable = screen.getByText("Hello world!");
-      const button = screen.getByText("Hello menu item!");
-      expect(menuItemSelectable).toContainElement(button);
-    });
-
-    test.each([INPUT_TYPES.CHECKBOX, INPUT_TYPES.RADIO, INPUT_TYPES.SWITCH])(
-      "supports %s input types",
-      (inputType) => {
-        render(
-          <MenuItemSelectable
-            id="test-menu-item-selectable"
-            inputType={inputType}
-          >
-            Hello world!
-          </MenuItemSelectable>
-        );
-
-        expect(screen.getByRole(inputType)).toBeInTheDocument();
-      }
-    );
-
-    it("uses the check icon by default when no inputType provided", () => {
-      const testItem = books[0];
-      render(
-        <TestWithMockedMenu context={{ items: books, selectedItem: testItem }}>
-          <MenuItemSelectable id={testItem.id}>
-            {testItem.title}
-          </MenuItemSelectable>
-        </TestWithMockedMenu>
-      );
-
-      expect(
-        screen.getByDataQaLabel({ icon: "check-solid" })
-      ).toBeInTheDocument();
-    });
-
-    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 }}
-          >
-            <MenuItemSelectable id={testItem.id} inputType={inputType}>
-              {testItem.title}
-            </MenuItemSelectable>
-          </TestWithMockedMenu>
-        );
-
-        screen.getByRole("option", { selected: true });
-        testByType[inputType].isSelected();
-      });
-
-      it("enables it's checked state when selected by default", () => {
-        const testItem = books[0];
-        render(
-          <TestWithMenuRoot
-            triggerElement={<MenuToggleButton>Open</MenuToggleButton>}
-            {...{
-              isOpen: true,
-              items: books,
-              selectedItem: testItem,
-            }}
-          >
-            <MenuItemSelectable id={testItem.id} inputType={inputType}>
-              {testItem.title}
-            </MenuItemSelectable>
-          </TestWithMenuRoot>
-        );
-
-        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 }}>
-              <MenuItemSelectable
-                id={testItem.id}
-                inputType={inputType}
-                onClick={() => setSelectedItem(undefined)}
-              >
-                {testItem.title}
-              </MenuItemSelectable>
-            </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();
-      });
-    });
-  });
-});

package/src/MenuItemSelectable/__tests__/MenuItemSelectable.typetest.tsx

@@ -1,56 +0,0 @@
-import { MenuItemSelectable } from "../MenuItemSelectable";
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function MenuItemSelectableTypeTest() {
-  return (
-    <>
-      {/* Valid MenuItemSelectable with minimal required props */}
-      <MenuItemSelectable id="test">Test</MenuItemSelectable>
-      {/* Valid MenuItemSelectable allows active prop */}
-      <MenuItemSelectable id="test" active>
-        Test
-      </MenuItemSelectable>
-      {/* Valid MenuItemSelectable allows active prop false */}
-      <MenuItemSelectable id="test" active={false}>
-        Test
-      </MenuItemSelectable>
-      {/* Valid MenuItemSelectable allows inputType prop to be checkbox */}
-      <MenuItemSelectable id="test" inputType="checkbox">
-        Test
-      </MenuItemSelectable>
-      {/* Valid MenuItemSelectable allows inputType prop to be radio */}
-      <MenuItemSelectable id="test" inputType="radio">
-        Test
-      </MenuItemSelectable>
-      {/* Valid MenuItemSelectable allows inputType prop to be switch */}
-      <MenuItemSelectable id="test" inputType="switch">
-        Test
-      </MenuItemSelectable>
-      {/* Valid MenuItemSelectable allows inputType prop to be icon */}
-      <MenuItemSelectable id="test" inputType="icon">
-        Test
-      </MenuItemSelectable>
-      {/* Valid MenuItemSelectable allows inputLabel prop as a string */}
-      <MenuItemSelectable id="test" inputLabel="Test Label">
-        Test
-      </MenuItemSelectable>
-
-      {/* @ts-expect-error - no children is invalid */}
-      <MenuItemSelectable id="foo" />
-      {/* @ts-expect-error - missing id is invalid */}
-      <MenuItemSelectable>Test</MenuItemSelectable>
-      <MenuItemSelectable
-        /* @ts-expect-error - id may not be a number */
-        id={0}
-        /* @ts-expect-error - active may not be a string */
-        active="true"
-        /* @ts-expect-error - inputType must be valid */
-        inputType="invalid"
-        /* @ts-expect-error - inputLabel may not be a number */
-        inputLabel={0}
-      >
-        Test
-      </MenuItemSelectable>
-    </>
-  );
-}

package/src/MenuItemSelectable/index.ts

@@ -1,5 +0,0 @@
-export * from "./MenuItemSelectable";
-
-export * from "./MenuItemSelectableTypes";
-
-export * from "./styles";

package/src/MenuItemSelectable/styles.tsx

@@ -1,21 +0,0 @@
-import styled from "styled-components";
-
-export const MenuItemSelectableRow = styled.div`
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-`;
-
-export const MenuItemSelectableAction = styled.div`
-  margin-right: ${({ theme }) => theme.space[300]};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-`;
-
-export const MenuItemSelectableText = styled.div`
-  word-break: break-word;
-  flex-grow: 1;
-  min-width: 0;
-`;