test(small): feat: implements granular masking for VRT (#9101)

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: arii <342438+arii@users.noreply.github.com>

Author: arii

components/HrTile.tsx

@@ -10,9 +10,9 @@ import { useTheme, alpha } from '@mui/material/styles'
 import { isGenericName } from '@/utils/hrm'
 import ControlCard from '@/components/shared/ControlCard'
 import { HrTileProps } from '@/types'
+import { HR_TILE_MIN_HEIGHT } from '@/constants/layout'
 
 const HERO_FONT_FAMILY = 'var(--font-roboto-mono), "Courier New", monospace'
-const HR_TILE_MIN_HEIGHT = 180
 
 const IdentityTier = ({ name }: { name: string }) => (
   <Box sx={{ pt: 1, textAlign: 'center' }}>
@@ -42,7 +42,7 @@ const HeroTier = ({ percentage }: { percentage: number }) => (
     }}
   >
     <Typography
-      data-testid="live-hr-percent"
+      data-testid="bpm-percent"
       variant="h2"
       component="div"
       sx={{
@@ -101,7 +101,11 @@ const DataTier = ({
     }}
   >
     <MetricItem value={value ?? '---'} label="BPM" testId="bpm-value" />
-    <MetricItem value={Math.floor(calories)} label="KCAL" />
+    <MetricItem
+      value={Math.floor(calories)}
+      label="KCAL"
+      testId="calories-value"
+    />
   </Box>
 )
 

constants/layout.ts

@@ -0,0 +1 @@
+export const HR_TILE_MIN_HEIGHT = 180

context/WebSocketContext.tsx

@@ -33,6 +33,16 @@ export interface WebSocketContextType extends WebSocketState {
   disconnect: () => void
 }
 
+// This encapsulates the logic to avoid running it on every render inside the component
+const isTestEnvironment = () => {
+  if (typeof window === 'undefined') return false
+  return (
+    process.env.NODE_ENV !== 'production' ||
+    process.env.NEXT_PUBLIC_TESTING === 'true' ||
+    window.location.search.includes('testing=true')
+  )
+}
+
 export const WebSocketContext = createContext<WebSocketContextType | null>(null)
 
 export const WebSocketProvider = ({
@@ -110,12 +120,7 @@ export const WebSocketProvider = ({
         pendingActions.current = JSON.parse(savedActions)
       }
 
-      if (
-        process.env.NODE_ENV !== 'production' ||
-        process.env.NEXT_PUBLIC_TESTING === 'true' ||
-        (typeof window !== 'undefined' &&
-          window.location.search.includes('testing=true'))
-      ) {
+      if (isTestEnvironment()) {
         ;(
           window as Window & { __TEST_CONTROLS__?: TestControls }
         ).__TEST_CONTROLS__ = {
@@ -192,8 +197,7 @@ export const WebSocketProvider = ({
       setConnectionStatus('Connected')
 
       // Set test flag for Playwright tests - use a more reliable method
-      if (typeof window !== 'undefined') {
-        window.__TEST_WEBSOCKET_READY__ = true
+      if (isTestEnvironment()) {
         document.body.dataset.connectionStatus = 'connected'
       }
 
@@ -229,8 +233,7 @@ export const WebSocketProvider = ({
       )
       setConnectionStatus('Disconnected')
 
-      if (typeof window !== 'undefined') {
-        window.__TEST_WEBSOCKET_READY__ = false
+      if (isTestEnvironment()) {
         document.body.dataset.connectionStatus = 'disconnected'
       }
 
@@ -318,12 +321,7 @@ export const WebSocketProvider = ({
     connectRef.current = connect
     connect()
 
-    if (
-      typeof window !== 'undefined' &&
-      (process.env.NODE_ENV !== 'production' ||
-        process.env.NEXT_PUBLIC_TESTING === 'true' ||
-        window.location.search.includes('testing=true'))
-    ) {
+    if (isTestEnvironment()) {
       const testControls = (
         window as Window & { __TEST_CONTROLS__?: TestControls }
       ).__TEST_CONTROLS__

tests/playwright/lib/assertions.ts

@@ -101,21 +101,10 @@ export async function assertWebSocketConnected(
 ): Promise<void> {
   const { timeout = 10000 } = options
 
-  const isConnected = await page.evaluate((t) => {
-    return new Promise<boolean>((resolve) => {
-      const checkConnection = () => {
-        if (window.__TEST_WEBSOCKET_READY__ === true) {
-          resolve(true)
-          return
-        }
-        setTimeout(checkConnection, 100)
-      }
-      checkConnection()
-      setTimeout(() => resolve(false), t)
-    })
-  }, timeout)
-
-  expect(isConnected).toBe(true)
+  await page.waitForFunction(
+    () => document.body.dataset.connectionStatus === 'connected',
+    { timeout }
+  )
 }
 
 /**

tests/playwright/lib/masks.ts

@@ -15,9 +15,9 @@ import type { Locator, Page } from '@playwright/test'
  * from CSS classes or DOM structure, making tests less brittle.
  */
 export const VRT_MASK_SELECTORS = {
-  liveHrValue: '[data-testid="live-hr-value"]',
-  liveHrPercent: '[data-testid="live-hr-percent"]',
-  hrTileGridItem: '[data-testid="hr-tile-grid-item"]',
+  bpmPercent: '[data-testid="bpm-percent"]',
+  bpmValue: '[data-testid="bpm-value"]',
+  caloriesValue: '[data-testid="calories-value"]',
   timerCountdown: '[data-testid="timer-countdown"]',
   timerPhaseLabel: '[data-testid="timer-phase-label"]',
   hrTimeSeriesChart: '[data-testid="hr-time-series-chart"]',
@@ -32,8 +32,9 @@ export const VRT_MASK_SELECTORS = {
  */
 export function getDynamicContentMasks(page: Page): Locator[] {
   return [
-    page.locator(VRT_MASK_SELECTORS.liveHrValue),
-    page.locator(VRT_MASK_SELECTORS.liveHrPercent),
+    page.locator(VRT_MASK_SELECTORS.bpmPercent),
+    page.locator(VRT_MASK_SELECTORS.bpmValue),
+    page.locator(VRT_MASK_SELECTORS.caloriesValue),
     page.locator(VRT_MASK_SELECTORS.timerCountdown),
     page.locator(VRT_MASK_SELECTORS.timerPhaseLabel),
     page.locator(VRT_MASK_SELECTORS.hrTimeSeriesChart),
@@ -48,9 +49,9 @@ export function getDynamicContentMasks(page: Page): Locator[] {
  */
 export function getHrMasks(page: Page): Locator[] {
   return [
-    page.locator(VRT_MASK_SELECTORS.liveHrValue),
-    page.locator(VRT_MASK_SELECTORS.liveHrPercent),
-    page.locator(VRT_MASK_SELECTORS.hrTileGridItem),
+    page.locator(VRT_MASK_SELECTORS.bpmPercent),
+    page.locator(VRT_MASK_SELECTORS.bpmValue),
+    page.locator(VRT_MASK_SELECTORS.caloriesValue),
   ]
 }
 

tests/playwright/perf-stability.spec.ts

@@ -1,17 +1,13 @@
 import { test, expect } from '@playwright/test'
 
-interface WindowWithTestFlags extends Window {
-  __TEST_WEBSOCKET_READY__?: boolean
-}
-
 test.describe('WebSocket Stability', () => {
   test('should maintain a stable WebSocket connection', async ({ page }) => {
     test.setTimeout(40000)
     await page.goto('/')
 
     // Wait for the WebSocket connection to be established
     await page.waitForFunction(
-      () => (window as WindowWithTestFlags).__TEST_WEBSOCKET_READY__ === true,
+      () => document.body.dataset.connectionStatus === 'connected',
       null,
       {
         timeout: 10000,

tests/playwright/vrt-dashboard.spec.ts

@@ -167,5 +167,14 @@ test.describe('Visual Regression Tests', () => {
         maxDiffPixelRatio: 0.3,
       })
     })
+
+    test('large desktop viewport', async () => {
+      await dashboardPage.setViewportSize({ width: 2560, height: 1440 })
+      const dashboard = dashboardPage.getByTestId('dashboard')
+      await takeScreenshot(dashboard, 'dashboard-large-desktop.png', {
+        mask: getDynamicContentMasks(dashboardPage),
+        maxDiffPixelRatio: 0.1,
+      })
+    })
   })
 })

tests/playwright/vrt-dashboard.spec.ts-snapshots/dashboard-large-desktop-chromium-linux.png

@@ -1,4 +1,4 @@
-import { type BrowserContext, type Page } from '@playwright/test'
+import { type BrowserContext, type Page, expect } from '@playwright/test'
 import { test } from './fixtures'
 import {
   getDynamicContentMasks,
@@ -9,6 +9,7 @@ import {
 } from './lib'
 import { takeScreenshot, assertFixedDimensions } from './lib/visual'
 import { waitForPageReady } from './lib/waits'
+import { HR_TILE_MIN_HEIGHT } from '../../constants/layout'
 
 // Test suite configuration
 test.describe.configure({ mode: 'serial' })
@@ -61,17 +62,27 @@ test.describe('Visual Regression Tests', () => {
   })
 
   test.describe('HR-Related Components', () => {
+    // Reset devices after each test to prevent state pollution
+    test.afterEach(async () => {
+      await mockMultipleHrDevices(dashboardPage, [])
+      await expect(dashboardPage.getByTestId('hr-tile-card')).toHaveCount(0)
+    })
+
     test('dashboard with HR data', async () => {
       await mockPage.getByLabel('Current BPM').fill('155')
       await mockPage.getByRole('button', { name: 'Zone 4' }).click()
 
-      // Wait for HR tile to appear on dashboard
+      // Wait for HR tile to appear
+      await expect(
+        dashboardPage.getByTestId('hr-tile-card').first()
+      ).toBeVisible()
+
+      // Assert HR tile height is within limits
       const hrTile = dashboardPage.getByTestId('hr-tile-card').first()
-      await hrTile.waitFor({ state: 'visible', timeout: 5000 })
 
       // Assert HR tile height is within limits
       await assertFixedDimensions(hrTile, {
-        minHeight: 180,
+        minHeight: HR_TILE_MIN_HEIGHT,
       })
 
       const dashboard = dashboardPage.getByTestId('dashboard')
@@ -106,12 +117,17 @@ test.describe('Visual Regression Tests', () => {
         },
       ])
 
-      // Assert all HR tiles maintain dimensions
+      // Wait for HR tiles to appear
       const hrTiles = dashboardPage.getByTestId('hr-tile-card')
+      await expect(hrTiles).toHaveCount(2)
+      await expect(hrTiles.first()).toBeVisible()
+      await expect(hrTiles.nth(1)).toBeVisible()
+
+      // Assert all HR tiles maintain dimensions
       const count = await hrTiles.count()
       for (let i = 0; i < count; i++) {
         await assertFixedDimensions(hrTiles.nth(i), {
-          minHeight: 180,
+          minHeight: HR_TILE_MIN_HEIGHT,
         })
       }
 
@@ -132,6 +148,11 @@ test.describe('Visual Regression Tests', () => {
         await mockPage.getByLabel('Current BPM').fill(String(60 + zone * 20))
         await mockPage.getByRole('button', { name: `Zone ${zone}` }).click()
 
+        // Wait for HR tile to appear
+        await expect(
+          dashboardPage.getByTestId('hr-tile-card').first()
+        ).toBeVisible()
+
         const dashboard = dashboardPage.getByTestId('dashboard')
         await takeScreenshot(dashboard, `dashboard-hr-zone-${zone}.png`, {
           maxDiffPixelRatio: 0.1,