開始對Angular App進行單元測試(1)

發表于:2016-06-02來源:推酷作者:jackpu點擊數: 標簽:單元測試
在寫測試之前,我們還得對基礎的JS的單元測試框架和如何寫測試用例等一些問題做一個簡要的介紹。

  前言

  在寫測試之前,我們還得對基礎的JS的單元測試框架和如何寫測試用例等一些問題做一個簡要的介紹。

  先說說 jasmine ,它算作一個行為驅動開發(behaviour driven development,BBD)的 JavaSciprt的框架,會讓人困惑的是,它也可以用測試驅動開發(test driven development,TBD)的思想來寫測試。 BBD和TBD兩種風格會有些區別,但是使用 jasmine 確實可以用TBD的方式。 jasmine 會提供一種結構去組織你的測試以及一些函數來進行代碼輸出的斷言。究竟是TBD還是BBD實際取決于開發者自己的如何去組織自己的測試,當然下文我們僅僅用TBD來進行講解。

  開始你的第一個測試

  先建一個項目文件比如 jasmine-test ,然后粘貼下面的代碼到一個html文件中。

  

  

  

  

  

  

  

  

  

  

  

  用瀏覽器打開該文件。界面如圖:

  注意 specs ,它實際上指的是用例,它同樣也是BBD的專業術語之一。截下來我們先來點簡單的邏輯判斷。

  describe('calculator', function () {

  it('1 + 1 should equal 2');

  });

  將上面的代碼粘貼到剛才的html文件中。

  函數 describe 實際指的就是前文提到的 specs (測試的邏輯分組),而函數 it 實際會展現這組測試。 運行結果如下圖:

  由于我們實際上沒有添加測試的主體,因此狀態上方顯示的是 pending ,截下來我們會添加一段函數.

  it('1 + 1 should equal 2', function() {

  expect(1 + 1).toBe(1);

  });

  上面的截圖,實際上反應的就測試失敗,因為 1+1 并不等于 2 。

  上面出現了兩個新函數 expect 以及 toBe , Expect 代表著預期,我們將需要使用的測試放進區,然后函數會進行運行結果的斷言。而 toBe 呢則代表著匹配器,卡框架提供的匹配器還有很多,常用的大概有下面這些:

  expect(true).toBe(true);

  expect(false).not.toBe(true);

  expect(1).toEqual(1);

  expect('foo').toEqual('foo');

  expect('foo').not.toEqual('bar');

  我們再把這段代碼改成正常的。

  it('1 + 1 should equal 2', function() {

  expect(1 + 1).toBe(2);

  });

刷新瀏覽器,我們就可以看到正確的結果了。

  前面我們大致了解了 jasmine 的基本用法,實際上測試驅動開發的的一個基本原則就是我們再寫功能的同時寫測試,花些時間去掌握這項技能有利于提升我們的工作效率的。

  流程大致如圖三個部分,我們所寫的每個測試都英國是遵循這三個流程。

  紅色部分:失敗的測試,有利于我們消除bug;

  綠色部分:需要我們寫足夠的代碼讓我們的測試通過,透過前面的部分,我們可以了解這些bug;

  黃色部分,代碼重構過程我們可以避免重蹈覆轍,并且提升安全性。

  Demo

  記下來我們寫一些代碼去體會上面的流程

  寫一個不通過的測試

  describe('calculator', function () {

  it('1 + 1 should equal 2', function () {

  expect(calculator.sum(1, 1)).toBe(2);

  });

  });

  2.使測試通過

  如果我們開始寫足夠多的代碼時候,其中一些可能類似下面:

  var calculator = {

  sum: function(x, y) {

  return 2; // <-- note this is hardcoded

  }

  }

  describe('calculator', function () {

  it('1 + 1 should equal 2', function () {

  expect(calculator.sum(1, 1)).toBe(2);

  });

  });

  這樣做有利于我們避免代碼更多的錯誤

  3.重構

原文轉自: http://www.jackpu.com/yi-kai-shi-dui-angular-appjin-xing-dan-yuan-

国产97人人超碰caoprom_尤物国产在线一区手机播放_精品国产一区二区三_色天使久久综合给合久久97