add e2e tests for svg example

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