文章出處

  之前沒感覺要學啥單元測試,項目中測試都是手動測的,但也沒覺的啥,但最近看文章和招聘上也多多少少有這方面的需求,于是網上搜索了一下,只找到了一些文章,但介紹的都不是很詳細或者說比較復雜,滿滿的傷,雖然看懂一部分,但還是不知道有啥用,于是不了了之了。

  但是就在今天又在某本書上講啥測試,實在坐不住了,于是下定決心,一定得搞定到底什么是單元測試,在實際項目中又是如何使用的,于是就有了此文章。

 

茫茫人海只為找到你......  

  搜索:Javascript單元測試入門、javascript單元測試教程、javascript單元測試視頻教程、JS單元測試教程.......這些都是我常搜索的關鍵字。

      對于經常干這個的,通過搜索結果馬上就能找到幾個比較適合自己的教程。

  原本打算學Qunit這個單元測試但是沒有看到比較好的入門教程,其實也是有的,只是上一次看的時候沒有看一篇介紹它在實際項目中的應用,所以打算換一個框架搜索。這里搜到了一個叫Karma的單元測試,并且講解通俗,簡單的使用已經會了,但可惜這篇文章也沒有講在實際開發中的應用,只好接著找,但這次既然Karma會了一些,自然搜索換成了這個:Karma單元測試入門教程,Karma單元測試教程....

  馬上找到一篇比較詳細的,雖然前面大部分講解的比較復雜,但因為有了前面的基礎,所以秒懂里面的意思了,里面簡單的介紹了一個例子,但這已經足夠了。

  

  別看這小小的一段話,里面是一個不錯的學習方式:先簡單 -- 復雜 -- 項目實踐。也就是說如果你要學習a,但是a方面的資源比較少,并且難懂,不過有個和它相鄰的b和它很像,這樣的話你可以搜索b,通過學習b來掌握一些基本的概念,通過掌握這些概念再來學習a就會簡單很多。

 

  底下是個人學習記錄,不會寫的太詳細,大家就不用看了,看看頂上的學習方式將好,反正感覺學編程用現實生活中怎么學習的,你拿到編程里面就很好了。

 

回歸到單元測試

  Karma是一個單元測試,我們先來下載它。

    1. 通過npm init初始化

      package.json

        2.通過npm下載Karma以及依賴項

      npm install -g karma karma-jasmine karma-chrome-launcher

    3.創建 karma 配置文件

      karma init

 

 

編寫測試demo.js

describe('隨便寫,就是看你看看是哪里來的', function(){
  it('就是給你看看具體哪出來的 1', function(){
    expect(true).toBe(true);
  });

  it('就是給你看看具體哪出來的 2', function(){
    expect(true).toBe(false);
  })
});

 

啟動 Karma

  karma start

 

結果:

  

 

解釋一下上面的代碼:

describe('隨便寫,就是看你看看是哪里來的', function(){
  it('就是給你看看具體哪出來的 1', function(){
    expect(true).toBe(true);
  });

  it('就是給你看看具體哪出來的 2', function(){
    expect(true).toBe(false);
  })
});  

describe:就是把你要測試的包起來,形成一個代碼塊,就像一個函數。

  第一個參數:隨便寫,自己看一下上面的那張圖就知道怎么回事了,第二個參數放一個函數。

 

it:負責單個測試,里面可以放你要測試的代碼。

expect:用來測試這個參數里面的值等于不等于toBe里面的參數。toBe是你期望的結果,而expect放你需要測試的結果。

 

其實這段代碼沒啥復雜,但多少還是有些迷惑,ok,來一個更實際一點的。

function count(a,b){
  return a + b;
}


describe('測試count函數', function(){
  it('3 + 3 = 6', function(){
    var a = count(3,3);

    // expect實際結果  toBe希望的結果
    expect(a).toBe(6);
  });

  it('3 + 3 = 6', function(){
    var a = count(2,3);
    expect(a).toBe(6);
  })
});

 

結果如下:

 

到這里我相信大家對單元測試多少有那么一點點的了解了。

我的理解單元測試就是將一些線上可能會發生的一些bug情況,通過一些技術提前來發現并且解決bug。

 

接著我得去學習Qunit,就到這了。


文章列表


不含病毒。www.avast.com
文章標籤
全站熱搜
創作者介紹
創作者 AutoPoster 的頭像
AutoPoster

互聯網 - 大數據

AutoPoster 發表在 痞客邦 留言(0) 人氣(0)