update WorkspaceNotifications

coder · aslilac · Feb 22, 2024 · Feb 22, 2024 · Feb 22, 2024 · Feb 22, 2024
commit 4b48bfda4c64722bb1ecab4033d3dedf39a0ea76
@@ -2,6 +2,7 @@ import {
   mockApiError,
   MockTemplate,
   MockTemplateVersion,
+  MockTemplateVersionWithMarkdownMessage,
 } from "testHelpers/entities";
 import {
   TemplateVersionPageView,
@@ -47,18 +48,7 @@ export const Default: Story = {};
 
 export const LongVersionMessage: Story = {
   args: {
-    currentVersion: {
-      ...MockTemplateVersion,
-      message: `
-# Abiding Grace
-## Enchantment
-At the beginning of your end step, choose one —
-
-- You gain 1 life.
-
-- Return target creature card with mana value 1 from your graveyard to the battlefield.
-`,
-    },
+    currentVersion: MockTemplateVersionWithMarkdownMessage,
   },
 };
 

@@ -22,21 +22,22 @@ type NotificationsProps = {
   items: NotificationItem[];
   severity: ThemeRole;
   icon: ReactNode;
-  isDefaultOpen?: boolean;
 };
 
 export const Notifications: FC<NotificationsProps> = ({
   items,
   severity,
   icon,
-  isDefaultOpen,
 }) => {
   const theme = useTheme();
 
   return (
-    <Popover mode="hover" isDefaultOpen={isDefaultOpen}>
+    <Popover mode="hover">
       <PopoverTrigger>
-        <div css={styles.pillContainer}>
+        <div
+          css={styles.pillContainer}
+          data-testid={`${severity}-notifications`}
+        >
           <NotificationPill items={items} severity={severity} icon={icon} />
         </div>
       </PopoverTrigger>

@@ -1,13 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, waitFor, within } from "@storybook/test";
 import {
   MockOutdatedWorkspace,
   MockTemplate,
   MockTemplateVersion,
+  MockTemplateVersionWithMarkdownMessage,
   MockWorkspace,
 } from "testHelpers/entities";
-import { WorkspaceNotifications } from "./WorkspaceNotifications";
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDashboardProvider } from "testHelpers/storybook";
 import { getWorkspaceResolveAutostartQueryKey } from "api/queries/workspaceQuota";
+import { withDashboardProvider } from "testHelpers/storybook";
+import { WorkspaceNotifications } from "./WorkspaceNotifications";
 
 const defaultPermissions = {
   readWorkspace: true,
@@ -17,7 +19,7 @@ const defaultPermissions = {
 };
 
 const meta: Meta<typeof WorkspaceNotifications> = {
-  title: "components/WorkspaceNotifications",
+  title: "pages/WorkspacePage/WorkspaceNotifications",
   component: WorkspaceNotifications,
   args: {
     latestVersion: MockTemplateVersion,
@@ -45,7 +47,37 @@ type Story = StoryObj<typeof WorkspaceNotifications>;
 export const Outdated: Story = {
   args: {
     workspace: MockOutdatedWorkspace,
-    defaultOpen: "info",
+  },
+
+  play: async ({ canvasElement, step }) => {
+    const screen = within(canvasElement);
+
+    await step("activate hover trigger", async () => {
+      await userEvent.hover(screen.getByTestId("info-notifications"));
+      await waitFor(() =>
+        expect(
+          screen.getByText(MockTemplateVersion.message),
+        ).toBeInTheDocument(),
+      );
+    });
+  },
+};
+
+export const OutdatedWithMarkdownMessage: Story = {
+  args: {
+    workspace: MockOutdatedWorkspace,
+    latestVersion: MockTemplateVersionWithMarkdownMessage,
+  },
+
+  play: async ({ canvasElement, step }) => {
+    const screen = within(canvasElement);
+
+    await step("activate hover trigger", async () => {
+      await userEvent.hover(screen.getByTestId("info-notifications"));
+      await waitFor(() =>
+        expect(screen.getByText(/an update is available/i)).toBeInTheDocument(),
+      );
+    });
   },
 };
 
@@ -56,7 +88,6 @@ export const RequiresManualUpdate: Story = {
       automatic_updates: "always",
       autostart_schedule: "daily",
     },
-    defaultOpen: "warning",
   },
   parameters: {
     queries: [
@@ -68,6 +99,19 @@ export const RequiresManualUpdate: Story = {
       },
     ],
   },
+
+  play: async ({ canvasElement, step }) => {
+    const screen = within(canvasElement);
+
+    await step("activate hover trigger", async () => {
+      await userEvent.hover(screen.getByTestId("warning-notifications"));
+      await waitFor(() =>
+        expect(
+          screen.getByText(/unable to automatically update/i),
+        ).toBeInTheDocument(),
+      );
+    });
+  },
 };
 
 export const Unhealthy: Story = {
@@ -83,7 +127,17 @@ export const Unhealthy: Story = {
         status: "running",
       },
     },
-    defaultOpen: "warning",
+  },
+
+  play: async ({ canvasElement, step }) => {
+    const screen = within(canvasElement);
+
+    await step("activate hover trigger", async () => {
+      await userEvent.hover(screen.getByTestId("warning-notifications"));
+      await waitFor(() =>
+        expect(screen.getByText(/workspace is unhealthy/i)).toBeInTheDocument(),
+      );
+    });
   },
 };
 
