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
├── index.html
└── lib
├── qunit-1.10.0.css
└── qunit-1.10.0.js
接下來的簡單的範例是從官方網站看來的，然後我也稍微修改了內容來符合我自己的習慣：
１．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>
<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>
２．fun.js
test("hello test", function(){
ok(1=="1","Passed !!!");
});
ok(1=="1","Passed !!!");
});
3. 執行index.html的結果
留言