test: use expect.poll instead of untilUpdated (#607)

Author: sapphi-red

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

@@ -7,9 +7,9 @@ import {
   editFile,
   getColor,
   isBuild,
+  isServe,
   page,
   untilBrowserLogAfter,
-  untilUpdated,
   viteServer,
 } from '~utils'
 
@@ -125,8 +125,8 @@ test('css', async () => {
   } else {
     // During dev, the CSS is loaded from async chunk and we may have to wait
     // when the test runs concurrently.
-    await untilUpdated(() => getColor('h1'), 'green')
-    await untilUpdated(() => getColor('.jsx'), 'blue')
+    await expect.poll(() => getColor('h1')).toMatch('green')
+    await expect.poll(() => getColor('.jsx')).toMatch('blue')
   }
 })
 
@@ -165,25 +165,30 @@ test('hydration', async () => {
   expect(await page.textContent('button')).toMatch('1')
 })
 
-test('hmr', { retry: 3 }, async () => {
+test.runIf(isServe)('hmr', { retry: 3 }, async () => {
   // This is test is flaky in Mac CI, but can't be reproduced locally. Wait until
   // network idle to avoid the issue. TODO: This may be caused by a bug when
   // modifying a file while loading, we should remove this guard
   await page.goto(url, { waitUntil: 'networkidle' })
   editFile('src/pages/Home.vue', (code) => code.replace('Home', 'changed'))
-  await untilUpdated(() => page.textContent('h1'), 'changed')
+  await expect.poll(() => page.textContent('h1')).toMatch('changed')
 })
 
 test('client navigation', async () => {
   await untilBrowserLogAfter(() => page.goto(url), 'hydrated')
 
-  await untilUpdated(() => page.textContent('a[href="/test/about"]'), 'About')
+  await expect
+    .poll(() => page.textContent('a[href="/test/about"]'))
+    .toMatch('About')
   await page.click('a[href="/test/about"]')
-  await untilUpdated(() => page.textContent('h1'), 'About')
+  await expect.poll(() => page.textContent('h1')).toMatch('About')
+
+  if (isBuild) return
+
   editFile('src/pages/About.vue', (code) => code.replace('About', 'changed'))
-  await untilUpdated(() => page.textContent('h1'), 'changed')
+  await expect.poll(() => page.textContent('h1')).toMatch('changed')
   await page.click('a[href="/test/"]')
-  await untilUpdated(() => page.textContent('a[href="/test/"]'), 'Home')
+  await expect.poll(() => page.textContent('a[href="/test/"]')).toMatch('Home')
 })
 
 test('import.meta.url', async () => {

playground/tailwind-v3/__tests__/tailwind.spec.ts

@@ -5,7 +5,6 @@ import {
   isServe,
   page,
   untilBrowserLogAfter,
-  untilUpdated,
 } from '~utils'
 
 test.runIf(isServe)('regenerate CSS and HMR (pug template)', async () => {
@@ -23,5 +22,5 @@ test.runIf(isServe)('regenerate CSS and HMR (pug template)', async () => {
     ],
     false,
   )
-  await untilUpdated(() => getBgColor(el), 'rgb(220, 38, 38)')
+  await expect.poll(() => getBgColor(el)).toMatch('rgb(220, 38, 38)')
 })

playground/tailwind/__tests__/tailwind.spec.ts

@@ -5,7 +5,6 @@ import {
   isServe,
   page,
   untilBrowserLogAfter,
-  untilUpdated,
 } from '~utils'
 
 test.runIf(isServe)('regenerate CSS and HMR (pug template)', async () => {
@@ -23,5 +22,5 @@ test.runIf(isServe)('regenerate CSS and HMR (pug template)', async () => {
     ],
     false,
   )
-  await untilUpdated(() => getBgColor(el), 'oklch(0.577 0.245 27.325)')
+  await expect.poll(() => getBgColor(el)).toMatch('oklch(0.577 0.245 27.325)')
 })

playground/test-utils.ts

@@ -10,7 +10,7 @@ import { normalizePath } from 'vite'
 import { fromComment } from 'convert-source-map'
 import { expect } from 'vitest'
 import type { ResultPromise as ExecaResultPromise } from 'execa'
-import { isBuild, isWindows, page, testDir } from './vitestSetup'
+import { isWindows, page, testDir } from './vitestSetup'
 
 export * from './vitestSetup'
 
@@ -67,8 +67,6 @@ function rgbToHex(rgb: string): string | undefined {
   return undefined
 }
 
-const timeout = (n: number) => new Promise((r) => setTimeout(r, n))
-
 async function toEl(el: string | ElementHandle): Promise<ElementHandle> {
   if (typeof el === 'string') {
     return await page.$(el)
@@ -99,9 +97,7 @@ export function readFile(filename: string): string {
 export function editFile(
   filename: string,
   replacer: (str: string) => string,
-  runInBuild: boolean = false,
 ): void {
-  if (isBuild && !runInBuild) return
   filename = path.resolve(testDir, filename)
   const content = fs.readFileSync(filename, 'utf-8')
   const modified = replacer(content)
@@ -148,46 +144,6 @@ export function readManifest(base = ''): Manifest {
   )
 }
 
-/**
- * Poll a getter until the value it returns includes the expected value.
- */
-export async function untilUpdated(
-  poll: () => string | Promise<string>,
-  expected: string,
-  runInBuild = false,
-): Promise<void> {
-  if (isBuild && !runInBuild) return
-  const maxTries = process.env.CI ? 200 : 50
-  for (let tries = 0; tries < maxTries; tries++) {
-    const actual = (await poll()) ?? ''
-    if (actual.indexOf(expected) > -1 || tries === maxTries - 1) {
-      expect(actual).toMatch(expected)
-      break
-    } else {
-      await timeout(50)
-    }
-  }
-}
-
-/**
- * Retry `func` until it does not throw error.
- */
-export async function withRetry(
-  func: () => Promise<void>,
-  runInBuild = false,
-): Promise<void> {
-  if (isBuild && !runInBuild) return
-  const maxTries = process.env.CI ? 200 : 50
-  for (let tries = 0; tries < maxTries; tries++) {
-    try {
-      await func()
-      return
-    } catch {}
-    await timeout(50)
-  }
-  await func()
-}
-
 type UntilBrowserLogAfterCallback = (logs: string[]) => PromiseLike<void> | void
 
 export async function untilBrowserLogAfter(

playground/vue-jsx/__tests__/vue-jsx.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest'
-import { editFile, isServe, page, untilUpdated } from '~utils'
+import { editFile, isServe, page } from '~utils'
 
 test('should render', async () => {
   expect(await page.textContent('.named')).toMatch('0')
@@ -38,7 +38,9 @@ describe.runIf(isServe)('vue-jsx server', () => {
     editFile('Comps.jsx', (code) =>
       code.replace('named {count', 'named updated {count'),
     )
-    await untilUpdated(() => page.textContent('.named'), 'named updated 0')
+    await expect
+      .poll(() => page.textContent('.named'))
+      .toMatch('named updated 0')
 
     // affect all components in same file
     expect(await page.textContent('.named-specifier')).toMatch('1')
@@ -51,10 +53,9 @@ describe.runIf(isServe)('vue-jsx server', () => {
     editFile('Comps.jsx', (code) =>
       code.replace('named specifier {count', 'named specifier updated {count'),
     )
-    await untilUpdated(
-      () => page.textContent('.named-specifier'),
-      'named specifier updated 1',
-    )
+    await expect
+      .poll(() => page.textContent('.named-specifier'))
+      .toMatch('named specifier updated 1')
 
     // affect all components in same file
     expect(await page.textContent('.default')).toMatch('2')
@@ -66,7 +67,9 @@ describe.runIf(isServe)('vue-jsx server', () => {
     editFile('Comps.jsx', (code) =>
       code.replace('default {count', 'default updated {count'),
     )
-    await untilUpdated(() => page.textContent('.default'), 'default updated 2')
+    await expect
+      .poll(() => page.textContent('.default'))
+      .toMatch('default updated 2')
 
     // should not affect other components on the page
     expect(await page.textContent('.default-tsx')).toMatch('4')
@@ -80,10 +83,9 @@ describe.runIf(isServe)('vue-jsx server', () => {
     editFile('Comp.tsx', (code) =>
       code.replace('default tsx {count', 'default tsx updated {count'),
     )
-    await untilUpdated(
-      () => page.textContent('.default-tsx'),
-      'default tsx updated 3',
-    )
+    await expect
+      .poll(() => page.textContent('.default-tsx'))
+      .toMatch('default tsx updated 3')
 
     // should not affect other components on the page
     expect(await page.textContent('.named')).toMatch('1')
@@ -93,7 +95,9 @@ describe.runIf(isServe)('vue-jsx server', () => {
     editFile('Script.vue', (code) =>
       code.replace('script {count', 'script updated {count'),
     )
-    await untilUpdated(() => page.textContent('.script'), 'script updated 4')
+    await expect
+      .poll(() => page.textContent('.script'))
+      .toMatch('script updated 4')
 
     expect(await page.textContent('.src-import')).toMatch('6')
   })
@@ -103,10 +107,9 @@ describe.runIf(isServe)('vue-jsx server', () => {
     editFile('SrcImport.jsx', (code) =>
       code.replace('src import {count', 'src import updated {count'),
     )
-    await untilUpdated(
-      () => page.textContent('.src-import'),
-      'src import updated 5',
-    )
+    await expect
+      .poll(() => page.textContent('.src-import'))
+      .toMatch('src import updated 5')
 
     expect(await page.textContent('.script')).toMatch('5')
   })
@@ -115,6 +118,6 @@ describe.runIf(isServe)('vue-jsx server', () => {
     editFile('setup-syntax-jsx.vue', (code) =>
       code.replace('let count = ref(100)', 'let count = ref(1000)'),
     )
-    await untilUpdated(() => page.textContent('.setup-jsx'), '1000')
+    await expect.poll(() => page.textContent('.setup-jsx')).toMatch('1000')
   })
 })

playground/vue-legacy/__tests__/vue-legacy.spec.ts

@@ -1,10 +1,10 @@
-import { test } from 'vitest'
-import { getBg, untilUpdated } from '~utils'
+import { expect, test } from 'vitest'
+import { getBg } from '~utils'
 
 test('vue legacy assets', async () => {
-  await untilUpdated(() => getBg('.main'), 'assets/asset', true)
+  await expect.poll(() => getBg('.main')).toMatch('assets/asset')
 })
 
 test('async vue legacy assets', async () => {
-  await untilUpdated(() => getBg('.module'), 'assets/asset', true)
+  await expect.poll(() => getBg('.module')).toMatch('assets/asset')
 })