Refactor SpotifyControls to strictly derive active device and tighten Playwright VRTs (#9684)

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

app/client/control/components/SpotifyControls.tsx

@@ -134,7 +134,6 @@ const SpotifyControls = () => {
   })
   const { displayVolume } = state
   const isMuted = displayVolume === 0
-  const [selectedDeviceId, setSelectedDeviceId] = useState<string>('')
 
   const lastSentVolumeRef = useRef<string | null>(null)
   const lastWarningTimeRef = useRef<number>(0)
@@ -188,17 +187,7 @@ const SpotifyControls = () => {
 
   const activeDeviceId = devices.find((device) => device.is_active)?.id
   const hrmDeviceId = hrmDevice?.id
-  const resolvedId =
-    activeDeviceId || (!selectedDeviceId ? hrmDeviceId || '' : selectedDeviceId)
-
-  useEffect(() => {
-    if (devices.length === 0) return
-
-    if (resolvedId && selectedDeviceId !== resolvedId) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setSelectedDeviceId(resolvedId)
-    }
-  }, [devices, selectedDeviceId, resolvedId])
+  const resolvedId = activeDeviceId || hrmDeviceId || ''
 
   const sendSpotifyCommand = useCallback(
     (
@@ -411,10 +400,9 @@ const SpotifyControls = () => {
                 </Typography>
                 <FormControl fullWidth size="small">
                   <Select
-                    value={selectedDeviceId}
+                    value={resolvedId}
                     onChange={(e) => {
                       const deviceId = e.target.value as string
-                      setSelectedDeviceId(deviceId)
                       if (deviceId) {
                         sendSpotifyCommand('TRANSFER_PLAYBACK', deviceId)
                       }

tests/playwright/vrt-components.spec.ts

@@ -145,7 +145,7 @@ test.describe('Component-Specific VRT', () => {
     await expect(menu).toHaveCSS('opacity', '1')
 
     // Perform manual accessibility check on the specific menu element to ensure context validity
-    await checkAccessibility(dashboardPage)
+    await checkAccessibility(menu)
 
     await takeScreenshot(menu, 'spotify-device-selector-menu.png', {
       threshold: 0.2, // Tighter threshold for the Paper element

tests/playwright/vrt-dashboard.spec.ts

@@ -104,7 +104,7 @@ test.describe('Dashboard Visual Regression Tests', () => {
       const dashboard = dashboardPage.getByTestId('dashboard')
       await takeScreenshot(dashboard, 'dashboard-large-desktop.png', {
         mask: getDynamicContentMasks(dashboardPage),
-        maxDiffPixelRatio: 0.15,
+        maxDiffPixelRatio: 0.1,
       })
     })