localVue.spec.js

import Vue from 'vue'
import {
  describeWithMountingMethods,
  isRunningPhantomJS,
  vueVersion
} from '~resources/utils'
import { createLocalVue, shallowMount, mount } from '~vue/test-utils'
import { itSkipIf, itRunIf, itDoNotRunIf } from 'conditional-specs'
import Vuex from 'vuex'

describeWithMountingMethods('options.localVue', mountingMethod => {
  itSkipIf(
    isRunningPhantomJS,
    'mounts component using passed localVue as base Vue',
    () => {
      const TestComponent = {
        template: `<div>{{test}}</div>`
      }
      const localVue = createLocalVue()
      localVue.prototype.test = 'some value'
      const wrapper = mountingMethod(TestComponent, {
        localVue: localVue
      })
      const HTML = mountingMethod.name === 'renderToString'
        ? wrapper
        : wrapper.html()
      expect(HTML).to.contain('some value')
    }
  )

  itSkipIf(
    vueVersion < 2.3,
    'works correctly with extended children', () => {
      const localVue = createLocalVue()
      localVue.use(Vuex)
      const store = new Vuex.Store({
        state: { val: 2 }
      })
      const ChildComponent = Vue.extend({
        template: '<span>{{val}}</span>',
        computed: {
          val () {
            return this.$store.state.val
          }
        }
      })
      const TestComponent = {
        template: '<div><child-component /></div>',
        components: {
          ChildComponent
        }
      }
      const wrapper = mountingMethod(TestComponent, {
        localVue,
        store
      })
      const HTML =
      mountingMethod.name === 'renderToString' ? wrapper : wrapper.html()
      if (mountingMethod.name === 'shallowMount') {
        expect(HTML).to.not.contain('2')
      } else {
        expect(HTML).to.contain('2')
      }
    })

  itSkipIf(
    vueVersion < 2.3,
    'is applied to deeply extended components', () => {
      const GrandChildComponent = Vue.extend({
        template: '<div>{{$route.params}}</div>'
      })
      const ChildComponent = Vue.extend({
        template: '<div><grand-child-component />{{$route.params}}</div>',
        components: {
          GrandChildComponent
        }
      })
      const TestComponent = Vue.extend({
        template: '<child-component />',
        components: { ChildComponent }
      })
      const localVue = createLocalVue()
      localVue.prototype.$route = {}

      mountingMethod(TestComponent, {
        localVue
      })
    })

  it('is applied to components that extend from other components', () => {
    const localVue = createLocalVue()
    localVue.prototype.$route = {}

    const Extends = {
      created () {
        console.log(this.$route.params)
      }
    }
    const TestComponent = {
      extends: Extends
    }
    mountingMethod(TestComponent, {
      localVue
    })
  })

  itSkipIf(
    vueVersion < 2.3,
    'is applied to mixed extended components', () => {
      const BaseGrandChildComponent = {
        created () {
          this.$route.params
        }
      }
      const GrandChildComponent = {
        created () {
          this.$route.params
        },
        template: '<div/>',
        extends: BaseGrandChildComponent
      }
      const ChildComponent = Vue.extend({
        template: '<div><grand-child-component />{{$route.params}}</div>',
        components: {
          GrandChildComponent
        }
      })
      const TestComponent = Vue.extend({
        template: '<div><child-component /></div>',
        components: { ChildComponent }
      })
      const localVue = createLocalVue()
      localVue.prototype.$route = {}

      mountingMethod(TestComponent, {
        localVue
      })
    })

  it('does not add created mixin to localVue', () => {
    const localVue = createLocalVue()
    mountingMethod({ render: () => {} }, {
      localVue
    })
    expect(localVue.options.created).to.equal(undefined)
  })

  it('handles merging Vue instances', () => {
    const localVue = createLocalVue()
    localVue.use((_Vue) => {
      _Vue.$el = new _Vue()
    })
    mountingMethod({ template: '<div />' }, {
      localVue
    })
  })

  itRunIf(
    vueVersion < 2.3,
    'throws an error if used with an extended component in Vue 2.3', () => {
      const TestComponent = Vue.extend({
        template: '<div></div>'
      })
      const message =
    `[vue-test-utils]: options.localVue is not supported for components ` +
    `created with Vue.extend in Vue < 2.3. You can set localVue to false ` +
    `to mount the component.`

      const fn = () => mountingMethod(TestComponent, {
        localVue: createLocalVue(),
        stubs: false,
        mocks: false
      })
      expect(fn).to.throw()
        .with.property('message', message)
    })

  itDoNotRunIf(
    vueVersion < 2.3,
    'is applied to inline constructor functions', () => {
      const ChildComponent = Vue.extend({
        render (h) {
          h('p', this.$route.params)
        }
      })
      const TestComponent = {
        render: h => h(ChildComponent)
      }
      const localVue = createLocalVue()
      localVue.prototype.$route = {}
      const wrapper = mountingMethod(TestComponent, {
        localVue
      })
      if (mountingMethod.name === 'renderToString') {
        return
      }
      expect(wrapper.findAll(ChildComponent).length).to.equal(1)
    })

  itRunIf(
    mountingMethod.name === 'mount',
    'does not affect future tests', () => {
      const ChildComponent = {
        template: '<span></span>'
      }
      const TestComponent = {
        template: '<child-component />',
        components: { ChildComponent }
      }
      const localVue = createLocalVue()
      localVue.use(Vuex)
      shallowMount(TestComponent, { localVue })
      const wrapper = mount(TestComponent, { localVue })
      expect(wrapper.html()).to.contain('span')
    })
})