Merge pull request #863 from vuejs/e2e-test

E2E test, fix #802

.gitignore

@@ -1,10 +1,11 @@
 .DS_Store
 npm-debug.log
-node_modules/
-out/
 
-server/dist
+node_modules
+.vscode-test
 
+dist
+server/dist
 docs/.vuepress/dist
 
 *.zip

.travis.yml

@@ -1,7 +1,24 @@
 language: node_js
+os:
+  - osx
+  - linux
 node_js: 6
-before_script:
-  - npm install yarn -g
+
+before_install:
+  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.9.4
+  - export PATH=$HOME/.yarn/bin:$PATH
+  - if [ $TRAVIS_OS_NAME == "linux" ]; then
+      export CXX="g++-4.9" CC="gcc-4.9" DISPLAY=:99.0;
+      sh -e /etc/init.d/xvfb start;
+      sleep 3;
+    fi
+
+install:
+  - yarn
   - cd server && yarn
   - cd ..
+
+script:
+  - yarn test
+
 cache: yarn

.vscode/launch.json

@@ -17,7 +17,11 @@
       ],
       "internalConsoleOptions": "neverOpen",
       "sourceMaps": true,
-      "outFiles": ["${workspaceRoot}/out/**/*.js"]
+      "outFiles": ["${workspaceRoot}/dist/**/*.js"],
+      "smartStep": true,
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
     },
     {
       "name": "server",
@@ -27,7 +31,29 @@
       "sourceMaps": true,
       "outFiles": ["${workspaceRoot}/server/dist/**/*.js"],
       "protocol": "inspector",
-      "restart": true
+      "restart": true,
+      "smartStep": true,
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
+    },
+    {
+      "name": "E2E Test",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceRoot}",
+        "--extensionTestsPath=${workspaceRoot}/dist/test",
+        "${workspaceRoot}/test/fixture"
+      ],
+      "stopOnEntry": false,
+      "sourceMaps": true,
+      "outFiles": ["${workspaceRoot}/dist/test/**/*.js"],
+      "smartStep": true,
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
     }
   ]
 }

.vscode/settings.json

@@ -3,6 +3,6 @@
   "files.exclude": {
     "server/dist": true,
     "docs/_book": true,
-    "client/out": true
+    "dist": true
   }
 }

package.json

@@ -15,9 +15,10 @@
     "prepush": "npm run test:server",
     "lint": "tslint -p tslint.json",
     "test:server": "cd server && npm run compile && npm test",
-    "test": "npm run lint && npm run test:server",
+    "test:e2e": "sh ./test/e2e.sh",
+    "test": "run-s lint compile test:server test:e2e",
     "docs": "bash ./build/update-docs.sh",
