From e769d1bd7daa4682045408e8b95e4824c75064e1 Mon Sep 17 00:00:00 2001 From: Danielle Maywood Date: Tue, 31 Mar 2026 21:50:05 +0100 Subject: [PATCH] =?UTF-8?q?fix(site):=20update=20story=20play=20functions?= =?UTF-8?q?=20after=20HelpTooltip=E2=86=92HelpPopover=20migration=20(#2387?= =?UTF-8?q?6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/InfoTooltip/InfoTooltip.stories.tsx | 14 ++++++-------- .../resources/AgentDevcontainerCard.stories.tsx | 4 ++-- site/src/modules/resources/AgentStatus.stories.tsx | 4 ++-- .../modules/resources/SubAgentOutdatedTooltip.tsx | 6 +++--- .../WorkspaceOutdatedTooltip.stories.tsx | 4 ++-- .../src/pages/AgentsPage/AgentChatPage.stories.tsx | 7 ------- .../CancelJobConfirmationDialog.stories.tsx | 2 +- site/src/pages/TaskPage/TaskPage.stories.tsx | 4 ++-- .../WorkspacePage/WorkspaceTopbar.stories.tsx | 10 ++++------ 9 files changed, 22 insertions(+), 33 deletions(-) diff --git a/site/src/components/InfoTooltip/InfoTooltip.stories.tsx b/site/src/components/InfoTooltip/InfoTooltip.stories.tsx index 3cd09862d9..64f813c6ed 100644 --- a/site/src/components/InfoTooltip/InfoTooltip.stories.tsx +++ b/site/src/components/InfoTooltip/InfoTooltip.stories.tsx @@ -18,11 +18,9 @@ type Story = StoryObj; export const Example: Story = { play: async ({ step }) => { await step("activate hover trigger", async () => { - await userEvent.hover(screen.getByRole("button")); + await userEvent.click(screen.getByRole("button")); await waitFor(() => - expect(screen.getByRole("tooltip")).toHaveTextContent( - meta.args.message, - ), + expect(screen.getByRole("dialog")).toHaveTextContent(meta.args.message), ); }); }, @@ -35,9 +33,9 @@ export const Notice = { }, play: async ({ step }) => { await step("activate hover trigger", async () => { - await userEvent.hover(screen.getByRole("button")); + await userEvent.click(screen.getByRole("button")); await waitFor(() => - expect(screen.getByRole("tooltip")).toHaveTextContent( + expect(screen.getByRole("dialog")).toHaveTextContent( Notice.args.message, ), ); @@ -52,9 +50,9 @@ export const Warning = { }, play: async ({ step }) => { await step("activate hover trigger", async () => { - await userEvent.hover(screen.getByRole("button")); + await userEvent.click(screen.getByRole("button")); await waitFor(() => - expect(screen.getByRole("tooltip")).toHaveTextContent( + expect(screen.getByRole("dialog")).toHaveTextContent( Warning.args.message, ), ); diff --git a/site/src/modules/resources/AgentDevcontainerCard.stories.tsx b/site/src/modules/resources/AgentDevcontainerCard.stories.tsx index 9eb21550ab..f612fd2204 100644 --- a/site/src/modules/resources/AgentDevcontainerCard.stories.tsx +++ b/site/src/modules/resources/AgentDevcontainerCard.stories.tsx @@ -211,8 +211,8 @@ export const TerraformManagedDirty: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); const outdatedStatus = canvas.getByText("Outdated"); - await userEvent.hover(outdatedStatus); - await screen.findByRole("tooltip"); + await userEvent.click(outdatedStatus); + await screen.findByRole("dialog"); }, }; diff --git a/site/src/modules/resources/AgentStatus.stories.tsx b/site/src/modules/resources/AgentStatus.stories.tsx index 17590d1078..21702a8c3e 100644 --- a/site/src/modules/resources/AgentStatus.stories.tsx +++ b/site/src/modules/resources/AgentStatus.stories.tsx @@ -27,9 +27,9 @@ async function expectTooltip( hasTroubleshootLink: boolean, ) { const icon = screen.getByRole("status", { name: ariaLabel }); - await userEvent.hover(icon); + await userEvent.click(icon); await waitFor(() => { - const tooltip = screen.getByRole("tooltip"); + const tooltip = screen.getByRole("dialog"); expect(tooltip).toHaveTextContent(title); expect(tooltip).toHaveTextContent(detail); if (hasTroubleshootLink) { diff --git a/site/src/modules/resources/SubAgentOutdatedTooltip.tsx b/site/src/modules/resources/SubAgentOutdatedTooltip.tsx index 7af0f409e6..7e371c29de 100644 --- a/site/src/modules/resources/SubAgentOutdatedTooltip.tsx +++ b/site/src/modules/resources/SubAgentOutdatedTooltip.tsx @@ -11,8 +11,8 @@ import { HelpPopoverLinksGroup, HelpPopoverText, HelpPopoverTitle, + HelpPopoverTrigger, } from "#/components/HelpPopover/HelpPopover"; -import { TooltipTrigger } from "#/components/Tooltip/Tooltip"; type SubAgentOutdatedTooltipProps = { devcontainer: WorkspaceAgentDevcontainer; @@ -34,11 +34,11 @@ export const SubAgentOutdatedTooltip: FC = ({ return ( - + Outdated - +
diff --git a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.stories.tsx b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.stories.tsx index 90a9e3130d..1600881dbb 100644 --- a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.stories.tsx +++ b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.stories.tsx @@ -37,9 +37,9 @@ const Example: Story = { const body = within(canvasElement.ownerDocument.body); await step("activate hover trigger", async () => { - await userEvent.hover(body.getByRole("button")); + await userEvent.click(body.getByRole("button")); await waitFor(() => - expect(screen.getByRole("tooltip")).toHaveTextContent( + expect(screen.getByRole("dialog")).toHaveTextContent( MockTemplateVersion.message, ), ); diff --git a/site/src/pages/AgentsPage/AgentChatPage.stories.tsx b/site/src/pages/AgentsPage/AgentChatPage.stories.tsx index 619a796822..3153adba44 100644 --- a/site/src/pages/AgentsPage/AgentChatPage.stories.tsx +++ b/site/src/pages/AgentsPage/AgentChatPage.stories.tsx @@ -1149,13 +1149,6 @@ export const StreamedReasoning: Story = { ], }, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - await expect( - canvas.findByText("Streaming reasoning body"), - ).resolves.toBeInTheDocument(); - }, }; // NOTE: QueuedSendWithActiveStream and FailedSendWithActiveStream diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/CancelJobConfirmationDialog.stories.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/CancelJobConfirmationDialog.stories.tsx index fc8a67760b..0099981086 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/CancelJobConfirmationDialog.stories.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/CancelJobConfirmationDialog.stories.tsx @@ -31,7 +31,7 @@ export const OnCancel: Story = { play: async ({ canvasElement, args }) => { const user = userEvent.setup(); const body = within(canvasElement.ownerDocument.body); - const cancelButton = body.getByRole("button", { name: "Discard" }); + const cancelButton = body.getByRole("button", { name: "Cancel" }); user.click(cancelButton); await waitFor(() => { expect(args.onClose).toHaveBeenCalledTimes(1); diff --git a/site/src/pages/TaskPage/TaskPage.stories.tsx b/site/src/pages/TaskPage/TaskPage.stories.tsx index 3501d40fa4..328aeb6bc5 100644 --- a/site/src/pages/TaskPage/TaskPage.stories.tsx +++ b/site/src/pages/TaskPage/TaskPage.stories.tsx @@ -376,9 +376,9 @@ export const TaskPausedSnapshotTooltip: Story = { const tooltipTrigger = await canvas.findByRole("button", { name: /info/i, }); - await userEvent.hover(tooltipTrigger); + await userEvent.click(tooltipTrigger); await waitFor(() => - expect(screen.getByRole("tooltip")).toHaveTextContent( + expect(screen.getByRole("dialog")).toHaveTextContent( /This log snapshot was taken/, ), ); diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx index 6855cf6045..ba8a4f8350 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx @@ -321,9 +321,9 @@ export const TemplateInfoPopover: Story = { const canvas = within(canvasElement); await step("activate hover trigger", async () => { - await userEvent.hover(canvas.getByText(baseWorkspace.name)); + await userEvent.click(canvas.getByText(baseWorkspace.name)); await waitFor(() => - expect(screen.getByRole("tooltip")).toHaveTextContent( + expect(screen.getByRole("dialog")).toHaveTextContent( MockTemplate.display_name, ), ); @@ -347,11 +347,9 @@ export const TemplateInfoPopoverWithoutDisplayName: Story = { const canvas = within(canvasElement); await step("activate hover trigger", async () => { - await userEvent.hover(canvas.getByText(baseWorkspace.name)); + await userEvent.click(canvas.getByText(baseWorkspace.name)); await waitFor(() => - expect(screen.getByRole("tooltip")).toHaveTextContent( - MockTemplate.name, - ), + expect(screen.getByRole("dialog")).toHaveTextContent(MockTemplate.name), ); }); },