e2e tests for grid example

examples/grid/grid.js

@@ -10,14 +10,12 @@ Vue.component('demo-grid', {
       reversed: {}
     }
   },
-  ready: function () {
-    // assuming all data entries have the same keys
-    // extract the column headers
-    this.columns = Object.keys(this.data[0])
-    // initialize column reverse state
+  compiled: function () {
+    // initialize reverse state
+    var self = this
     this.columns.forEach(function (key) {
-      this.reversed.$add(key, false)
-    }.bind(this))
+      self.reversed.$add(key, false)
+    })
   },
   methods: {
     sortBy: function (key) {
@@ -32,6 +30,7 @@ var demo = new Vue({
   el: '#demo',
   data: {
     search: '',
+    gridColumns: ['name', 'power'],
     gridData: [
       { name: 'Chuck Norris', power: Infinity },
       { name: 'Bruce Lee', power: 9000 },

examples/grid/index.html

@@ -38,8 +38,14 @@
 
     <!-- demo root element -->
     <div id="demo">
-      Search <input v-model="search">
-      <demo-grid v-with="data:gridData, filterKey:search"></demo-grid>
+      <form id="search">
+        Search <input name="query" v-model="searchQuery">
+      </form>
+      <demo-grid v-with="
+        data      : gridData,
+        columns   : gridColumns,
+        filterKey : searchQuery
+      "></demo-grid>
     </div>
 
     <script src="grid.js"></script>

test/e2e/grid.js

@@ -0,0 +1,114 @@
+casper.test.begin('grid', 73, function (test) {
+  
+  casper
+  .start('../../examples/grid/index.html')
+  .then(function () {
+    // headers
+    test.assertElementCount('th', 2)
+    test.assertElementCount('th.active', 0)
+    test.assertSelectorHasText('th:nth-child(1)', 'Name')
+    test.assertSelectorHasText('th:nth-child(2)', 'Power')
+    assertTable(test, ['name', 'power'], [
+      { name: 'Chuck Norris', power: Infinity },
+      { name: 'Bruce Lee', power: 9000 },
+      { name: 'Jacky Chang', power: 7000 },
+      { name: 'Jet Li', power: 8000 }
+    ])
+  })
+  // test sorting
+  .thenClick('th:nth-child(1)', function () {
+    test.assertElementCount('th.active:nth-child(1)', 1)
+    test.assertElementCount('th.active:nth-child(2)', 0)
+    test.assertElementCount('th:nth-child(1) .arrow.dsc', 1)
+    test.assertElementCount('th:nth-child(2) .arrow.dsc', 0)
+    assertTable(test, ['name', 'power'], [
+      { name: 'Jet Li', power: 8000 },
+      { name: 'Jacky Chang', power: 7000 },
+      { name: 'Chuck Norris', power: Infinity },
+      { name: 'Bruce Lee', power: 9000 }
+    ])
+  })
+  .thenClick('th:nth-child(2)', function () {
+    test.assertElementCount('th.active:nth-child(1)', 0)
+    test.assertElementCount('th.active:nth-child(2)', 1)
+    test.assertElementCount('th:nth-child(1) .arrow.dsc', 1)
+    test.assertElementCount('th:nth-child(2) .arrow.dsc', 1)
+    assertTable(test, ['name', 'power'], [
+      { name: 'Chuck Norris', power: Infinity },
+      { name: 'Bruce Lee', power: 9000 },
+      { name: 'Jet Li', power: 8000 },
+      { name: 'Jacky Chang', power: 7000 }
+    ])
+  })
+  .thenClick('th:nth-child(2)', function () {
+    test.assertElementCount('th.active:nth-child(1)', 0)
+    test.assertElementCount('th.active:nth-child(2)', 1)
+    test.assertElementCount('th:nth-child(1) .arrow.dsc', 1)
+    test.assertElementCount('th:nth-child(2) .arrow.asc', 1)
+    assertTable(test, ['name', 'power'], [
+      { name: 'Jacky Chang', power: 7000 },
+      { name: 'Jet Li', power: 8000 },
+      { name: 'Bruce Lee', power: 9000 },
+      { name: 'Chuck Norris', power: Infinity }
+    ])
+  })
+  .thenClick('th:nth-child(1)', function () {
+    test.assertElementCount('th.active:nth-child(1)', 1)
+    test.assertElementCount('th.active:nth-child(2)', 0)
+    test.assertElementCount('th:nth-child(1) .arrow.asc', 1)
+    test.assertElementCount('th:nth-child(2) .arrow.asc', 1)
+    assertTable(test, ['name', 'power'], [
+      { name: 'Bruce Lee', power: 9000 },
+      { name: 'Chuck Norris', power: Infinity },
+      { name: 'Jacky Chang', power: 7000 },
+      { name: 'Jet Li', power: 8000 }
+    ])
+  })
+  // test search
+  .then(function () {
+    this.fill('#search', {
+      query: 'j'
+    })
+  })
+  .then(function () {
+    assertTable(test, ['name', 'power'], [
+      { name: 'Jacky Chang', power: 7000 },
+      { name: 'Jet Li', power: 8000 }
+    ])
+  })
+  .then(function () {
+    this.fill('#search', {
+      query: 'infinity'
+    })
+  })
+  .then(function () {
+    assertTable(test, ['name', 'power'], [
+      { name: 'Chuck Norris', power: Infinity }
+    ])
+  })
+  // run
+  .run(function () {
+    test.done()
+  })
+
+  /**
+   * Helper to assert the table data is rendered correctly.
+   *
+   * @param {CasperTester} test
+   * @param {Array} columns
+   * @param {Array} data
+   */
+
+  function assertTable (test, columns, data) {
+    test.assertElementCount('td', data.length * columns.length)
+    for (var i = 0; i < data.length; i++) {
+      for (var j = 0; j < columns.length; j++) {
+        test.assertSelectorHasText(
+          'tr:nth-child(' + (i+1) + ') td:nth-child(' + (j+1) + ')',
+          data[i][columns[j]]
+        )
+      }
+    }
+  }
+
+})