TransitionStub.spec.js

import ComponentWithTransition from '~resources/components/component-with-transition.vue'
import { describeWithShallowAndMount, vueVersion } from '~resources/utils'
import { TransitionStub } from '~vue/test-utils'
import { itDoNotRunIf } from 'conditional-specs'

describeWithShallowAndMount('TransitionStub', mountingMethod => {
  let consoleError

  beforeEach(() => {
    consoleError = sinon.stub(console, 'error')
  })

  afterEach(() => {
    consoleError.restore()
  })

  it('update synchronously when used as stubs for Transition', () => {
    const wrapper = mountingMethod(ComponentWithTransition, {
      stubs: {
        transition: TransitionStub
      }
    })
    expect(wrapper.text()).contains('a')
    wrapper.setData({ a: 'b' })
    expect(wrapper.text()).contains('b')
  })

  itDoNotRunIf(
    vueVersion < 2.5,
    'does not stub Transition, but applies synchronously in Vue > 2.5.18',
    () => {
      const wrapper = mountingMethod(ComponentWithTransition)
      expect(wrapper.find(TransitionStub).exists()).to.equal(false)
      expect(wrapper.text()).contains('a')
      wrapper.setData({ a: 'b' })
      expect(wrapper.text()).contains('b')
    }
  )

  it('does not add v-leave class to children', () => {
    const TestComponent = {
      template: `
    <div>
      <transition name="expand">
        <nav v-show="isShown" />
      </transition>
      <button @click="isShown = !isShown" />
    </div>
    `,
      data: () => ({
        isShown: false
      })
    }
    const wrapper = mountingMethod(TestComponent, {
      stubs: {
        transition: TransitionStub
      }
    })
    expect(wrapper.find('nav').isVisible()).to.equal(false)
    wrapper.find('button').trigger('click')
    expect(wrapper.find('nav').isVisible()).to.equal(true)
    wrapper.find('button').trigger('click')
    expect(wrapper.find('nav').isVisible()).to.equal(false)
  })

  it('logs error when has multiple children', () => {
    const TestComponent = {
      template: `
        <transition><div /><div /></transition>
      `
    }
    const msg =
      '[vue-test-utils]: <transition> can only be used on a single element. Use <transition-group> for lists.'
    mountingMethod(TestComponent, {
      stubs: {
        transition: TransitionStub
      }
    })
    expect(consoleError).calledWith(msg)
  })

  it('handles keyed transitions', () => {
    const TestComponent = {
      template: `
      <div>
        <transition>
          <div v-if="bool" key="a">a</div>
          <div v-else key="b">b</div>
        </transition>
      </div>
      `,
      data() {
        return {
          bool: true
        }
      }
    }
    const wrapper = mountingMethod(TestComponent, {
      stubs: {
        transition: TransitionStub
      }
    })
    expect(wrapper.text()).to.equal('a')
    wrapper.setData({ bool: false })
    expect(wrapper.text()).to.equal('b')
  })
})