[Vuejs]-Vue.js (Mocha/Chai/Sinon) component unit test expectation failing

by

0👍

I decided to use ‘avoriaz’ ( npm install –save-dev avoriaz ) as a unit testing framework, and I guess my test is quite complete. It covers 100% of the component code , testing the props and the methods.
action’s code is already tested, so I just need to check for the input trigger..

However any feedback is welcome, if it’s necessary to update this answer

    import Vue from 'vue'
    import ChangeTitleComponent from '@/components/ChangeTitleComponent'
    import Vuex from 'vuex'

    import sinon from 'sinon'
    import { mount } from 'avoriaz'

    Vue.use(Vuex)

    describe('ChangeTitleComponent.vue', () => {
      let actions
      let store

      beforeEach(() => {
        actions = {
          changeTitle: sinon.stub()
        }
        store = new Vuex.Store({
          state: {},
          actions
        })
      })

      describe('check component', () => {
        it('testing props', () => {
          const wrapper = mount(ChangeTitleComponent)
          wrapper.setProps({id: '1'})
          wrapper.setProps({title: 'Groceries'})
          expect(wrapper.vm.$props.id).to.equal('1')
          expect(wrapper.vm.$props.title).to.equal('Groceries')
        })

        it('calls store action changeTitle when input value is: New Title and an input event is fired', () => {
          const wrapper = mount(ChangeTitleComponent, { store })
          const input = wrapper.find('input')[0]
          input.element.value = 'New Title'
          input.trigger('input')
          expect(actions.changeTitle.calledOnce).to.equal(true)
        })
      })
    })

Leave a comment