chore: add stories for Popover (#12387)

aslilac · web-flow · commit af4d0b148bfd · 2024-03-01T15:43:35.000-07:00
diff --git a/site/src/components/Popover/Popover.stories.tsx b/site/src/components/Popover/Popover.stories.tsx
@@ -0,0 +1,57 @@
+import Button from "@mui/material/Button";
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, screen, userEvent, within, waitFor } from "@storybook/test";
+import { Popover, PopoverTrigger, PopoverContent } from "./Popover";
+
+const meta: Meta<typeof Popover> = {
+  title: "components/Popover",
+  component: Popover,
+};
+
+export default meta;
+type Story = StoryObj<typeof Popover>;
+
+const content = `
+According to all known laws of aviation, there is no way a bee should be able to fly.
+Its wings are too small to get its fat little body off the ground. The bee, of course,
+flies anyway because bees don't care what humans think is impossible.
+`;
+
+export const Example: Story = {
+  args: {
+    children: (
+      <>
+        <PopoverTrigger>
+          <Button>Click here!</Button>
+        </PopoverTrigger>
+        <PopoverContent>{content}</PopoverContent>
+      </>
+    ),
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step("click to open", async () => {
+      await userEvent.click(canvas.getByRole("button"));
+      await waitFor(() =>
+        expect(
+          screen.getByText(/according to all known laws/i),
+        ).toBeInTheDocument(),
+      );
+    });
+  },
+};
+
+export const Horizontal: Story = {
+  args: {
+    children: (
+      <>
+        <PopoverTrigger>
+          <Button>Click here!</Button>
+        </PopoverTrigger>
+        <PopoverContent horizontal="right">{content}</PopoverContent>
+      </>
+    ),
+  },
+  play: Example.play,
+};
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.test.tsx b/site/src/modules/dashboard/Navbar/NavbarView.test.tsx
@@ -3,7 +3,6 @@ import { MockPrimaryWorkspaceProxy, MockUser } from "testHelpers/entities";
 import { renderWithAuth } from "testHelpers/renderHelpers";
 import { Language as navLanguage, NavbarView } from "./NavbarView";
 import { ProxyContextValue } from "contexts/ProxyContext";
-import { action } from "@storybook/addon-actions";
 
 const proxyContextValue: ProxyContextValue = {
   proxy: {
@@ -14,15 +13,13 @@ const proxyContextValue: ProxyContextValue = {
   isLoading: false,
   isFetched: true,
   setProxy: jest.fn(),
-  clearProxy: action("clearProxy"),
+  clearProxy: jest.fn(),
   refetchProxyLatencies: jest.fn(),
   proxyLatencies: {},
 };
 
 describe("NavbarView", () => {
-  const noop = () => {
-    return;
-  };
+  const noop = jest.fn();
 
   it("workspaces nav link has the correct href", async () => {
     renderWithAuth(
diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.stories.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.stories.tsx
@@ -1,13 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, screen, userEvent, within, waitFor } from "@storybook/test";
 import { MockBuildInfo, MockUser } from "testHelpers/entities";
 import { UserDropdown } from "./UserDropdown";
-import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof UserDropdown> = {
   title: "modules/dashboard/UserDropdown",
   component: UserDropdown,
   args: {
     user: MockUser,
-    isDefaultOpen: true,
     buildInfo: MockBuildInfo,
     supportLinks: [
       { icon: "docs", name: "Documentation", target: "" },
@@ -21,6 +21,17 @@ const meta: Meta<typeof UserDropdown> = {
 export default meta;
 type Story = StoryObj<typeof UserDropdown>;
 
-const Example: Story = {};
+const Example: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step("click to open", async () => {
+      await userEvent.click(canvas.getByRole("button"));
+      await waitFor(() =>
+        expect(screen.getByText(/v99\.999\.9999/i)).toBeInTheDocument(),
+      );
+    });
+  },
+};
 
 export { Example as UserDropdown };
diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx
@@ -17,7 +17,6 @@ export interface UserDropdownProps {
   buildInfo?: TypesGen.BuildInfoResponse;
   supportLinks?: TypesGen.LinkConfig[];
   onSignOut: () => void;
-  isDefaultOpen?: boolean;
   children?: ReactNode;
 }
 
@@ -26,12 +25,11 @@ export const UserDropdown: FC<UserDropdownProps> = ({
   user,
   supportLinks,
   onSignOut,
-  isDefaultOpen,
 }) => {
   const theme = useTheme();
 
   return (
-    <Popover isDefaultOpen={isDefaultOpen}>
+    <Popover>
       {(popover) => (
         <>
           <PopoverTrigger>
