more e2e test cases

yyx990803 · yyx990803 · commit 380b18d85581 · 2016-07-25T16:04:52.000-04:00
diff --git a/examples/data-fetching/Post.vue b/examples/data-fetching/Post.vue
@@ -3,6 +3,7 @@
     <div v-if="error" style="color: red;">
       {{ error }}
     </div>
+    <div class="loading" v-if="loading">Loading...</div>
     <div v-if="post">
       <h2>{{ post.title }}</h2>
       <p>{{ post.body }}</p>
@@ -11,13 +12,14 @@
 </template>
 
 <script>
-import axios from 'axios'
+import request from 'superagent'
 
 const API_ROOT = 'http://jsonplaceholder.typicode.com'
 
 export default {
   data () {
     return {
+      loading: false,
       post: null,
       error: null
     }
@@ -30,10 +32,26 @@ export default {
   },
   methods: {
     fetchData () {
-      axios.get(`${API_ROOT}/posts/${this.$route.params.id}`)
-        .then(res => { this.post = res.data })
-        .catch(err => { this.error = err.toString() })
+      this.loading = true
+      request
+        .get(`${API_ROOT}/posts/${this.$route.params.id}`)
+        .end((err, res) => {
+          this.loading = false
+          if (err) {
+            this.error = err.toString()
+          } else {
+            this.post = res.body
+          }
+        })
     }
   }
 }
 </script>
+
+<style>
+.loading {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+</style>
diff --git a/examples/redirect/app.js b/examples/redirect/app.js
@@ -3,7 +3,7 @@ import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
 
-const Home = { template: '<div><h1>Home</h1><router-view></router-view></div>' }
+const Home = { template: '<router-view></router-view>' }
 const Default = { template: '<div>default</div>' }
 const Foo = { template: '<div>foo</div>' }
 const Bar = { template: '<div>bar</div>' }
@@ -20,6 +20,7 @@ const router = new VueRouter({
         { path: 'foo', component: Foo },
         { path: 'bar', component: Bar },
         { path: 'baz', name: 'baz', component: Baz },
+        { path: 'with-params/:id', component: WithParams },
         // relative redirect to a sibling route
         { path: 'relative-redirect', redirect: 'foo' }
       ]
@@ -30,7 +31,6 @@ const router = new VueRouter({
     { path: '/named-redirect', redirect: { name: 'baz' }},
 
     // redirect with params
-    { path: '/with-params/:id', component: WithParams },
     { path: '/redirect-with-params/:id', redirect: '/with-params/:id' },
 
     // catch all redirect
diff --git a/examples/transitions/app.js b/examples/transitions/app.js
@@ -5,7 +5,7 @@ Vue.use(VueRouter)
 
 const Home = {
   template: `
-    <div>
+    <div class="home">
       <h2>Home</h2>
       <p>hello</p>
     </div>
@@ -30,15 +30,15 @@ const Parent = {
     <div class="parent">
       <h2>Parent</h2>
       <transition :name="transitionName">
-        <router-view class="slide"></router-view>
+        <router-view class="child-view"></router-view>
       </transition>
     </div>
   `
 }
 
-const Default = { template: '<div>default</div>' }
-const Foo = { template: '<div>foo</div>' }
-const Bar = { template: '<div>bar</div>' }
+const Default = { template: '<div class="default">default</div>' }
+const Foo = { template: '<div class="foo">foo</div>' }
+const Bar = { template: '<div class="bar">bar</div>' }
 
 const router = new VueRouter({
   mode: 'history',
@@ -67,7 +67,7 @@ new Vue({
         <li><router-link to="/parent/bar">/parent/bar</router-link></li>
       </ul>
       <transition name="fade" mode="out-in">
-        <router-view></router-view>
+        <router-view class="view"></router-view>
       </transition>
     </div>
   `
diff --git a/examples/transitions/index.html b/examples/transitions/index.html
@@ -7,17 +7,18 @@
 .fade-enter, .fade-leave-active {
   opacity: 0
 }
-.slide {
+.child-view {
   position: absolute;
-  transition: opacity .35s cubic-bezier(.55,0,.1,1),
-              transform .35s cubic-bezier(.55,0,.1,1);
+  transition: all .35s cubic-bezier(.55,0,.1,1);
 }
 .slide-left-enter, .slide-right-leave-active {
   opacity: 0;
+  -webkit-transform: translate(30px, 0);
   transform: translate(30px, 0);
 }
 .slide-left-leave-active, .slide-right-enter {
   opacity: 0;
+  -webkit-transform: translate(-30px, 0);
   transform: translate(-30px, 0);
 }
 </style>
diff --git a/package.json b/package.json
@@ -24,7 +24,6 @@
     "test:e2e": "node test/e2e/runner.js"
   },
   "devDependencies": {
-    "axios": "^0.13.1",
     "babel-core": "^6.11.4",
     "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.4",
@@ -52,6 +51,7 @@
     "rollup-plugin-replace": "^1.1.1",
     "rollup-watch": "^2.4.0",
     "selenium-server": "^2.53.1",
+    "superagent": "^2.1.0",
     "uglify-js": "^2.7.0",
     "vue": "^2.0.0-beta.3",
     "vue-loader": "^9.2.0",
diff --git a/test/e2e/specs/active-links.js b/test/e2e/specs/active-links.js
@@ -0,0 +1,38 @@
+module.exports = {
+  'active links': function (browser) {
+    browser
+    .url('http://localhost:8080/active-links/')
+      .waitForElementVisible('#app', 1000)
+      .assert.count('li a', 9)
+      // assert correct href with base
+      .assert.attributeContains('li:nth-child(1) a', 'href', '/active-links/')
+      .assert.attributeContains('li:nth-child(2) a', 'href', '/active-links/')
+      .assert.attributeContains('li:nth-child(3) a', 'href', '/active-links/users')
+      .assert.attributeContains('li:nth-child(4) a', 'href', '/active-links/users')
+      .assert.attributeContains('li:nth-child(5) a', 'href', '/active-links/users/evan')
+      .assert.attributeContains('li:nth-child(6) a', 'href', '/active-links/users/evan#foo')
+      .assert.attributeContains('li:nth-child(7) a', 'href', '/active-links/users/evan?foo=bar')
+      .assert.attributeContains('li:nth-child(8) a', 'href', '/active-links/users/evan?baz=qux&foo=bar')
+      .assert.attributeContains('li:nth-child(9) a', 'href', '/active-links/about')
+      .assert.containsText('.view', 'Home')
+
+    assertActiveLinks(1, [1, 2])
+    assertActiveLinks(2, [1, 2])
+    assertActiveLinks(3, [1, 3, 4])
+    assertActiveLinks(4, [1, 3, 4])
+    assertActiveLinks(5, [1, 3, 5])
+    assertActiveLinks(6, [1, 3, 5, 6])
+    assertActiveLinks(7, [1, 3, 5, 7])
+    assertActiveLinks(8, [1, 3, 5, 7, 8])
+    assertActiveLinks(9, [1, 9])
+
+    browser.end()
+
+    function assertActiveLinks (n, activeOnes) {
+      browser.click(`li:nth-child(${n}) a`)
+      activeOnes.forEach(i => {
+        browser.assert.cssClassPresent(`li:nth-child(${i}) a`, 'router-link-active')
+      })
+    }
+  }
+}
diff --git a/test/e2e/specs/data-fetching.js b/test/e2e/specs/data-fetching.js
@@ -0,0 +1,24 @@
+module.exports = {
+  'data fetching': function (browser) {
+    browser
+    .url('http://localhost:8080/data-fetching/')
+      .waitForElementVisible('#app', 1000)
+      .assert.count('li a', 3)
+      .assert.containsText('.view', 'home')
+
+      .click('li:nth-child(2) a')
+      .waitForElementNotPresent('.loading', 3000)
+      .assert.containsText('.post h2', 'sunt aut facere')
+      .assert.containsText('.post p', 'quia et suscipit')
+
+      .click('li:nth-child(3) a')
+      .waitForElementNotPresent('.loading', 3000)
+      .assert.containsText('.post h2', 'qui est esse')
+      .assert.containsText('.post p', 'est rerum tempore')
+
+      .click('li:nth-child(1) a')
+      .assert.elementNotPresent('.post')
+      .assert.containsText('.view', 'home')
+      .end()
+  }
+}
diff --git a/test/e2e/specs/redirect.js b/test/e2e/specs/redirect.js
@@ -0,0 +1,73 @@
+module.exports = {
+  'redirect': function (browser) {
+    browser
+    .url('http://localhost:8080/redirect/')
+      .waitForElementVisible('#app', 1000)
+      .assert.count('li a', 6)
+      // assert correct href with base
+      .assert.attributeContains('li:nth-child(1) a', 'href', '/redirect/foo')
+      .assert.attributeContains('li:nth-child(2) a', 'href', '/redirect/foo?foo=bar')
+      .assert.attributeContains('li:nth-child(3) a', 'href', '/redirect/bar')
+      .assert.attributeContains('li:nth-child(4) a', 'href', '/redirect/baz')
+      .assert.attributeContains('li:nth-child(5) a', 'href', '/redirect/with-params/123')
+      .assert.attributeContains('li:nth-child(6) a', 'href', '/redirect/')
+
+      .assert.containsText('.view', 'default')
+
+      .click('li:nth-child(1) a')
+      .assert.urlEquals('http://localhost:8080/redirect/foo')
+      .assert.containsText('.view', 'foo')
+
+      .click('li:nth-child(2) a')
+      .assert.urlEquals('http://localhost:8080/redirect/foo?foo=bar')
+      .assert.containsText('.view', 'foo')
+
+      .click('li:nth-child(3) a')
+      .assert.urlEquals('http://localhost:8080/redirect/bar')
+      .assert.containsText('.view', 'bar')
+
+      .click('li:nth-child(4) a')
+      .assert.urlEquals('http://localhost:8080/redirect/baz')
+      .assert.containsText('.view', 'baz')
+
+      .click('li:nth-child(5) a')
+      .assert.urlEquals('http://localhost:8080/redirect/with-params/123')
+      .assert.containsText('.view', '123')
+
+      .click('li:nth-child(6) a')
+      .assert.urlEquals('http://localhost:8080/redirect/')
+      .assert.containsText('.view', 'default')
+
+    // check initial visit
+    .url('http://localhost:8080/redirect/relative-redirect')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/redirect/foo')
+      .assert.containsText('.view', 'foo')
+
+    .url('http://localhost:8080/redirect/relative-redirect?foo=bar')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/redirect/foo?foo=bar')
+      .assert.containsText('.view', 'foo')
+
+    .url('http://localhost:8080/redirect/absolute-redirect')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/redirect/bar')
+      .assert.containsText('.view', 'bar')
+
+    .url('http://localhost:8080/redirect/named-redirect')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/redirect/baz')
+      .assert.containsText('.view', 'baz')
+
+    .url('http://localhost:8080/redirect/redirect-with-params/123')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/redirect/with-params/123')
+      .assert.containsText('.view', '123')
+
+    .url('http://localhost:8080/redirect/not-found')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/redirect/')
+      .assert.containsText('.view', 'default')
+      .end()
+  }
+}
diff --git a/test/e2e/specs/route-alias.js b/test/e2e/specs/route-alias.js
@@ -0,0 +1,59 @@
+module.exports = {
+  'route alias': function (browser) {
+    browser
+    .url('http://localhost:8080/route-alias/')
+      .waitForElementVisible('#app', 1000)
+      .assert.count('li a', 4)
+      // assert correct href with base
+      .assert.attributeContains('li:nth-child(1) a', 'href', '/route-alias/foo')
+      .assert.attributeContains('li:nth-child(2) a', 'href', '/route-alias/home/bar-alias')
+      .assert.attributeContains('li:nth-child(3) a', 'href', '/route-alias/baz')
+      .assert.attributeContains('li:nth-child(4) a', 'href', '/route-alias/home/baz-alias')
+
+      .click('li:nth-child(1) a')
+      .assert.urlEquals('http://localhost:8080/route-alias/foo')
+      .assert.containsText('.view', 'Home')
+      .assert.containsText('.view', 'foo')
+
+      .click('li:nth-child(2) a')
+      .assert.urlEquals('http://localhost:8080/route-alias/home/bar-alias')
+      .assert.containsText('.view', 'Home')
+      .assert.containsText('.view', 'bar')
+
+      .click('li:nth-child(3) a')
+      .assert.urlEquals('http://localhost:8080/route-alias/baz')
+      .assert.containsText('.view', 'Home')
+      .assert.containsText('.view', 'baz')
+
+      .click('li:nth-child(4) a')
+      .assert.urlEquals('http://localhost:8080/route-alias/home/baz-alias')
+      .assert.containsText('.view', 'Home')
+      .assert.containsText('.view', 'baz')
+
+    // check initial visit
+    .url('http://localhost:8080/route-alias/foo')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/route-alias/foo')
+      .assert.containsText('.view', 'Home')
+      .assert.containsText('.view', 'foo')
+
+    .url('http://localhost:8080/route-alias/home/bar-alias')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/route-alias/home/bar-alias')
+      .assert.containsText('.view', 'Home')
+      .assert.containsText('.view', 'bar')
+
+    .url('http://localhost:8080/route-alias/baz')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/route-alias/baz')
+      .assert.containsText('.view', 'Home')
+      .assert.containsText('.view', 'baz')
+
+    .url('http://localhost:8080/route-alias/home/baz-alias')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/route-alias/home/baz-alias')
+      .assert.containsText('.view', 'Home')
+      .assert.containsText('.view', 'baz')
+      .end()
+  }
+}
diff --git a/test/e2e/specs/transitions.js b/test/e2e/specs/transitions.js
@@ -0,0 +1,40 @@
+module.exports = {
+  'transitions': function (browser) {
+    const TIMEOUT = 2000
+
+    browser
+    .url('http://localhost:8080/transitions/')
+      .waitForElementVisible('#app', 1000)
+      .assert.count('li a', 4)
+
+      .click('li:nth-child(2) a')
+      .assert.cssClassPresent('.view.home', 'fade-leave-active')
+      .waitForElementPresent('.view.parent', TIMEOUT)
+      .assert.cssClassNotPresent('.child-view.default', 'slide-left-enter-active')
+      .assert.cssClassPresent('.view.parent', 'fade-enter-active')
+      .waitForElementNotPresent('.view.parent.fade-enter-active', TIMEOUT)
+
+      .click('li:nth-child(3) a')
+      .assert.cssClassPresent('.child-view.default', 'slide-left-leave-active')
+      .assert.cssClassPresent('.child-view.foo', 'slide-left-enter-active')
+      .waitForElementNotPresent('.child-view.default', TIMEOUT)
+
+      .click('li:nth-child(4) a')
+      .assert.cssClassPresent('.child-view.foo', 'slide-left-leave-active')
+      .assert.cssClassPresent('.child-view.bar', 'slide-left-enter-active')
+      .waitForElementNotPresent('.child-view.foo', TIMEOUT)
+
+      .click('li:nth-child(2) a')
+      .assert.cssClassPresent('.child-view.bar', 'slide-right-leave-active')
+      .assert.cssClassPresent('.child-view.default', 'slide-right-enter-active')
+      .waitForElementNotPresent('.child-view.bar', TIMEOUT)
+
+      .click('li:nth-child(1) a')
+      .assert.cssClassPresent('.view.parent', 'fade-leave-active')
+      .waitForElementPresent('.view.home', TIMEOUT)
+      .assert.cssClassPresent('.view.home', 'fade-enter-active')
+      .waitForElementNotPresent('.view.home.fade-enter-active', TIMEOUT)
+
+      .end()
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -7,17 +7,18 @@`
`7`	`7`	`.fade-enter, .fade-leave-active {`
`8`	`8`	`opacity: 0`
`9`	`9`	`}`
`10`		`-.slide {`
	`10`	`+.child-view {`
`11`	`11`	`position: absolute;`
`12`		`- transition: opacity .35s cubic-bezier(.55,0,.1,1),`
`13`		`- transform .35s cubic-bezier(.55,0,.1,1);`
	`12`	`+ transition: all .35s cubic-bezier(.55,0,.1,1);`
`14`	`13`	`}`
`15`	`14`	`.slide-left-enter, .slide-right-leave-active {`
`16`	`15`	`opacity: 0;`
	`16`	`+ -webkit-transform: translate(30px, 0);`
`17`	`17`	`transform: translate(30px, 0);`
`18`	`18`	`}`
`19`	`19`	`.slide-left-leave-active, .slide-right-enter {`
`20`	`20`	`opacity: 0;`
	`21`	`+ -webkit-transform: translate(-30px, 0);`
`21`	`22`	`transform: translate(-30px, 0);`
`22`	`23`	`}`
`23`	`24`	`</style>`