准備着手前端組件庫的搭建，要求編寫單元測試，前端的單元測試完全沒接觸過，所以從頭學習了下，找了不少資料，所以想記錄下。
前端框架用的vue，現在搭建項目都很方便，不管哪個框架都會有腳手架，vue的腳手架是vue-cli，單元測試和e2e測試在搭建的時候選了就會自動下載相關的包，所以需要依賴哪些包，就先不研究了，直接基於腳手架的來處理。
vue-cli init出來的項目，分prod，dev，testing，而testing是直接選用dev的相關配置，而實際公司的運用場景會分更多的環境：dev，test，integration，prod 即開發環境，測試環境，集成環境（這是個模擬仿真生產的環境，除了數據不連通，理論上來說，所有的配置要和生產一致，有些公司可能就三種環境，測試和集成合並成一個），生產環境，基本上就會有開發，測試，生產三種環境。
而腳手架中搭出來的testing，其實是針對開發跑測試的一個環境，其實跟上面這三者不屬於一個范疇，而在webpack的配置中，我們針對上面的三種環境會對腳手架搭出來的配置文件稍作修改：
為了兼容各個環境，所以將這里換成是讀取環境變量，而在執行代碼打包時，在命令文件里都有對process.env.NODE_ENV，比如生產的npm run build 的build.js文件中：
然后執行單元測試的時候配置文件中並沒有這個變量的賦值，所以會導致命令報錯：
現在我的解決方案是在unit這個命令下，賦值環境變量：
這些算是准備工作，webpack的基礎配置方式，可以多看看webpack的官網。
接着是單元測試的部分，腳手架中用的測試工具是karma，測試庫是mocha，斷言庫是：chai
腳手架已經集成好，但是腳手架里的這三個工具的基本用法還是需要了解一下，所以對應的相關教程（其實都是官網，對應的api當工具書來用）：
1、karma：https://karma-runner.github.io/2.0/config/configuration-file.html（配置相關）
2、mocha：http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html
3、chai：https://www.jianshu.com/p/f200a75a15d2
執行完寫的測試用例，會生成一份測試報告，但生成的測試報告上出現的幾個名詞完全沒概念，statements和function 還能從字面上理解，branches就完全沒頭緒了，lines又讓人困惑，lines和statements有啥區別呢？
為此差了些資料，先是找到下面這篇文章：
這篇文章開頭就解釋了下這幾個名詞：
代碼覆蓋率
測試的時候，我們常常關心，是否所有代碼都測試到了。這個指標就叫做“代碼覆蓋率”（code coverage），它有四個測量維度。
- 行覆蓋率（line coverage）：是否每一行都執行了？
- 函數覆蓋率（function coverage）：是否每個函數都調用了？
- 分支覆蓋率（branch coverage）：是否每個 if 代碼塊都執行了？
- 語句覆蓋率（statement coverage）：是否每個語句都執行了？
但文中對行覆蓋率和語句覆蓋率沒做特別的解釋，於是繼續挖，又找到這篇博文：http://blog.hypers.io/2017/08/20/test-coverage/ 在這篇中涉及到的概念更多了，還有生成語法樹的概念
在查覆蓋率概念的時候，在這篇中又發現了幾個名詞：
判斷覆蓋率，條件覆蓋率，路徑覆蓋率，看概念是更困惑了~
對於覆蓋率的這些困惑看來只能稍后再結合實例來理解了。
前端的很多測試是需要基於瀏覽器的，karma中默認的是phantomjs，如果想要啟用其他瀏覽器，可以按照下面這個url里的教程進行相應處理
http://karma-runner.github.io/0.13/config/browsers.html
這些都是為寫用例的准備工作，下一篇用實例理解下這些概念。