💚 test(nightwatch): add e2e tests [ci skip]

examples/touch/index.html

@@ -22,17 +22,18 @@
         @focusin="$refs.validity.validate()" 
         @focusout="$refs.validity.touch()">
       </validity>
+      <p class="touch" v-if="validation.result.touched">Touch!!</p>
       <div class="errors">
-        <p v-if="validation.result.required">required username!!</p>
-        <p v-if="validation.result.minlength">too short username!!</p>
+        <p class="required" v-if="validation.result.required">required username!!</p>
+        <p class="minlength" v-if="validation.result.minlength">too short username!!</p>
       </div>
       <div class="result">
         <p>validation result:</p>
         <pre>{{validation.result}}</pre>
       </div>
     </div>
     <script>
-      new Vue({
+      var vm = new Vue({
         data: {
           validation: {
             result: {}

examples/validation/index.html

@@ -37,9 +37,9 @@
         </div>
         <input type="submit" value="send" v-if="valid">
         <div class="errors">
-          <p v-if="usernameInvalid">Invalid yourname inputting !!</p>
-          <p v-if="passwordInvalid">Invalid password inputting !!</p>
-          <p v-if="confirmInvalid">Invalid confirm password inputting !!</p>
+          <p class="username-invalid" v-if="usernameInvalid">Invalid yourname inputting !!</p>
+          <p class="password-invalid" v-if="passwordInvalid">Invalid password inputting !!</p>
+          <p class="confirm-invalid" v-if="confirmInvalid">Invalid confirm password inputting !!</p>
         </div>
         <div class="debug">
           <p>validation result info</p>
@@ -48,7 +48,7 @@
       </validation>
     </div>
     <script>
-      new Vue({
+      var vm = new Vue({
         // The validation result of validity component (instance) wrapped 
         // with validation component is managed it.
         // Also, You can map the these validation result to computed properties

examples/validity/event/index.html

@@ -17,8 +17,8 @@
         <input type="text" @input="handleValidate" @focusout="handleValidate">
       </validity>
       <div class="errors">
-        <p v-if="result.required">required username!!</p>
-        <p v-if="result.minlength">too short username!!</p>
+        <p class="required" v-if="result.required">required username!!</p>
+        <p class="minlength" v-if="result.minlength">too short username!!</p>
       </div>
     </div>
     <script>

examples/validity/ref/index.html

@@ -17,8 +17,8 @@
         <input type="text" @input="handleValidate" @focusout="handleValidate">
       </validity>
       <div class="errors">
-        <p v-if="result.required">required username!!</p>
-        <p v-if="result.minlength">too short username!!</p>
+        <p class="required" v-if="result.required">required username!!</p>
+        <p class="minlength" v-if="result.minlength">too short username!!</p>
       </div>
     </div>
     <script>

test/e2e/test/touch.js

@@ -0,0 +1,29 @@
+module.exports = {
+  touch: function (browser) {
+    browser
+      .url('http://localhost:8080/examples/touch/')
+      // initial loaded
+      .waitForElementVisible('#app', 1000)
+      .waitForElementNotPresent('.errors .required', 1000)
+      .waitForElementNotPresent('.errors .minlength', 1000)
+      // minlength invalid
+      .setValue('input', 'foo')
+      .trigger('input', 'input')
+      .waitForElementNotPresent('.errors .required', 1000)
+      .waitForElementPresent('.errors .minlength', 1000)
+      // and required invalid
+      .clearValue('input')
+      .trigger('input', 'input')
+      .waitForElementPresent('.errors .required', 1000)
+      .waitForElementPresent('.errors .minlength', 1000)
+      // valid !!
+      .setValue('input', 'kazupon')
+      .trigger('input', 'input')
+      .waitForElementNotPresent('.errors .required', 1000)
+      .waitForElementNotPresent('.errors .minlength', 1000)
+      // manully touch
+      .moveToElement('.errors', 5, 5).mouseButtonClick() // focusout
+      .waitForElementPresent('.touch', 1000)
+      .end()
+  }
+}

test/e2e/test/validation.js

@@ -0,0 +1,41 @@
+module.exports = {
+  validation: function (browser) {
+    browser
+      .url('http://localhost:8080/examples/validation/')
+      // initial loaded
+      .waitForElementVisible('#app', 1000)
+      .waitForElementNotPresent('.errors .username-invalid', 1000)
+      .waitForElementNotPresent('.errors .password-invalid', 1000)
+      .waitForElementNotPresent('.errors .confirm-invalid', 1000)
+      .waitForElementPresent('input[type="submit"]', 1000)
+      // input valid username 
+      .enterValue('#username', 'kazupon')
+      .waitForElementNotPresent('.errors .username-invalid', 1000)
+      .waitForElementPresent('input[type="submit"]', 1000)
+      // input invalid username
+      .enterBackSpace('#username', 7)
+      .waitForElementPresent('.errors .username-invalid', 1000)
+      .waitForElementNotPresent('input[type="submit"]', 1000)
+
+      .enterValue('#username', 'kazupon')
+      .waitForElementPresent('input[type="submit"]', 1000)
+
+      // input invalid password
+      .enterValue('#password', 'test')
+      .waitForElementPresent('.errors .password-invalid', 1000)
+      .waitForElementNotPresent('input[type="submit"]', 1000)
+      // input valid password
+      .enterValue('#password', 'testtest')
+      .waitForElementNotPresent('.errors .password-invalid', 1000)
+      .waitForElementPresent('input[type="submit"]', 1000)
+      // input invalid confirm
+      .enterValue('#confirm', 'test')
+      .waitForElementPresent('.errors .confirm-invalid', 1000)
+      .waitForElementNotPresent('input[type="submit"]', 1000)
+      // input valid comfirm
+      .enterValue('#confirm', 'testtest')
+      .waitForElementNotPresent('.errors .confirm-invalid', 1000)
+      .waitForElementPresent('input[type="submit"]', 1000)
+      .end()
+  }
+}

test/e2e/test/validity_event.js

@@ -1,5 +1,5 @@
 module.exports = {
-  started: function (browser) {
+  validity_event: function (browser) {
     browser
       .url('http://localhost:8080/examples/validity/event/')
       // initial loaded

test/e2e/test/validity_model.js

@@ -0,0 +1,26 @@
+module.exports = {
+  validity_model: function (browser) {
+    browser
+      .url('http://localhost:8080/examples/validity/model/')
+      // initial loaded
+      .waitForElementVisible('#app', 1000)
+      .waitForElementNotPresent('.errors .required', 1000)
+      .waitForElementNotPresent('.errors .minlength', 1000)
+      // minlength invalid
+      .setValue('input', 'foo')
+      .trigger('input', 'input')
+      .waitForElementNotPresent('.errors .required', 1000)
+      .waitForElementPresent('.errors .minlength', 1000)
+      // and required invalid
+      .clearValue('input')
+      .trigger('input', 'input')
+      .waitForElementPresent('.errors .required', 1000)
+      .waitForElementPresent('.errors .minlength', 1000)
+      // valid !!
+      .setValue('input', 'kazupon')
+      .trigger('input', 'input')
+      .waitForElementNotPresent('.errors .required', 1000)
+      .waitForElementNotPresent('.errors .minlength', 1000)
+      .end()
+  }
+}

test/e2e/test/validity_ref.js

@@ -1,5 +1,5 @@
 module.exports = {
-  started: function (browser) {
+  validity_ref: function (browser) {
     browser
       .url('http://localhost:8080/examples/validity/ref/')
       // initial loaded