Vue.js Vuex单元测试用户输入,当覆盖率为100%时,我可以考虑我的测试OK

时间:2017-09-18 10:30:04

标签: unit-testing vue.js vuex

我目前正在测试我的一个儿童组件 我已经成功测试了所有vuex动作,突变和吸气剂 当我运行此ChangeTitleComonent.spec.js时,它通过100%覆盖率...感谢您的反馈

当100%覆盖时,我是否需要编写一些额外的测试?或者这个测试写得不好?

PARENT ShoppingListComponent.vue

    <template>
      <div>
        <h2>{{ title }}</h2>
        <add-item-component :id='id' @add="addItem"></add-item-component>
        <items-component :items="items" :id="id"></items-component>
        <div class="footer">
          <hr />
          <change-title-component :title="title" :id="id"></change-title-component>
        </div>
      </div>
    </template>

    <script>
      import AddItemComponent from './AddItemComponent'
      import ItemsComponent from './ItemsComponent'
      import ChangeTitleComponent from './ChangeTitleComponent'

      export default {
        components: {
          AddItemComponent,
          ItemsComponent,
          ChangeTitleComponent
        },
        props: ['id', 'title', 'items'],
        methods: {
          addItem (text) {
            this.items.push({
              text: text,
              checked: false
            })
          }
        }
      }
    </script>

    <style scoped>
      .footer {
        font-size: 0.7em;
        margin-top: 20vh;
      }
    </style>

儿童 ChangeTitleComponent

    <template>
      <div>
        <em>Change the title of your shopping list here</em>
        <input :value="title" @input="onInput({ title: $event.target.value, id: id })"/>
      </div>
    </template>

    <style scoped>
    </style>

    <script>
      import { mapActions } from 'vuex'

      export default {
        props: ['title', 'id'],
        methods: mapActions({  // dispatching actions in components
          onInput: 'changeTitle'
        })
      }
    </script>

UNIT TEST ChangeTitleComponent.spec.js

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

    describe('ChangeTitleComponent.vue', () => {
      describe('changeTitle', () => {
        var component

        beforeEach(() => {
          var vm = new Vue({
            template: '<change-title-component :title="title" :id="id" ref="changetitlecomponent">' +
            '</change-title-component></div>',
            components: {
              ChangeTitleComponent
            },
            props: ['title', 'id'],
            store
          }).$mount()
          component = vm.$refs.changetitlecomponent
        })

        it('should change the title', () => {
          // check component label text
          expect(component.$el.textContent).to.equal('Change the title of your shopping list here ')

          // simulate input Enter event
          const input = component.$el.querySelector('input')
          input.value = 'My New Title'
          const enterEvent = new window.Event('keypress', { which: 13 })
          input.dispatchEvent(enterEvent)
          component._watcher.run()
        })
      })
    })

0 个答案:

没有答案