From 119b6cd6334dd272ee31a044b91902a35cc8a3e1 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 7 Mar 2024 23:23:16 +0000 Subject: [PATCH 1/4] chore: add stories for `MoreMenu` --- .../components/MoreMenu/MoreMenu.stories.tsx | 55 +++++++++++++++++++ site/src/components/MoreMenu/MoreMenu.tsx | 6 +- 2 files changed, 56 insertions(+), 5 deletions(-) create mode 100644 site/src/components/MoreMenu/MoreMenu.stories.tsx diff --git a/site/src/components/MoreMenu/MoreMenu.stories.tsx b/site/src/components/MoreMenu/MoreMenu.stories.tsx new file mode 100644 index 0000000000000..e1d4b8573507c --- /dev/null +++ b/site/src/components/MoreMenu/MoreMenu.stories.tsx @@ -0,0 +1,55 @@ +import GrassIcon from "@mui/icons-material/Grass"; +import KitesurfingIcon from "@mui/icons-material/Kitesurfing"; +import type { Meta, StoryObj } from "@storybook/react"; +import { + MoreMenu, + MoreMenuContent, + MoreMenuItem, + MoreMenuTrigger, + ThreeDotsButton, +} from "./MoreMenu"; +import { action } from "@storybook/addon-actions"; +import { expect, screen, userEvent, waitFor, within } from "@storybook/test"; + +const meta: Meta = { + title: "components/MoreMenu", + component: MoreMenu, +}; + +export default meta; +type Story = StoryObj; + +const Example: Story = { + args: { + children: ( + <> + + + + + action("grass")}> + + Touch grass + + action("water")}> + + Touch water + + + + ), + }, + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + await step("Open menu", async () => { + await userEvent.click(canvas.getByRole("button")); + await waitFor(() => { + 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 index c1b1a2f7f4ada..b7dd383a37037 100644 --- a/site/src/components/MoreMenu/MoreMenu.tsx +++ b/site/src/components/MoreMenu/MoreMenu.tsx @@ -111,11 +111,7 @@ export const MoreMenuItem: FC = ({ danger = false, ...menuItemProps }) => { - const ctx = useContext(MoreMenuContext); - - if (!ctx) { - throw new Error("MoreMenuItem must be used inside of MoreMenu"); - } + const ctx = useMoreMenuContext(); return ( Date: Thu, 7 Mar 2024 23:24:18 +0000 Subject: [PATCH 2/4] naming --- site/src/components/MoreMenu/MoreMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/components/MoreMenu/MoreMenu.tsx b/site/src/components/MoreMenu/MoreMenu.tsx index b7dd383a37037..62494b781872e 100644 --- a/site/src/components/MoreMenu/MoreMenu.tsx +++ b/site/src/components/MoreMenu/MoreMenu.tsx @@ -111,7 +111,7 @@ export const MoreMenuItem: FC = ({ danger = false, ...menuItemProps }) => { - const ctx = useMoreMenuContext(); + const menu = useMoreMenuContext(); return ( = ({ onClick={(e) => { menuItemProps.onClick && menuItemProps.onClick(e); if (closeOnClick) { - ctx.close(); + menu.close(); } }} /> From b93201e556d975d0e223004da68ed4ae49a1304f Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Mar 2024 18:38:48 +0000 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=A7=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/MoreMenu/MoreMenu.stories.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/site/src/components/MoreMenu/MoreMenu.stories.tsx b/site/src/components/MoreMenu/MoreMenu.stories.tsx index e1d4b8573507c..fe84956e55ccf 100644 --- a/site/src/components/MoreMenu/MoreMenu.stories.tsx +++ b/site/src/components/MoreMenu/MoreMenu.stories.tsx @@ -1,6 +1,8 @@ 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, @@ -8,8 +10,6 @@ import { MoreMenuTrigger, ThreeDotsButton, } from "./MoreMenu"; -import { action } from "@storybook/addon-actions"; -import { expect, screen, userEvent, waitFor, within } from "@storybook/test"; const meta: Meta = { title: "components/MoreMenu", @@ -27,11 +27,11 @@ const Example: Story = { - action("grass")}> + Touch grass - action("water")}> + Touch water @@ -44,10 +44,12 @@ const Example: Story = { await step("Open menu", async () => { await userEvent.click(canvas.getByRole("button")); - await waitFor(() => { - expect(screen.getByText(/touch grass/i)).toBeInTheDocument(); - expect(screen.getByText(/touch water/i)).toBeInTheDocument(); - }); + await waitFor(() => + Promise.all([ + expect(screen.getByText(/touch grass/i)).toBeInTheDocument(), + expect(screen.getByText(/touch water/i)).toBeInTheDocument(), + ]), + ); }); }, }; From 817d6fc285ae1f5c793476b6098e4f0dddcc795b Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 8 Mar 2024 18:41:44 +0000 Subject: [PATCH 4/4] `name` --- site/src/components/MoreMenu/MoreMenu.stories.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/site/src/components/MoreMenu/MoreMenu.stories.tsx b/site/src/components/MoreMenu/MoreMenu.stories.tsx index fe84956e55ccf..0ad43194ced29 100644 --- a/site/src/components/MoreMenu/MoreMenu.stories.tsx +++ b/site/src/components/MoreMenu/MoreMenu.stories.tsx @@ -43,7 +43,9 @@ const Example: Story = { const canvas = within(canvasElement); await step("Open menu", async () => { - await userEvent.click(canvas.getByRole("button")); + await userEvent.click( + canvas.getByRole("button", { name: "More options" }), + ); await waitFor(() => Promise.all([ expect(screen.getByText(/touch grass/i)).toBeInTheDocument(),