-    "postinstall": "if [[ ${NODE_ENV} != \"production\" ]]; then node ./node_modules/vscode/bin/install; fi"
+    "postinstall": "node ./node_modules/vscode/bin/install"
   },
   "lint-staged": {
     "*.ts": [
@@ -39,7 +40,7 @@
     "Programming Languages"
   ],
   "engines": {
-    "vscode": "^1.24.0"
+    "vscode": "^1.25.0"
   },
   "dependencies": {
     "vscode-languageclient": "^3.4.2",
@@ -48,7 +49,7 @@
   "activationEvents": [
     "onLanguage:vue"
   ],
-  "main": "./out/vueMain",
+  "main": "./dist/client/vueMain",
   "contributes": {
     "commands": [
       {
@@ -308,9 +309,11 @@
     }
   },
   "devDependencies": {
+    "@types/mocha": "^5.2.5",
     "@types/node": "^8.0.51",
     "husky": "^0.14.3",
     "lint-staged": "^6.0.0",
+    "mocha": "^5.2.0",
     "npm-run-all": "^4.1.3",
     "tslint": "^5.8.0",
     "typescript": "^2.8.1",

server/src/vueServerMain.ts

@@ -42,13 +42,14 @@ connection.onInitialize((params: InitializeParams): InitializeResult => {
     documentFormattingProvider: true,
     hoverProvider: true,
     documentHighlightProvider: true,
+    documentLinkProvider: true,
     documentSymbolProvider: true,
     definitionProvider: true,
     referencesProvider: true,
     colorProvider: true
   };
 
-  return { capabilities };
+  return { capabilities: (capabilities as any) };
 });
 
 connection.listen();

test/e2e.sh

@@ -0,0 +1,14 @@
+#!/usr/bin/env bash
+
+export CODE_TESTS_PATH="$(pwd)/dist/test"
+export CODE_TESTS_WORKSPACE="$(pwd)/test/fixture"
+
+CODE_ROOT=$(pwd)
+
+if [ ! -d "$(pwd)/test/fixture/node_modules" ]; then
+  cd $CODE_TESTS_WORKSPACE
+  yarn install
+  cd $CODE_ROOT
+fi
+
+node "$(pwd)/node_modules/vscode/bin/test"

test/fixture/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "vetur.format.defaultFormatter.html": "js-beautify-html"
+}

test/fixture/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-present, Pine Wu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

test/fixture/README.md

@@ -0,0 +1,28 @@
+# Veturpack
+
+Project based on [vuepack](https://github.com/egoist/vuepack) to try [Vetur](https://github.com/octref/vetur).
+
+## Usage
+
+```bash
+$ yarn
+$ yarn dev
+```
+
+## Things to Try
+
+- Do a emmet expansion on the html template.
+- Try `_.` in `Counter.vue` to see lodash auto completion.
+- Edit `.eslintrc` to config linting rules.
+- Remove `// @ts-check` and add it back to see their difference.
+- Format the document.
+- Change some options in `vetur.format.*` then format again.
+- Install another library with types, such as jquery.
+  - `npm i -S jquery && npm i -D @types/jquery`.
+  - Put `import * as $ from 'jquery'`.
+  - Try some jquery auto completion by typing `$.`.
+- Try some auto completion in scss.
+
+## License
+
+MIT © [Pine Wu](https://github.com/octref)

test/fixture/build/config.js

@@ -0,0 +1,10 @@
+'use strict'
+const pkg = require('../package')
+
+module.exports = {
+  port: 4000,
+  title: 'veturpack',
+  // when you use electron please set to relative path like ./
+  // otherwise only set to absolute path when you're using history mode
+  publicPath: '/',
+}

test/fixture/build/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

test/fixture/build/log-plugin.js

@@ -0,0 +1,15 @@
+'use strict'
+const chalk = require('chalk')
+
+// this plugin if for loggin url after each time the compilation is done.
+module.exports = class LogPlugin {
+  constructor(port) {
+    this.port = port
+  }
+
+  apply(compiler) {
+    compiler.plugin('done', () => {
+      console.log(`> VuePack is running at ${chalk.yellow(`http://localhost:${this.port}`)}\n`)
+    })
+  }
+}

test/fixture/build/server.js

@@ -0,0 +1,52 @@
+'use strict'
+const fs = require('fs')
+const path = require('path')
+const chalk = require('chalk')
+const express = require('express')
+const webpack = require('webpack')
+const webpackConfig = require('./webpack.dev')
+const config = require('./config')
+const LogPlugin = require('./log-plugin')
+
+const app = express()
+
+const port = config.port
+webpackConfig.entry.client = [
+  `webpack-hot-middleware/client?reload=true`,
+  webpackConfig.entry.client
+]
+
+webpackConfig.plugins.push(new LogPlugin(port))
+
+let compiler
+
+try {
+  compiler = webpack(webpackConfig)
+} catch (err) {
+  console.log(err.message)
+  process.exit(1)
+}
+
+const devMiddleWare = require('webpack-dev-middleware')(compiler, {
+  publicPath: webpackConfig.output.publicPath,
+  quiet: true
+})
+app.use(devMiddleWare)
+app.use(require('webpack-hot-middleware')(compiler, {
+  log: () => {}
+}))
+
+const mfs = devMiddleWare.fileSystem
+const file = path.join(webpackConfig.output.path, 'index.html')
+
+
+devMiddleWare.waitUntilValid()
+
+app.get('*', (req, res) => {
+  devMiddleWare.waitUntilValid(() => {
+    const html = mfs.readFileSync(file)
+    res.end(html)
+  })
+})
+
+app.listen(port)

test/fixture/build/utils.js

@@ -0,0 +1,68 @@
+'use strict'
+const path = require('path')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const config = require('./config')
+
+const _ = module.exports = {}
+
+_.cwd = (file) => {
+  return path.join(process.cwd(), file || '')
+}
+
+_.cssLoader = config.cssModules ?
+  'css-loader?-autoprefixer&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' :
+  'css-loader?-autoprefixer'
+
+_.cssProcessors = [
+  {loader: '', test: /\.css$/},
+  {loader: 'sass-loader?sourceMap', test: /\.scss$/},
+  {loader: 'less-loader?sourceMap', test: /\.less$/},
+  {loader: 'stylus-loader?sourceMap', test: /\.styl$/},
+  {loader: 'sass-loader?indentedSyntax&sourceMap', test: /\.sass$/},
+]
+
+_.outputPath = config.electron ?
+  path.join(__dirname, '../app/dist') :
+  path.join(__dirname, '../dist')
+
+_.outputIndexPath = config.electron ?
+  path.join(__dirname, '../app/dist/index.html') :
+  path.join(__dirname, '../dist/index.html')
+
+_.target = config.electron ?
+  'electron-renderer' :
+  'web'
+
+// https://github.com/egoist/vbuild/blob/master/lib/vue-loaders.js
+_.loadersOptions = () => {
+  const isProd = process.env.NODE_ENV === 'production'
+
+  function generateLoader(langs) {
+    langs.unshift('css-loader?sourceMap&-autoprefixer')
+    if (!isProd) {
+      return ['vue-style-loader'].concat(langs).join('!')
+    }
+    return ExtractTextPlugin.extract({
+      fallback: 'vue-style-loader',
+      use: langs.join('!')
+    })
+  }
+
+  return {
+    minimize: isProd,
+    options: {
+      // css-loader relies on context
+      context: process.cwd(),
+      vue: {
+        loaders: {
+          css: generateLoader([]),
+          sass: generateLoader(['sass-loader?indentedSyntax&sourceMap']),
+          scss: generateLoader(['sass-loader?sourceMap']),
+          less: generateLoader(['less-loader?sourceMap']),
+          stylus: generateLoader(['stylus-loader?sourceMap']),
+          js: 'babel-loader'
+        }
+      }
+    }
+  }
+}