feat(medium): Fix Google Doc parser regression and address PR feedback (#9070)

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/api/workout/route.ts

@@ -18,7 +18,7 @@ export async function GET(request: Request) {
     const exportUrl = `https://docs.google.com/document/d/${docId}/export?format=html`
 
     const response = await fetch(exportUrl, {
-      next: { revalidate: 60 }, // Cache to avoid hitting Google limits
+      next: { revalidate: 60 },
     })
 
     if (!response.ok) {

app/client/connect/page.tsx

@@ -24,12 +24,6 @@ import { HrmInputMessage } from '@/types/websocket'
 import logger from '@/utils/logger'
 
 export default function ConnectPage() {
-  const [isReady, setIsReady] = useState(false)
-  useEffect(() => {
-    const timer = setTimeout(() => setIsReady(true), 0)
-    return () => clearTimeout(timer)
-  }, [])
-
   const [userSettings, setUserSettings] = useUserSettings()
   const { userName, userAge, userWeight, gender, unitSystem } = userSettings
 

components/WorkoutTableHeader.tsx

@@ -34,7 +34,7 @@ export default function WorkoutTableHeader({
     const fetchData = async () => {
       try {
         setLoading(true)
-        setError(null) // Reset error on re-fetch
+        setError(null)
         const res = await fetch(`/api/workout?docId=${docId}`)
         if (!res.ok) throw new Error('Failed to load workout data')
         const json = await res.json()
@@ -87,7 +87,7 @@ export default function WorkoutTableHeader({
           <TableHead>
             <TableRow sx={{ backgroundColor: 'action.hover' }}>
               {data.headers.map((header, index) => (
-                <TableCell key={index} sx={{ fontWeight: 'bold' }}>
+                <TableCell key={index} sx={{ fontWeight: 'bold' }} scope="col">
                   {header}
                 </TableCell>
               ))}

services/googleDocParser.ts

@@ -26,6 +26,7 @@ export const parseGoogleDocTable = (html: string): WorkoutTableDto => {
   firstRow.find('td, th').each((_colIndex, cellElement) => {
     const text = $(cellElement)
       .text()
+      .replace(/\u00A0/g, ' ')
       .replace(/\r?\n|\r/g, ' ')
       .trim()
     headers.push(text)

tests/playwright/lib/waits.ts

@@ -47,49 +47,33 @@ export async function waitForPageReady(
 ): Promise<void> {
   const { timeout = WAIT_TIMEOUTS.TEST_READY } = options
 
-<<<<<<< HEAD
-  // Wait for fonts to be loaded
-=======
   // Wait for fonts to be ready
->>>>>>> origin/leader
   await page.evaluate(async () => {
     await document.fonts.ready
   })
 
+  // Wait for actual content to be present first (Fail-Fast check)
+  await page.waitForSelector('main, [data-testid="dashboard"], [role="main"]', {
+    state: 'visible',
+    timeout,
+  })
+
   // Wait for loading skeletons to disappear
-<<<<<<< HEAD
+  // We use hidden state to ensure they are either removed or invisible.
   // NOTE: We wrap this in a try-catch to prevent timeouts from failing the entire test.
-  // In some CI environments, dynamic content loading (like Spotify or Google Docs)
-  // or WebSocket connection states might cause skeletons to persist longer than expected.
-  // Proceeding allows visual regression tests to capture the state (even if loading)
-  // rather than failing with a timeout error.
+  // If skeletons persist (e.g. infinite loading or bug), we want VRT to capture that state
+  // rather than crashing with a generic TimeoutError.
   try {
     await page.waitForSelector('.MuiSkeleton-root', {
-      state: 'detached',
+      state: 'hidden',
       timeout,
     })
   } catch (error) {
     console.warn(
-      `[waitForPageReady] Skeletons did not detach within ${timeout}ms. Proceeding anyway.`,
+      `[waitForPageReady] Skeletons did not disappear within ${timeout}ms. Proceeding to snapshot/test.`,
       error
     )
   }
-=======
-  await page
-    .waitForSelector('.MuiSkeleton-root', {
-      state: 'hidden',
-      timeout,
-    })
-    .catch(() => {
-      // Ignore errors if skeletons are not found (already hidden/removed)
-    })
-
-  // Wait for actual content to be present
-  await page.waitForSelector('main, [data-testid="dashboard"], [role="main"]', {
-    state: 'visible',
-    timeout,
-  })
->>>>>>> origin/leader
 }
 
 /**

tests/unit/components/RefreshIconButton.test.tsx

@@ -0,0 +1,31 @@
+/** @jest-environment jsdom */
+import { render, screen, fireEvent } from '@testing-library/react'
+import RefreshIconButton from '../../../components/RefreshIconButton'
+
+describe('RefreshIconButton', () => {
+  it('renders correctly', () => {
+    render(<RefreshIconButton onClick={() => {}} />)
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+  })
+
+  it('calls onClick when clicked', () => {
+    const handleClick = jest.fn()
+    render(<RefreshIconButton onClick={handleClick} />)
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('passes other props to IconButton', () => {
+    render(<RefreshIconButton onClick={() => {}} aria-label="custom label" />)
+    const button = screen.getByRole('button', { name: 'custom label' })
+    expect(button).toBeInTheDocument()
+  })
+
+  it('renders the refresh icon', () => {
+    render(<RefreshIconButton onClick={() => {}} />)
+    const button = screen.getByRole('button')
+    expect(button.querySelector('svg')).toBeInTheDocument()
+  })
+})