vue-cli+mocha單元測試

什麼是mocha

我的理解就是，mocha是一個測試框架，它提供給你很多斷言介面，你可以使用它的介面寫一些測試檔案，來看看輸出是否符合預期。

mocha有一些很有用的輔助函式庫

比如util.js，vue/test.js這些網上教程很多了，我也不是很懂，就不多說了

寫測試檔案需要操作DOM

在.vue單檔案的測試中，比較多的是以下幾種情況（根據我自身的經驗，我經驗很少）

1. 是否正確渲染，vue例項，例如下面的vue元件的msg是否成功被渲染到html

<template>
    <div id = "footer">
        <
 
span>{{msg}}</span>
    </div>
</template>
<script>
export default {
	data() {
		return {
			msg:"Hello,world"
		}
	}
}
</script>

mocha庫提供了介面，expect().xxxxxx.equal()
，這裡，xxxxx是類似自然語言，為了提高程式可讀性的，常見的有，have，to，be等等，具體可以去mocha官網文件檢視
這種情況很簡單，可以向下面的程式碼這樣來寫

describe('render message test'
 
, () => {
  it('should render correct msg', () => {
    let Constructor = Vue.extend(HelloWorld)
    const vm = new Constructor()
    //建立vue例項後,msg 應該為HEllo,world
    expect(vm.msg).to.equal('Hello,world')
    let vmm = vm.$mount()
    //渲染掛載後，例項的msg應該是Hello,world
    expect(vmm.msg).to.equal('Hello,world'
 
)
  })
})

2. 父元件的資料是否正確傳入子元件

<template>
    <div id = "footer">
        <span>{{msg}}</span>
    </div>
</template>
<script>
export default {
	props: {
		msg: {
			type: String
			required: true
		}
	}
}
</script>

這裡HelloWorldz元件接收來自父元件的msg，然後渲染到html中，測試檔案可以直接傳給元件一個props，檢視他是否正確渲染，程式碼中用到的propsData可以Vue.js官方文件的API裡看到

describe('render message test', () => {
  it('should render correct msg', () => {
    let Constructor = Vue.extend(HelloWorld)
    const vm = new Constructor({
      propsData: {
      	msg: 'Hello, vue'
      }
    })
//例項的渲染    
    expect(vm.msg).to.equal('Hello,vue')
  })
//掛載後的渲染
let vmm = vm.$mount()
expect(vmm.msg).to.equal('Hello,vue')
})

3. 觸發鍵盤或者滑鼠事件
   這裡就要用到javascript如何操作DOM的知識，可以看看菜鳥教程裡的HTML DOM，比較全面
   javacript操作DOM，模擬事件觸發需要三步
   • 建立事件，const evt = doucument.createEvent('EVENT')
   • 初始化事件， evt.initEvent('event', options)
   • 派發事件，trigger，element.dispatchEvent(evt)
     第一步裡EVENT是事件描述，有keyboardEvent, MouseEvent,Event等
     第二步裡event是具體的事件，滑鼠事件有click,鍵盤事件有keydown,keyup等等
     第三步裡element是觸發事件的html元素，即繫結這個事件的html元素，用querySelector(' ')是很方便的
     請看下面的事例

<template>
  <section id="todo-section">
    <input
    type="text"
    class="todo-input"
    v-model="todo"
    @keyup.enter="handleSubmit"
    />
  </section>
</template>

<script>

export default {
  data: function () {
    return {
      todo: '',
      list: []
    }
  },
  methods: {
    handleSubmit () {
      var item = {
        name: this.todo,
        completed: false
      }
      this.list.unshift(item)
      this.todo = ''
    }
  }
}
</script>

describe('test for todolist', () => {
  it('should render correct input', () => {
  //初始化TodoList元件例項
    const Constructor = Vue.extend(TodoList)
    let vm = new Constructor()
  //TodoList 裡有一個todo, data
    vm.todo = 'getup'
    let vmm = vm.$mount()
//檢查input裡todo是否被渲染出來
   expect(vmm.$el.querySelector('.todo-input').value)
      .equal('getup')
//觸發事件
    const evt = document.createEvent('Events')
    evt.initEvent('keyup', true, true)
    evt.keyCode = 13
    vmm.$el.querySelector('.todo-input').dispatchEvent(evt)
    
//檢查事件是都成功，即按下enter，todo被放入list
 expect(vm.list[0].name).equal('getup')
  })
})

4. 子元件是否成功向父元件傳遞資訊
   可以養parent.$children訪問子元件，那就很簡單了，只要父元件創立後，訪問子元件，利用上述方法觸發子元件的事件，從而$emit向父元件傳遞資料，觸發父元件的事件
   這裡不再提供具體事例，感興趣的朋友可以留言，其實理解了上面的內容，最後一種情況很容易就想到怎麼做了，需要注意的是

• 在建立vue例項後，掛載後，再次修改vue例項，是需要重新掛載的
• 訪問子元件，要通過掛載後的父元件，未掛載的父元件是沒有子元件的，都沒掛載哪裡來元件

總結

我沒有學過javascript，本學期課程要求自學前端的知識，我選擇了學習Vue,過程比較坎坷，在上文敘述過程中多是經驗說，如果有理論層面的錯誤，希望大家留言指正，感激不已！

望與君共同進步~