test(serve): test proxy option

Author: yyx990803

package.json

@@ -49,6 +49,7 @@
     "globby": "^8.0.1",
     "http-server": "^0.11.1",
     "jest": "^22.1.4",
+    "json-server": "^0.12.2",
     "lerna": "^2.8.0",
     "lint-staged": "^6.0.1",
     "memfs": "^2.6.0",

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

@@ -0,0 +1,109 @@
+jest.setTimeout(30000)
+
+const request = require('request-promise-native')
+const { defaultPreset } = require('@vue/cli/lib/options')
+const create = require('@vue/cli-test-utils/createTestProject')
+const serve = require('@vue/cli-test-utils/serveWithPuppeteer')
+const createJSONServer = require('@vue/cli-test-utils/createJSONServer')
+
+let mockServer1
+let mockServer2
+
+beforeAll(done => {
+  mockServer1 = createJSONServer({
+    'posts': [
+      { 'id': 1, 'title': 'server-one', 'author': 'typicode' }
+    ]
+  }).listen(3000, () => {
+    mockServer2 = createJSONServer({
+      'posts': [
+        { 'id': 1, 'title': 'server-two', 'author': 'typicode' }
+      ]
+    }).listen(3001, done)
+  })
+})
+
+afterAll(() => {
+  mockServer1.close()
+  mockServer2.close()
+})
+
+let newId = 1
+async function assertProxy (url, title) {
+  const res = await request({
+    url: `${url}posts/1`,
+    json: true
+  })
+  expect(res.title).toBe(title)
+
+  // POST
+  newId++
+  await request({
+    url: `${url}posts`,
+    json: true,
+    method: 'POST',
+    body: {
+      id: newId,
+      title: 'new',
+      author: 'test'
+    }
+  })
+
+  const newPost = await request({
+    url: `${url}posts/${newId}`,
+    json: true
+  })
+  expect(newPost.title).toBe('new')
+}
+
+test('serve with single proxy', async () => {
+  const project = await create('single-proxy', defaultPreset)
+
+  await project.write('vue.config.js', `
+    module.exports = {
+      devServer: {
+        proxy: 'http://localhost:3000'
+      }
+    }
+  `)
+
+  await serve(
+    () => project.run('vue-cli-service serve'),
+    ({ url }) => assertProxy(url, 'server-one'),
+    true /* no need for puppeteer */
+  )
+})
+
+test('serve with multi proxies', async () => {
+  const project = await create('multi-proxy', defaultPreset)
+
+  await project.write('vue.config.js', `
+    module.exports = {
+      devServer: {
+        proxy: {
+          '/one': {
+            target: 'http://localhost:3000',
+            pathRewrite: {
+              '^/one': ''
+            }
+          },
+          '/two': {
+            target: 'http://localhost:3001',
+            pathRewrite: {
+              '^/two': ''
+            }
+          }
+        }
+      }
+    }
+  `)
+
+  await serve(
+    () => project.run('vue-cli-service serve'),
+    async ({ url }) => {
+      await assertProxy(`${url}one/`, 'server-one')
+      await assertProxy(`${url}two/`, 'server-two')
+    },
+    true /* no need for puppeteer */
+  )
+})

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

@@ -0,0 +1,21 @@
+const jsonServer = require('json-server')
+
+const defaultData = () => ({
+  'posts': [
+    { 'id': 1, 'title': 'json-server', 'author': 'typicode' }
+  ],
+  'comments': [
+    { 'id': 1, 'body': 'some comment', 'postId': 1 }
+  ],
+  'profile': { 'name': 'typicode' }
+})
+
+module.exports = function createJSONServer (data = defaultData()) {
+  const server = jsonServer.create()
+  const router = jsonServer.router(data)
+  const middlewares = jsonServer.defaults()
+
+  server.use(middlewares)
+  server.use(router)
+  return server
+}

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

@@ -1,7 +1,7 @@
 const stripAnsi = require('strip-ansi')
 const launchPuppeteer = require('./launchPuppeteer')
 
-module.exports = async function serveWithPuppeteer (serve, test) {
+module.exports = async function serveWithPuppeteer (serve, test, noPuppeteer) {
   let activeBrowser
   let activeChild
 
@@ -43,22 +43,27 @@ module.exports = async function serveWithPuppeteer (serve, test) {
           // when running test in vscode terminal(zsh)
           url = stripAnsi(url)
 
-          // start browser
-          const { page, browser } = await launchPuppeteer(url)
-          activeBrowser = browser
+          if (noPuppeteer) {
+            await test({ url })
+          } else {
+            // start browser
+            const { page, browser } = await launchPuppeteer(url)
+            activeBrowser = browser
 
-          const helpers = createHelpers(page)
+            const helpers = createHelpers(page)
 
-          await test({
-            browser,
-            page,
-            url,
-            nextUpdate,
-            helpers
-          })
+            await test({
+              browser,
+              page,
+              url,
+              nextUpdate,
+              helpers
+            })
+
+            await browser.close()
+            activeBrowser = null
+          }
 
-          await browser.close()
-          activeBrowser = null
           // on appveyor, the spawned server process doesn't exit
           // and causes the build to hang.
           child.stdin.write('close')