extract serveWithPuppeteer helper

packages/@vue/cli-plugin-eslint/__tests__/plugin.spec.js

@@ -1,6 +1,6 @@
 jest.setTimeout(10000)
 
-const create = require('@vue/cli-test-utils/createTestProjectWithOptions')
+const create = require('@vue/cli-test-utils/createTestProject')
 
 test('should work', async () => {
   const { read, write, run } = await create('eslint', {
@@ -18,7 +18,7 @@ test('should work', async () => {
   // remove semicolons
   await write('src/main.js', main.replace(/;/g, ''))
   // lint
-  const child = await run('vue-cli-service lint')
+  await run('vue-cli-service lint')
   expect(await read('src/main.js')).toMatch(';')
 
   // TODO lint-on-commit

packages/@vue/cli-plugin-unit-mocha-webpack/__tests__/plugin.spec.js

@@ -1,6 +1,6 @@
 jest.setTimeout(20000)
 
-const create = require('@vue/cli-test-utils/createTestProjectWithOptions')
+const create = require('@vue/cli-test-utils/createTestProject')
 
 test('should work', async () => {
   const { run } = await create('unit-mocha-webpack', {

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

@@ -1,84 +1,24 @@
 jest.setTimeout(20000)
 
-const puppeteer = require('puppeteer')
 const { defaults } = require('@vue/cli/lib/options')
-const create = require('@vue/cli-test-utils/createTestProjectWithOptions')
+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))
 
-let activeBrowser
-let activeChild
-
 test('serve', async () => {
-  const { read, write, run } = await create('e2e', defaults)
-
-  let notifyUpdate
-  const nextUpdate = () => {
-    return new Promise(resolve => {
-      notifyUpdate = resolve
-    })
-  }
-
-  const runTest = async (url) => {
-    const opts = process.env.CI
-      ? { args: ['--no-sandbox', '--disable-setuid-sandbox'] }
-      : {}
-    const browser = activeBrowser = await puppeteer.launch(opts)
-    const page = await browser.newPage()
-    await page.goto(url)
-
-    const assertText = async (selector, text) => {
-      const value = await page.evaluate(() => {
-        return document.querySelector('h1').textContent
-      })
-      expect(value).toMatch(text)
-    }
+  const project = await create('e2e-serve', defaults)
 
+  await serve(project, async ({ nextUpdate, assertText }) => {
     const msg = `Welcome to Your Vue.js App`
     await assertText('h1', msg)
 
     // test hot reload
-    const file = await read(`src/App.vue`)
-    await write(`src/App.vue`, file.replace(msg, `Updated`))
+    const file = await project.read(`src/App.vue`)
+    await 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, should happen in 1s
     await assertText('h1', `Updated`)
-
-    await browser.close()
-    activeBrowser = null
-  }
-
-  await new Promise(resolve => {
-    const child = activeChild = run(`vue-cli-service serve`)
-
-    let isFirstMatch = true
-    child.stdout.on('data', async (data) => {
-      const urlMatch = data.toString().match(/http:\/\/[^/]+\//)
-      if (urlMatch && isFirstMatch) {
-        isFirstMatch = false
-        await runTest(urlMatch[0])
-        child.kill()
-        resolve()
-      } else if (data.toString().match(/App updated/)) {
-        if (notifyUpdate) {
-          notifyUpdate()
-        }
-      }
-    })
-
-    child.on('exit', () => {
-      activeChild = null
-    })
   })
 })
-
-// cleanup in case test failed
-afterAll(async () => {
-  if (activeBrowser) {
-    await activeBrowser.close()
-  }
-  if (activeChild) {
-    activeChild.kill()
-  }
-})

packages/@vue/cli-test-utils/createTestProject.js

@@ -6,7 +6,7 @@ const readFile = promisify(fs.readFile)
 const writeFile = promisify(fs.writeFile)
 const mkdirp = promisify(require('mkdirp'))
 
-module.exports = function createTestProjectWithOptions (name, config, cwd) {
+module.exports = function createTestProject (name, config, cwd) {
   cwd = cwd || path.resolve(__dirname, '../../test')
 
   config = Object.assign({

packages/@vue/cli-test-utils/package.json

@@ -21,6 +21,7 @@
     "access": "public"
   },
   "dependencies": {
-    "execa": "^0.8.0"
+    "execa": "^0.8.0",
+    "puppeteer": "^0.13.0"
   }
 }

packages/@vue/cli-test-utils/serveWithPuppeteer.js

@@ -0,0 +1,79 @@
+const puppeteer = require('puppeteer')
+
+module.exports = async function serveWithPuppeteer (
+  project, // should be project created with createTestProject()
+  testFn // must be async
+) {
+  let browser
+  let child
+
+  const puppeteerOptions = process.env.CI
+    ? { args: ['--no-sandbox', '--disable-setuid-sandbox'] }
+    : {}
+
+  let notifyUpdate
+  const nextUpdate = () => {
+    return new Promise(resolve => {
+      notifyUpdate = resolve
+    })
+  }
+
+  return new Promise((resolve, reject) => {
+    child = project.run('vue-cli-service serve')
+
+    let isFirstMatch = true
+    child.stdout.on('data', async (data) => {
+      try {
+        const urlMatch = data.toString().match(/http:\/\/[^/]+\//)
+        if (urlMatch && isFirstMatch) {
+          isFirstMatch = false
+          // start browser
+          browser = await puppeteer.launch(puppeteerOptions)
+          const page = await browser.newPage()
+          const url = urlMatch[0]
+          await page.goto(url)
+
+          const assertText = async (selector, text) => {
+            const value = await page.evaluate(() => {
+              return document.querySelector('h1').textContent
+            })
+            expect(value).toMatch(text)
+          }
+
+          await testFn({
+            browser,
+            page,
+            url,
+            nextUpdate,
+            assertText
+          })
+
+          await browser.close()
+          browser = null
+          child.kill()
+          child = null
+          resolve()
+        } else if (data.toString().match(/App updated/)) {
+          if (notifyUpdate) {
+            notifyUpdate()
+          }
+        }
+      } catch (err) {
+        if (browser) {
+          await browser.close()
+        }
+        if (child) {
+          child.kill()
+        }
+        reject(err)
+      }
+    })
+
+    child.on('exit', code => {
+      child = null
+      if (code !== 0) {
+        reject(`serve exited with code ${code}`)
+      }
+    })
+  })
+}