💚 test(e2e): add tests

kazupon · Dec 26, 2016 · 151f39e · 151f39e
1 parent 58f4a50
commit 151f39e
Show file tree

Hide file tree

Showing 32 changed files with 571 additions and 168 deletions.
diff --git a/examples/async/server.js b/examples/async/server.js
@@ -130,6 +130,3 @@ function onListening () {
     : 'port ' + addr.port;
   debug('Listening on ' + bind);
 }
-
-
-
diff --git a/examples/checkbox/multi/index.html b/examples/checkbox/multi/index.html
@@ -29,7 +29,7 @@ <h1>Survey</h1>
         <label for="banana">Banana</label>
         <ul class="errors">
           <li v-for="error in validation.result.errors">
-            <p>{{error.message}}</p>
+            <p :class="error.field + '-' + error.validator">{{error.message}}</p>
           </li>
         </ul>
       </validity-group>

diff --git a/examples/checkbox/single/index.html b/examples/checkbox/single/index.html
@@ -12,31 +12,25 @@
   </head>
   <body>
     <div id="app">
-      <validity field="term" :validators="{
-        required: { message: requiredErrorMsg }
-      }">
-        <input id="term" type="checkbox" @change="handleValidate">
+      <validity field="term" 
+                ref="validity" 
+                v-model="validation" 
+                :validators="{ required: { message: requiredErrorMsg } }"
+      >
+        <input id="term" type="checkbox" @change="$refs.validity.validate()">
       </validity>
       <label for="term">I Accept xxx's Terms of Service Agreement.</label>
-      <p class="errors" v-if="result.required">{{result.required}}</p>
+      <p class="errors" v-if="validation.result.required">{{validation.result.required}}</p>
     </div>
     <script>
       new Vue({
-        data: { result: {} },
+        data: {
+          validation: { result: {} }
+        },
         computed: {
           requiredErrorMsg: function () {
             return 'Required Terms of Service Agreement checking!!'
           }
-        },
-        methods: {
-          handleValidate: function (e) {
-            var self = this
-            var $validity = e.target.$validity
-            $validity.validate(function () {
-              var result = $validity.result
-              self.result = result
-            })
-          }
         }
       }).$mount('#app')
     </script>

diff --git a/examples/classes/basic/index.html b/examples/classes/basic/index.html
@@ -13,7 +13,7 @@
   <body>
     <div id="app">
       <label for="username">username:</label>
-      <validity field="username" :validators="{
+      <validity field="username" v-model="validation" :validators="{
         required: { message: 'required you name !!' }
       }">
         <input id="username" 
@@ -23,14 +23,16 @@
                @input="handleValidation">
       </validity>
       <div class="errors">
