VTU not handling the end of transitions

[TheJaredWilcurt]

Version

1.0.0-beta.11

Reproduction link

https://codesandbox.io/s/k31v0lw3o

Steps to reproduce

1. npm install -g vue-cli
2. npm init webpack animtest (hit enter for every question)
3. cd animtest
4. npm install --save-dev @vue/test-utils
5. npm run unit (1 of 1 tests ran/passed)
6. Change animtest\src\components\HelloWorld.vue to

   <template>
     <div class="hello">
       <button ref="testMenuToggle" @click="menuVisibility = !menuVisibility">Toggle</button>
       <transition name="expand">
         <nav ref="testMenuContents" v-show="menuVisibility" class="menu-contents">
           <a v-for="i in 100" :key="i" href="#">Example {{ i }}</a>
         </nav>
       </transition>
     </div>
   </template>
   
   <script>
   export default {
     name: 'HelloWorld',
     data () {
       return {
         menuVisibility: false
       }
     }
   }
   </script>
   
   <style>
   .menu-contents {
       background: papayawhip;
       max-height: 300px;
       overflow: auto;
   }
   a {
     display: block;
   }
   
   .expand-enter-active,
   .expand-leave-active {
       transition: height 0.6s;
   }
   .expand-enter,
   .expand-leave-to {
       height: 0px;
   }
   .expand-enter-to,
   .expand-leave {
       height: 300px;
   }
   </style>

7. Change animtest\test\unit\specs\HelloWorld.spec.js to

   import { shallow, createLocalVue } from '@vue/test-utils'
   import HelloWorld from '@/components/HelloWorld'
   
   describe('HelloWorld.vue', () => {
     let localVue
   
     beforeEach(() => {
       localVue = createLocalVue()
     })
   
     describe('Menu', () => {
       it('Menu visability should toggle when clicked', () => {
         const wrapper = shallow(HelloWorld, { localVue })
         // Set up/Verify: hidden
         wrapper.vm.menuVisibility = false
         expect(wrapper.vm.menuVisibility)
           .toBeFalsy()
         expect(wrapper.find({ ref: 'testMenuContents' }).element.style.display)
           .toEqual('none')
   
         // Toggle: shown
         wrapper.find({ ref: 'testMenuToggle' }).trigger('click')
         expect(wrapper.vm.menuVisibility)
           .toBeTruthy()
         expect(wrapper.find({ ref: 'testMenuContents' }).element.style.display)
           .toEqual('')
   
         // Toggle: hidden
         wrapper.find({ ref: 'testMenuToggle' }).trigger('click')
         console.log(wrapper.find({ ref: 'testMenuContents' }).element.classList)
         expect(wrapper.vm.menuVisibility)
           .toBeFalsy()
         expect(wrapper.find({ ref: 'testMenuContents' }).element.style.display)
           .toEqual('none')
       })
     })
   })

8. npm run unit (1 of 1 ran/failed)

What is expected?

pass

What is actually happening?

  console.log test\unit\specs\HelloWorld.spec.js:30
    DOMTokenList {
      '0': 'menu-contents',
      '1': 'v-leave',
      '2': 'v-leave-active'
    }

 FAIL  test\unit\specs\HelloWorld.spec.js
  HelloWorld.vue
    Menu
      × Menu visability should toggle when clicked (45ms)

  ● HelloWorld.vue › Menu › Menu visability should toggle when clicked

    Expected value to equal:
      "none"
    Received:
      ""

      32 |         .toBeFalsy()
      33 |       expect(wrapper.find({ ref: 'testMenuContents' }).element.style.display)
    > 34 |         .toEqual('none')
      35 |     })
      36 |   })
      37 | })

      at Object.<anonymous> (test/unit/specs/HelloWorld.spec.js:34:7)

---

This is to test that toggling the menu works.

1. Verify the menu is hidden
2. First button click - Toggles menu to be shown
3. Second button click - Toggles menu to be hidden again

It fails on the second button click. It should be reporting that the style="display: none;", but that style has not been applied yet because the Vue <transition> has not finished. This can be seen from the classList still having v-leave and v-leave-active applied.