add e2e tests for slider example

examples/slider/index.html

@@ -43,10 +43,10 @@
     <!-- demo root element -->
     <div id="demo">
       <img-slider>
-        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/rock.jpg">
-        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/grooves.jpg">
-        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/arch.jpg">
-        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/sunset.jpg">
+        <img src="images/rock.jpg">
+        <img src="images/grooves.jpg">
+        <img src="images/arch.jpg">
+        <img src="images/sunset.jpg">
       </img-slider>
     </div>
 

test/e2e/slider.js

@@ -0,0 +1,27 @@
+// PhantomJS has pretty poor CSS3 support so we're just
+// testing the content transclusion here
+
+casper.test.begin('slider', 2, function (test) {
+  
+  casper
+  .start('../../examples/slider/index.html')
+  .then(function () {
+    test.assertElementCount('article img', 4)
+    test.assertEval(function () {
+      var ok = true
+      var images = ['rock', 'grooves', 'arch', 'sunset']
+      for (var i = 1; i < 5; i++) {
+        var img = document.querySelector('article:nth-child(' + i + ')').children[0]
+        if (img.src.indexOf(images[i - 1]) < 0) {
+          ok = false
+        }
+      }
+      return ok
+    })
+  })
+  // run
+  .run(function () {
+    test.done()
+  })
+
+})