1
1
import App from './TestApp.svelte' ;
2
- import { fireEvent , wait } from '@testing-library/svelte' ;
2
+ import { fireEvent , waitFor } from '@testing-library/svelte' ;
3
+ import userEvent from '@testing-library/user-event' ;
3
4
import * as yup from 'yup' ;
4
5
import { render } from '../utils' ;
5
6
@@ -33,6 +34,33 @@ describe('Input', () => {
33
34
} ) ;
34
35
} ) ;
35
36
37
+ it ( 'validates on input if field is touched' , async ( ) => {
38
+ const schema = yup . object ( ) . shape ( {
39
+ email : yup . string ( ) . min ( 4 ) ,
40
+ } ) ;
41
+ const { component, getByPlaceholderText } = await render ( App , {
42
+ props : { schema } ,
43
+ } ) ;
44
+
45
+ const emailInput = getByPlaceholderText ( 'Email' ) ;
46
+
47
+ await fireEvent . change ( emailInput , {
48
+ target : { value : 'pas' } ,
49
+ } ) ;
50
+
51
+ await waitFor ( ( ) =>
52
+ expect ( component . form . $capture_state ( ) . $errors . email ) . toEqual (
53
+ 'email must be at least 4 characters'
54
+ )
55
+ ) ;
56
+
57
+ userEvent . type ( emailInput , 's' ) ;
58
+
59
+ await waitFor ( ( ) =>
60
+ expect ( component . form . $capture_state ( ) . $errors ) . toEqual ( { } )
61
+ ) ;
62
+ } ) ;
63
+
36
64
it ( 'validates on change if validateOnChange is true' , async ( ) => {
37
65
const schema = yup . object ( ) . shape ( {
38
66
email : yup . string ( ) . email ( ) ,
@@ -46,11 +74,12 @@ describe('Input', () => {
46
74
await fireEvent . change ( emailInput , {
47
75
target : { value : 'invalid value' } ,
48
76
} ) ;
49
- await wait ( ) ;
50
77
51
- expect ( component . form . $capture_state ( ) . $errors ) . toEqual ( {
52
- email : 'email must be a valid email' ,
53
- } ) ;
78
+ await waitFor ( ( ) =>
79
+ expect ( component . form . $capture_state ( ) . $errors ) . toEqual ( {
80
+ email : 'email must be a valid email' ,
81
+ } )
82
+ ) ;
54
83
} ) ;
55
84
56
85
it ( 'does not validate on change if validateOnChange is false' , async ( ) => {
@@ -66,9 +95,10 @@ describe('Input', () => {
66
95
await fireEvent . change ( emailInput , {
67
96
target : { value : 'invalid value' } ,
68
97
} ) ;
69
- await wait ( ) ;
70
98
71
- expect ( component . form . $capture_state ( ) . $errors ) . toEqual ( { } ) ;
99
+ await waitFor ( ( ) =>
100
+ expect ( component . form . $capture_state ( ) . $errors ) . toEqual ( { } )
101
+ ) ;
72
102
} ) ;
73
103
74
104
it ( 'validates on blur if validateOnBlur is true' , async ( ) => {
@@ -85,11 +115,12 @@ describe('Input', () => {
85
115
target : { value : 'invalid value' } ,
86
116
} ) ;
87
117
await fireEvent . blur ( emailInput ) ;
88
- await wait ( ) ;
89
118
90
- expect ( component . form . $capture_state ( ) . $errors ) . toEqual ( {
91
- email : 'email must be a valid email' ,
92
- } ) ;
119
+ await waitFor ( ( ) =>
120
+ expect ( component . form . $capture_state ( ) . $errors ) . toEqual ( {
121
+ email : 'email must be a valid email' ,
122
+ } )
123
+ ) ;
93
124
} ) ;
94
125
95
126
it ( 'does not validate on blur if validateOnBlur is false' , async ( ) => {
@@ -106,8 +137,10 @@ describe('Input', () => {
106
137
target : { value : 'invalid value' } ,
107
138
} ) ;
108
139
await fireEvent . blur ( emailInput ) ;
109
- await wait ( ) ;
110
- expect ( component . form . $capture_state ( ) . $errors ) . toEqual ( { } ) ;
140
+
141
+ await waitFor ( ( ) =>
142
+ expect ( component . form . $capture_state ( ) . $errors ) . toEqual ( { } )
143
+ ) ;
111
144
} ) ;
112
145
113
146
it ( 'matches snapshot' , async ( ) => {
0 commit comments