e2e test for todomvc

examples/todomvc/index.html

@@ -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

test/e2e/custom-assertions/focused.js

@@ -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)
+    })
+  }
+}

test/e2e/custom-assertions/notVisible.js

@@ -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)
+    })
+  }
+}

test/e2e/specs/todomvc.js

@@ -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')
+    }
+  }
+}

test/e2e/specs/tree.js

@@ -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')