e2e test for chat

Author: yyx990803

package.json

@@ -16,7 +16,9 @@
     "chat": "cd examples/chat && webpack-dev-server --inline --hot --config ../webpack.shared.config.js",
     "build": "node build/build.js",
     "build-examples": "webpack --config examples/webpack.build-all.config.js",
-    "test": "eslint src && BABEL_ENV=development mocha --compilers js:babel-core/register",
+    "unit": "BABEL_ENV=development mocha test/unit/test.js --compilers js:babel-core/register",
+    "e2e": "casperjs test --concise ./test/e2e",
+    "test": "eslint src && npm run unit && npm run build-examples && npm run e2e",
     "docs": "cd docs && gitbook serve",
     "deploy-docs": "cd docs && ./deploy.sh"
   },
@@ -40,6 +42,7 @@
     "babel-preset-es2015-rollup": "^1.1.1",
     "babel-preset-stage-2": "^6.1.18",
     "babel-runtime": "^5.8.0",
+    "casperjs": "^1.1.0-beta5",
     "chai": "^3.4.1",
     "css-loader": "^0.23.1",
     "eslint": "^2.2.0",

test/e2e/chat.js

@@ -0,0 +1,52 @@
+casper.test.begin('chat', 16, function (test) {
+  casper
+  .start('examples/chat/index.html')
+  .then(function () {
+    test.assertSelectorHasText('.thread-count', 'Unread threads: 2')
+    test.assertElementCount('.thread-list-item', 3)
+    test.assertSelectorHasText('.thread-list-item.active', 'Functional Heads')
+    test.assertSelectorHasText('.message-thread-heading', 'Functional Heads')
+    test.assertElementCount('.message-list-item', 2)
+    test.assertSelectorHasText('.message-list-item:nth-child(1) .message-author-name', 'Bill')
+    test.assertSelectorHasText('.message-list-item:nth-child(1) .message-text', 'Hey Brian')
+  })
+  .then(function () {
+    this.sendKeys('.message-composer', 'hi')
+    enter()
+  })
+  .wait(50) // the demo simulates API latency
+  .then(function () {
+    test.assertElementCount('.message-list-item', 3)
+    test.assertSelectorHasText('.message-list-item:nth-child(3)', 'hi')
+  })
+  .thenClick('.thread-list-item:nth-child(2)', function () {
+    test.assertSelectorHasText('.thread-list-item.active', 'Dave and Bill')
+    test.assertSelectorHasText('.message-thread-heading', 'Dave and Bill')
+    test.assertElementCount('.message-list-item', 2)
+    test.assertSelectorHasText('.message-list-item:nth-child(1) .message-author-name', 'Bill')
+    test.assertSelectorHasText('.message-list-item:nth-child(1) .message-text', 'Hey Dave')
+  })
+  .then(function () {
+    this.sendKeys('.message-composer', 'hi')
+    enter()
+  })
+  .wait(50) // the demo simulates API latency
+  .then(function () {
+    test.assertElementCount('.message-list-item', 3)
+    test.assertSelectorHasText('.message-list-item:nth-child(3)', 'hi')
+  })
+  .run(function () {
+    test.done()
+  })
+})
+
+function enter () {
+  casper.evaluate(function () {
+    // casper.mouseEvent can't set keyCode
+    var field = document.querySelector('.message-composer')
+    var e = document.createEvent('HTMLEvents')
+    e.initEvent('keyup', true, true)
+    e.keyCode = 13
+    field.dispatchEvent(e)
+  })
+}

test/test.js renamed to test/unit/test.js

@@ -1,7 +1,7 @@
 import { expect } from 'chai'
 import Vue from 'vue'
-import Vuex from '../src'
-import * as util from '../src/util'
+import Vuex from '../../src'
+import * as util from '../../src/util'
 
 Vue.use(Vuex)