e2e tests for tree

test/e2e/custom-commands/dblClick.js

@@ -0,0 +1,3 @@
+exports.command = function (selector) {
+  return this.moveToElement(selector, 5, 5).doubleClick()
+}

test/e2e/custom-commands/waitFor.js

@@ -2,26 +2,26 @@ var util = require('util')
 var events = require('events')
 
 var waitFor = function() {
-    events.EventEmitter.call(this)
+  events.EventEmitter.call(this)
 }
 
 util.inherits(waitFor, events.EventEmitter)
 
 waitFor.prototype.command = function(ms, cb) {
-    var self = this
+  var self = this
 
-    ms = ms || 1000
+  ms = ms || 1000
 
-    setTimeout(function() {
-        // if we have a callback, call it right before the complete event
-        if (cb) {
-            cb.call(self.client.api)
-        }
+  setTimeout(function() {
+    // if we have a callback, call it right before the complete event
+    if (cb) {
+      cb.call(self.client.api)
+    }
 
-        self.emit('complete')
-    }, ms)
+    self.emit('complete')
+  }, ms)
 
-    return this
+  return this
 }
 
 module.exports = waitFor

test/e2e/specs/commits.js

@@ -3,16 +3,16 @@ module.exports = {
     browser
     .url('http://localhost:8080/examples/commits/')
       .waitForElementVisible('li', 1000)
-      .assert.elementCount('input', 2)
-      .assert.elementCount('label', 2)
+      .assert.count('input', 2)
+      .assert.count('label', 2)
       .assert.containsText('label[for="master"]', 'master')
       .assert.containsText('label[for="dev"]', 'dev')
       .assert.checked('#master')
       .assert.checked('#dev', false)
       .assert.containsText('p', 'vuejs/vue@master')
-      .assert.elementCount('li', 3)
-      .assert.elementCount('li .commit', 3)
-      .assert.elementCount('li .message', 3)
+      .assert.count('li', 3)
+      .assert.count('li .commit', 3)
+      .assert.count('li .message', 3)
       .end()
   }
 }

test/e2e/specs/grid.js

