Skip to content

Commit 151f39e

Browse files
kazuponkazupon
committed
💚 test(e2e): add tests
1 parent 58f4a50 commit 151f39e

32 files changed

+571
-168
lines changed

‎examples/async/server.js

-3
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,3 @@ function onListening () {
130130
: 'port ' + addr.port;
131131
debug('Listening on ' + bind);
132132
}
133-
134-
135-

‎examples/checkbox/multi/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ <h1>Survey</h1>
2929
<label for="banana">Banana</label>
3030
<ul class="errors">
3131
<li v-for="error in validation.result.errors">
32-
<p>{{error.message}}</p>
32+
<p :class="error.field + '-' + error.validator">{{error.message}}</p>
3333
</li>
3434
</ul>
3535
</validity-group>

‎examples/checkbox/single/index.html

+10-16
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,25 @@
1212
</head>
1313
<body>
1414
<div id="app">
15-
<validity field="term" :validators="{
16-
required: { message: requiredErrorMsg }
17-
}">
18-
<input id="term" type="checkbox" @change="handleValidate">
15+
<validity field="term"
16+
ref="validity"
17+
v-model="validation"
18+
:validators="{ required: { message: requiredErrorMsg } }"
19+
>
20+
<input id="term" type="checkbox" @change="$refs.validity.validate()">
1921
</validity>
2022
<label for="term">I Accept xxx's Terms of Service Agreement.</label>
21-
<p class="errors" v-if="result.required">{{result.required}}</p>
23+
<p class="errors" v-if="validation.result.required">{{validation.result.required}}</p>
2224
</div>
2325
<script>
2426
new Vue({
25-
data: { result: {} },
27+
data: {
28+
validation: { result: {} }
29+
},
2630
computed: {
2731
requiredErrorMsg: function () {
2832
return 'Required Terms of Service Agreement checking!!'
2933
}
30-
},
31-
methods: {
32-
handleValidate: function (e) {
33-
var self = this
34-
var $validity = e.target.$validity
35-
$validity.validate(function () {
36-
var result = $validity.result
37-
self.result = result
38-
})
39-
}
4034
}
4135
}).$mount('#app')
4236
</script>

