Skip to content

Commit 380b18d

Browse files
yyx990803yyx990803
committed
more e2e test cases
1 parent 5992501 commit 380b18d

File tree

10 files changed

+269
-16
lines changed

10 files changed

+269
-16
lines changed

‎examples/data-fetching/Post.vue‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<div v-if="error" style="color: red;">
44
{{ error }}
55
</div>
6+
<div class="loading" v-if="loading">Loading...</div>
67
<div v-if="post">
78
<h2>{{ post.title }}</h2>
89
<p>{{ post.body }}</p>
@@ -11,13 +12,14 @@
1112
</template>
1213

1314
<script>
14-
import axios from 'axios'
15+
import request from 'superagent'
1516
1617
const API_ROOT = 'http://jsonplaceholder.typicode.com'
1718
1819
export default {
1920
data () {
2021
return {
22+
loading: false,
2123
post: null,
2224
error: null
2325
}
@@ -30,10 +32,26 @@ export default {
3032
},
3133
methods: {
3234
fetchData () {
33-
axios.get(`${API_ROOT}/posts/${this.$route.params.id}`)
34-
.then(res => { this.post = res.data })
35-
.catch(err => { this.error = err.toString() })
35+
this.loading = true
36+
request
37+
.get(`${API_ROOT}/posts/${this.$route.params.id}`)
38+
.end((err, res) => {
39+
this.loading = false
40+
if (err) {
41+
this.error = err.toString()
42+
} else {
43+
this.post = res.body
44+
}
45+
})
3646
}
3747
}
3848
}
3949
</script>
50+
51+
<style>
52+
.loading {
53+
position: absolute;
54+
top: 10px;
55+
right: 10px;
56+
}
57+
</style>

‎examples/redirect/app.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import VueRouter from 'vue-router'
33

44
Vue.use(VueRouter)
55

6-
const Home = { template: '<div><h1>Home</h1><router-view></router-view></div>' }
6+
const Home = { template: '<router-view></router-view>' }
77
const Default = { template: '<div>default</div>' }
88
const Foo = { template: '<div>foo</div>' }
99
const Bar = { template: '<div>bar</div>' }
@@ -20,6 +20,7 @@ const router = new VueRouter({
2020
{ path: 'foo', component: Foo },
2121
{ path: 'bar', component: Bar },
2222
{ path: 'baz', name: 'baz', component: Baz },
23+
{ path: 'with-params/:id', component: WithParams },
2324
// relative redirect to a sibling route
2425
{ path: 'relative-redirect', redirect: 'foo' }
2526
]
@@ -30,7 +31,6 @@ const router = new VueRouter({
3031
{ path: '/named-redirect', redirect: { name: 'baz' }},
3132

3233
// redirect with params
33-
{ path: '/with-params/:id', component: WithParams },
3434
{ path: '/redirect-with-params/:id', redirect: '/with-params/:id' },
3535

3636
// catch all redirect

‎examples/transitions/app.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Vue.use(VueRouter)
55

66
const Home = {
77
template: `
8-
<div>
8+
<div class="home">
99
<h2>Home</h2>
1010
<p>hello</p>
1111
</div>
@@ -30,15 +30,15 @@ const Parent = {
3030
<div class="parent">
3131
<h2>Parent</h2>
3232
<transition :name="transitionName">
33-
<router-view class="slide"></router-view>
33+
<router-view class="child-view"></router-view>
3434
</transition>
3535
</div>
3636
`
3737
}
3838

39-
const Default = { template: '<div>default</div>' }
40-
const Foo = { template: '<div>foo</div>' }
41-
const Bar = { template: '<div>bar</div>' }
39+
const Default = { template: '<div class="default">default</div>' }
40+
const Foo = { template: '<div class="foo">foo</div>' }
41+
const Bar = { template: '<div class="bar">bar</div>' }
4242

4343
const router = new VueRouter({
4444
mode: 'history',
@@ -67,7 +67,7 @@ new Vue({
6767
<li><router-link to="/parent/bar">/parent/bar</router-link></li>
6868
</ul>
6969
<transition name="fade" mode="out-in">
70-
<router-view></router-view>
70+
<router-view class="view"></router-view>
7171
</transition>
7272
</div>
7373
`

‎examples/transitions/index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,18 @@
77
.fade-enter, .fade-leave-active {
88
opacity: 0
99
}
10-
.slide {
10+
.child-view {
1111
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);
1413
}
1514
.slide-left-enter, .slide-right-leave-active {
1615
opacity: 0;
16+
-webkit-transform: translate(30px, 0);
1717
transform: translate(30px, 0);
1818
}
1919
.slide-left-leave-active, .slide-right-enter {
2020
opacity: 0;
21+
-webkit-transform: translate(-30px, 0);
2122
transform: translate(-30px, 0);
2223
}
2324
</style>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
"test:e2e": "node test/e2e/runner.js"
2525
},
2626
"devDependencies": {
27-
"axios": "^0.13.1",
2827
"babel-core": "^6.11.4",
2928
"babel-eslint": "^6.1.2",
3029
"babel-loader": "^6.2.4",
@@ -52,6 +51,7 @@
5251
"rollup-plugin-replace": "^1.1.1",
5352
"rollup-watch": "^2.4.0",
5453
"selenium-server": "^2.53.1",
54+
"superagent": "^2.1.0",
5555
"uglify-js": "^2.7.0",
5656
"vue": "^2.0.0-beta.3",
5757
"vue-loader": "^9.2.0",

‎test/e2e/specs/active-links.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
module.exports = {
2+
'active links': function (browser) {
3+
browser
4+
.url('http://localhost:8080/active-links/')
5+
.waitForElementVisible('#app', 1000)
6+
.assert.count('li a', 9)
7+
// assert correct href with base
8+
.assert.attributeContains('li:nth-child(1) a', 'href', '/active-links/')
9+
.assert.attributeContains('li:nth-child(2) a', 'href', '/active-links/')
10+
.assert.attributeContains('li:nth-child(3) a', 'href', '/active-links/users')
11+
.assert.attributeContains('li:nth-child(4) a', 'href', '/active-links/users')
12+
.assert.attributeContains('li:nth-child(5) a', 'href', '/active-links/users/evan')
13+
.assert.attributeContains('li:nth-child(6) a', 'href', '/active-links/users/evan#foo')
14+
.assert.attributeContains('li:nth-child(7) a', 'href', '/active-links/users/evan?foo=bar')
15+
.assert.attributeContains('li:nth-child(8) a', 'href', '/active-links/users/evan?baz=qux&foo=bar')
16+
.assert.attributeContains('li:nth-child(9) a', 'href', '/active-links/about')
17+
.assert.containsText('.view', 'Home')
18+
19+
assertActiveLinks(1, [1, 2])
20+
assertActiveLinks(2, [1, 2])
21+
assertActiveLinks(3, [1, 3, 4])
22+
assertActiveLinks(4, [1, 3, 4])
23+
assertActiveLinks(5, [1, 3, 5])
24+
assertActiveLinks(6, [1, 3, 5, 6])
25+
assertActiveLinks(7, [1, 3, 5, 7])
26+
assertActiveLinks(8, [1, 3, 5, 7, 8])
27+
assertActiveLinks(9, [1, 9])
28+
29+
browser.end()
30+
31+
function assertActiveLinks (n, activeOnes) {
32+
browser.click(`li:nth-child(${n}) a`)
33+
activeOnes.forEach(i => {
34+
browser.assert.cssClassPresent(`li:nth-child(${i}) a`, 'router-link-active')
35+
})
36+
}
37+
}
38+
}

‎test/e2e/specs/data-fetching.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
module.exports = {
2+
'data fetching': function (browser) {
3+
browser
4+
.url('http://localhost:8080/data-fetching/')
5+
.waitForElementVisible('#app', 1000)
6+
.assert.count('li a', 3)
7+
.assert.containsText('.view', 'home')
8+
9+
.click('li:nth-child(2) a')
10+
.waitForElementNotPresent('.loading', 3000)
11+
.assert.containsText('.post h2', 'sunt aut facere')
12+
.assert.containsText('.post p', 'quia et suscipit')
13+
14+
.click('li:nth-child(3) a')
15+
.waitForElementNotPresent('.loading', 3000)
16+
.assert.containsText('.post h2', 'qui est esse')
17+
.assert.containsText('.post p', 'est rerum tempore')
18+
19+
.click('li:nth-child(1) a')
20+
.assert.elementNotPresent('.post')
21+
.assert.containsText('.view', 'home')
22+
.end()
23+
}
24+
}

‎test/e2e/specs/redirect.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
module.exports = {
2+
'redirect': function (browser) {
3+
browser
4+
.url('http://localhost:8080/redirect/')
5+
.waitForElementVisible('#app', 1000)
6+
.assert.count('li a', 6)
7+
// assert correct href with base
8+
.assert.attributeContains('li:nth-child(1) a', 'href', '/redirect/foo')
9+
.assert.attributeContains('li:nth-child(2) a', 'href', '/redirect/foo?foo=bar')
10+
.assert.attributeContains('li:nth-child(3) a', 'href', '/redirect/bar')
11+
.assert.attributeContains('li:nth-child(4) a', 'href', '/redirect/baz')
12+
.assert.attributeContains('li:nth-child(5) a', 'href', '/redirect/with-params/123')
13+
.assert.attributeContains('li:nth-child(6) a', 'href', '/redirect/')
14+
15+
.assert.containsText('.view', 'default')
16+
17+
.click('li:nth-child(1) a')
18+
.assert.urlEquals('http://localhost:8080/redirect/foo')
19+
.assert.containsText('.view', 'foo')
20+
21+
.click('li:nth-child(2) a')
22+
.assert.urlEquals('http://localhost:8080/redirect/foo?foo=bar')
23+
.assert.containsText('.view', 'foo')
24+
25+
.click('li:nth-child(3) a')
26+
.assert.urlEquals('http://localhost:8080/redirect/bar')
27+
.assert.containsText('.view', 'bar')
28+
29+
.click('li:nth-child(4) a')
30+
.assert.urlEquals('http://localhost:8080/redirect/baz')
31+
.assert.containsText('.view', 'baz')
32+
33+
.click('li:nth-child(5) a')
34+
.assert.urlEquals('http://localhost:8080/redirect/with-params/123')
35+
.assert.containsText('.view', '123')
36+
37+
.click('li:nth-child(6) a')
38+
.assert.urlEquals('http://localhost:8080/redirect/')
39+
.assert.containsText('.view', 'default')
40+
41+
// check initial visit
42+
.url('http://localhost:8080/redirect/relative-redirect')
43+
.waitForElementVisible('#app', 1000)
44+
.assert.urlEquals('http://localhost:8080/redirect/foo')
45+
.assert.containsText('.view', 'foo')
46+
47+
.url('http://localhost:8080/redirect/relative-redirect?foo=bar')
48+
.waitForElementVisible('#app', 1000)
49+
.assert.urlEquals('http://localhost:8080/redirect/foo?foo=bar')
50+
.assert.containsText('.view', 'foo')
51+
52+
.url('http://localhost:8080/redirect/absolute-redirect')
53+
.waitForElementVisible('#app', 1000)
54+
.assert.urlEquals('http://localhost:8080/redirect/bar')
55+
.assert.containsText('.view', 'bar')
56+
57+
.url('http://localhost:8080/redirect/named-redirect')
58+
.waitForElementVisible('#app', 1000)
59+
.assert.urlEquals('http://localhost:8080/redirect/baz')
60+
.assert.containsText('.view', 'baz')
61+
62+
.url('http://localhost:8080/redirect/redirect-with-params/123')
63+
.waitForElementVisible('#app', 1000)
64+
.assert.urlEquals('http://localhost:8080/redirect/with-params/123')
65+
.assert.containsText('.view', '123')
66+
67+
.url('http://localhost:8080/redirect/not-found')
68+
.waitForElementVisible('#app', 1000)
69+
.assert.urlEquals('http://localhost:8080/redirect/')
70+
.assert.containsText('.view', 'default')
71+
.end()
72+
}
73+
}

‎test/e2e/specs/route-alias.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
module.exports = {
2+
'route alias': function (browser) {
3+
browser
4+
.url('http://localhost:8080/route-alias/')
5+
.waitForElementVisible('#app', 1000)
6+
.assert.count('li a', 4)
7+
// assert correct href with base
8+
.assert.attributeContains('li:nth-child(1) a', 'href', '/route-alias/foo')
9+
.assert.attributeContains('li:nth-child(2) a', 'href', '/route-alias/home/bar-alias')
10+
.assert.attributeContains('li:nth-child(3) a', 'href', '/route-alias/baz')
11+
.assert.attributeContains('li:nth-child(4) a', 'href', '/route-alias/home/baz-alias')
12+
13+
.click('li:nth-child(1) a')
14+
.assert.urlEquals('http://localhost:8080/route-alias/foo')
15+
.assert.containsText('.view', 'Home')
16+
.assert.containsText('.view', 'foo')
17+
18+
.click('li:nth-child(2) a')
19+
.assert.urlEquals('http://localhost:8080/route-alias/home/bar-alias')
20+
.assert.containsText('.view', 'Home')
21+
.assert.containsText('.view', 'bar')
22+
23+
.click('li:nth-child(3) a')
24+
.assert.urlEquals('http://localhost:8080/route-alias/baz')
25+
.assert.containsText('.view', 'Home')
26+
.assert.containsText('.view', 'baz')
27+
28+
.click('li:nth-child(4) a')
29+
.assert.urlEquals('http://localhost:8080/route-alias/home/baz-alias')
30+
.assert.containsText('.view', 'Home')
31+
.assert.containsText('.view', 'baz')
32+
33+
// check initial visit
34+
.url('http://localhost:8080/route-alias/foo')
35+
.waitForElementVisible('#app', 1000)
36+
.assert.urlEquals('http://localhost:8080/route-alias/foo')
37+
.assert.containsText('.view', 'Home')
38+
.assert.containsText('.view', 'foo')
39+
40+
.url('http://localhost:8080/route-alias/home/bar-alias')
41+
.waitForElementVisible('#app', 1000)
42+
.assert.urlEquals('http://localhost:8080/route-alias/home/bar-alias')
43+
.assert.containsText('.view', 'Home')
44+
.assert.containsText('.view', 'bar')
45+
46+
.url('http://localhost:8080/route-alias/baz')
47+
.waitForElementVisible('#app', 1000)
48+
.assert.urlEquals('http://localhost:8080/route-alias/baz')
49+
.assert.containsText('.view', 'Home')
50+
.assert.containsText('.view', 'baz')
51+
52+
.url('http://localhost:8080/route-alias/home/baz-alias')
53+
.waitForElementVisible('#app', 1000)
54+
.assert.urlEquals('http://localhost:8080/route-alias/home/baz-alias')
55+
.assert.containsText('.view', 'Home')
56+
.assert.containsText('.view', 'baz')
57+
.end()
58+
}
59+
}

‎test/e2e/specs/transitions.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
module.exports = {
2+
'transitions': function (browser) {
3+
const TIMEOUT = 2000
4+
5+
browser
6+
.url('http://localhost:8080/transitions/')
7+
.waitForElementVisible('#app', 1000)
8+
.assert.count('li a', 4)
9+
10+
.click('li:nth-child(2) a')
11+
.assert.cssClassPresent('.view.home', 'fade-leave-active')
12+
.waitForElementPresent('.view.parent', TIMEOUT)
13+
.assert.cssClassNotPresent('.child-view.default', 'slide-left-enter-active')
14+
.assert.cssClassPresent('.view.parent', 'fade-enter-active')
15+
.waitForElementNotPresent('.view.parent.fade-enter-active', TIMEOUT)
16+
17+
.click('li:nth-child(3) a')
18+
.assert.cssClassPresent('.child-view.default', 'slide-left-leave-active')
19+
.assert.cssClassPresent('.child-view.foo', 'slide-left-enter-active')
20+
.waitForElementNotPresent('.child-view.default', TIMEOUT)
21+
22+
.click('li:nth-child(4) a')
23+
.assert.cssClassPresent('.child-view.foo', 'slide-left-leave-active')
24+
.assert.cssClassPresent('.child-view.bar', 'slide-left-enter-active')
25+
.waitForElementNotPresent('.child-view.foo', TIMEOUT)
26+
27+
.click('li:nth-child(2) a')
28+
.assert.cssClassPresent('.child-view.bar', 'slide-right-leave-active')
29+
.assert.cssClassPresent('.child-view.default', 'slide-right-enter-active')
30+
.waitForElementNotPresent('.child-view.bar', TIMEOUT)
31+
32+
.click('li:nth-child(1) a')
33+
.assert.cssClassPresent('.view.parent', 'fade-leave-active')
34+
.waitForElementPresent('.view.home', TIMEOUT)
35+
.assert.cssClassPresent('.view.home', 'fade-enter-active')
36+
.waitForElementNotPresent('.view.home.fade-enter-active', TIMEOUT)
37+
38+
.end()
39+
}
40+
}

0 commit comments

Comments
 (0)