1. 程式人生 > >單元測試karma+mocha學習

單元測試karma+mocha學習

www. 知識 one chrome www 多功能 ini capture 雙模式

tips: 最近在學習單元測試,選擇框架是自動單元測試karma+mocha。

一、什麽是單元測試?

單元測試又稱模塊測試,是針對程序模塊(軟件設計的最小單位)來進行正確性檢驗的測試工作。程序單元是應用的最小可測試部件。 ———維基百科

技術分享圖片

如圖所示:

system: 所有組件的測試;

integration:集成測試,多個組件一起測試

component:組件的測試;

functional:功能測試,比一個單元要大,比一個完整的組件測試要小。通常為工作在一起的的幾個方法/函數/類。上百的測試用例允許運行幾個小時。大部分功能測試是功能測試回歸套件的一部分;

unit: 單元測試,可測試代碼的最小的一部分。通常是一個單一的方法,不會使用其它方法或者類。非常快;

二、我們為什麽要學習單元測試?

我們先來談談我們工作中項目中遇到的問題吧!

我總結了以下幾點:

1. 為了驗證代碼的正確性。

2. 保證代碼的質量。

3. 高聚合,低耦合。

特意查了下知乎!!!

技術分享圖片

技術分享圖片

原文地址:https://www.zhihu.com/question/28729261(為什麽要學習單元測試)

以及下面這篇。

技術分享圖片

原文地址:http://taobaofed.org/blog/2016/01/08/karma-origin/(karma 的前生今世)。

三、karma框架

karma是一個測試runner,它需要測試框架。

1. karma 支持多種語言;

2. karma 支持多種測試框架;

3. karma 可以模擬多種真實的瀏覽器環境;

4. karma 可以監聽文件的變化;

5. karma 支持語法的預編譯。技術分享圖片

對於前端而言,javaScript 和 node 就夠了。所以mocha 測試框架就夠了。同時mocha也可以運行在瀏覽器上。對於mocha 而言,需要配置html,才能運行在各個瀏覽器上。配置mocha 相對復雜,繁瑣一點,所以我們選擇框架是karma + mocha;

安裝配置karma;

1. npm install karma --save-dev

技術分享圖片

(當你安裝完karma 後,你就得相應的安裝karma所需的插件依賴。如下圖)

技術分享圖片

為了避免這種復雜的操作,以及後續的karma指令方便,建議全局安裝karma-cli;

npm install karam-cli -g

2.我們可以重新配置karma插件的依賴

karma init

技術分享圖片

1>. Which testing framework do you want to use ? (mocha)

2>. Do you want to use Require.js ? (no)

3>. Do you want to capture any browsers automatically ? (Chrome,Firefox,Safari)

4>. What is the location of your source and test files ? (test/**.js)

5>. Should any of the files included by the previous patterns be excluded ? ()

6>. Do you want Karma to watch all the files and run the tests on change ? (yes)

(配置完後,我們可以看到package.json 會自動生成依賴,如下圖,但只是生成依賴,還需要npm install 安裝到本地。)

技術分享圖片

四.認識mocha,斷言庫chai。

Mocha是一個能夠運行在Node和瀏覽器中的多功能的JavaScript測試框架。

Mocha 同時支持TDD和BDD 2種測試接口模式。默認是BDD 模式運行。

什麽是TDD,什麽是BDD?

  • BDD: Behavior-Driven Development (行為驅動開發)
  • BDD:行為驅動開發是一種敏捷軟件開發的技術,它鼓勵軟件項目中的開發者、 QA和非技術人員或商業參與者之間的協作。主要是從用戶的需求出發,強調系統行為。

  • TDD: Test-driven development (測試驅動開發)
  • TDD:測試驅動開發是敏捷開發中的一項核心實踐和技術,也是一種設計方法論。TDD的原理是在開發功能代碼之前,先編寫單元測試用例代碼,測試代碼確定需要編寫什麽產品代碼。TDD的基本思路就是通過測試來推動整個開發的進行,但測試驅動開發並不只是單純的測試工作,而是把需求分析,設計,質量控制量化的過程。

斷言庫的選擇?

  • should.js: BDD風格
  • better-assert: C語言,TDD風格
  • expect.js: should.js 的簡化版,BDD風格
  • assert:node自帶的斷言庫,TDD風格
  • chai: BDD/TDD雙模式,同時支持should/expect/assert

mocha 默認是BDD接口模式運行,如果需要TDD模式運行;


(知乎BDD 和 TDD 的區別,youtube上一些解釋)

我們這裏不過多介紹mocha 和 chai 的相關知識,大家可以關註

官方mocha中文翻譯,chai api 中文文檔

五、寫測試用例

1. hello.js

技術分享圖片

2. 一個簡單的測試用例

技術分享圖片

需求:點擊這個紅色模塊的時候,背景顏色為藍色。

有人肯定會說,這種也需要些測試用例嘛?一行代碼的功夫。既然我們要學習單元測試,那就用最小的例子來分析問題。如果這個事件,我們需要寫單元測試呢?

然後我們來看看寫斷言。


六、最後總結

通過學習單元測試,可以更加深刻理解代碼的模塊化、解耦、穩定性,當然還有業務的架構,對於理解業務架構非常有幫助。簡直就是活生生的api 文檔。這就是我們學習單元測試的目的。學習單元測試,可以提升業務和代碼層的更深層理解和認識。

(題外話:當然並不是所有的業務場景都需要用到單元測試,特別是業務經常變動的話,我們可以把單元測試用在那些經常用到的公共方法上,保證公共方法的穩定和低耦合。)

參考的一些網站,文檔:

  • 一文理解單元測試
  • karma的前生今世
  • TDD 和 BDD 的區別
  • mocha 官方文檔中文翻譯
  • chai斷言庫中文文檔
  • 阮一峰mocha 實例教程

個人項目代碼:https://github.com/yqzyou/testKarmaDemo/tree/master/karma-demo

單元測試karma+mocha學習