前端測試代碼測試

一：前端測試的背景 、爲何作測試

一、測試分類

(1).TDD(Test-Driven Development) 測試驅動開發 (2).BDD(Behavior Drive Development) 行爲驅動開發 它經過用天然語言書寫非程序員可讀的測試用例擴展了測試驅動開發方法 這讓開發者得以把精力集中在代碼應該怎麼寫，而不是技術細節上 --- 僞代碼 (3).DDD(Domain Drive Design) 領域驅動開發 各個層次之間的調用問題 DDD是告訴咱們如何作好業務層！並以領域驅動設計思想來選擇合適的框架。 (4).MDD(model Driven Design)模型驅動設計

單元測試：代碼片斷測試 組件測試（白盒測試） 端對端測試：總體功能，接口測試（黑盒測試） 好比angular 端對端是跑在服務器上得

二、測試好處

(1)、使前端測試代碼與開發代碼分離，易於維護； (2)、能夠與UI自動化結合，前端單元測試的自動化，讓更多的前端測試腳本藉助現有的自動化去跑； (3)、與測試平臺集成，方便的JS異常錯誤顯示與跟蹤；

二 單元測試的框架

1.Qunit

它是由jQuery團隊開發的一款測試套件，最初依賴於jQuery庫，在2009年時脫離jQuery的依賴，變成了一個真正的測試框架，適用於全部Javascript代碼。Qunit採用斷言（Assert）來進行測試，相比於Jasmine的matcher更加多的類型，Qunit更集中在測試的度上。 deepEqual 用於比較一些縱向數據，好比Object或者Function等。而最經常使用的 ok 則直接判斷是否爲true。異步方面Qunit也頗有趣，經過 stop 來中止測試等待異步返回，而後使用 start 繼續測試，這要比Jasmine的過程化的等待更自由一些，不過有時也許會更難寫一些。Qunit還擁有3組AOP的方法( done 和 'begin' )來對應於整個 測試，測試和模塊。對於Function的跟蹤測試，Qunit彷佛徹底沒有考慮。不過可使用另一個測試框架爲Qunit帶來的插件 sinon-qunit。這樣就能夠在test中使用 spy 方法了。

QUnit.test( "hello test", function( assert ) {

assert.ok( 1 == "1", "Passed!" );
});
equal()

2.Sinon

Sinon並非一個典型的單元測試框架，更像一個庫，最主要的是對Function的測試，包括 Spy 和 Stub 兩個部分，Spy用於偵測Function，而Stub更像是一個Spy的插件或者助手，在Function調用先後作一些特殊的處理，好比修改配置或者回調。它正好極大的彌補了Qunit的不足，因此一般會使用Qunit+Sinon來進行單元測試。值得一提的是，Sinon的做者Christian Johansen就是 Test-Driven JavaScript Development 一書的做者，這本書針對Javascript很詳細的描述了單元測試的每一個環節。

3.Jasmine

有一類框架叫作xUnit，來源於著名的JAVA測試框架JUnit，xUnit則表明了一種模式，而且使用這樣的命名。在Javascript中也有這樣的一個老牌框架JsUnit，他的做者是Edward Hieatt來自Pivotal Labs，但在幾年前JsUnit就已經中止維護了，他們帶來了新的BDD框架Jasmine。

4.totoro 淘寶 簡單易⽤用、穩定的前端單元測試⼯工具

5.phantomjs

是一個服務器端的 JavaScript API 的 WebKit。其支持各類Web標準： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG (1)無需瀏覽器的 Web 測試 (2)頁面訪問自動化 (3)屏幕捕獲 (4)網絡監控

三 測試 工具

1JSTD（Javascript Test Driver）

是一個最先的C/S測試工具，來自Google，基於JAVA編寫，跨平臺，使用命令行控制，還有很好的編輯器支持，最經常使用於eclipse。不過它沒法顯示測試對象的設備及瀏覽器版本，只有瀏覽器名是不夠的。另外JSTD已經慢慢再也不活躍，它的早正如它的老。

