Vue.js + Avoriaz：如何測試觀察者？

Question

我正在嘗試測試以下組件w Avoriaz，但是在更改道具后，手表中的動作不會觸發：{}

ItemComponent.vue
    switch checkbox
      ✗ calls store action updateList when item checkbox is switched
        AssertionError: expected false to equal true
            at Context.<anonymous> (webpack:///test/unit/specs/components/ItemComponent.spec.js:35:47 <- index.js:25510:48)

感謝您的反饋

ItemComponent.vue

    <template>
      <li :class="{ 'removed': item.checked }">
        <div class="checkbox">
          <label>
            <input type="checkbox" v-model="item.checked"> {{ item.text }}
          </label>
        </div>
      </li>
    </template>

    <script>
      import { mapActions } from 'vuex'
      export default {
        props: ['item', 'id'],
        methods: mapActions(['updateList']),
        watch: {
          'item.checked': function () {
            this.updateList(this.id)
          }
        }
      }
    </script>

這是我的組件測試

ItemComponent.spec.js

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

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

    Vue.use(Vuex)

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

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

      describe('switch checkbox', () => {
        it('calls store action updateList when item checkbox is switched', () => {
          const id = '3'
          const item = { text: 'Bananas', checked: true }
          const wrapper = mount(ItemComponent, { propsData: { item, id }, store })
          // switch item checked to false
          wrapper.setProps({ item: { text: 'Bananas', checked: false } })
          expect(wrapper.vm.$props.item.checked).to.equal(false)
          expect(actions.updateList.calledOnce).to.equal(true)
        })
      })
    })

Answer 1

你把道具弄錯了，改用：check

Answer 2

我應該在$ nextTick塊中寫我的Expect（actions.updateList（）。

  describe('switch checkbox', () => {
    it('calls store action updateList when item checkbox is switched', (done) => {
      const id = '3'
      const item = { text: 'Bananas', checked: true }
      const wrapper = mount(ItemComponent, { propsData: { item, id }, store })
      // switch item.checked to false
      wrapper.setProps({ item: { text: 'Bananas', checked: false } })
      expect(wrapper.vm.$props.item.checked).to.equal(false)
      wrapper.find('input')[0].trigger('input')
      wrapper.vm.$nextTick(() => {
        expect(actions.updateList.calledOnce).to.equal(true)
        done()
      })
    })
  })

那我的測試還可以

 ItemComponent.vue
    switch checkbox
      ✓ calls store action updateList when item checkbox is switched