-        <p v-if="result.required">{{result.required}}</p>
+        <p v-if="validation.result.required">{{validation.result.required}}</p>
       </div>
       <p>classes: {{usernameClasses}}</p>
     </div>
     <script>
       new Vue({
         data: {
-          result: {},
+          validation: {
+            result: {}
+          },
           usernameClasses: ''
         },
         methods: {
@@ -39,7 +41,6 @@
             var username = this.$refs.username
             var $validity = e.target.$validity
             $validity.validate(function () {
-              self.result = $validity.result
               self.usernameClasses = username.className
             })
           }

diff --git a/examples/classes/global/index.html b/examples/classes/global/index.html
@@ -14,6 +14,7 @@
     <div id="app">
       <label for="username">username:</label>
       <validity field="username" 
+                v-model="validation" 
                 :classes="{ touched: 'touched-local', dirty: 'dirty-local' }" 
                 :validators="{ required: { message: 'required you name !!' } }">
         <input id="username" 
@@ -23,7 +24,7 @@
                @input="handleValidation">
       </validity>
       <div class="errors">
-        <p v-if="result.required">{{result.required}}</p>
+        <p v-if="validation.result.required">{{validation.result.required}}</p>
       </div>
       <p>classes: {{usernameClasses}}</p>
     </div>
@@ -35,7 +36,9 @@
 
       new Vue({
         data: {
-          result: {},
+          validation: {
+            result: {}
+          },
           usernameClasses: ''
         },
         methods: {
@@ -44,7 +47,6 @@
             var username = this.$refs.username
             var $validity = e.target.$validity
             $validity.validate(function () {
-              self.result = $validity.result
               self.usernameClasses = username.className
             })
           }

diff --git a/examples/classes/local/index.html b/examples/classes/local/index.html
@@ -14,7 +14,8 @@
     <div id="app">
       <label for="username">username:</label>
       <validity field="username" 
-                :classes="{ touched: 'touched-local', dirty: 'dirty-locale' }" 
+                v-model="validation" 
+                :classes="{ touched: 'touched-local', dirty: 'dirty-local' }" 
                 :validators="{ required: { message: 'required you name !!' } }">
         <input id="username" 
                type="text"
@@ -23,14 +24,16 @@
                @input="handleValidation">
       </validity>
       <div class="errors">
-        <p v-if="result.required">{{result.required}}</p>
+        <p v-if="validation.result.required">{{validation.result.required}}</p>
       </div>
       <p>classes: {{usernameClasses}}</p>
     </div>
     <script>
       new Vue({
         data: {
-          result: {},
+          validation: {
+            result: {}
+          },
           usernameClasses: ''
         },
         methods: {
@@ -39,7 +42,6 @@
             var username = this.$refs.username
             var $validity = e.target.$validity
             $validity.validate(function () {
-              self.result = $validity.result
               self.usernameClasses = username.className
             })
           }

diff --git a/examples/custom/global/index.html b/examples/custom/global/index.html
@@ -14,13 +14,13 @@
     <div id="app">
       <form novalidate>
         <label>Email:</label> 
-        <validity field="email" :validators="['email']">
-          <input type="text" @input="handleValidate">
+        <validity ref="validity" field="email" v-model="validation" :validators="['email']">
+          <input type="text" @input="$refs.validity.validate()">
         </validity>
         <div class="errors">
-          <p v-if="result.email">{{result.email}}</p>
+          <p class="email" v-if="validation.result.email">{{validation.result.email}}</p>
         </div>
-        <input type="submit" value="send" v-if="result.valid">
+        <input type="submit" value="send" v-if="validation.result.valid">
       </form>
     </div>
     <script>
@@ -33,14 +33,9 @@
       })
 
       new Vue({
-        data: { result: {} },
-        methods: {
-          handleValidate: function (e) {
-            var self = this
-            var $validity = e.target.$validity
-            $validity.validate(function () {
-              self.result = $validity.result
-            })
+        data: {
+          validation: {
+            result: {} 
           }
         }
       }).$mount('#app')

diff --git a/examples/custom/local/index.html b/examples/custom/local/index.html
@@ -16,25 +16,25 @@
         <div class="username">
           <label>username:</label>
           <validity field="username" :validators="['required']">
-            <input type="text" @input="handleUsername">
+            <input type="text" name="username" @input="handleUsername">
           </validity>
         </div>
         <div class="age">
           <label>age:</label>
           <validity field="age" :validators="['numeric']">
-            <input type="text" @input="handleAge">
+            <input type="text" name="age" @input="handleAge">
           </validity>
         </div>
         <div class="site">
           <label>site:</label>
           <validity field="site" :validators="['url']">
-            <input type="text" @input="handleSite">
+            <input type="text" name="site" @input="handleSite">
           </validity>
         </div>
         <div class="errors">
-          <p v-if="results.username.required">required username!!</p>
-          <p v-if="results.age.numeric">invalid age numeric value!!</p>
-          <p v-if="results.site.url">invlid url!!</p>
+          <p class="username" v-if="results.username.required">required username!!</p>
+          <p class="age" v-if="results.age.numeric">invalid age numeric value!!</p>
+          <p class="site" v-if="results.site.url">invlid url!!</p>
         </div>
         <input type="submit" value="send" v-if="valid">
       </form>

diff --git a/examples/custom/message/index.html b/examples/custom/message/index.html
@@ -16,32 +16,32 @@
         <div class="username">
           <label>username:</label>
           <validity field="username" :validators="['required']">
-            <input type="text" @input="handleUsername">
+            <input type="text" name="username" @input="handleUsername">
           </validity>
         </div>
         <div class="address">
           <label>email-address:</label>
           <validity field="address" :validators="['email']">
-            <input type="text" @input="handleAddress">
+            <input type="text" name="address" @input="handleAddress">
           </validity>
         </div>
         <div class="age">
           <label>age:</label>
           <validity field="age" :validators="['numeric']">
-            <input type="text" @input="handleAge">
+            <input type="text" name="age" @input="handleAge">
           </validity>
         </div>
         <div class="site">
           <label>site:</label>
           <validity field="site" :validators="['url']">
-            <input type="text" @input="handleSite">
+            <input type="text" name="site" @input="handleSite">
           </validity>
         </div>
         <div class="errors">
-          <p v-if="results.username.required">{{results.username.required}}</p>
-          <p v-if="results.address.email">{{results.address.email}}</p>
-          <p v-if="results.age.numeric">{{results.age.numeric}}</p>
-          <p v-if="results.site.url">{{results.site.url}}</p>
+          <p class="username" v-if="results.username.required">{{results.username.required}}</p>
+          <p class="address" v-if="results.address.email">{{results.address.email}}</p>
+          <p class="age" v-if="results.age.numeric">{{results.age.numeric}}</p>
+          <p class="site" v-if="results.site.url">{{results.site.url}}</p>
         </div>
         <input type="submit" value="send" v-if="valid">
       </form>

diff --git a/examples/dynamic/index.html b/examples/dynamic/index.html
@@ -20,7 +20,7 @@
           </validity>
         </div>
         <div class="errors">
-          <p v-for="error in errors">{{error.field}}:{{error.validator}}</p>
+          <p :class="error.field + '-' + error.validator" v-for="error in errors">{{error.field}}:{{error.validator}}</p>
         </div>
         <pre>{{results}}</pre>
       </form>

diff --git a/examples/errors/basic/index.html b/examples/errors/basic/index.html
@@ -14,19 +14,19 @@
     <div id="app">
       <div class="email">
         <label for="email">email:</label>
-        <validity field="email" :validators="{
+        <validity ref="validity" field="email" v-model="validation" :validators="{
           required: { message: 'required email !!' },
           email: { message: 'invalid email address !!' }
         }">
-        <input id="email" type="text" @input="handleValidate" @focusin="handleValidate">
-      </div>
-      <div class="errors">
-        <ul>
-          <li v-for="error in result.errors">
-            <p>{{error.field}}: {{error.message}}</p>
-          </li>
-        </ul>
+        <input type="text" 
+               @input="$refs.validity.validate()" 
+               @focusin="$refs.validity.validate()">
       </div>
+      <ul class="errors">
+        <li v-for="error in validation.result.errors">
+          <p :class="error.validator">{{error.field}}: {{error.message}}</p>
+        </li>
+      </ul>
     </div>
     <script>
       new Vue({
@@ -36,17 +36,7 @@
           }
         },
         data: {
-          result: {}
-        },
-        methods: {
-          handleValidate: function (e) {
-            var self = this
-            var $validity = e.target.$validity
-            $validity.validate(function () {
-              var result = $validity.result
-              self.result = result
-            })
-          }
+          validation: { result: {} }
         }
       }).$mount('#app')
     </script>

diff --git a/examples/errors/grouping/index.html b/examples/errors/grouping/index.html
@@ -15,50 +15,43 @@
       <validation name="validation1">
         <div class="username">
           <label for="username">username:</label>
-          <validity field="username" group="user" :validators="{
+          <validity ref="username" field="username" group="user" :validators="{
             required: { message: 'required username !!' }
           }">
-            <input id="username" type="text" @input="handleValidate" @focusout="handleValidate">
+            <input id="username" type="text" @input="$refs.username.validate()">
           </validity>
         </div>
         <div class="password">
           <label for="password">password:</label>
-          <validity field="password" group="password" :validators="{
+          <validity ref="password" field="password" group="password" :validators="{
             minlength: { rule: 8, message: 'too short password !!' },
             required: { message: 'required password !!' }
           }">
-            <input id="password" type="password" @input="handleValidate" @focusout="handleValidate">
+            <input id="password" type="password" @input="$refs.password.validate()">
           </validity>
         </div>
         <div class="confirm">
           <label for="confimr">password (confirm):</label>
-          <validity field="confirm" group="password" :validators="{
+          <validity ref="confirm" field="confirm" group="password" :validators="{
             minlength: { rule: 8, message: 'too short confirm !!' },
             required: { message: 'required confirm !!' }
           }">
-            <input id="confirm" type="password" @input="handleValidate" @focusout="handleValidate">
+            <input id="confirm" type="password" @input="$refs.confirm.validate()">
           </validity>
         </div>
         <input type="submit" value="send" v-if="valid">
-        <div class="errors">
-          <ul>
-            <li v-for="error in errors">{{error.field}}: {{error.validator}}</li>
-          </ul>
-          </div>
-        </div>
+        <ul class="errors">
+          <li :class="error.field + '-' + error.validator"
+              v-for="error in errors">{{error.field}}: {{error.message}}</li>
+        </ul>
       </validation>
     </div>
     <script>
       new Vue({
         computed: VueValidator.mapValidation({
           valid: '$validation.validation1.valid',
           errors: '$validation.validation1.errors'
-        }),
-        methods: {
-          handleValidate: function (e) {
-            e.target.$validity.validate()
-          }
-        }
+        })
       }).$mount('#app')
     </script>
   </body>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -130,6 +130,3 @@ function onListening () {
		: 'port ' + addr.port;
		debug('Listening on ' + bind);
		}