test: avoid explicit timeouts (#25395)

test/basic.test.ts

@@ -7,7 +7,6 @@ import { join, normalize } from 'pathe'
 import { $fetch, createPage, fetch, isDev, setup, startServer, url, useTestContext } from '@nuxt/test-utils/e2e'
 import { $fetchComponent } from '@nuxt/test-utils/experimental'
 
-import type { ConsoleMessage } from 'playwright-core'
 import type { NuxtIslandResponse } from '../packages/nuxt/src/core/runtime/nitro/renderer'
 import { expectNoClientErrors, expectWithPolling, gotoPath, isRenderingJson, parseData, parsePayload, renderPage } from './utils'
 
@@ -272,8 +271,7 @@ describe('pages', () => {
   it('/client-server', async () => {
     // expect no hydration issues
     await expectNoClientErrors('/client-server')
-    const page = await createPage('/client-server')
+    const { page } = await renderPage('/client-server')
-    await page.waitForLoadState('networkidle')
     const bodyHTML = await page.innerHTML('body')
     expect(await page.locator('.placeholder-to-ensure-no-override').all()).toHaveLength(5)
     expect(await page.locator('.server').all()).toHaveLength(0)
@@ -285,6 +283,7 @@ describe('pages', () => {
 
     expect(bodyHTML).not.toContain('hello')
     expect(bodyHTML).toContain('world')
+    await page.close()
   })
 
   it('/client-only-components', async () => {
@@ -363,8 +362,7 @@ describe('pages', () => {
     // don't expect any errors or warning on client-side navigation
     const { page: page2, consoleLogs: consoleLogs2 } = await renderPage('/')
     await page2.locator('#to-client-only-components').click()
-    // force wait for a few ticks
+    await page2.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/client-only-components`)
-    await page2.waitForTimeout(50)
     expect(consoleLogs2.some(log => log.type === 'error' || log.type === 'warning')).toBeFalsy()
     await page2.close()
   })
@@ -591,50 +589,48 @@ describe('nuxt links', () => {
 
   it('expect scroll to top on routes with same component', async () => {
     // #22402
-    const page = await createPage('/big-page-1')
+    const page = await createPage('/big-page-1', {
-    await page.setViewportSize({
+      viewport: {
         width: 1000,
         height: 1000
+      }
     })
-    await page.waitForLoadState('networkidle')
+    await page.waitForFunction(() => window.useNuxtApp?.()._route.fullPath === '/big-page-1')
 
     await page.locator('#big-page-2').scrollIntoViewIfNeeded()
     expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0)
     await page.locator('#big-page-2').click()
-    await page.waitForURL(url => url.href.includes('/big-page-2'))
+    await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/big-page-2`)
-    await page.waitForTimeout(25)
     expect(await page.evaluate(() => window.scrollY)).toBe(0)
 
     await page.locator('#big-page-1').scrollIntoViewIfNeeded()
     expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0)
     await page.locator('#big-page-1').click()
-    await page.waitForURL(url => url.href.includes('/big-page-1'))
+    await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/big-page-1`)
-    await page.waitForTimeout(25)
     expect(await page.evaluate(() => window.scrollY)).toBe(0)
     await page.close()
   })
 
   it('expect scroll to top on nested pages', async () => {
     // #20523
-    const page = await createPage('/nested/foo/test')
+    const page = await createPage('/nested/foo/test', {
-    await page.setViewportSize({
+      viewport: {
         width: 1000,
         height: 1000
+      }
     })
-    await page.waitForLoadState('networkidle')
+    await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/nested/foo/test`)
 
     await page.locator('#user-test').scrollIntoViewIfNeeded()
     expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0)
     await page.locator('#user-test').click()
-    await page.waitForURL(url => url.href.includes('/nested/foo/user-test'))
+    await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/nested/foo/user-test`)
-    await page.waitForTimeout(25)
     expect(await page.evaluate(() => window.scrollY)).toBe(0)
 
     await page.locator('#test').scrollIntoViewIfNeeded()
     expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0)
     await page.locator('#test').click()
-    await page.waitForURL(url => url.href.includes('/nested/foo/test'))
+    await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/nested/foo/test`)
-    await page.waitForTimeout(25)
     expect(await page.evaluate(() => window.scrollY)).toBe(0)
     await page.close()
   })
@@ -1504,12 +1500,8 @@ describe('server components/islands', () => {
   })
 
   it('lazy server components', async () => {
-    const logs: ConsoleMessage[] = []
+    const { page, consoleLogs } = await renderPage('/server-components/lazy/start')
 
-    const { page } = await renderPage('/server-components/lazy/start')
-
-    page.on('console', (msg) => { if (msg.type() === 'error') { logs.push(msg) } })
-    await page.waitForLoadState('networkidle')
     await page.getByText('Go to page with lazy server component').click()
 
     const text = await page.innerText('pre')
@@ -1528,7 +1520,7 @@ describe('server components/islands', () => {
     await page.getByText('Go to page with lazy server component').click()
     await page.waitForLoadState('networkidle')
 
-    expect(logs).toHaveLength(0)
+    expect(consoleLogs.filter(l => l.type === 'error')).toHaveLength(0)
 
     await page.close()
   })
@@ -2163,17 +2155,17 @@ describe.skipIf(isWindows)('useAsyncData', () => {
   })
 
   it('data is null after navigation when immediate false', async () => {
-    const page = await createPage('/useAsyncData/immediate-remove-unmounted')
+    const { page } = await renderPage('/useAsyncData/immediate-remove-unmounted')
-    await page.waitForLoadState('networkidle')
-    await page.waitForFunction(() => window.useNuxtApp?.()._route.fullPath === '/useAsyncData/immediate-remove-unmounted')
     expect(await page.locator('#immediate-data').getByText('null').textContent()).toBe('null')
 
     await page.click('#execute-btn')
     expect(await page.locator('#immediate-data').getByText(',').textContent()).not.toContain('null')
 
     await page.click('#to-index')
+    await page.waitForFunction(() => window.useNuxtApp?.()._route.fullPath === '/')
 
     await page.click('#to-immediate-remove-unmounted')
+    await page.waitForFunction(() => window.useNuxtApp?.()._route.fullPath === '/useAsyncData/immediate-remove-unmounted')
     expect(await page.locator('#immediate-data').getByText('null').textContent()).toBe('null')
 
     await page.click('#execute-btn')
@@ -2199,7 +2191,7 @@ describe('keepalive', () => {
 
     const pageName = 'not-keepalive'
     await page.click(`#${pageName}`)
-    await page.waitForTimeout(25)
+    await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`)
 
     expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`])
 
@@ -2211,7 +2203,7 @@ describe('keepalive', () => {
 
     const pageName = 'keepalive-in-config'
     await page.click(`#${pageName}`)
-    await page.waitForTimeout(25)
+    await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`)
 
     expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`])
 
@@ -2223,7 +2215,7 @@ describe('keepalive', () => {
 
     const pageName = 'not-keepalive-in-nuxtpage'
     await page.click(`#${pageName}`)
-    await page.waitForTimeout(25)
+    await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`)
 
     expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`])
 
@@ -2235,7 +2227,7 @@ describe('keepalive', () => {
 
     const pageName = 'keepalive-in-nuxtpage'
     await page.click(`#${pageName}`)
-    await page.waitForTimeout(25)
+    await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`)
 
     expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`, `${pageName}: onActivated`])
 
@@ -2245,16 +2237,18 @@ describe('keepalive', () => {
   it('should preserve keepalive config when navigate routes in nuxt-page', async () => {
     const { page, consoleLogs } = await renderPage('/keepalive')
 
-    await page.click('#keepalive-in-nuxtpage')
+    const slugs = [
-    await page.waitForTimeout(25)
+      'keepalive-in-nuxtpage',
-    await page.click('#keepalive-in-nuxtpage-2')
+      'keepalive-in-nuxtpage-2',
-    await page.waitForTimeout(25)
+      'keepalive-in-nuxtpage',
-    await page.click('#keepalive-in-nuxtpage')
+      'not-keepalive',
-    await page.waitForTimeout(25)
+      'keepalive-in-nuxtpage-2',
-    await page.click('#not-keepalive')
+    ]
-    await page.waitForTimeout(25)
+
-    await page.click('#keepalive-in-nuxtpage-2')
+    for (const slug of slugs) {
-    await page.waitForTimeout(25)
+      await page.click(`#${slug}`)
+      await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${slug}`)
+    }
 
     expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([
       'keepalive-in-nuxtpage: onMounted',