Repository: vuejs/vue-next
File: packages/vue/__tests__/e2e/Transition.spec.ts (TypeScript)

Code before:
      const { createApp, ref } = (window as any).Vue
      createApp({
        template: `
          <div id="container">
            <transition name="test-reflow">
              <div v-if="toggle" class="test-reflow">content</div>
            </transition>
          </div>
          <button id="toggleBtn" @click="click">button</button>
        `,
        setup: () => {
          const toggle = ref(false)
          const click = () => (toggle.value = !toggle.value)
          return {
            toggle,
            click,
          }
        },
      }).mount('#app')
    })

    // if transition starts while there's v-leave-active added along with v-leave-from, its bad, it has to start when it doesnt have the v-leave-from

    // enter
    await classWhenTransitionStart()
    await nextFrame()
    await transitionFinish()

    // leave
    expect(await classWhenTransitionStart()).toStrictEqual([
      'test-reflow',
      'test-reflow-leave-from',
      'test-reflow-leave-active',
    ])

    expect(await style('.test-reflow', 'opacity')).toStrictEqual('0.9')

    await nextFrame()
    expect(await classList('.test-reflow')).toStrictEqual([
      'test-reflow',
      'test-reflow-leave-active',
      'test-reflow-leave-to',
    ])

    await transitionFinish()
    expect(await html('#container')).toBe('<!--v-if-->')
  })

  test('warn when used on multiple elements', async () => {
    createApp({
      render() {

Review comment (bug):
Unrelated to the goal of this PR, but this test was flaky for me locally (even before the change); I see in most other places in this file `nextFrame` is called before `transitionFinish` so I added it here as well but please let me know if adding it here is incorrect

Code after:
    )

    test(
      'separate enter and leave',
      async () => {
        await page().evaluate(duration => {
          const { createApp, ref } = (window as any).Vue
          createApp({
            template: `
              <div id="container">
                <transition name="test" :duration="{
                  enter: ${duration * 4},
                  leave: ${duration * 2}
                }">
                  <div v-if="toggle" class="test">content</div>
                </transition>
              </div>
              <button id="toggleBtn" @click="click">button</button>
            `,
            setup: () => {
              const toggle = ref(true)
              const click = () => (toggle.value = !toggle.value)
              return { toggle, click }
            },
          }).mount('#app')
        }, duration)
        expect(await html('#container')).toBe('<div class="test">content</div>')

        // leave
        expect(await classWhenTransitionStart()).toStrictEqual([
          'test',
          'test-leave-from',
          'test-leave-active',
        ])
        await nextFrame()
        expect(await classList('.test')).toStrictEqual([
          'test',
          'test-leave-active',
          'test-leave-to',
        ])
        await transitionFinish(duration * 2)
        expect(await html('#container')).toBe('<!--v-if-->')

        // enter
        expect(await classWhenTransitionStart()).toStrictEqual([
          'test',
          'test-enter-from',
          'test-enter-active',
        ])
        await nextFrame()
        expect(await classList('.test')).toStrictEqual([