@@ -91,14 +91,15 @@ describe('vdom patch: hydration', () => {
91
91
it ( 'should hydrate components when server-rendered DOM tree is same as virtual DOM tree' , done => {
92
92
const dom = document . createElement ( 'div' )
93
93
dom . setAttribute ( 'server-rendered' , 'true' )
94
- dom . innerHTML = '<span>foo</span><div class="b a"><span>foo qux</span></div>'
94
+ dom . innerHTML = '<span>foo</span><div class="b a"><span>foo qux</span></div><!----> '
95
95
const originalNode1 = dom . children [ 0 ]
96
96
const originalNode2 = dom . children [ 1 ]
97
97
98
98
const vm = new Vue ( {
99
- template : '<div><span>{{msg}}</span><test class="a" :msg="msg"></test></div>' ,
99
+ template : '<div><span>{{msg}}</span><test class="a" :msg="msg"></test><p v-if="ok"></p>< /div>' ,
100
100
data : {
101
- msg : 'foo'
101
+ msg : 'foo' ,
102
+ ok : false
102
103
} ,
103
104
components : {
104
105
test : {
@@ -119,14 +120,34 @@ describe('vdom patch: hydration', () => {
119
120
expect ( vm . $el . children [ 1 ] ) . toBe ( originalNode2 )
120
121
vm . msg = 'bar'
121
122
waitForUpdate ( ( ) => {
122
- expect ( vm . $el . innerHTML ) . toBe ( '<span>bar</span><div class="b a"><span>bar qux</span></div>' )
123
+ expect ( vm . $el . innerHTML ) . toBe ( '<span>bar</span><div class="b a"><span>bar qux</span></div><!----> ' )
123
124
vm . $children [ 0 ] . a = 'ququx'
124
125
} ) . then ( ( ) => {
125
- expect ( vm . $el . innerHTML ) . toBe ( '<span>bar</span><div class="b a"><span>bar ququx</span></div>' )
126
+ expect ( vm . $el . innerHTML ) . toBe ( '<span>bar</span><div class="b a"><span>bar ququx</span></div><!---->' )
127
+ vm . ok = true
128
+ } ) . then ( ( ) => {
129
+ expect ( vm . $el . innerHTML ) . toBe ( '<span>bar</span><div class="b a"><span>bar ququx</span></div><p></p>' )
126
130
} ) . then ( done )
127
131
} )
128
132
129
133
it ( 'should warn failed hydration for non-matching DOM in child component' , ( ) => {
134
+ const dom = document . createElement ( 'div' )
135
+ dom . setAttribute ( 'server-rendered' , 'true' )
136
+ dom . innerHTML = '<div><span></span></div>'
137
+
138
+ new Vue ( {
139
+ template : '<div><test></test></div>' ,
140
+ components : {
141
+ test : {
142
+ template : '<div><a></a></div>'
143
+ }
144
+ }
145
+ } ) . $mount ( dom )
146
+
147
+ expect ( 'not matching server-rendered content' ) . toHaveBeenWarned ( )
148
+ } )
149
+
150
+ it ( 'should overwrite textNodes in the correct position but with mismatching text without warning' , ( ) => {
130
151
const dom = document . createElement ( 'div' )
131
152
dom . setAttribute ( 'server-rendered' , 'true' )
132
153
dom . innerHTML = '<div><span>foo</span></div>'
@@ -143,7 +164,8 @@ describe('vdom patch: hydration', () => {
143
164
}
144
165
} ) . $mount ( dom )
145
166
146
- expect ( 'not matching server-rendered content' ) . toHaveBeenWarned ( )
167
+ expect ( 'not matching server-rendered content' ) . not . toHaveBeenWarned ( )
168
+ expect ( dom . querySelector ( 'span' ) . textContent ) . toBe ( 'qux' )
147
169
} )
148
170
149
171
it ( 'should pick up elements with no children and populate without warning' , done => {
0 commit comments