1import Vue from 'vue'2import { injectStyles, waitForUpdate, nextFrame } from './helpers'34describe('Transition basic', () => {5  const { duration, buffer } = injectStyles() as {6    duration: number7    buffer: number8  }9  const explicitDuration = duration * 21011  let el12  beforeEach(() => {13    el = document.createElement('div')14    document.body.appendChild(el)15  })1617  it('basic transition', done => {18    const vm = new Vue({19      template:20        '<div><transition><div v-if="ok" class="test">foo</div></transition></div>',21      data: { ok: true }22    }).$mount(el)2324    // should not apply transition on initial render by default25    expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')26    vm.ok = false27    waitForUpdate(() => {28      expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')29    })30      .thenWaitFor(nextFrame)31      .then(() => {32        expect(vm.$el.children[0].className).toBe(33          'test v-leave-active v-leave-to'34        )35      })36      .thenWaitFor(duration + buffer)37      .then(() => {38        expect(vm.$el.children.length).toBe(0)39        vm.ok = true40      })41      .then(() => {42        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')43      })44      .thenWaitFor(nextFrame)45      .then(() => {46        expect(vm.$el.children[0].className).toBe(47          'test v-enter-active v-enter-to'48        )49      })50      .thenWaitFor(duration + buffer)51      .then(() => {52        expect(vm.$el.children[0].className).toBe('test')53      })54      .then(done)55  })5657  it('named transition', done => {58    const vm = new Vue({59      template:60        '<div><transition name="test"><div v-if="ok" class="test">foo</div></transition></div>',61      data: { ok: true }62    }).$mount(el)6364    // should not apply transition on initial render by default65    expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')66    vm.ok = false67    waitForUpdate(() => {68      expect(vm.$el.children[0].className).toBe(69        'test test-leave test-leave-active'70      )71    })72      .thenWaitFor(nextFrame)73      .then(() => {74        expect(vm.$el.children[0].className).toBe(75          'test test-leave-active test-leave-to'76        )77      })78      .thenWaitFor(duration + buffer)79      .then(() => {80        expect(vm.$el.children.length).toBe(0)81        vm.ok = true82      })83      .then(() => {84        expect(vm.$el.children[0].className).toBe(85          'test test-enter test-enter-active'86        )87      })88      .thenWaitFor(nextFrame)89      .then(() => {90        expect(vm.$el.children[0].className).toBe(91          'test test-enter-active test-enter-to'92        )93      })94      .thenWaitFor(duration + buffer)95      .then(() => {96        expect(vm.$el.children[0].className).toBe('test')97      })98      .then(done)99  })100101  it('custom transition classes', done => {102    const vm = new Vue({103      template: `104          <div>105            <transition106              enter-class="hello"107              enter-active-class="hello-active"108              enter-to-class="hello-to"109              leave-class="bye"110              leave-to-class="bye-to"111              leave-active-class="byebye active more ">112              <div v-if="ok" class="test">foo</div>113            </transition>114          </div>115        `,116      data: { ok: true }117    }).$mount(el)118119    // should not apply transition on initial render by default120    expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')121    vm.ok = false122    waitForUpdate(() => {123      expect(vm.$el.children[0].className).toBe('test bye byebye active more')124    })125      .thenWaitFor(nextFrame)126      .then(() => {127        expect(vm.$el.children[0].className).toBe(128          'test byebye active more bye-to'129        )130      })131      .thenWaitFor(duration + buffer)132      .then(() => {133        expect(vm.$el.children.length).toBe(0)134        vm.ok = true135      })136      .then(() => {137        expect(vm.$el.children[0].className).toBe('test hello hello-active')138      })139      .thenWaitFor(nextFrame)140      .then(() => {141        expect(vm.$el.children[0].className).toBe('test hello-active hello-to')142      })143      .thenWaitFor(duration + buffer)144      .then(() => {145        expect(vm.$el.children[0].className).toBe('test')146      })147      .then(done)148  })149150  it('dynamic transition', done => {151    const vm = new Vue({152      template: `153          <div>154            <transition :name="trans">155              <div v-if="ok" class="test">foo</div>156            </transition>157          </div>158        `,159      data: {160        ok: true,161        trans: 'test'162      }163    }).$mount(el)164165    // should not apply transition on initial render by default166    expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')167    vm.ok = false168    waitForUpdate(() => {169      expect(vm.$el.children[0].className).toBe(170        'test test-leave test-leave-active'171      )172    })173      .thenWaitFor(nextFrame)174      .then(() => {175        expect(vm.$el.children[0].className).toBe(176          'test test-leave-active test-leave-to'177        )178      })179      .thenWaitFor(duration + buffer)180      .then(() => {181        expect(vm.$el.children.length).toBe(0)182        vm.ok = true183        vm.trans = 'changed'184      })185      .then(() => {186        expect(vm.$el.children[0].className).toBe(187          'test changed-enter changed-enter-active'188        )189      })190      .thenWaitFor(nextFrame)191      .then(() => {192        expect(vm.$el.children[0].className).toBe(193          'test changed-enter-active changed-enter-to'194        )195      })196      .thenWaitFor(duration + buffer)197      .then(() => {198        expect(vm.$el.children[0].className).toBe('test')199      })200      .then(done)201  })202203  it('inline transition object', done => {204    const enter = jasmine.createSpy()205    const leave = jasmine.createSpy()206    const vm = new Vue({207      render(h) {208        return h('div', null, [209          h(210            'transition',211            {212              props: {213                name: 'inline',214                enterClass: 'hello',215                enterToClass: 'hello-to',216                enterActiveClass: 'hello-active',217                leaveClass: 'bye',218                leaveToClass: 'bye-to',219                leaveActiveClass: 'byebye active'220              },221              on: {222                enter,223                leave224              }225            },226            this.ok ? [h('div', { class: 'test' }, 'foo')] : undefined227          )228        ])229      },230      data: { ok: true }231    }).$mount(el)232233    // should not apply transition on initial render by default234    expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')235    vm.ok = false236    waitForUpdate(() => {237      expect(vm.$el.children[0].className).toBe('test bye byebye active')238      expect(leave).toHaveBeenCalled()239    })240      .thenWaitFor(nextFrame)241      .then(() => {242        expect(vm.$el.children[0].className).toBe('test byebye active bye-to')243      })244      .thenWaitFor(duration + buffer)245      .then(() => {246        expect(vm.$el.children.length).toBe(0)247        vm.ok = true248      })249      .then(() => {250        expect(vm.$el.children[0].className).toBe('test hello hello-active')251        expect(enter).toHaveBeenCalled()252      })253      .thenWaitFor(nextFrame)254      .then(() => {255        expect(vm.$el.children[0].className).toBe('test hello-active hello-to')256      })257      .thenWaitFor(duration + buffer)258      .then(() => {259        expect(vm.$el.children[0].className).toBe('test')260      })261      .then(done)262  })263264  it('transition events', done => {265    const onLeaveSpy = jasmine.createSpy()266    const onEnterSpy = jasmine.createSpy()267    const beforeLeaveSpy = jasmine.createSpy()268    const beforeEnterSpy = jasmine.createSpy()269    const afterLeaveSpy = jasmine.createSpy()270    const afterEnterSpy = jasmine.createSpy()271272    const vm = new Vue({273      template: `274          <div>275            <transition276              name="test"277              @before-enter="beforeEnter"278              @enter="enter"279              @after-enter="afterEnter"280              @before-leave="beforeLeave"281              @leave="leave"282              @after-leave="afterLeave">283              <div v-if="ok" class="test">foo</div>284            </transition>285          </div>286        `,287      data: { ok: true },288      methods: {289        beforeLeave: el => {290          expect(el).toBe(vm.$el.children[0])291          expect(el.className).toBe('test')292          beforeLeaveSpy(el)293        },294        leave: el => onLeaveSpy(el),295        afterLeave: el => afterLeaveSpy(el),296        beforeEnter: el => {297          expect(vm.$el.contains(el)).toBe(false)298          expect(el.className).toBe('test')299          beforeEnterSpy(el)300        },301        enter: el => {302          expect(vm.$el.contains(el)).toBe(true)303          onEnterSpy(el)304        },305        afterEnter: el => afterEnterSpy(el)306      }307    }).$mount(el)308309    // should not apply transition on initial render by default310    expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')311312    let _el = vm.$el.children[0]313    vm.ok = false314    waitForUpdate(() => {315      expect(beforeLeaveSpy).toHaveBeenCalledWith(_el)316      expect(onLeaveSpy).toHaveBeenCalledWith(_el)317      expect(vm.$el.children[0].className).toBe(318        'test test-leave test-leave-active'319      )320    })321      .thenWaitFor(nextFrame)322      .then(() => {323        expect(afterLeaveSpy).not.toHaveBeenCalled()324        expect(vm.$el.children[0].className).toBe(325          'test test-leave-active test-leave-to'326        )327      })328      .thenWaitFor(duration + buffer)329      .then(() => {330        expect(afterLeaveSpy).toHaveBeenCalledWith(_el)331        expect(vm.$el.children.length).toBe(0)332        vm.ok = true333      })334      .then(() => {335        _el = vm.$el.children[0]336        expect(beforeEnterSpy).toHaveBeenCalledWith(_el)337        expect(onEnterSpy).toHaveBeenCalledWith(_el)338        expect(vm.$el.children[0].className).toBe(339          'test test-enter test-enter-active'340        )341      })342      .thenWaitFor(nextFrame)343      .then(() => {344        expect(afterEnterSpy).not.toHaveBeenCalled()345        expect(vm.$el.children[0].className).toBe(346          'test test-enter-active test-enter-to'347        )348      })349      .thenWaitFor(duration + buffer)350      .then(() => {351        expect(afterEnterSpy).toHaveBeenCalledWith(_el)352        expect(vm.$el.children[0].className).toBe('test')353      })354      .then(done)355  })356357  it('transition events (v-show)', done => {358    const onLeaveSpy = jasmine.createSpy()359    const onEnterSpy = jasmine.createSpy()360    const beforeLeaveSpy = jasmine.createSpy()361    const beforeEnterSpy = jasmine.createSpy()362    const afterLeaveSpy = jasmine.createSpy()363    const afterEnterSpy = jasmine.createSpy()364365    const vm = new Vue({366      template: `367          <div>368            <transition369              name="test"370              @before-enter="beforeEnter"371              @enter="enter"372              @after-enter="afterEnter"373              @before-leave="beforeLeave"374              @leave="leave"375              @after-leave="afterLeave">376              <div v-show="ok" class="test">foo</div>377            </transition>378          </div>379        `,380      data: { ok: true },381      methods: {382        beforeLeave: el => {383          expect(el.style.display).toBe('')384          expect(el).toBe(vm.$el.children[0])385          expect(el.className).toBe('test')386          beforeLeaveSpy(el)387        },388        leave: el => {389          expect(el.style.display).toBe('')390          onLeaveSpy(el)391        },392        afterLeave: el => {393          expect(el.style.display).toBe('none')394          afterLeaveSpy(el)395        },396        beforeEnter: el => {397          expect(el.className).toBe('test')398          expect(el.style.display).toBe('none')399          beforeEnterSpy(el)400        },401        enter: el => {402          expect(el.style.display).toBe('')403          onEnterSpy(el)404        },405        afterEnter: el => {406          expect(el.style.display).toBe('')407          afterEnterSpy(el)408        }409      }410    }).$mount(el)411412    // should not apply transition on initial render by default413    expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')414415    let _el = vm.$el.children[0]416    vm.ok = false417    waitForUpdate(() => {418      expect(beforeLeaveSpy).toHaveBeenCalledWith(_el)419      expect(onLeaveSpy).toHaveBeenCalledWith(_el)420      expect(vm.$el.children[0].className).toBe(421        'test test-leave test-leave-active'422      )423    })424      .thenWaitFor(nextFrame)425      .then(() => {426        expect(afterLeaveSpy).not.toHaveBeenCalled()427        expect(vm.$el.children[0].className).toBe(428          'test test-leave-active test-leave-to'429        )430      })431      .thenWaitFor(duration + buffer)432      .then(() => {433        expect(afterLeaveSpy).toHaveBeenCalledWith(_el)434        expect(vm.$el.children[0].style.display).toBe('none')435        vm.ok = true436      })437      .then(() => {438        _el = vm.$el.children[0]439        expect(beforeEnterSpy).toHaveBeenCalledWith(_el)440        expect(onEnterSpy).toHaveBeenCalledWith(_el)441        expect(vm.$el.children[0].className).toBe(442          'test test-enter test-enter-active'443        )444      })445      .thenWaitFor(nextFrame)446      .then(() => {447        expect(afterEnterSpy).not.toHaveBeenCalled()448        expect(vm.$el.children[0].className).toBe(449          'test test-enter-active test-enter-to'450        )451      })452      .thenWaitFor(duration + buffer)453      .then(() => {454        expect(afterEnterSpy).toHaveBeenCalledWith(_el)455        expect(vm.$el.children[0].className).toBe('test')456      })457      .then(done)458  })459460  it('explicit user callback in JavaScript hooks', done => {461    let next462    const vm = new Vue({463      template: `<div>464          <transition name="test" @enter="enter" @leave="leave">465            <div v-if="ok" class="test">foo</div>466          </transition>467        </div>`,468      data: { ok: true },469      methods: {470        enter: (el, cb) => {471          next = cb472        },473        leave: (el, cb) => {474          next = cb475        }476      }477    }).$mount(el)478    vm.ok = false479    waitForUpdate(() => {480      expect(vm.$el.children[0].className).toBe(481        'test test-leave test-leave-active'482      )483    })484      .thenWaitFor(nextFrame)485      .then(() => {486        expect(vm.$el.children[0].className).toBe(487          'test test-leave-active test-leave-to'488        )489      })490      .thenWaitFor(duration + buffer)491      .then(() => {492        expect(vm.$el.children[0].className).toBe(493          'test test-leave-active test-leave-to'494        )495        expect(next).toBeTruthy()496        next()497        expect(vm.$el.children.length).toBe(0)498      })499      .then(() => {500        vm.ok = true501      })502      .then(() => {503        expect(vm.$el.children[0].className).toBe(504          'test test-enter test-enter-active'505        )506      })507      .thenWaitFor(nextFrame)508      .then(() => {509        expect(vm.$el.children[0].className).toBe(510          'test test-enter-active test-enter-to'511        )512      })513      .thenWaitFor(duration + buffer)514      .then(() => {515        expect(vm.$el.children[0].className).toBe(516          'test test-enter-active test-enter-to'517        )518        expect(next).toBeTruthy()519        next()520        expect(vm.$el.children[0].className).toBe('test')521      })522      .then(done)523  })524525  it('css: false', done => {526    const enterSpy = jasmine.createSpy()527    const leaveSpy = jasmine.createSpy()528    const vm = new Vue({529      template: `530          <div>531            <transition :css="false" name="test" @enter="enter" @leave="leave">532              <div v-if="ok" class="test">foo</div>533            </transition>534          </div>535        `,536      data: { ok: true },537      methods: {538        enter: enterSpy,539        leave: leaveSpy540      }541    }).$mount(el)542543    vm.ok = false544    waitForUpdate(() => {545      expect(leaveSpy).toHaveBeenCalled()546      expect(vm.$el.innerHTML).toBe('<!---->')547      vm.ok = true548    })549      .then(() => {550        expect(enterSpy).toHaveBeenCalled()551        expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')552      })553      .then(done)554  })555556  it('no transition detected', done => {557    const enterSpy = jasmine.createSpy()558    const leaveSpy = jasmine.createSpy()559    const vm = new Vue({560      template:561        '<div><transition name="nope" @enter="enter" @leave="leave"><div v-if="ok">foo</div></transition></div>',562      data: { ok: true },563      methods: {564        enter: enterSpy,565        leave: leaveSpy566      }567    }).$mount(el)568569    vm.ok = false570    waitForUpdate(() => {571      expect(leaveSpy).toHaveBeenCalled()572      expect(vm.$el.innerHTML).toBe(573        '<div class="nope-leave nope-leave-active">foo</div><!---->'574      )575    })576      .thenWaitFor(nextFrame)577      .then(() => {578        expect(vm.$el.innerHTML).toBe('<!---->')579        vm.ok = true580      })581      .then(() => {582        expect(enterSpy).toHaveBeenCalled()583        expect(vm.$el.innerHTML).toBe(584          '<div class="nope-enter nope-enter-active">foo</div>'585        )586      })587      .thenWaitFor(nextFrame)588      .then(() => {589        expect(vm.$el.innerHTML).toBe('<div>foo</div>')590      })591      .then(done)592  })593594  it('enterCancelled', done => {595    const spy = jasmine.createSpy()596    const vm = new Vue({597      template: `598          <div>599            <transition name="test" @enter-cancelled="enterCancelled">600              <div v-if="ok" class="test">foo</div>601            </transition>602          </div>603        `,604      data: { ok: false },605      methods: {606        enterCancelled: spy607      }608    }).$mount(el)609610    expect(vm.$el.innerHTML).toBe('<!---->')611    vm.ok = true612    waitForUpdate(() => {613      expect(vm.$el.children[0].className).toBe(614        'test test-enter test-enter-active'615      )616    })617      .thenWaitFor(nextFrame)618      .then(() => {619        expect(vm.$el.children[0].className).toBe(620          'test test-enter-active test-enter-to'621        )622      })623      .thenWaitFor(duration / 2)624      .then(() => {625        vm.ok = false626      })627      .then(() => {628        expect(spy).toHaveBeenCalled()629        expect(vm.$el.children[0].className).toBe(630          'test test-leave test-leave-active'631        )632      })633      .thenWaitFor(nextFrame)634      .then(() => {635        expect(vm.$el.children[0].className).toBe(636          'test test-leave-active test-leave-to'637        )638      })639      .thenWaitFor(duration + buffer)640      .then(() => {641        expect(vm.$el.children.length).toBe(0)642      })643      .then(done)644  })645646  it('should remove stale leaving elements', done => {647    const spy = jasmine.createSpy()648    const vm = new Vue({649      template: `650          <div>651            <transition name="test" @after-leave="afterLeave">652              <div v-if="ok" class="test">foo</div>653            </transition>654          </div>655        `,656      data: { ok: true },657      methods: {658        afterLeave: spy659      }660    }).$mount(el)661662    expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')663    vm.ok = false664    waitForUpdate(() => {665      expect(vm.$el.children[0].className).toBe(666        'test test-leave test-leave-active'667      )668    })669      .thenWaitFor(duration / 2)670      .then(() => {671        vm.ok = true672      })673      .then(() => {674        expect(spy).toHaveBeenCalled()675        expect(vm.$el.children.length).toBe(1) // should have removed leaving element676        expect(vm.$el.children[0].className).toBe(677          'test test-enter test-enter-active'678        )679      })680      .thenWaitFor(nextFrame)681      .then(() => {682        expect(vm.$el.children[0].className).toBe(683          'test test-enter-active test-enter-to'684        )685      })686      .thenWaitFor(duration + buffer)687      .then(() => {688        expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')689      })690      .then(done)691  })692693  it('transition with v-show', done => {694    const vm = new Vue({695      template: `696          <div>697            <transition name="test">698              <div v-show="ok" class="test">foo</div>699            </transition>700          </div>701        `,702      data: { ok: true }703    }).$mount(el)704705    // should not apply transition on initial render by default706    expect(vm.$el.textContent).toBe('foo')707    expect(vm.$el.children[0].style.display).toBe('')708    expect(vm.$el.children[0].className).toBe('test')709    vm.ok = false710    waitForUpdate(() => {711      expect(vm.$el.children[0].className).toBe(712        'test test-leave test-leave-active'713      )714    })715      .thenWaitFor(nextFrame)716      .then(() => {717        expect(vm.$el.children[0].className).toBe(718          'test test-leave-active test-leave-to'719        )720      })721      .thenWaitFor(duration + buffer)722      .then(() => {723        expect(vm.$el.children[0].style.display).toBe('none')724        vm.ok = true725      })726      .then(() => {727        expect(vm.$el.children[0].style.display).toBe('')728        expect(vm.$el.children[0].className).toBe(729          'test test-enter test-enter-active'730        )731      })732      .thenWaitFor(nextFrame)733      .then(() => {734        expect(vm.$el.children[0].className).toBe(735          'test test-enter-active test-enter-to'736        )737      })738      .thenWaitFor(duration + buffer)739      .then(() => {740        expect(vm.$el.children[0].className).toBe('test')741      })742      .then(done)743  })744745  it('transition with v-show, inside child component', done => {746    const vm = new Vue({747      template: `748          <div>749            <test v-show="ok"></test>750          </div>751        `,752      data: { ok: true },753      components: {754        test: {755          template: `<transition name="test"><div class="test">foo</div></transition>`756        }757      }758    }).$mount(el)759760    // should not apply transition on initial render by default761    expect(vm.$el.textContent).toBe('foo')762    expect(vm.$el.children[0].style.display).toBe('')763    vm.ok = false764    waitForUpdate(() => {765      expect(vm.$el.children[0].className).toBe(766        'test test-leave test-leave-active'767      )768    })769      .thenWaitFor(nextFrame)770      .then(() => {771        expect(vm.$el.children[0].className).toBe(772          'test test-leave-active test-leave-to'773        )774      })775      .thenWaitFor(duration + buffer)776      .then(() => {777        expect(vm.$el.children[0].style.display).toBe('none')778        vm.ok = true779      })780      .then(() => {781        expect(vm.$el.children[0].style.display).toBe('')782        expect(vm.$el.children[0].className).toBe(783          'test test-enter test-enter-active'784        )785      })786      .thenWaitFor(nextFrame)787      .then(() => {788        expect(vm.$el.children[0].className).toBe(789          'test test-enter-active test-enter-to'790        )791      })792      .thenWaitFor(duration + buffer)793      .then(() => {794        expect(vm.$el.children[0].className).toBe('test')795      })796      .then(done)797  })798799  it('leaveCancelled (v-show only)', done => {800    const spy = jasmine.createSpy()801    const vm = new Vue({802      template: `803          <div>804            <transition name="test" @leave-cancelled="leaveCancelled">805              <div v-show="ok" class="test">foo</div>806            </transition>807          </div>808        `,809      data: { ok: true },810      methods: {811        leaveCancelled: spy812      }813    }).$mount(el)814815    expect(vm.$el.children[0].style.display).toBe('')816    vm.ok = false817    waitForUpdate(() => {818      expect(vm.$el.children[0].className).toBe(819        'test test-leave test-leave-active'820      )821    })822      .thenWaitFor(nextFrame)823      .then(() => {824        expect(vm.$el.children[0].className).toBe(825          'test test-leave-active test-leave-to'826        )827      })828      .thenWaitFor(10)829      .then(() => {830        vm.ok = true831      })832      .then(() => {833        expect(spy).toHaveBeenCalled()834        expect(vm.$el.children[0].className).toBe(835          'test test-enter test-enter-active'836        )837      })838      .thenWaitFor(nextFrame)839      .then(() => {840        expect(vm.$el.children[0].className).toBe(841          'test test-enter-active test-enter-to'842        )843      })844      .thenWaitFor(duration + buffer)845      .then(() => {846        expect(vm.$el.children[0].style.display).toBe('')847      })848      .then(done)849  })850851  it('leave transition with v-show: cancelled on next frame', done => {852    const vm = new Vue({853      template: `854          <div>855            <transition name="test">856              <div v-show="ok" class="test">foo</div>857            </transition>858          </div>859        `,860      data: { ok: true }861    }).$mount(el)862863    vm.ok = false864    waitForUpdate(() => {865      vm.ok = true866    })867      .thenWaitFor(nextFrame)868      .then(() => {869        expect(vm.$el.children[0].className).toBe(870          'test test-enter-active test-enter-to'871        )872      })873      .thenWaitFor(duration + buffer)874      .then(() => {875        expect(vm.$el.children[0].className).toBe('test')876      })877      .then(done)878  })879880  it('enter transition with v-show: cancelled on next frame', done => {881    const vm = new Vue({882      template: `883          <div>884            <transition name="test">885              <div v-show="ok" class="test">foo</div>886            </transition>887          </div>888        `,889      data: { ok: false }890    }).$mount(el)891892    vm.ok = true893    waitForUpdate(() => {894      vm.ok = false895    })896      .thenWaitFor(nextFrame)897      .then(() => {898        expect(vm.$el.children[0].className).toBe(899          'test test-leave-active test-leave-to'900        )901      })902      .thenWaitFor(duration + buffer)903      .then(() => {904        expect(vm.$el.children[0].className).toBe('test')905      })906      .then(done)907  })908909  it('animations', done => {910    const vm = new Vue({911      template: `912          <div>913            <transition name="test-anim">914              <div v-if="ok">foo</div>915            </transition>916          </div>917        `,918      data: { ok: true }919    }).$mount(el)920921    // should not apply transition on initial render by default922    expect(vm.$el.innerHTML).toBe('<div>foo</div>')923    vm.ok = false924    waitForUpdate(() => {925      expect(vm.$el.children[0].className).toBe(926        'test-anim-leave test-anim-leave-active'927      )928    })929      .thenWaitFor(nextFrame)930      .then(() => {931        expect(vm.$el.children[0].className).toBe(932          'test-anim-leave-active test-anim-leave-to'933        )934      })935      .thenWaitFor(duration + buffer)936      .then(() => {937        expect(vm.$el.children.length).toBe(0)938        vm.ok = true939      })940      .then(() => {941        expect(vm.$el.children[0].className).toBe(942          'test-anim-enter test-anim-enter-active'943        )944      })945      .thenWaitFor(nextFrame)946      .then(() => {947        expect(vm.$el.children[0].className).toBe(948          'test-anim-enter-active test-anim-enter-to'949        )950      })951      .thenWaitFor(duration + buffer)952      .then(() => {953        expect(vm.$el.children[0].className).toBe('')954      })955      .then(done)956  })957958  it('explicit transition type', done => {959    const vm = new Vue({960      template: `961          <div>962            <transition name="test-anim-long" type="animation">963              <div v-if="ok" class="test">foo</div>964            </transition>965          </div>966        `,967      data: { ok: true }968    }).$mount(el)969970    // should not apply transition on initial render by default971    expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')972    vm.ok = false973    waitForUpdate(() => {974      expect(vm.$el.children[0].className).toBe(975        'test test-anim-long-leave test-anim-long-leave-active'976      )977    })978      .thenWaitFor(nextFrame)979      .then(() => {980        expect(vm.$el.children[0].className).toBe(981          'test test-anim-long-leave-active test-anim-long-leave-to'982        )983      })984      .thenWaitFor(duration + 5)985      .then(() => {986        // should not end early due to transition presence987        expect(vm.$el.children[0].className).toBe(988          'test test-anim-long-leave-active test-anim-long-leave-to'989        )990      })991      .thenWaitFor(duration + 5)992      .then(() => {993        expect(vm.$el.children.length).toBe(0)994        vm.ok = true995      })996      .then(() => {997        expect(vm.$el.children[0].className).toBe(998          'test test-anim-long-enter test-anim-long-enter-active'999        )1000      })1001      .thenWaitFor(nextFrame)1002      .then(() => {1003        expect(vm.$el.children[0].className).toBe(1004          'test test-anim-long-enter-active test-anim-long-enter-to'1005        )1006      })1007      .thenWaitFor(duration + 5)1008      .then(() => {1009        expect(vm.$el.children[0].className).toBe(1010          'test test-anim-long-enter-active test-anim-long-enter-to'1011        )1012      })1013      .thenWaitFor(duration + 5)1014      .then(() => {1015        expect(vm.$el.children[0].className).toBe('test')1016      })1017      .then(done)1018  })10191020  it('transition on appear', done => {1021    const vm = new Vue({1022      template: `1023          <div>1024            <transition name="test"1025              appear1026              appear-class="test-appear"1027              appear-to-class="test-appear-to"1028              appear-active-class="test-appear-active">1029              <div v-if="ok" class="test">foo</div>1030            </transition>1031          </div>1032        `,1033      data: { ok: true }1034    }).$mount(el)10351036    waitForUpdate(() => {1037      expect(vm.$el.children[0].className).toBe(1038        'test test-appear test-appear-active'1039      )1040    })1041      .thenWaitFor(nextFrame)1042      .then(() => {1043        expect(vm.$el.children[0].className).toBe(1044          'test test-appear-active test-appear-to'1045        )1046      })1047      .thenWaitFor(duration + buffer)1048      .then(() => {1049        expect(vm.$el.children[0].className).toBe('test')1050      })1051      .then(done)1052  })10531054  it('transition on appear with v-show', done => {1055    const vm = new Vue({1056      template: `1057          <div>1058            <transition name="test" appear>1059              <div v-show="ok" class="test">foo</div>1060            </transition>1061          </div>1062        `,1063      data: { ok: true }1064    }).$mount(el)10651066    waitForUpdate(() => {1067      expect(vm.$el.children[0].className).toBe(1068        'test test-enter test-enter-active'1069      )1070    })1071      .thenWaitFor(nextFrame)1072      .then(() => {1073        expect(vm.$el.children[0].className).toBe(1074          'test test-enter-active test-enter-to'1075        )1076      })1077      .thenWaitFor(duration + buffer)1078      .then(() => {1079        expect(vm.$el.children[0].className).toBe('test')1080      })1081      .then(done)1082  })10831084  it('transition on SVG elements', done => {1085    const vm = new Vue({1086      template: `1087          <svg>1088            <transition>1089              <circle cx="0" cy="0" r="10" v-if="ok" class="test"></circle>1090            </transition>1091          </svg>1092        `,1093      data: { ok: true }1094    }).$mount(el)10951096    // should not apply transition on initial render by default1097    expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test')1098    vm.ok = false1099    waitForUpdate(() => {1100      expect(vm.$el.childNodes[0].getAttribute('class')).toBe(1101        'test v-leave v-leave-active'1102      )1103    })1104      .thenWaitFor(nextFrame)1105      .then(() => {1106        expect(vm.$el.childNodes[0].getAttribute('class')).toBe(1107          'test v-leave-active v-leave-to'1108        )1109      })1110      .thenWaitFor(duration + buffer)1111      .then(() => {1112        expect(vm.$el.childNodes.length).toBe(1)1113        expect(vm.$el.childNodes[0].nodeType).toBe(8) // should be an empty comment node1114        expect(vm.$el.childNodes[0].textContent).toBe('')1115        vm.ok = true1116      })1117      .then(() => {1118        expect(vm.$el.childNodes[0].getAttribute('class')).toBe(1119          'test v-enter v-enter-active'1120        )1121      })1122      .thenWaitFor(nextFrame)1123      .then(() => {1124        expect(vm.$el.childNodes[0].getAttribute('class')).toBe(1125          'test v-enter-active v-enter-to'1126        )1127      })1128      .thenWaitFor(duration + buffer)1129      .then(() => {1130        expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test')1131      })1132      .then(done)1133  })11341135  it('transition on child components', done => {1136    const vm = new Vue({1137      template: `1138          <div>1139            <transition>1140              <test v-if="ok" class="test"></test>1141            </transition>1142          </div>1143        `,1144      data: { ok: true },1145      components: {1146        test: {1147          template: `1148              <transition name="test">1149                <div>foo</div>1150              </transition>1151            ` // test transition override from parent1152        }1153      }1154    }).$mount(el)11551156    // should not apply transition on initial render by default1157    expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')1158    vm.ok = false1159    waitForUpdate(() => {1160      expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')1161    })1162      .thenWaitFor(nextFrame)1163      .then(() => {1164        expect(vm.$el.children[0].className).toBe(1165          'test v-leave-active v-leave-to'1166        )1167      })1168      .thenWaitFor(duration + buffer)1169      .then(() => {1170        expect(vm.$el.children.length).toBe(0)1171        vm.ok = true1172      })1173      .then(() => {1174        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')1175      })1176      .thenWaitFor(nextFrame)1177      .then(() => {1178        expect(vm.$el.children[0].className).toBe(1179          'test v-enter-active v-enter-to'1180        )1181      })1182      .thenWaitFor(duration + buffer)1183      .then(() => {1184        expect(vm.$el.children[0].className).toBe('test')1185      })1186      .then(done)1187  })11881189  it('transition inside child component with v-if', done => {1190    const vm = new Vue({1191      template: `1192          <div>1193            <test v-if="ok" class="test"></test>1194          </div>1195        `,1196      data: { ok: true },1197      components: {1198        test: {1199          template: `1200              <transition>1201                <div>foo</div>1202              </transition>1203            `1204        }1205      }1206    }).$mount(el)12071208    // should not apply transition on initial render by default1209    expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')1210    vm.ok = false1211    waitForUpdate(() => {1212      expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')1213    })1214      .thenWaitFor(nextFrame)1215      .then(() => {1216        expect(vm.$el.children[0].className).toBe(1217          'test v-leave-active v-leave-to'1218        )1219      })1220      .thenWaitFor(duration + buffer)1221      .then(() => {1222        expect(vm.$el.children.length).toBe(0)1223        vm.ok = true1224      })1225      .then(() => {1226        expect(vm.$el.children[0].className).toBe('test')1227      })1228      .then(done)1229  })12301231  it('transition with appear inside child component with v-if', done => {1232    const vm = new Vue({1233      template: `1234          <div>1235            <test v-if="ok" class="test"></test>1236          </div>1237        `,1238      data: { ok: true },1239      components: {1240        test: {1241          template: `1242              <transition appear1243                appear-class="test-appear"1244                appear-to-class="test-appear-to"1245                appear-active-class="test-appear-active">1246                <div>foo</div>1247              </transition>1248            `1249        }1250      }1251    }).$mount(el)12521253    waitForUpdate(() => {1254      expect(vm.$el.children[0].className).toBe(1255        'test test-appear test-appear-active'1256      )1257    })1258      .thenWaitFor(nextFrame)1259      .then(() => {1260        expect(vm.$el.children[0].className).toBe(1261          'test test-appear-active test-appear-to'1262        )1263      })1264      .thenWaitFor(duration + buffer)1265      .then(() => {1266        expect(vm.$el.children[0].className).toBe('test')1267        vm.ok = false1268      })1269      .then(() => {1270        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')1271      })1272      .thenWaitFor(nextFrame)1273      .then(() => {1274        expect(vm.$el.children[0].className).toBe(1275          'test v-leave-active v-leave-to'1276        )1277      })1278      .thenWaitFor(duration + buffer)1279      .then(() => {1280        expect(vm.$el.children.length).toBe(0)1281      })1282      .then(done)1283  })12841285  it('transition inside nested child component with v-if', done => {1286    const vm = new Vue({1287      template: `1288          <div>1289            <foo v-if="ok" class="test"></foo>1290          </div>1291        `,1292      data: { ok: true },1293      components: {1294        foo: {1295          template: '<bar></bar>',1296          components: {1297            bar: {1298              template: '<transition><div>foo</div></transition>'1299            }1300          }1301        }1302      }1303    }).$mount(el)13041305    // should not apply transition on initial render by default1306    expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')1307    vm.ok = false1308    waitForUpdate(() => {1309      expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')1310    })1311      .thenWaitFor(nextFrame)1312      .then(() => {1313        expect(vm.$el.children[0].className).toBe(1314          'test v-leave-active v-leave-to'1315        )1316      })1317      .thenWaitFor(duration + buffer)1318      .then(() => {1319        expect(vm.$el.children.length).toBe(0)1320        vm.ok = true1321      })1322      .then(() => {1323        expect(vm.$el.children[0].className).toBe('test')1324      })1325      .then(done)1326  })13271328  it('transition with appear inside nested child component with v-if', done => {1329    const vm = new Vue({1330      template: `1331          <div>1332            <foo v-if="ok" class="test"></foo>1333          </div>1334        `,1335      data: { ok: true },1336      components: {1337        foo: {1338          template: '<bar></bar>',1339          components: {1340            bar: {1341              template: `1342                  <transition appear1343                    appear-class="test-appear"1344                    appear-to-class="test-appear-to"1345                    appear-active-class="test-appear-active">1346                    <div>foo</div>1347                  </transition>1348                `1349            }1350          }1351        }1352      }1353    }).$mount(el)13541355    waitForUpdate(() => {1356      expect(vm.$el.children[0].className).toBe(1357        'test test-appear test-appear-active'1358      )1359    })1360      .thenWaitFor(nextFrame)1361      .then(() => {1362        expect(vm.$el.children[0].className).toBe(1363          'test test-appear-active test-appear-to'1364        )1365      })1366      .thenWaitFor(duration + buffer)1367      .then(() => {1368        expect(vm.$el.children[0].className).toBe('test')1369        vm.ok = false1370      })1371      .then(() => {1372        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')1373      })1374      .thenWaitFor(nextFrame)1375      .then(() => {1376        expect(vm.$el.children[0].className).toBe(1377          'test v-leave-active v-leave-to'1378        )1379      })1380      .thenWaitFor(duration + buffer)1381      .then(() => {1382        expect(vm.$el.children.length).toBe(0)1383      })1384      .then(done)1385  })13861387  it('custom transition higher-order component', done => {1388    const vm = new Vue({1389      template:1390        '<div><my-transition><div v-if="ok" class="test">foo</div></my-transition></div>',1391      data: { ok: true },1392      components: {1393        'my-transition': {1394          functional: true,1395          render(h, { data, children }) {1396            ;(data.props || (data.props = {})).name = 'test'1397            return h('transition', data, children)1398          }1399        }1400      }1401    }).$mount(el)14021403    // should not apply transition on initial render by default1404    expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')1405    vm.ok = false1406    waitForUpdate(() => {1407      expect(vm.$el.children[0].className).toBe(1408        'test test-leave test-leave-active'1409      )1410    })1411      .thenWaitFor(nextFrame)1412      .then(() => {1413        expect(vm.$el.children[0].className).toBe(1414          'test test-leave-active test-leave-to'1415        )1416      })1417      .thenWaitFor(duration + buffer)1418      .then(() => {1419        expect(vm.$el.children.length).toBe(0)1420        vm.ok = true1421      })1422      .then(() => {1423        expect(vm.$el.children[0].className).toBe(1424          'test test-enter test-enter-active'1425        )1426      })1427      .thenWaitFor(nextFrame)1428      .then(() => {1429        expect(vm.$el.children[0].className).toBe(1430          'test test-enter-active test-enter-to'1431        )1432      })1433      .thenWaitFor(duration + buffer)1434      .then(() => {1435        expect(vm.$el.children[0].className).toBe('test')1436      })1437      .then(done)1438  })14391440  it('warn when used on multiple elements', () => {1441    new Vue({1442      template: `<transition><p>1</p><p>2</p></transition>`1443    }).$mount()1444    expect(1445      `<transition> can only be used on a single element`1446    ).toHaveBeenWarned()1447  })14481449  describe('explicit durations -', () => {1450    it('single value', done => {1451      const vm = new Vue({1452        template: `1453            <div>1454              <transition duration="${explicitDuration}">1455                <div v-if="ok" class="test">foo</div>1456              </transition>1457            </div>1458          `,1459        data: { ok: true }1460      }).$mount(el)14611462      vm.ok = false14631464      waitForUpdate(() => {1465        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')1466      })1467        .thenWaitFor(nextFrame)1468        .then(() => {1469          expect(vm.$el.children[0].className).toBe(1470            'test v-leave-active v-leave-to'1471          )1472        })1473        .thenWaitFor(explicitDuration + buffer)1474        .then(() => {1475          expect(vm.$el.children.length).toBe(0)1476          vm.ok = true1477        })1478        .then(() => {1479          expect(vm.$el.children[0].className).toBe(1480            'test v-enter v-enter-active'1481          )1482        })1483        .thenWaitFor(nextFrame)1484        .then(() => {1485          expect(vm.$el.children[0].className).toBe(1486            'test v-enter-active v-enter-to'1487          )1488        })1489        .thenWaitFor(explicitDuration + buffer)1490        .then(() => {1491          expect(vm.$el.children[0].className).toBe('test')1492        })1493        .then(done)1494    })14951496    it('enter and auto leave', done => {1497      const vm = new Vue({1498        template: `1499            <div>1500              <transition :duration="{ enter: ${explicitDuration} }">1501                <div v-if="ok" class="test">foo</div>1502              </transition>1503            </div>1504          `,1505        data: { ok: true }1506      }).$mount(el)15071508      vm.ok = false15091510      waitForUpdate(() => {1511        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')1512      })1513        .thenWaitFor(nextFrame)1514        .then(() => {1515          expect(vm.$el.children[0].className).toBe(1516            'test v-leave-active v-leave-to'1517          )1518        })1519        .thenWaitFor(duration + buffer)1520        .then(() => {1521          expect(vm.$el.children.length).toBe(0)1522          vm.ok = true1523        })1524        .then(() => {1525          expect(vm.$el.children[0].className).toBe(1526            'test v-enter v-enter-active'1527          )1528        })1529        .thenWaitFor(nextFrame)1530        .then(() => {1531          expect(vm.$el.children[0].className).toBe(1532            'test v-enter-active v-enter-to'1533          )1534        })1535        .thenWaitFor(explicitDuration + buffer)1536        .then(() => {1537          expect(vm.$el.children[0].className).toBe('test')1538        })1539        .then(done)1540    })15411542    it('leave and auto enter', done => {1543      const vm = new Vue({1544        template: `1545            <div>1546              <transition :duration="{ leave: ${explicitDuration} }">1547                <div v-if="ok" class="test">foo</div>1548              </transition>1549            </div>1550          `,1551        data: { ok: true }1552      }).$mount(el)15531554      vm.ok = false15551556      waitForUpdate(() => {1557        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')1558      })1559        .thenWaitFor(nextFrame)1560        .then(() => {1561          expect(vm.$el.children[0].className).toBe(1562            'test v-leave-active v-leave-to'1563          )1564        })1565        .thenWaitFor(explicitDuration + buffer)1566        .then(() => {1567          expect(vm.$el.children.length).toBe(0)1568          vm.ok = true1569        })1570        .then(() => {1571          expect(vm.$el.children[0].className).toBe(1572            'test v-enter v-enter-active'1573          )1574        })1575        .thenWaitFor(nextFrame)1576        .then(() => {1577          expect(vm.$el.children[0].className).toBe(1578            'test v-enter-active v-enter-to'1579          )1580        })1581        .thenWaitFor(duration + buffer)1582        .then(() => {1583          expect(vm.$el.children[0].className).toBe('test')1584        })1585        .then(done)1586    })15871588    it('separate enter and leave', done => {1589      const enter = explicitDuration1590      const leave = explicitDuration * 215911592      const vm = new Vue({1593        template: `1594            <div>1595              <transition :duration="{ enter: ${enter}, leave: ${leave} }">1596                <div v-if="ok" class="test">foo</div>1597              </transition>1598            </div>1599          `,1600        data: { ok: true }1601      }).$mount(el)16021603      vm.ok = false16041605      waitForUpdate(() => {1606        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')1607      })1608        .thenWaitFor(nextFrame)1609        .then(() => {1610          expect(vm.$el.children[0].className).toBe(1611            'test v-leave-active v-leave-to'1612          )1613        })1614        .thenWaitFor(leave + buffer)1615        .then(() => {1616          expect(vm.$el.children.length).toBe(0)1617          vm.ok = true1618        })1619        .then(() => {1620          expect(vm.$el.children[0].className).toBe(1621            'test v-enter v-enter-active'1622          )1623        })1624        .thenWaitFor(nextFrame)1625        .then(() => {1626          expect(vm.$el.children[0].className).toBe(1627            'test v-enter-active v-enter-to'1628          )1629        })1630        .thenWaitFor(enter + buffer)1631        .then(() => {1632          expect(vm.$el.children[0].className).toBe('test')1633        })1634        .then(done)1635    })16361637    it('enter and leave + duration change', done => {1638      const enter1 = explicitDuration * 21639      const enter2 = explicitDuration1640      const leave1 = explicitDuration * 0.51641      const leave2 = explicitDuration * 316421643      const vm = new Vue({1644        template: `1645            <div>1646              <transition :duration="{ enter: enter, leave: leave }">1647                <div v-if="ok" class="test">foo</div>1648              </transition>1649            </div>1650          `,1651        data: {1652          ok: true,1653          enter: enter1,1654          leave: leave11655        }1656      }).$mount(el)16571658      vm.ok = false16591660      waitForUpdate(() => {1661        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')1662      })1663        .thenWaitFor(nextFrame)1664        .then(() => {1665          expect(vm.$el.children[0].className).toBe(1666            'test v-leave-active v-leave-to'1667          )1668        })1669        .thenWaitFor(leave1 + buffer)1670        .then(() => {1671          expect(vm.$el.children.length).toBe(0)1672          vm.ok = true1673        })1674        .then(() => {1675          expect(vm.$el.children[0].className).toBe(1676            'test v-enter v-enter-active'1677          )1678        })1679        .thenWaitFor(nextFrame)1680        .then(() => {1681          expect(vm.$el.children[0].className).toBe(1682            'test v-enter-active v-enter-to'1683          )1684        })1685        .thenWaitFor(enter1 + buffer)1686        .then(() => {1687          expect(vm.$el.children[0].className).toBe('test')1688          vm.enter = enter21689          vm.leave = leave21690        })1691        .then(() => {1692          vm.ok = false1693        })1694        .then(() => {1695          expect(vm.$el.children[0].className).toBe(1696            'test v-leave v-leave-active'1697          )1698        })1699        .thenWaitFor(nextFrame)1700        .then(() => {1701          expect(vm.$el.children[0].className).toBe(1702            'test v-leave-active v-leave-to'1703          )1704        })1705        .thenWaitFor(leave2 + buffer)1706        .then(() => {1707          expect(vm.$el.children.length).toBe(0)1708          vm.ok = true1709        })1710        .then(() => {1711          expect(vm.$el.children[0].className).toBe(1712            'test v-enter v-enter-active'1713          )1714        })1715        .thenWaitFor(nextFrame)1716        .then(() => {1717          expect(vm.$el.children[0].className).toBe(1718            'test v-enter-active v-enter-to'1719          )1720        })1721        .thenWaitFor(enter2 + buffer)1722        .then(() => {1723          expect(vm.$el.children[0].className).toBe('test')1724        })1725        .then(done)1726    }, 10000)17271728    it('warn invalid durations', done => {1729      const vm = new Vue({1730        template: `1731            <div>1732              <transition :duration="{ enter: NaN, leave: 'foo' }">1733                <div v-if="ok" class="test">foo</div>1734              </transition>1735            </div>1736          `,1737        data: {1738          ok: true1739        }1740      }).$mount(el)17411742      vm.ok = false1743      waitForUpdate(() => {1744        expect(1745          `<transition> explicit leave duration is not a valid number - got "foo"`1746        ).toHaveBeenWarned()1747      })1748        .thenWaitFor(duration + buffer)1749        .then(() => {1750          vm.ok = true1751        })1752        .then(() => {1753          expect(1754            `<transition> explicit enter duration is NaN`1755          ).toHaveBeenWarned()1756        })1757        .then(done)1758    })1759  })17601761  // #66871762  it('transition on child components with empty root node', done => {1763    const vm = new Vue({1764      template: `1765          <div>1766            <transition mode="out-in">1767              <component class="test" :is="view"></component>1768            </transition>1769          </div>1770        `,1771      data: { view: 'one' },1772      components: {1773        one: {1774          template: '<div v-if="false">one</div>'1775        },1776        two: {1777          template: '<div>two</div>'1778        }1779      }1780    }).$mount(el)17811782    // should not apply transition on initial render by default1783    expect(vm.$el.innerHTML).toBe('<!---->')1784    vm.view = 'two'1785    waitForUpdate(() => {1786      expect(vm.$el.innerHTML).toBe(1787        '<div class="test v-enter v-enter-active">two</div>'1788      )1789    })1790      .thenWaitFor(nextFrame)1791      .then(() => {1792        expect(vm.$el.children[0].className).toBe(1793          'test v-enter-active v-enter-to'1794        )1795      })1796      .thenWaitFor(duration + buffer)1797      .then(() => {1798        expect(vm.$el.children[0].className).toBe('test')1799        vm.view = 'one'1800      })1801      .then(() => {1802        // incoming comment node is appended instantly because it doesn't have1803        // data and therefore doesn't go through the transition module.1804        expect(vm.$el.innerHTML).toBe(1805          '<div class="test v-leave v-leave-active">two</div><!---->'1806        )1807      })1808      .thenWaitFor(nextFrame)1809      .then(() => {1810        expect(vm.$el.children[0].className).toBe(1811          'test v-leave-active v-leave-to'1812        )1813      })1814      .thenWaitFor(duration + buffer)1815      .then(() => {1816        expect(vm.$el.innerHTML).toBe('<!---->')1817      })1818      .then(done)1819  })18201821  // #81991822  it('should not throw error when replaced by v-html contents', done => {1823    const vm = new Vue({1824      template: `1825          <div>1826            <div v-if="ok" :class="ok">1827              <transition>1828                <span>a</span>1829              </transition>1830            </div>1831            <div v-else v-html="ok"></div>1832          </div>1833        `,1834      data: { ok: true }1835    }).$mount(el)18361837    vm.ok = false1838    waitForUpdate(() => {1839      expect(vm.$el.children[0].innerHTML).toBe('false')1840    }).then(done)1841  })1842})