@@ -293,5 +293,52 @@ if (!isIE9) {
293
293
} ) . $mount ( )
294
294
expect ( '<transition-group> children must be keyed: <div>' ) . toHaveBeenWarned ( )
295
295
} )
296
+
297
+ // Github issue #6006
298
+ it ( 'should work with dynamic name' , done => {
299
+ const vm = new Vue ( {
300
+ template : `
301
+ <div>
302
+ <transition-group :name="name">
303
+ <div v-for="item in items" :key="item">{{ item }}</div>
304
+ </transition-group>
305
+ </div>
306
+ ` ,
307
+ data : {
308
+ items : [ 'a' , 'b' , 'c' ] ,
309
+ name : 'group'
310
+ }
311
+ } ) . $mount ( el )
312
+
313
+ vm . name = 'invalid-name'
314
+ vm . items = [ 'b' , 'c' , 'a' ]
315
+ waitForUpdate ( ( ) => {
316
+ expect ( vm . $el . innerHTML . replace ( / \s ? s t y l e = " " ( \s ? ) / g, '$1' ) ) . toBe (
317
+ `<span>` +
318
+ `<div>b</div>` +
319
+ `<div>c</div>` +
320
+ `<div>a</div>` +
321
+ `</span>`
322
+ )
323
+ vm . name = 'group'
324
+ vm . items = [ 'a' , 'b' , 'c' ]
325
+ } ) . thenWaitFor ( nextFrame ) . then ( ( ) => {
326
+ expect ( vm . $el . innerHTML . replace ( / \s ? s t y l e = " " ( \s ? ) / g, '$1' ) ) . toBe (
327
+ `<span>` +
328
+ `<div class="group-move">a</div>` +
329
+ `<div class="group-move">b</div>` +
330
+ `<div class="group-move">c</div>` +
331
+ `</span>`
332
+ )
333
+ } ) . thenWaitFor ( duration * 2 + buffer ) . then ( ( ) => {
334
+ expect ( vm . $el . innerHTML . replace ( / \s ? s t y l e = " " ( \s ? ) / g, '$1' ) ) . toBe (
335
+ `<span>` +
336
+ `<div class="">a</div>` +
337
+ `<div class="">b</div>` +
338
+ `<div class="">c</div>` +
339
+ `</span>`
340
+ )
341
+ } ) . then ( done )
342
+ } )
296
343
} )
297
344
}
0 commit comments