Use tooltip role in the test

Author: hasparus

src/app/(main)/community/events/map/map-popover.tsx renamed to src/app/(main)/community/events/map/map-tooltip.tsx

@@ -10,17 +10,20 @@ export type MeetupMapPointer = {
 
 const meetupNameById = new Map(meetups.map(({ node }) => [node.id, node.name]))
 
-type MapPopoverProps = {
+type MapTooltipProps = {
+  id: string
   activeMeetupId: string | null
   pointer: MeetupMapPointer
 }
 
-export function MapPopover({ activeMeetupId, pointer }: MapPopoverProps) {
+export function MapTooltip({ id, activeMeetupId, pointer }: MapTooltipProps) {
   if (!activeMeetupId || !pointer.visible) return null
   const name = meetupNameById.get(activeMeetupId)
   if (!name) return null
   return (
     <span
+      id={id}
+      role="tooltip"
       className="pointer-events-none absolute left-0 top-0 z-10 hidden min-w-0 whitespace-nowrap border border-neu-200/40 bg-neu-0/40 px-2 py-1 text-xs font-medium text-neu-900 shadow-sm backdrop-blur-sm group-hover/map:flex"
       style={{
         transform: `translate3d(calc(${pointer.x}px - 50%), calc(${pointer.y}px - 50% - 24px), 0)`,

src/app/(main)/community/events/meetups-map.tsx

@@ -12,7 +12,7 @@ import { useTheme } from "next-themes"
 import { meetups } from "@/components/meetups"
 
 import { bootMeetupsMap, type MapHandle, type MarkerPoint } from "./map/engine"
-import { MapPopover, type MeetupMapPointer } from "./map/map-popover"
+import { MapTooltip, type MeetupMapPointer } from "./map/map-tooltip"
 import { MapSkeleton } from "./map-skeleton"
 import { MeetupsList } from "./meetups-list"
 import { asRgbString, MAP_COLORS, MapColors } from "./map/map-colors"
@@ -161,6 +161,7 @@ export function MeetupsMap() {
       >
         <canvas
           ref={canvasRef}
+          aria-describedby="map-tooltip"
           aria-label="Interactive WebGL map of GraphQL meetups"
           className="block h-80 w-full animate-fade-in transition-opacity duration-150 ease-linear md:h-full"
           style={{
@@ -170,7 +171,11 @@ export function MeetupsMap() {
           }}
         />
 
-        <MapPopover activeMeetupId={activeMeetupId} pointer={pointer} />
+        <MapTooltip
+          id="map-tooltip"
+          activeMeetupId={activeMeetupId}
+          pointer={pointer}
+        />
 
         <InfoTip />
 

test/e2e/community-events.spec.ts

@@ -1,8 +1,6 @@
 import { test, expect } from "@playwright/test"
 
-test("community events page map loads and Zurich meetup link works", async ({
-  page,
-}) => {
+test("map loads and Zurich meetup link works", async ({ page }) => {
   await page.goto("/community/events")
 
   // Wait for the map canvas to be visible
@@ -43,7 +41,7 @@ test("community events page map loads and Zurich meetup link works", async ({
   expect(newPage.url()).toContain("meetup.com/graphql-zurich")
 })
 
-test("community events map popover appears on marker hover", async ({ page }) => {
+test("map tooltip appears on marker hover", async ({ page }) => {
   await page.goto("/community/events")
   const mapCanvas = page.locator("canvas").first()
   await expect(mapCanvas).toBeVisible({ timeout: 10000 })
@@ -53,8 +51,8 @@ test("community events map popover appears on marker hover", async ({ page }) =>
       return Boolean(box && box.width > 100 && box.height > 100)
     })
     .toBe(true)
-  const popover = page.locator('[data-testid="meetup-map-popover"]')
-  await expect(popover).toHaveCount(0)
+  const tooltip = page.getByRole("tooltip")
+  await expect(tooltip).toHaveCount(0)
   await mapCanvas.hover()
   const { clientX, clientY } = await page.evaluate(() => {
     const canvas = document.querySelector("canvas") as HTMLCanvasElement | null
@@ -81,7 +79,9 @@ test("community events map popover appears on marker hover", async ({ page }) =>
     const latToRawV = (lat: number) => {
       const clampedLat = Math.max(-mercatorLimit, Math.min(mercatorLimit, lat))
       const rad = (clampedLat * Math.PI) / 180
-      return 0.5 - Math.log(Math.tan(Math.PI * 0.25 + rad * 0.5)) / (2 * Math.PI)
+      return (
+        0.5 - Math.log(Math.tan(Math.PI * 0.25 + rad * 0.5)) / (2 * Math.PI)
+      )
     }
     const maxProjectedV = latToRawV(mercatorLimit)
     const minProjectedV = latToRawV(minDisplayedLatitude)
@@ -93,7 +93,9 @@ test("community events map popover appears on marker hover", async ({ page }) =>
         Math.min(mercatorLimit, lat + baseLatitudeOffset),
       )
       const rawV = latToRawV(adjustedLat)
-      const normalizedV = clamp01((rawV - maxProjectedV) / (minProjectedV - maxProjectedV))
+      const normalizedV = clamp01(
+        (rawV - maxProjectedV) / (minProjectedV - maxProjectedV),
+      )
       return [u, normalizedV] as const
     }
     const { width, height } = canvas
@@ -117,6 +119,6 @@ test("community events map popover appears on marker hover", async ({ page }) =>
     return { clientX, clientY }
   })
   await page.mouse.move(clientX, clientY)
-  await expect(popover).toHaveText("London GraphQL", { timeout: 5000 })
-  await expect(popover).toBeVisible()
+  await expect(tooltip).toHaveText("London GraphQL", { timeout: 5000 })
+  await expect(tooltip).toBeVisible()
 })