chore: add stories for MoreMenu (#12464)

aslilac · web-flow · commit cf4f56dc2f62 · 2024-03-08T12:01:48.000-07:00
diff --git a/site/src/components/MoreMenu/MoreMenu.stories.tsx b/site/src/components/MoreMenu/MoreMenu.stories.tsx
@@ -0,0 +1,59 @@
+import GrassIcon from "@mui/icons-material/Grass";
+import KitesurfingIcon from "@mui/icons-material/Kitesurfing";
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, screen, userEvent, waitFor, within } from "@storybook/test";
+import {
+  MoreMenu,
+  MoreMenuContent,
+  MoreMenuItem,
+  MoreMenuTrigger,
+  ThreeDotsButton,
+} from "./MoreMenu";
+
+const meta: Meta<typeof MoreMenu> = {
+  title: "components/MoreMenu",
+  component: MoreMenu,
+};
+
+export default meta;
+type Story = StoryObj<typeof MoreMenu>;
+
+const Example: Story = {
+  args: {
+    children: (
+      <>
+        <MoreMenuTrigger>
+          <ThreeDotsButton />
+        </MoreMenuTrigger>
+        <MoreMenuContent>
+          <MoreMenuItem onClick={action("grass")}>
+            <GrassIcon />
+            Touch grass
+          </MoreMenuItem>
+          <MoreMenuItem onClick={action("water")}>
+            <KitesurfingIcon />
+            Touch water
+          </MoreMenuItem>
+        </MoreMenuContent>
+      </>
+    ),
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step("Open menu", async () => {
+      await userEvent.click(
+        canvas.getByRole("button", { name: "More options" }),
+      );
+      await waitFor(() =>
+        Promise.all([
+          expect(screen.getByText(/touch grass/i)).toBeInTheDocument(),
+          expect(screen.getByText(/touch water/i)).toBeInTheDocument(),
+        ]),
+      );
+    });
+  },
+};
+
+export { Example as MoreMenu };
diff --git a/site/src/components/MoreMenu/MoreMenu.tsx b/site/src/components/MoreMenu/MoreMenu.tsx
@@ -111,11 +111,7 @@ export const MoreMenuItem: FC<MoreMenuItemProps> = ({
   danger = false,
   ...menuItemProps
 }) => {
-  const ctx = useContext(MoreMenuContext);
-
-  if (!ctx) {
-    throw new Error("MoreMenuItem must be used inside of MoreMenu");
-  }
+  const menu = useMoreMenuContext();
 
   return (
     <MenuItem
@@ -131,7 +127,7 @@ export const MoreMenuItem: FC<MoreMenuItemProps> = ({
       onClick={(e) => {
         menuItemProps.onClick && menuItemProps.onClick(e);
         if (closeOnClick) {
-          ctx.close();
+          menu.close();
         }
       }}
     />
