test:feat e2e

Author: lzxb

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
   root: true,
-  extends: ['standard']
+  plugins: ['testcafe'],
+  extends: ['standard', 'plugin:testcafe/recommended']
 }

examples/route/List.vue

@@ -7,11 +7,9 @@
         </router-link>
       </span>
     </header>
-    <ul>
+    <ul id="ul">
       <li v-for="(item, $index) in list.list" :key="item.id">
-        <router-link :to="{ name: 'detail', params: { id: item.id } }">
-          {{ item.title }}
-        </router-link>
+        <router-link :to="{ name: 'detail', params: { id: item.id } }">{{ item.title }}</router-link>
       </li>
     </ul>
   </div>

examples/server.js

@@ -22,7 +22,7 @@ fs.readdirSync(__dirname).forEach(file => {
 })
 
 app.use(express.static(__dirname))
-app.listen(3000, (err) => {
+module.exports = app.listen(3000, (err) => {
   if (err) return console.log(err)
   console.log('http://localhost:3000/')
 })

gulpfile.js

@@ -1,6 +1,17 @@
 const gulp = require('gulp')
+
+const moduleName = 'Vuet'
+const destName = 'vuet'
+
 const eslint = require('gulp-eslint')
 const clear = require('clear')
+gulp.task('lint', () => {
+  clear()
+  return gulp.src(['**/*.js', '!node_modules/**', '!dist/**'])
+    .pipe(eslint())
+    .pipe(eslint.format())
+})
+
 const { rollup } = require('rollup')
 const babel = require('rollup-plugin-babel')({
   babelrc: false,
@@ -9,22 +20,10 @@ const babel = require('rollup-plugin-babel')({
     'stage-0'
   ]
 })
-const ava = require('gulp-ava')
 const uglify = require('rollup-plugin-uglify')
 const { minify } = require('uglify-js')
 const replace = require('rollup-plugin-replace')
-
-const moduleName = 'Vuet'
-const destName = 'vuet'
-
-gulp.task('lint', () => {
-  clear()
-  return gulp.src(['**/*.js', '!node_modules/**', '!dist/**'])
-    .pipe(eslint())
-    .pipe(eslint.format())
-})
-
-gulp.task('build', ['lint'], () => {
+gulp.task('build', () => {
   // Development environment version
   return rollup({
     entry: 'src/index.js',
@@ -65,16 +64,28 @@ gulp.task('build', ['lint'], () => {
   })
 })
 
-gulp.task('test', ['build'], () => {
-  return gulp.src('test/**.test.js')
+const ava = require('gulp-ava')
+gulp.task('test', () => {
+  return gulp.src('test/unit/**.test.js')
   .pipe(ava({
     verbose: true // Enable verbose output
   }))
 })
 
-gulp.task('default', ['test'])
+const testcafe = require('gulp-testcafe')
+const server = require('./examples/server')
+gulp.task('e2e', () => {
+  return gulp.src('test/e2e/**.test.js')
+    .pipe(testcafe({ browsers: ['chrome'] }))
+})
+
+gulp.task('default', ['lint', 'build', 'test', 'e2e'], () => {
+  if (process.env.NODE_ENV !== 'development') {
+    server && server.close()
+    process.exit()
+  }
+})
 
 if (process.env.NODE_ENV === 'development') {
-  require('./examples/server')
-  gulp.watch(['**/*.js', '!node_modules/**', '!dist/**'], ['default'])
+  gulp.watch(['**/*.js', '!node_modules/**', '!dist/**'], ['dev'])
 }

package.json

@@ -7,7 +7,6 @@
     "cross-env": "node_modules/.bin/cross-env",
     "gulp": "node_modules/.bin/gulp",
     "dev": "npm run cross-env NODE_ENV=development npm run gulp",
-    "dist": "npm run cross-env NODE_ENV=production npm run gulp",
     "test": "npm run cross-env NODE_ENV=testing npm run gulp"
   },
   "files": [
@@ -40,16 +39,19 @@
     "babel-register": "^6.24.1",
     "clear": "0.0.1",
     "cross-env": "^5.0.0",
+    "css-loader": "^0.28.4",
     "eslint-config-standard": "^10.2.1",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-node": "^4.2.2",
     "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-testcafe": "^0.2.1",
     "express": "^4.15.3",
     "express-urlrewrite": "^1.2.0",
     "gulp": "^3.9.1",
     "gulp-ava": "^0.17.1",
     "gulp-eslint": "^3.0.1",
+    "gulp-testcafe": "^0.9.1",
     "jsdom": "^10.1.0",
     "rollup": "^0.41.6",
     "rollup-plugin-babel": "^2.7.1",

test/e2e/route.test.js

@@ -0,0 +1,13 @@
+import { Selector } from 'testcafe'
+
+fixture`route`
+.page`http://localhost:3000/route/index.html`
+
+test('Check property of element', async t => {
+  await t
+    .wait(2000)
+    .expect(Selector('ul li:nth-child(1) a').textContent).eql('1 title')
+    .expect(Selector('ul li:nth-child(2) a').textContent).eql('2 title')
+    .expect(Selector('ul li:nth-child(3) a').textContent).eql('3 title')
+    .expect(Selector('ul li:nth-child(4) a').textContent).eql('4 title')
+})