@@ -21,4 +21,63 @@ describe('Options functional', () => {
21
21
expect ( vm . $el . innerHTML ) . toBe ( '<div>qux bar</div>' )
22
22
} ) . then ( done )
23
23
} )
24
+
25
+ it ( 'should let vnode raw data pass through' , done => {
26
+ const onValid = jasmine . createSpy ( 'valid' )
27
+ const vm = new Vue ( {
28
+ data : { msg : 'hello' } ,
29
+ template : `<div>
30
+ <validate field="field1" @valid="onValid">
31
+ <input type="text" v-model="msg">
32
+ </validate>
33
+ </div>` ,
34
+ components : {
35
+ validate : {
36
+ functional : true ,
37
+ props : [ 'field' ] ,
38
+ render ( h , props , children , { on } ) {
39
+ props . child = children [ 0 ]
40
+ return h ( 'validate-control' , { props, on } )
41
+ }
42
+ } ,
43
+ 'validate-control' : {
44
+ props : [ 'field' , 'child' ] ,
45
+ render ( ) {
46
+ return this . child
47
+ } ,
48
+ mounted ( ) {
49
+ this . $el . addEventListener ( 'input' , this . onInput )
50
+ } ,
51
+ destroyed ( ) {
52
+ this . $el . removeEventListener ( 'input' , this . onInput )
53
+ } ,
54
+ methods : {
55
+ onInput ( e ) {
56
+ const value = e . target . value
57
+ if ( this . validate ( value ) ) {
58
+ this . $emit ( 'valid' , this )
59
+ }
60
+ } ,
61
+ // something validation logic here
62
+ validate ( val ) {
63
+ return val . length > 0
64
+ }
65
+ }
66
+ }
67
+ } ,
68
+ methods : { onValid }
69
+ } ) . $mount ( )
70
+ document . body . appendChild ( vm . $el )
71
+ const input = vm . $el . querySelector ( 'input' )
72
+ expect ( onValid ) . not . toHaveBeenCalled ( )
73
+ waitForUpdate ( ( ) => {
74
+ input . value = 'foo'
75
+ triggerEvent ( input , 'input' )
76
+ } ) . then ( ( ) => {
77
+ expect ( onValid ) . toHaveBeenCalled ( )
78
+ } ) . then ( ( ) => {
79
+ document . body . removeChild ( vm . $el )
80
+ vm . $destroy ( )
81
+ } ) . then ( done )
82
+ } )
24
83
} )
0 commit comments