‎examples/classes/basic/index.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<body>
1414
<div id="app">
1515
<label for="username">username:</label>
16-
<validity field="username" :validators="{
16+
<validity field="username" v-model="validation" :validators="{
1717
required: { message: 'required you name !!' }
1818
}">
1919
<input id="username"
@@ -23,14 +23,16 @@
2323
@input="handleValidation">
2424
</validity>
2525
<div class="errors">
26-
<p v-if="result.required">{{result.required}}</p>
26+
<p v-if="validation.result.required">{{validation.result.required}}</p>
2727
</div>
2828
<p>classes: {{usernameClasses}}</p>
2929
</div>
3030
<script>
3131
new Vue({
3232
data: {
33-
result: {},
33+
validation: {
34+
result: {}
35+
},
3436
usernameClasses: ''
3537
},
3638
methods: {
@@ -39,7 +41,6 @@
3941
var username = this.$refs.username
4042
var $validity = e.target.$validity
4143
$validity.validate(function () {
42-
self.result = $validity.result
4344
self.usernameClasses = username.className
4445
})
4546
}

‎examples/classes/global/index.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<div id="app">
1515
<label for="username">username:</label>
1616
<validity field="username"
17+
v-model="validation"
1718
:classes="{ touched: 'touched-local', dirty: 'dirty-local' }"
1819
:validators="{ required: { message: 'required you name !!' } }">
1920
<input id="username"
@@ -23,7 +24,7 @@
2324
@input="handleValidation">
2425
</validity>
2526
<div class="errors">
26-
<p v-if="result.required">{{result.required}}</p>
27+
<p v-if="validation.result.required">{{validation.result.required}}</p>
2728
</div>
2829
<p>classes: {{usernameClasses}}</p>
2930
</div>
@@ -35,7 +36,9 @@
3536

3637
new Vue({
3738
data: {
38-
result: {},
39+
validation: {
40+
result: {}
41+
},
3942
usernameClasses: ''
4043
},
4144
methods: {
@@ -44,7 +47,6 @@
4447
var username = this.$refs.username
4548
var $validity = e.target.$validity
4649
$validity.validate(function () {
47-
self.result = $validity.result
4850
self.usernameClasses = username.className
4951
})
5052
}

‎examples/classes/local/index.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
<div id="app">
1515
<label for="username">username:</label>
1616
<validity field="username"
17-
:classes="{ touched: 'touched-local', dirty: 'dirty-locale' }"
17+
v-model="validation"
18+
:classes="{ touched: 'touched-local', dirty: 'dirty-local' }"
1819
:validators="{ required: { message: 'required you name !!' } }">
1920
<input id="username"
2021
type="text"
@@ -23,14 +24,16 @@
2324
@input="handleValidation">
2425
</validity>
2526
<div class="errors">
26-
<p v-if="result.required">{{result.required}}</p>
27+
<p v-if="validation.result.required">{{validation.result.required}}</p>
2728
</div>
2829
<p>classes: {{usernameClasses}}</p>
2930
</div>
3031
<script>
3132
new Vue({
3233
data: {
33-
result: {},
34+
validation: {
35+
result: {}
36+
},
3437
usernameClasses: ''
3538
},
3639
methods: {
@@ -39,7 +42,6 @@
3942
var username = this.$refs.username
4043
var $validity = e.target.$validity
4144
$validity.validate(function () {
42-
self.result = $validity.result
4345
self.usernameClasses = username.className
4446
})
4547
}

‎examples/custom/global/index.html

+7-12
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@
1414
<div id="app">
1515
<form novalidate>
1616
<label>Email:</label>
17-
<validity field="email" :validators="['email']">
18-
<input type="text" @input="handleValidate">
17+
<validity ref="validity" field="email" v-model="validation" :validators="['email']">
18+
<input type="text" @input="$refs.validity.validate()">
1919
</validity>
2020
<div class="errors">
21-
<p v-if="result.email">{{result.email}}</p>
21+
<p class="email" v-if="validation.result.email">{{validation.result.email}}</p>
2222
</div>
23-
<input type="submit" value="send" v-if="result.valid">
23+
<input type="submit" value="send" v-if="validation.result.valid">
2424
</form>
2525
</div>
2626
<script>
@@ -33,14 +33,9 @@
3333
})
3434

3535
new Vue({
36-
data: { result: {} },
37-
methods: {
38-
handleValidate: function (e) {
39-
var self = this
40-
var $validity = e.target.$validity
41-
$validity.validate(function () {
42-
self.result = $validity.result
43-
})
36+
data: {
37+
validation: {
38+
result: {}
4439
}
4540
}
4641
}).$mount('#app')

‎examples/custom/local/index.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,25 @@
1616
<div class="username">
1717
<label>username:</label>
1818
<validity field="username" :validators="['required']">
19-
<input type="text" @input="handleUsername">
19+
<input type="text" name="username" @input="handleUsername">
2020
</validity>
2121
</div>
2222
<div class="age">
2323
<label>age:</label>
2424
<validity field="age" :validators="['numeric']">
25-
<input type="text" @input="handleAge">
25+
<input type="text" name="age" @input="handleAge">
2626
</validity>
2727
</div>
2828
<div class="site">
2929
<label>site:</label>
3030
<validity field="site" :validators="['url']">
31-
<input type="text" @input="handleSite">
31+
<input type="text" name="site" @input="handleSite">
3232
</validity>
3333
</div>
3434
<div class="errors">
35-
<p v-if="results.username.required">required username!!</p>
36-
<p v-if="results.age.numeric">invalid age numeric value!!</p>
37-
<p v-if="results.site.url">invlid url!!</p>
35+
<p class="username" v-if="results.username.required">required username!!</p>
36+
<p class="age" v-if="results.age.numeric">invalid age numeric value!!</p>
37+
<p class="site" v-if="results.site.url">invlid url!!</p>
3838
</div>
3939
<input type="submit" value="send" v-if="valid">
4040
</form>

‎examples/custom/message/index.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -16,32 +16,32 @@
1616
<div class="username">
1717
<label>username:</label>
1818
<validity field="username" :validators="['required']">
19-
<input type="text" @input="handleUsername">
19+
<input type="text" name="username" @input="handleUsername">
2020
</validity>
2121
</div>
2222
<div class="address">
2323
<label>email-address:</label>
2424
<validity field="address" :validators="['email']">
25-
<input type="text" @input="handleAddress">
25+
<input type="text" name="address" @input="handleAddress">
2626
</validity>
2727
</div>
2828
<div class="age">
2929
<label>age:</label>
3030
<validity field="age" :validators="['numeric']">
31-
<input type="text" @input="handleAge">
31+
<input type="text" name="age" @input="handleAge">
3232
</validity>
3333
</div>
3434
<div class="site">
3535
<label>site:</label>
3636
<validity field="site" :validators="['url']">
37-
<input type="text" @input="handleSite">
37+
<input type="text" name="site" @input="handleSite">
3838
</validity>
3939
</div>
4040
<div class="errors">
41-
<p v-if="results.username.required">{{results.username.required}}</p>
42-
<p v-if="results.address.email">{{results.address.email}}</p>
43-
<p v-if="results.age.numeric">{{results.age.numeric}}</p>
44-
<p v-if="results.site.url">{{results.site.url}}</p>
41+
<p class="username" v-if="results.username.required">{{results.username.required}}</p>
42+
<p class="address" v-if="results.address.email">{{results.address.email}}</p>
43+
<p class="age" v-if="results.age.numeric">{{results.age.numeric}}</p>
44+
<p class="site" v-if="results.site.url">{{results.site.url}}</p>
4545
</div>
4646
<input type="submit" value="send" v-if="valid">
4747
</form>

‎examples/dynamic/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
</validity>
2121
</div>
2222
<div class="errors">
23-
<p v-for="error in errors">{{error.field}}:{{error.validator}}</p>
23+
<p :class="error.field + '-' + error.validator" v-for="error in errors">{{error.field}}:{{error.validator}}</p>
2424
</div>
2525
<pre>{{results}}</pre>
2626
</form>

‎examples/errors/basic/index.html

+10-20
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,19 @@
1414
<div id="app">
1515
<div class="email">
1616
<label for="email">email:</label>
17-
<validity field="email" :validators="{
17+
<validity ref="validity" field="email" v-model="validation" :validators="{
1818
required: { message: 'required email !!' },
1919
email: { message: 'invalid email address !!' }
2020
}">
21-
<input id="email" type="text" @input="handleValidate" @focusin="handleValidate">
22-
</div>
23-
<div class="errors">
24-
<ul>
25-
<li v-for="error in result.errors">
26-
<p>{{error.field}}: {{error.message}}</p>
27-
</li>
28-
</ul>
21+
<input type="text"
22+
@input="$refs.validity.validate()"
23+
@focusin="$refs.validity.validate()">
2924
</div>
25+
<ul class="errors">
26+
<li v-for="error in validation.result.errors">
27+
<p :class="error.validator">{{error.field}}: {{error.message}}</p>
28+
</li>
29+
</ul>
3030
</div>
3131
<script>
3232
new Vue({
@@ -36,17 +36,7 @@
3636
}
3737
},
3838
data: {
39-
result: {}
40-
},
41-
methods: {
42-
handleValidate: function (e) {
43-
var self = this
44-
var $validity = e.target.$validity
45-
$validity.validate(function () {
46-
var result = $validity.result
47-
self.result = result
48-
})
49-
}
39+
validation: { result: {} }
5040
}
5141
}).$mount('#app')
5242
</script>

‎examples/errors/grouping/index.html

+11-18
Original file line numberDiff line numberDiff line change
@@ -15,50 +15,43 @@
1515
<validation name="validation1">
1616
<div class="username">
1717
<label for="username">username:</label>
18-
<validity field="username" group="user" :validators="{
18+
<validity ref="username" field="username" group="user" :validators="{
1919
required: { message: 'required username !!' }
2020
}">
21-
<input id="username" type="text" @input="handleValidate" @focusout="handleValidate">
21+
<input id="username" type="text" @input="$refs.username.validate()">
2222
</validity>
2323
</div>
2424
<div class="password">
2525
<label for="password">password:</label>
26-
<validity field="password" group="password" :validators="{
26+
<validity ref="password" field="password" group="password" :validators="{
2727
minlength: { rule: 8, message: 'too short password !!' },
2828
required: { message: 'required password !!' }
2929
}">
30-
<input id="password" type="password" @input="handleValidate" @focusout="handleValidate">
30+
<input id="password" type="password" @input="$refs.password.validate()">
3131
</validity>
3232
</div>
3333
<div class="confirm">
3434
<label for="confimr">password (confirm):</label>
35-
<validity field="confirm" group="password" :validators="{
35+
<validity ref="confirm" field="confirm" group="password" :validators="{
3636
minlength: { rule: 8, message: 'too short confirm !!' },
3737
required: { message: 'required confirm !!' }
3838
}">
39-
<input id="confirm" type="password" @input="handleValidate" @focusout="handleValidate">
39+
<input id="confirm" type="password" @input="$refs.confirm.validate()">
4040
</validity>
4141
</div>
4242
<input type="submit" value="send" v-if="valid">
43-
<div class="errors">
44-
<ul>
45-
<li v-for="error in errors">{{error.field}}: {{error.validator}}</li>
46-
</ul>
47-
</div>
48-
</div>
43+
<ul class="errors">
44+
<li :class="error.field + '-' + error.validator"
45+
v-for="error in errors">{{error.field}}: {{error.message}}</li>
46+
</ul>
4947
</validation>
5048
</div>
5149
<script>
5250
new Vue({
5351
computed: VueValidator.mapValidation({
5452
valid: '$validation.validation1.valid',
5553
errors: '$validation.validation1.errors'
56-
}),
57-
methods: {
58-
handleValidate: function (e) {
59-
e.target.$validity.validate()
60-
}
61-
}
54+
})
6255
}).$mount('#app')
6356
</script>
6457
</body>

0 commit comments

Comments
 (0)