@@ -5,8 +5,8 @@ module.exports = {
     browser
     .url('http://localhost:8080/examples/grid/')
       .waitForElementVisible('table', 1000)
-      .assert.elementCount('th', 2)
-      .assert.elementCount('th.active', 0)
+      .assert.count('th', 2)
+      .assert.count('th.active', 0)
       .assert.containsText('th:nth-child(1)', 'Name')
       .assert.containsText('th:nth-child(2)', 'Power')
       assertTable([
@@ -18,10 +18,10 @@ module.exports = {
 
     browser
       .click('th:nth-child(1)')
-      .assert.elementCount('th.active:nth-child(1)', 1)
-      .assert.elementCount('th.active:nth-child(2)', 0)
-      .assert.elementCount('th:nth-child(1) .arrow.dsc', 1)
-      .assert.elementCount('th:nth-child(2) .arrow.dsc', 0)
+      .assert.count('th.active:nth-child(1)', 1)
+      .assert.count('th.active:nth-child(2)', 0)
+      .assert.count('th:nth-child(1) .arrow.dsc', 1)
+      .assert.count('th:nth-child(2) .arrow.dsc', 0)
       assertTable([
         { name: 'Jet Li', power: 8000 },
         { name: 'Jackie Chan', power: 7000 },
@@ -31,10 +31,10 @@ module.exports = {
 
     browser
       .click('th:nth-child(2)')
-      .assert.elementCount('th.active:nth-child(1)', 0)
-      .assert.elementCount('th.active:nth-child(2)', 1)
-      .assert.elementCount('th:nth-child(1) .arrow.dsc', 1)
-      .assert.elementCount('th:nth-child(2) .arrow.dsc', 1)
+      .assert.count('th.active:nth-child(1)', 0)
+      .assert.count('th.active:nth-child(2)', 1)
+      .assert.count('th:nth-child(1) .arrow.dsc', 1)
+      .assert.count('th:nth-child(2) .arrow.dsc', 1)
       assertTable([
         { name: 'Chuck Norris', power: Infinity },
         { name: 'Bruce Lee', power: 9000 },
@@ -44,10 +44,10 @@ module.exports = {
 
     browser
       .click('th:nth-child(2)')
-      .assert.elementCount('th.active:nth-child(1)', 0)
-      .assert.elementCount('th.active:nth-child(2)', 1)
-      .assert.elementCount('th:nth-child(1) .arrow.dsc', 1)
-      .assert.elementCount('th:nth-child(2) .arrow.asc', 1)
+      .assert.count('th.active:nth-child(1)', 0)
+      .assert.count('th.active:nth-child(2)', 1)
+      .assert.count('th:nth-child(1) .arrow.dsc', 1)
+      .assert.count('th:nth-child(2) .arrow.asc', 1)
       assertTable([
         { name: 'Jackie Chan', power: 7000 },
         { name: 'Jet Li', power: 8000 },
@@ -57,10 +57,10 @@ module.exports = {
 
     browser
       .click('th:nth-child(1)')
-      .assert.elementCount('th.active:nth-child(1)', 1)
-      .assert.elementCount('th.active:nth-child(2)', 0)
-      .assert.elementCount('th:nth-child(1) .arrow.asc', 1)
-      .assert.elementCount('th:nth-child(2) .arrow.asc', 1)
+      .assert.count('th.active:nth-child(1)', 1)
+      .assert.count('th.active:nth-child(2)', 0)
+      .assert.count('th:nth-child(1) .arrow.asc', 1)
+      .assert.count('th:nth-child(2) .arrow.asc', 1)
       assertTable([
         { name: 'Bruce Lee', power: 9000 },
         { name: 'Chuck Norris', power: Infinity },
@@ -85,7 +85,7 @@ module.exports = {
     browser.end()
 
     function assertTable (data) {
-      browser.assert.elementCount('td', data.length * columns.length)
+      browser.assert.count('td', data.length * columns.length)
       for (var i = 0; i < data.length; i++) {
         for (var j = 0; j < columns.length; j++) {
           browser.assert.containsText(

test/e2e/specs/select2.js

@@ -8,14 +8,14 @@ module.exports = {
       .assert.containsText('span.select2', 'Select one')
 
       .click('span.select2')
-      .assert.elementCount('.select2-results__option', 3)
+      .assert.count('.select2-results__option', 3)
       .assert.containsText('.select2-results__option:nth-child(1)', 'Select one')
       .assert.containsText('.select2-results__option:nth-child(2)', 'Hello')
       .assert.containsText('.select2-results__option:nth-child(3)', 'World')
       .assert.attributePresent('.select2-results__option:nth-child(1)', 'aria-disabled')
 
       .click('.select2-results__option:nth-child(2)')
-      .assert.elementCount('.select2-results__option', 0)
+      .assert.count('.select2-results__option', 0)
       .assert.containsText('p', 'Selected: 1')
       .assert.containsText('span.select2', 'Hello')
 
@@ -24,14 +24,14 @@ module.exports = {
         vm.options.push({ id: 3, text: 'Vue' })
       })
       .click('span.select2')
-      .assert.elementCount('.select2-results__option', 4)
+      .assert.count('.select2-results__option', 4)
       .assert.containsText('.select2-results__option:nth-child(1)', 'Select one')
       .assert.containsText('.select2-results__option:nth-child(2)', 'Hello')
       .assert.containsText('.select2-results__option:nth-child(3)', 'World')
       .assert.containsText('.select2-results__option:nth-child(4)', 'Vue')
 
       .click('.select2-results__option:nth-child(4)')
-      .assert.elementCount('.select2-results__option', 0)
+      .assert.count('.select2-results__option', 0)
       .assert.containsText('p', 'Selected: 3')
       .assert.containsText('span.select2', 'Vue')
 

test/e2e/specs/svg.js

@@ -3,13 +3,13 @@ module.exports = {
     browser
     .url('http://localhost:8080/examples/svg/')
       .waitForElementVisible('svg', 1000)
-      .assert.elementCount('g', 1)
-      .assert.elementCount('polygon', 1)
-      .assert.elementCount('circle', 1)
-      .assert.elementCount('text', 6)
-      .assert.elementCount('label', 6)
-      .assert.elementCount('button', 7)
-      .assert.elementCount('input[type="range"]', 6)
+      .assert.count('g', 1)
+      .assert.count('polygon', 1)
+      .assert.count('circle', 1)
+      .assert.count('text', 6)
+      .assert.count('label', 6)
+      .assert.count('button', 7)
+      .assert.count('input[type="range"]', 6)
       .assert.evaluate(function () {
         var points = stats.map(function (stat, i) {
         var point = valueToPoint(stat.value, i, 6)
@@ -18,10 +18,10 @@ module.exports = {
         return document.querySelector('polygon').attributes[0].value === points
       })
       .click('button.remove')
-      .assert.elementCount('text', 5)
-      .assert.elementCount('label', 5)
-      .assert.elementCount('button', 6)
-      .assert.elementCount('input[type="range"]', 5)
+      .assert.count('text', 5)
+      .assert.count('label', 5)
+      .assert.count('button', 6)
+      .assert.count('input[type="range"]', 5)
       .assert.evaluate(function () {
         var points = stats.map(function (stat, i) {
         var point = valueToPoint(stat.value, i, 5)
@@ -31,10 +31,10 @@ module.exports = {
       })
       .setValue('input[name="newlabel"]', 'foo')
       .click('#add > button')
-      .assert.elementCount('text', 6)
-      .assert.elementCount('label', 6)
-      .assert.elementCount('button', 7)
-      .assert.elementCount('input[type="range"]', 6)
+      .assert.count('text', 6)
+      .assert.count('label', 6)
+      .assert.count('button', 7)
+      .assert.count('input[type="range"]', 6)
       .assert.evaluate(function () {
         var points = stats.map(function (stat, i) {
         var point = valueToPoint(stat.value, i, 6)

test/e2e/specs/tree.js

@@ -0,0 +1,47 @@
+module.exports = {
+  'tree': function (browser) {
+    browser
+    .url('http://localhost:8080/examples/tree/')
+      .waitForElementVisible('li', 1000)
+      .assert.count('.item', 12)
+      .assert.count('.item > ul', 4)
+      .assert.cssProperty('#demo li ul', 'display', 'none')
+      .assert.containsText('#demo li div span', '[+]')
+
+      .click('.bold')
+      .assert.visible('#demo ul')
+      .assert.containsText('#demo li div span', '[-]')
+      .assert.containsText('#demo ul > .item:nth-child(1)', 'hello')
+      .assert.containsText('#demo ul > .item:nth-child(2)', 'wat')
+      .assert.containsText('#demo ul > .item:nth-child(3)', 'child folder')
+      .assert.containsText('#demo ul > .item:nth-child(3)', '[+]')
+      .assert.evaluate(function () {
+        return document.querySelector('#demo li ul').children.length === 4
+      })
+
+      .click('#demo ul .bold')
+      .assert.visible('#demo ul ul')
+      .assert.containsText('#demo ul > .item:nth-child(3)', '[-]')
+      .assert.evaluate(function () {
+        return document.querySelector('#demo ul ul').children.length === 5
+      })
+
+      .click('.bold')
+      .assert.cssProperty('#demo ul', 'display', 'none')
+      .assert.containsText('#demo li div span', '[+]')
+      .click('.bold')
+      .assert.visible('#demo ul')
+      .assert.containsText('#demo li div span', '[-]')
+
+      .dblClick('#demo ul > .item div')
+      .assert.count('.item', 13)
+      .assert.count('.item > ul', 5)
+      .assert.containsText('#demo ul > .item:nth-child(1)', '[-]')
+      .assert.evaluate(function () {
+        var firstItem = document.querySelector('#demo ul > .item:nth-child(1)')
+        var ul = firstItem.querySelector('ul')
+        return ul.children.length === 2
+      })
+      .end()
+  }
+}