Unit test vue.js component with inline-template

Viewed 591

I am using Vue 2 to enhance a Ruby on Rails engine, using inline-template attributes in the existing Haml views as templates for my Vue components.

Is it possible to test the methods of a component defined like this? All the testing examples I can find assume the use of single-file .vue components.

These tests (using Mocha and Chai) fail with [Vue warn]: Failed to mount component: template or render function not defined.

Example Component:

//main-nav.js

import Vue from 'vue'
const MainNav =  {
  data: function() {
    return {open: true}
  },

  methods: {
    toggleOpen: function(item) {
      item.open = !item.open
    }
  }
}

export default MainNav

Example Test:

//main-nav.test.js
import MainNav from '../../admin/main-nav'

describe('MainNav', () => {
  let Constructor
  let vm

  beforeEach(() => {
    Constructor = Vue.extend(MainNav)
    vm = new Constructor().$mount()
  })

  afterEach(() => {
    vm.$destroy()
  })

  describe('toggleOpen', () => {
    it('has a toggleOpen function', () => {
      expect(vm.MainNav.toggleOpen).to.be.a('function')
    })

    it('toggles open from true to false', () => {
      const result = MainNav.toggleOpen({'open': true})
      expect(result).to.include({open: false})
    })
  })
})
1 Answers
Related