Skip to content

Commit 04509c9

Browse files
committed
Fix StatusIndicator tooltip test for shadcn tooltips
Updated WithTooltipInteraction test to work with shadcn/ui tooltip structure: - Query for the indicator div directly (no wrapper span) - Use role='tooltip' selector instead of .tooltip class - Shadcn tooltips render with proper ARIA roles in the portal
1 parent e21fede commit 04509c9

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

src/components/StatusIndicator.stories.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -213,30 +213,30 @@ export const WithTooltipInteraction: Story = {
213213
title: "3 unread messages",
214214
},
215215
play: async ({ canvasElement }) => {
216-
// Find the wrapper span
217-
const wrapper = canvasElement.querySelector("span");
218-
if (!wrapper) throw new Error("Could not find wrapper");
216+
// Find the indicator div (TooltipTrigger wraps it)
217+
const indicator = canvasElement.querySelector("div");
218+
if (!indicator) throw new Error("Could not find indicator");
219219

220220
// Hover over the indicator to show tooltip
221-
await userEvent.hover(wrapper);
221+
await userEvent.hover(indicator);
222222

223-
// Wait for tooltip to appear (uses portal to document.body)
223+
// Wait for tooltip to appear (shadcn tooltips use role="tooltip")
224224
await waitFor(
225225
async () => {
226-
const tooltip = document.body.querySelector(".tooltip");
226+
const tooltip = document.body.querySelector('[role="tooltip"]');
227227
await expect(tooltip).toBeInTheDocument();
228228
await expect(tooltip).toHaveTextContent("3 unread messages");
229229
},
230230
{ timeout: 2000 }
231231
);
232232

233233
// Unhover to hide tooltip
234-
await userEvent.unhover(wrapper);
234+
await userEvent.unhover(indicator);
235235

236236
// Wait for tooltip to disappear
237237
await waitFor(
238238
async () => {
239-
const tooltip = document.body.querySelector(".tooltip");
239+
const tooltip = document.body.querySelector('[role="tooltip"]');
240240
await expect(tooltip).not.toBeInTheDocument();
241241
},
242242
{ timeout: 2000 }

0 commit comments

Comments
 (0)