test: rewrite waitForNavigation to waitForEvent('load') (#13413)

playground/assets/__tests__/assets.spec.ts

@@ -408,12 +408,13 @@ test('inline style test', async () => {
 if (!isBuild) {
  test('@import in html style tag hmr', async () => {
  await untilUpdated(() => getColor('.import-css'), 'rgb(0, 136, 255)')
+ const loadPromise = page.waitForEvent('load')
  editFile(
  './css/import.css',
  (code) => code.replace('#0088ff', '#00ff88'),
  true,
  )
- await page.waitForNavigation()
+ await loadPromise
  await untilUpdated(() => getColor('.import-css'), 'rgb(0, 255, 136)')
  })
 }

playground/css/postcss-caching/css.spec.ts

@@ -33,7 +33,7 @@ test.runIf(isServe)('postcss config', async () => {
 
  blueApp = await startServer(blueAppDir)
 
- await page.goto(`http://localhost:${port}`)
+ await page.goto(`http://localhost:${port}`, { waitUntil: 'load' })
  const blueA = await page.$('.postcss-a')
  expect(await getColor(blueA)).toBe('blue')
  const blueB = await page.$('.postcss-b')
@@ -44,9 +44,9 @@ test.runIf(isServe)('postcss config', async () => {
  await blueApp.close()
  blueApp = null
 
- const navigationPromise = page.waitForNavigation() // wait for server restart auto reload
+ const loadPromise = page.waitForEvent('load') // wait for server restart auto reload
  greenApp = await startServer(greenAppDir)
- await navigationPromise
+ await loadPromise
 
  const greenA = await page.$('.postcss-a')
  expect(await getColor(greenA)).toBe('black')

playground/hmr/__tests__/hmr.spec.ts

@@ -229,16 +229,17 @@ if (!isBuild) {
  })
 
  test('not loaded dynamic import', async () => {
- await page.goto(viteTestUrl + '/counter/index.html')
+ await page.goto(viteTestUrl + '/counter/index.html', { waitUntil: 'load' })
 
  let btn = await page.$('button')
  expect(await btn.textContent()).toBe('Counter 0')
  await btn.click()
  expect(await btn.textContent()).toBe('Counter 1')
 
  // Modifying `index.ts` triggers a page reload, as expected
+ const indexTsLoadPromise = page.waitForEvent('load')
  editFile('counter/index.ts', (code) => code)
- await page.waitForNavigation()
+ await indexTsLoadPromise
  btn = await page.$('button')
  expect(await btn.textContent()).toBe('Counter 0')
 
@@ -251,13 +252,12 @@ if (!isBuild) {
  // (Note that, a dynamic import that is never loaded and that does not
  // define `accept.module.hot.accept` may wrongfully trigger a full page
  // reload, see discussion at #7561.)
+ const depTsLoadPromise = page.waitForEvent('load', { timeout: 1000 })
  editFile('counter/dep.ts', (code) => code)
- try {
- await page.waitForNavigation({ timeout: 1000 })
- } catch (err) {
- const errMsg = 'page.waitForNavigation: Timeout 1000ms exceeded.'
- expect(err.message.slice(0, errMsg.length)).toBe(errMsg)
- }
+ await expect(depTsLoadPromise).rejects.toThrow(
+ /page\.waitForEvent: Timeout \d+ms exceeded while waiting for event "load"/,
+ )
+
  btn = await page.$('button')
  expect(await btn.textContent()).toBe('Counter 1')
  })
@@ -653,21 +653,25 @@ if (!isBuild) {
  test('css in html hmr', async () => {
  await page.goto(viteTestUrl)
  expect(await getBg('.import-image')).toMatch('icon')
- await page.goto(viteTestUrl + '/foo/')
+ await page.goto(viteTestUrl + '/foo/', { waitUntil: 'load' })
  expect(await getBg('.import-image')).toMatch('icon')
+
+ const loadPromise = page.waitForEvent('load')
  editFile('index.html', (code) => code.replace('url("./icon.png")', ''))
- await page.waitForNavigation()
+ await loadPromise
  expect(await getBg('.import-image')).toMatch('')
  })
 
  test('HTML', async () => {
  await page.goto(viteTestUrl + '/counter/index.html')
  let btn = await page.$('button')
  expect(await btn.textContent()).toBe('Counter 0')
+
+ const loadPromise = page.waitForEvent('load')
  editFile('counter/index.html', (code) =>
  code.replace('Counter', 'Compteur'),
  )
- await page.waitForNavigation()
+ await loadPromise
  btn = await page.$('button')
  expect(await btn.textContent()).toBe('Compteur 0')
  })
@@ -701,18 +705,20 @@ if (!isBuild) {
  const unImportCode = `// ${importCode}`
  const timeout = 2000
 
- await page.goto(viteTestUrl + '/missing-import/index.html')
+ await page.goto(viteTestUrl + '/missing-import/index.html', {
+ waitUntil: 'load',
+ })
 
  await untilBrowserLogAfter(async () => {
- const navigationPromise = page.waitForNavigation({ timeout })
+ const loadPromise = page.waitForEvent('load', { timeout })
  editFile(file, (code) => code.replace(importCode, unImportCode))
- await navigationPromise
+ await loadPromise
  }, 'missing test')
 
  await untilBrowserLogAfter(async () => {
- const navigationPromise = page.waitForNavigation({ timeout })
+ const loadPromise = page.waitForEvent('load', { timeout })
  editFile(file, (code) => code.replace(unImportCode, importCode))
- await navigationPromise
+ await loadPromise
  }, /500/)
  })
 

playground/ssr-html/__tests__/ssr-html.spec.ts

@@ -48,10 +48,13 @@ describe.runIf(isServe)('hmr', () => {
  await page.goto(url)
  const el = await page.$('.virtual')
  expect(await el.textContent()).toBe('[success]')
+
+ const loadPromise = page.waitForEvent('load')
  editFile('src/importedVirtual.js', (code) =>
  code.replace('[success]', '[wow]'),
  )
- await page.waitForNavigation()
+ await loadPromise
+
  await untilUpdated(async () => {
  const el = await page.$('.virtual')
  return await el.textContent()