test: use page.waitForFunction for HMR testing

Author: haoqunjiang

packages/@vue/cli-plugin-typescript/__tests__/tsPlugin.helper.js

@@ -5,24 +5,23 @@ const create = require('@vue/cli-test-utils/createTestProject')
 const serve = require('@vue/cli-test-utils/serveWithPuppeteer')
 const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer')
 
-const sleep = n => new Promise(resolve => setTimeout(resolve, n))
-
 exports.assertServe = async (name, options) => {
   test('serve', async () => {
     const project = await create(name, options)
 
     await serve(
       () => project.run('vue-cli-service serve'),
-      async ({ nextUpdate, helpers }) => {
+      async ({ page, nextUpdate, helpers }) => {
         const msg = `Welcome to Your Vue.js + TypeScript App`
         expect(await helpers.getText('h1')).toMatch(msg)
 
         // test hot reload
         const file = await project.read(`src/App.vue`)
         project.write(`src/App.vue`, file.replace(msg, `Updated`))
         await nextUpdate() // wait for child stdout update signal
-        await sleep(5000) // give the client time to update
-        expect(await helpers.getText('h1')).toMatch(`Updated`)
+        await page.waitForFunction(selector => {
+          return document.querySelector(selector).textContent.includes('Updated')
+        }, {}, 'h1')
       }
     )
   })

packages/@vue/cli-service-global/__tests__/globalService.spec.js

@@ -10,7 +10,6 @@ const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer')
 
 const cwd = path.resolve(__dirname, 'temp')
 const binPath = require.resolve('@vue/cli/bin/vue')
-const sleep = n => new Promise(resolve => setTimeout(resolve, n))
 const write = (file, content) => fs.writeFile(path.join(cwd, file), content)
 
 const entryVue = fs.readFileSync(path.resolve(__dirname, 'entry.vue'), 'utf-8')
@@ -32,12 +31,14 @@ beforeEach(async () => {
 test('global serve', async () => {
   await serve(
     () => execa(binPath, ['serve'], { cwd }),
-    async ({ nextUpdate, helpers }) => {
+    async ({ page, nextUpdate, helpers }) => {
       expect(await helpers.getText('h1')).toMatch('hi')
       write('App.vue', entryVue.replace(`{{ msg }}`, 'Updated'))
       await nextUpdate() // wait for child stdout update signal
-      await sleep(1000) // give the client time to update
-      expect(await helpers.getText('h1')).toMatch(`Updated`)
+      await page.waitForFunction(selector => {
+        const el = document.querySelector(selector)
+        return el && el.textContent.includes('Updated')
+      }, {}, 'h1')
     }
   )
 })

packages/@vue/cli-service/__tests__/serve.spec.js

@@ -6,23 +6,23 @@ const { defaultPreset } = require('@vue/cli/lib/options')
 const create = require('@vue/cli-test-utils/createTestProject')
 const serve = require('@vue/cli-test-utils/serveWithPuppeteer')
 
-const sleep = n => new Promise(resolve => setTimeout(resolve, n))
-
 test('serve', async () => {
   const project = await create('e2e-serve', defaultPreset)
 
   await serve(
     () => project.run('vue-cli-service serve'),
-    async ({ nextUpdate, helpers }) => {
+    async ({ page, nextUpdate, helpers }) => {
       const msg = `Welcome to Your Vue.js App`
       expect(await helpers.getText('h1')).toMatch(msg)
 
       // test hot reload
       const file = await project.read(`src/App.vue`)
       project.write(`src/App.vue`, file.replace(msg, `Updated`))
       await nextUpdate() // wait for child stdout update signal
-      await sleep(5000) // give the client time to update
-      expect(await helpers.getText('h1')).toMatch(`Updated`)
+      await page.waitForFunction(selector => {
+        const el = document.querySelector(selector)
+        return el && el.textContent.includes('Updated')
+      }, {}, 'h1')
     }
   )
 })
@@ -97,16 +97,18 @@ test('serve with inline entry', async () => {
 
   await serve(
     () => project.run('vue-cli-service serve src/index.js'),
-    async ({ nextUpdate, helpers }) => {
+    async ({ page, nextUpdate, helpers }) => {
       const msg = `Welcome to Your Vue.js App`
       expect(await helpers.getText('h1')).toMatch(msg)
 
       // test hot reload
       const file = await project.read(`src/App.vue`)
       project.write(`src/App.vue`, file.replace(msg, `Updated`))
       await nextUpdate() // wait for child stdout update signal
-      await sleep(1000) // give the client time to update
-      expect(await helpers.getText('h1')).toMatch(`Updated`)
+      await page.waitForFunction(selector => {
+        const el = document.querySelector(selector)
+        return el && el.textContent.includes('Updated')
+      }, {}, 'h1')
     }
   )
 })
@@ -118,16 +120,18 @@ test('serve with no public dir', async () => {
 
   await serve(
     () => project.run('vue-cli-service serve'),
-    async ({ nextUpdate, helpers }) => {
+    async ({ page, nextUpdate, helpers }) => {
       const msg = `Welcome to Your Vue.js App`
       expect(await helpers.getText('h1')).toMatch(msg)
 
       // test hot reload
       const file = await project.read(`src/App.vue`)
       project.write(`src/App.vue`, file.replace(msg, `Updated`))
       await nextUpdate() // wait for child stdout update signal
-      await sleep(1000) // give the client time to update
-      expect(await helpers.getText('h1')).toMatch(`Updated`)
+      await page.waitForFunction(selector => {
+        const el = document.querySelector(selector)
+        return el && el.textContent.includes('Updated')
+      }, {}, 'h1')
     }
   )
 })