e2e test for modal example

yyx990803 · yyx990803 · commit 68d37ff3af7a · 2015-08-04T16:32:59.000-04:00
diff --git a/examples/modal/index.html b/examples/modal/index.html
@@ -8,7 +8,7 @@
   </head>
   <body>
     <!-- template for the modal component -->
-    <template id="modal-template">
+    <script type="x/template" id="modal-template">
       <div class="modal-mask" v-show="show" v-transition="modal">
         <div class="modal-wrapper">
           <div class="modal-container">
@@ -34,7 +34,7 @@
           </div>
         </div>
       </div>
-    </template>
+    </script>
 
     <script>
       // register modal component
@@ -52,7 +52,7 @@
 
     <!-- app -->
     <div id="app">
-      <button v-on="click: showModal = true">Show Modal</button>
+      <button id="show-modal" v-on="click: showModal = true">Show Modal</button>
       <!-- use the modal component, pass in the prop -->
       <modal show="{{@showModal}}">
         <!--
diff --git a/test/e2e/modal.js b/test/e2e/modal.js
@@ -0,0 +1,24 @@
+casper.test.begin('modal', 8, function (test) {
+
+  casper
+  .start('../../examples/modal/index.html')
+  .then(function () {
+    test.assertNotVisible('.modal-mask')
+  })
+  .thenClick('#show-modal', function () {
+    test.assertVisible('.modal-mask')
+    test.assertVisible('.modal-wrapper')
+    test.assertVisible('.modal-container')
+    test.assertSelectorHasText('.modal-header h3', 'custom header')
+    test.assertSelectorHasText('.modal-body', 'default body')
+    test.assertSelectorHasText('.modal-footer', 'default footer')
+  })
+  .thenClick('.modal-default-button', function () {
+    test.assertNotVisible('.modal-mask')
+  })
+  // run
+  .run(function () {
+    test.done()
+  })
+
+})