@@ -95,6 +149,8 @@ export const UnhealthyWithoutUpdatePermission: Story = {
       updateWorkspace: false,
     },
   },
+
+  play: Unhealthy.play,
 };
 
 const DormantWorkspace = {
@@ -104,9 +160,19 @@ const DormantWorkspace = {
 
 export const Dormant: Story = {
   args: {
-    defaultOpen: "warning",
  
628C
   workspace: DormantWorkspace,
   },
+
+  play: async ({ canvasElement, step }) => {
+    const screen = within(canvasElement);
+
+    await step("activate hover trigger", async () => {
+      await userEvent.hover(screen.getByTestId("warning-notifications"));
+      await waitFor(() =>
+        expect(screen.getByText(/workspace is dormant/i)).toBeInTheDocument(),
+      );
+    });
+  },
 };
 
 export const DormantWithDeletingDate: Story = {
@@ -117,6 +183,8 @@ export const DormantWithDeletingDate: Story = {
       deleting_at: new Date("2020-10-01T00:00:00Z").toISOString(),
     },
   },
+
+  play: Dormant.play,
 };
 
 export const PendingInQueue: Story = {
@@ -133,7 +201,17 @@ export const PendingInQueue: Story = {
         },
       },
     },
-    defaultOpen: "info",
+  },
+
+  play: async ({ canvasElement, step }) => {
+    const screen = within(canvasElement);
+
+    await step("activate hover trigger", async () => {
+      await userEvent.hover(await screen.findByTestId("info-notifications"));
+      await waitFor(() =>
+        expect(screen.getByText(/build is pending/i)).toBeInTheDocument(),
+      );
+    });
   },
 };
 
@@ -145,6 +223,16 @@ export const TemplateDeprecated: Story = {
       deprecation_message:
         "Template deprecated due to reasons. [Learn more](#)",
     },
-    defaultOpen: "warning",
+  },
+
+  play: async ({ canvasElement, step }) => {
+    const screen = within(canvasElement);
+
+    await step("activate hover trigger", async () => {
+      await userEvent.hover(screen.getByTestId("warning-notifications"));
+      await waitFor(() =>
+        expect(screen.getByText(/deprecated template/i)).toBeInTheDocument(),
+      );
+    });
   },
 };
@@ -24,16 +24,13 @@ type WorkspaceNotificationsProps = {
   onUpdateWorkspace: () => void;
   onActivateWorkspace: () => void;
   latestVersion?: TemplateVersion;
-  // Used for storybook
-  defaultOpen?: "info" | "warning";
 };
 
 export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
   workspace,
   template,
   latestVersion,
   permissions,
-  defaultOpen,
   onRestartWorkspace,
   onUpdateWorkspace,
   onActivateWorkspace,
@@ -227,7 +224,6 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
     <div css={styles.notificationsGroup}>
       {infoNotifications.length > 0 && (
         <Notifications
-          isDefaultOpen={defaultOpen === "info"}
           items={infoNotifications}
           severity="info"
           icon={<InfoOutlined />}
@@ -236,7 +232,6 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
 
       {warningNotifications.length > 0 && (
         <Notifications
-          isDefaultOpen={defaultOpen === "warning"}
           items={warningNotifications}
           severity="warning"
           icon={<WarningRounded />}

@@ -434,6 +434,20 @@ You can add instructions here
   archived: false,
 };
 
+export const MockTemplateVersionWithMarkdownMessage: TypesGen.TemplateVersion =
+  {
+    ...MockTemplateVersion,
+    message: `
+# Abiding Grace
+## Enchantment
+At the beginning of your end step, choose one —
+
+- You gain 1 life.
+
+- Return target creature card with mana value 1 from your graveyard to the battlefield.
+`,
+  };
+
 export const MockTemplate: TypesGen.Template = {
   id: "test-template",
   created_at: "2022-05-17T17:39:01.382927298Z",