2.Karma

它使用Nodejs構建，所以跨平臺，還支持PhantomJS瀏覽器，還支持多種框架，包括以上介紹的Jasmine、Qunit和Mocha。一次能夠在多個瀏覽器及設備中進行測試，並控制瀏覽器行爲和測試報告。雖然它不支持Nodejs的測試，不過沒什麼影響，由於Nodejs並不依賴於瀏覽器。

3.TestSwarm 出自jQuery之父John Resig之手，看來jQuery的強大果真不是偶然的，在測試方面很是到位，各類工具齊全。它最特別的地方在於全部測試環境由服務器提供，包括各類版本的主流瀏覽器以及iOS5的iphone設備，不過目前加入已經受限。

4.Buster 其做者之一就是Christian Johansen。和Karma很像，也使用Nodejs編寫跨平臺而且支持PhantomJS，一次測試全部客戶端。更重要的是支持Nodejs的測試，一樣支持各類主流測試框架。不過目前還在Beta測試中，不少bug並且不能很好的兼容Windows系統。它的目標還包括整合Browser Stack。

4、karma+jamine測試

單元測試配置 karma init; 設置: (1)選擇框架 jasmine/mocha/qunit/ requirejs //(2):設置自定義配置文件 (3):第三方代碼（端對端測試須要引入 ng-scenario.js) (4): 測試特有代碼 (5):browser[]選擇相應的測試瀏覽器 (6):預處理器 coffeejs/coverage/eember (7):proxies{「」} 在端對端測試中 起做用 (8)配置coverage

reporters: ['progress', 'coverage'],

coverageReporter: {

type: 'html',
dir: 'mytest/coverage/'
}

karma start 就能開啓測試

語法： 單元測試

describe('描述',function（）{
    beforeEach(function(){
     })
     it('描述'，function(){
     expect(true).toBe(true);//基本表達式
     //函數
     toBe(),not.toBe()//是否相同   ===
     toEqual(),//是否相同  == 基本數據類型中 toBe()和equal 沒有區別
      
     toMatch(),.not.toMatch();//匹配正則
     toBeDefined();//是否被定義
     toHaveBeenCalled();//是否被調用
     spyOn()//監控某個函數
     }),
    afterEach(function(){
         
     })
})

端對端測試 注意點：（1）切換框架frameworks: ['ng-scenario'], （2）瀏覽器安全問題chrome_without_security 語法：

browser().reload()

browser().navigateTo(url, fn)

browser().navigateTo(url)

pause()；

sleep(seconds)；

input(name).enter(value)

input(name).select(value)

repeater(selector, label).row(index)

element(selector, label).click()

5、指標 Function coverage - Has each function (or subroutine) in the program been called? 函數覆蓋率：是否是全部的函數都被調用了 Statement coverage - Has each statement in the program been executed? 狀態/語句覆蓋率：是否是全部的狀態都執行了 Branch coverage - Has each branch (also called DD-path) of each control structure (such as in if and case statements) been executed? For example, given an if statement, have both the true and false branches been executed? Another way of saying this is, has every edge in the program been executed? 分支覆蓋率：像 if else case 三目運算 這種 是否是全部的分支都被執行了 ignored ：設置被忽略 測試工程師能夠查看coverage 測試結果,幫助他們設計測試用例和輸入或配置設置,將增長代碼覆蓋相當重要的功能。兩種常見形式的代碼覆蓋率測試人員使用的statements(lines)覆蓋和branch(或edge)的報道。lines覆蓋率報告測試的執行足跡的行代碼被執行完成測試。edge覆蓋報告執行的分支或代碼決策點來完成測試。他們都報告覆蓋率指標,測量做爲一個百分比。這取決於什麼形式的意義(s)已使用代碼覆蓋,67比67的語句覆蓋率分支覆蓋更全面。