test: expect elements + text content rendered by HelpTooltip

aqandrew · aqandrew · commit 2ff9e66925bc · 2025-08-29T23:44:53.000Z
diff --git a/site/src/components/InfoTooltip/InfoTooltip.stories.tsx b/site/src/components/InfoTooltip/InfoTooltip.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, userEvent, waitFor, within } from "storybook/test";
+import { expect, screen, userEvent, waitFor } from "storybook/test";
 import { InfoTooltip } from "./InfoTooltip";
 
 const meta = {
@@ -16,13 +16,13 @@ export default meta;
 type Story = StoryObj<typeof InfoTooltip>;
 
 export const Example: Story = {
-	play: async ({ canvasElement, step }) => {
-		const screen = within(canvasElement);
-
+	play: async ({ step }) => {
 		await step("activate hover trigger", async () => {
 			await userEvent.hover(screen.getByRole("button"));
 			await waitFor(() =>
-				expect(screen.getByText(meta.args.message)).toBeInTheDocument(),
+				expect(screen.getByRole("tooltip")).toHaveTextContent(
+					meta.args.message,
+				),
 			);
 		});
 	},
@@ -33,13 +33,13 @@ export const Notice = {
 		type: "notice",
 		message: "Unfortunately, there's a radio connected to my brain",
 	},
-	play: async ({ canvasElement, step }) => {
-		const screen = within(canvasElement);
-
+	play: async ({ step }) => {
 		await step("activate hover trigger", async () => {
 			await userEvent.hover(screen.getByRole("button"));
 			await waitFor(() =>
-				expect(screen.getByText(Notice.args.message)).toBeInTheDocument(),
+				expect(screen.getByRole("tooltip")).toHaveTextContent(
+					Notice.args.message,
+				),
 			);
 		});
 	},
@@ -50,13 +50,13 @@ export const Warning = {
 		type: "warning",
 		message: "Unfortunately, there's a radio connected to my brain",
 	},
-	play: async ({ canvasElement, step }) => {
-		const screen = within(canvasElement);
-
+	play: async ({ step }) => {
 		await step("activate hover trigger", async () => {
 			await userEvent.hover(screen.getByRole("button"));
 			await waitFor(() =>
-				expect(screen.getByText(Warning.args.message)).toBeInTheDocument(),
+				expect(screen.getByRole("tooltip")).toHaveTextContent(
+					Warning.args.message,
+				),
 			);
 		});
 	},
diff --git a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.stories.tsx b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.stories.tsx
@@ -5,7 +5,7 @@ import {
 } from "testHelpers/entities";
 import { withDashboardProvider } from "testHelpers/storybook";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, userEvent, waitFor, within } from "storybook/test";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { WorkspaceOutdatedTooltip } from "./WorkspaceOutdatedTooltip";
 
 const meta: Meta<typeof WorkspaceOutdatedTooltip> = {
@@ -39,7 +39,9 @@ const Example: Story = {
 		await step("activate hover trigger", async () => {
 			await userEvent.hover(body.getByRole("button"));
 			await waitFor(() =>
-				expect(body.getByText(MockTemplateVersion.message)).toBeInTheDocument(),
+				expect(screen.getByRole("tooltip")).toHaveTextContent(
+					MockTemplateVersion.message,
+				),
 			);
 		});
 	},
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx
@@ -320,9 +320,9 @@ export const TemplateInfoPopover: Story = {
 		await step("activate hover trigger", async () => {
 			await userEvent.hover(canvas.getByText(baseWorkspace.name));
 			await waitFor(() =>
-				expect(
-					canvas.getByRole("presentation", { hidden: true }),
-				).toHaveTextContent(MockTemplate.display_name),
+				expect(screen.getByRole("tooltip")).toHaveTextContent(
+					MockTemplate.display_name,
+				),
 			);
 		});
 	},
@@ -346,9 +346,9 @@ export const TemplateInfoPopoverWithoutDisplayName: Story = {
 		await step("activate hover trigger", async () => {
 			await userEvent.hover(canvas.getByText(baseWorkspace.name));
 			await waitFor(() =>
-				expect(
-					canvas.getByRole("presentation", { hidden: true }),
-				).toHaveTextContent(MockTemplate.name),
+				expect(screen.getByRole("tooltip")).toHaveTextContent(
+					MockTemplate.name,
+				),
 			);
 		});
 	},
