add e2e tests for svg example

Author: yyx990803

examples/svg/index.html

@@ -30,7 +30,10 @@
         <span>{{value}}</span>
         <button v-on="click:remove(this)">X</button>
       </div>
-      <input v-model="newLabel"> <button v-on="click:add">Add a Stat</button>
+      <form id="add">
+        <input name="newlabel" v-model="newLabel">
+        <button v-on="click:add">Add a Stat</button>
+      </form>
       <pre id="raw">{{stats | json}}</pre>
     </div>
 

examples/svg/svg.js

@@ -66,7 +66,8 @@ new Vue({
     stats: stats
   },
   methods: {
-    add: function () {
+    add: function (e) {
+      e.preventDefault()
       if (!this.newLabel) return
       this.stats.push({
         label: this.newLabel,
@@ -77,6 +78,8 @@ new Vue({
     remove: function (stat) {
       if (this.stats.length > 3) {
         this.stats.$remove(stat.$data)
+      } else {
+        alert('Can\'t delete more!')
       }
     }
   }

test/e2e/svg.js

@@ -0,0 +1,57 @@
+casper.test.begin('svg', 18, function (test) {
+  
+  casper
+  .start('../../examples/svg/index.html')
+  .then(function () {
+    test.assertElementCount('g', 1)
+    test.assertElementCount('polygon', 1)
+    test.assertElementCount('circle', 1)
+    test.assertElementCount('text', 6)
+    test.assertElementCount('label', 6)
+    test.assertElementCount('button', 7)
+    test.assertElementCount('input[type="range"]', 6)
+    test.assertEval(function () {
+      var points = stats.map(function (stat, i) {
+        var point = valueToPoint(stat.value, i, 6)
+        return point.x + ',' + point.y
+      }).join(' ')
+      return document.querySelector('polygon').attributes[0].value === points
+    })
+  })
+  .thenClick('button', function () {
+    test.assertElementCount('text', 5)
+    test.assertElementCount('label', 5)
+    test.assertElementCount('button', 6)
+    test.assertElementCount('input[type="range"]', 5)
+    test.assertEval(function () {
+      var points = stats.map(function (stat, i) {
+        var point = valueToPoint(stat.value, i, 5)
+        return point.x + ',' + point.y
+      }).join(' ')
+      return document.querySelector('polygon').attributes[0].value === points
+    })
+  })
+  .then(function () {
+    this.fill('#add', {
+      newlabel: 'hi'
+    })
+  })
+  .thenClick('#add > button', function () {
+    test.assertElementCount('text', 6)
+    test.assertElementCount('label', 6)
+    test.assertElementCount('button', 7)
+    test.assertElementCount('input[type="range"]', 6)
+    test.assertEval(function () {
+      var points = stats.map(function (stat, i) {
+        var point = valueToPoint(stat.value, i, 6)
+        return point.x + ',' + point.y
+      }).join(' ')
+      return document.querySelector('polygon').attributes[0].value === points
+    })
+  })
+  // run
+  .run(function () {
+    test.done()
+  })
+
+})