Qunit第一步


Reference :


最近寫了一些JavaScript的code在寫的過程中想了一下如果每次寫完一個功能

都要一個一個去做測試的話,真浪費時間也很容易漏掉某些需要測試的部份,

所以我就上網找了一下。找到QUnit這個Framework,也看到滿多open Source

都使用這個Testing Framework,所以上網找了一下資料也順便將自己瞭解的

部份寫下來分享給大家。希望以下的教學對大家都有幫助。


QUnit是一套Javascript的Tesing Framework,他是由jQuery團隊開發用來對jQuery

jQuery UI 和 jQuery Mobile這些專案的單元測試。現在的話也看到滿多Open Source

都使用這個Framework來做單元測試,例如underscore這個open source。

http://qunitjs.com/  <== QUnit的官方網站


至於為什麼要寫Testing呢?簡單的說就是要維持code的品質以及提早找出邏輯上的錯誤。


以下是我測試的檔案架構, 我QUnit是下載1.10.0的版本(需要下載js跟css)

Qunit
├── fun.js
├── index.html
└── lib
        ├── qunit-1.10.0.css
        └── qunit-1.10.0.js

接下來的簡單的範例是從官方網站看來的,然後我也稍微修改了內容來符合我自己的習慣:

1.index.html的內容    

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Qunit</title>
  <link rel="stylesheet" href="./lib/qunit-1.10.0.css">
</head>
<body>
  <div id="qunit"></div>
  <script type="text/javascript" src="./lib/qunit-1.10.0.js"></script>
  <script type="text/javascript" src="./fun.js"></script>
</body>
</html>

2.fun.js
test("hello test", function(){
    ok(1=="1","Passed !!!");
});

3. 執行index.html的結果
我們看一下 hello test(0, 1, 1)第一個欄位是指Fail的數量,第二個是Pass的數量,第三個的話就是整個全部測試了多少的assert



張貼留言

這個網誌中的熱門文章

Unions 在C語言的簡單介紹

解釋scope.$apply用來做什麼? -- AngularJS

JavaScript的Timer用法