GitHub
/
Vue.js
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

e2e test for todomvc

dev
Evan You 9 years ago
parent
c942793b8c
commit
5807adcf1f
5 changed files with 219 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      examples/todomvc/index.html
  2. 18
      test/e2e/custom-assertions/focused.js
  3. 16
      test/e2e/custom-assertions/notVisible.js
  4. 182
      test/e2e/specs/todomvc.js
  5. 4
      test/e2e/specs/tree.js

2
examples/todomvc/index.html
View File

@ -58,7 +58,7 @@
<!-- testing/benchmark only -->
<script>
if (navigator.userAgent.indexOf('PhantomJS') > -1) {
if (window.location.hash === '#test') {
localStorage.clear()
}
var now = window.performance && window.performance.now

18
test/e2e/custom-assertions/focused.js
View File

@ -0,0 +1,18 @@
exports.assertion = function (selector, expected) {
this.message = 'Testing if element <' + selector + '> is focused.'
this.expected = expected !== false
this.value = function (res) {
return res.value
}
this.pass = function (val) {
return val === this.expected
}
this.command = function (cb) {
var self = this
return this.api.execute(function (selector) {
return document.querySelector(selector) === document.activeElement
}, [selector], function (res) {
cb.call(self, res)
})
}
}

16
test/e2e/custom-assertions/notVisible.js
View File

@ -0,0 +1,16 @@
exports.assertion = function (selector) {
this.message = 'Testing if element <' + selector + '> is not visible.'
this.expected = false
this.pass = function (val) {
return val === this.expected
}
this.value = function (res) {
return res.value
}
this.command = function (cb) {
var self = this
return this.api.isVisible(selector, function (res) {
cb.call(self, res)
})
}
}

182
test/e2e/specs/todomvc.js
View File

@ -0,0 +1,182 @@
module.exports = {
'todomvc': function (browser) {
browser
.url('http://localhost:8080/examples/todomvc/#test')
.waitForElementVisible('.todoapp', 1000)
.assert.notVisible('.main')
.assert.notVisible('.footer')
.assert.count('.filters .selected', 1)
.assert.evaluate(function () {
return document.querySelector('.filters .selected').textContent === 'All'
})
createNewItem('test')
.assert.count('.todo', 1)
.assert.notVisible('.todo .edit')
.assert.containsText('.todo label', 'test')
.assert.containsText('.todo-count strong', '1')
.assert.checked('.todo .toggle', false)
.assert.visible('.main')
.assert.visible('.footer')
.assert.notVisible('.clear-completed')
.assert.value('.new-todo', '')
createNewItem('test2')
.assert.count('.todo', 2)
.assert.containsText('.todo:nth-child(2) label', 'test2')
.assert.containsText('.todo-count strong', '2')
// toggle
browser
.click('.todo .toggle')
.assert.count('.todo.completed', 1)
.assert.cssClassPresent('.todo:nth-child(1)', 'completed')
.assert.containsText('.todo-count strong', '1')
.assert.visible('.clear-completed')
createNewItem('test3')
.assert.count('.todo', 3)
.assert.containsText('.todo:nth-child(3) label', 'test3')
.assert.containsText('.todo-count strong', '2')
createNewItem('test4')
createNewItem('test5')
.assert.count('.todo', 5)
.assert.containsText('.todo-count strong', '4')
// toggle more
browser
.click('.todo:nth-child(4) .toggle')
.click('.todo:nth-child(5) .toggle')
.assert.count('.todo.completed', 3)
.assert.containsText('.todo-count strong', '2')
// remove
removeItemAt(1)
.assert.count('.todo', 4)
.assert.count('.todo.completed', 2)
.assert.containsText('.todo-count strong', '2')
removeItemAt(2)
.assert.count('.todo', 3)
.assert.count('.todo.completed', 2)
.assert.containsText('.todo-count strong', '1')
// remove all
browser
.click('.clear-completed')
.assert.count('.todo', 1)
.assert.containsText('.todo label', 'test2')
.assert.count('.todo.completed', 0)
.assert.containsText('.todo-count strong', '1')
.assert.notVisible('.clear-completed')
// prepare to test filters
createNewItem('test')
createNewItem('test')
.click('.todo:nth-child(2) .toggle')
.click('.todo:nth-child(3) .toggle')
// active filter
browser
.click('.filters li:nth-child(2) a')
.assert.count('.todo', 1)
.assert.count('.todo.completed', 0)
// add item with filter active
createNewItem('test')
.assert.count('.todo', 2)
// complted filter
browser.click('.filters li:nth-child(3) a')
.assert.count('.todo', 2)
.assert.count('.todo.completed', 2)
// filter on page load
browser.url('http://localhost:8080/examples/todomvc/#active')
.assert.count('.todo', 2)
.assert.count('.todo.completed', 0)
.assert.containsText('.todo-count strong', '2')
// completed on page load
browser.url('http://localhost:8080/examples/todomvc/#completed')
.assert.count('.todo', 2)
.assert.count('.todo.completed', 2)
.assert.containsText('.todo-count strong', '2')
// toggling with filter active
browser
.click('.todo .toggle')
.assert.count('.todo', 1)
.click('.filters li:nth-child(2) a')
.assert.count('.todo', 3)
.click('.todo .toggle')
.assert.count('.todo', 2)
// editing triggered by blur
browser
.click('.filters li:nth-child(1) a')
.dblClick('.todo:nth-child(1) label')
.assert.count('.todo.editing', 1)
.assert.focused('.todo:nth-child(1) .edit')
.clearValue('.todo:nth-child(1) .edit')
.setValue('.todo:nth-child(1) .edit', 'edited!')
.click('footer') // blur
.assert.count('.todo.editing', 0)
.assert.containsText('.todo:nth-child(1) label', 'edited!')
// editing triggered by enter
browser
.dblClick('.todo label')
enter('.todo:nth-child(1) .edit', 'edited again!')
.assert.count('.todo.editing', 0)
.assert.containsText('.todo:nth-child(1) label', 'edited again!')
// cancel
browser
.dblClick('.todo label')
.clearValue('.todo:nth-child(1) .edit')
.setValue('.todo:nth-child(1) .edit', 'edited!')
triggerKeyup('.todo:nth-child(1) .edit', 27)
.assert.count('.todo.editing', 0)
.assert.containsText('.todo:nth-child(1) label', 'edited again!')
// empty value should remove
browser
.dblClick('.todo label')
enter('.todo:nth-child(1) .edit', ' ')
.assert.count('.todo', 3)
// toggle all
browser
.click('.toggle-all')
.assert.count('.todo.completed', 3)
.click('.toggle-all')
.assert.count('.todo:not(.completed)', 3)
.end()
function createNewItem (text) {
return enter('.new-todo', text)
}
function enter (selector, text) {
browser
.clearValue(selector)
.setValue(selector, text)
return triggerKeyup(selector, 13)
}
function triggerKeyup (selector, code) {
return browser.execute(function (selector, code) {
var e = document.createEvent('HTMLEvents')
e.initEvent('keyup', true, true)
e.keyCode = code
document.querySelector(selector).dispatchEvent(e)
}, [selector, code])
}
function removeItemAt (n) {
return browser
.moveToElement('.todo:nth-child(' + n + ')', 10, 10)
.click('.todo:nth-child(' + n + ') .destroy')
}
}
}

4
test/e2e/specs/tree.js
View File

@ -5,7 +5,7 @@ module.exports = {
.waitForElementVisible('li', 1000)
.assert.count('.item', 12)
.assert.count('.item > ul', 4)
.assert.cssProperty('#demo li ul', 'display', 'none')
.assert.notVisible('#demo li ul')
.assert.containsText('#demo li div span', '[+]')
.click('.bold')
@ -27,7 +27,7 @@ module.exports = {
})
.click('.bold')
.assert.cssProperty('#demo ul', 'display', 'none')
.assert.notVisible('#demo ul')
.assert.containsText('#demo li div span', '[+]')
.click('.bold')
.assert.visible('#demo ul')

Write Preview
Loading…
Cancel
Save