單元測試101：你測試你的javascript嗎？

　　你當然是測試你的代碼。沒有寫出相當數量的代碼后不運行一下就直接丟到產品中。在本文中我對你是如何測試的進行質疑。如果你不是已經盡可能的多的自動化測試，為生產力和信息提升做好準備吧。

　　一句話的警告：我將在本文中談論單元測試和測試驅動開發(TDD)，如果你已經得出結論：下面的任何理由對你都不適合，那么請繼續閱讀，或者至少閱讀從我為什么要關心?到最后：

　　我使用一個庫，如jQuery，它保證我的代碼正確的工作

　　測試是一個對專業人員的高級的實踐，不適合我

　　測試太費時間，我只想寫產品代碼

　　不同的目的，不同的測試

　　測試意味著很多事，如何把測試做的最好依賴于一個詳盡的測試目標。這里有一些可能會在你的應用中遇到的測試的例子：

　　易用性測試

　　性能測試

　　一致性/回歸測試

　　在本文中，我們專注于一致性和回歸測試。換句話說，是那種保障代碼做它應該做的事，并且沒有缺陷。絕大多數情況下，不能證明絕對沒有缺陷。我們能做的就是保證有效的減少缺陷的數量，并且防止已知缺陷爬回到我們的代碼中。

　　如何發現缺陷

　　大多的程序員都會面對定期查找和修改缺陷。過去，這個任務最常用的方法是在代碼中散置一些alert調用(this task was most commonly carried out bysprinkling code with alert calls)，并刷新瀏覽器監查變量的值，或者觀察哪里出現了期望的流和腳本期望的流的一致(or to observewhere the expected flow of a script diverged from the expected flow)。

　　如今，大多瀏覽器都內建一個強大的控制臺。那也不容易獲得一個像Firebug Lite一樣有用的工具。調試過程幾乎都是一樣的：在代碼散置console.log調用，刷新瀏覽器，觀察實際行為，并和預期行為進行人為比較。

　　調試：一個例子

　　例如一個調試session的例子，我們來看一個jQuery插件，它期望一個元素具有一個datetime屬性(如HTML5時間元素)，或一個自定義data-datetime屬性，包含一個日期字符串，用人類可讀的、和當前時間對比的內容(如3小時之前)替換元素的innerHTML。

　　[javascript] view plaincopy1. jQuery.fn.differenceInWords = (function () {

　　2. var units = {

　　3. second: 1000,

　　4. minute: 1000 * 60,

　　5. hour: 1000 * 60 * 60,

　　6. day: 1000 * 60 * 60 * 24,

　　7. week: 1000 * 60 * 60 * 24 * 7,

　　8. month: 1000 * 60 * 60 * 24 * 30

　　9. };

　　10.

　　11. function format(num, type) {

　　12. return num + " " + type + (num > 1 ? "s" : "");

　　13. }

　　14.

　　15. return function () {

　　16. this.each(function () {

　　17. var datetime = this.getAttribute("datetime") ||

　　18. this.getAttribute("data-datetime");

　　19. var diff = new Date(datetime) - new Date();

　　20.

　　21. if (diff > units.month) {

　　22. this.innerHTML = "more than a month ago";

　　23. } else if (diff > units.week) {

　　24. this.innerHTML = format(Math.floor(diff / units.week), "week") + " ago";

　　25. } else {

　　26. var pieces = [], num, consider = ["day", "hour", "minute", "second"], measure;

　　27.

　　28. for (var i = 0, l = consider.length; i < l; ++i) {

　　29. measure = units[consider[i]];

　　30.

　　31. if (diff > measure) {

　　32. num = Math.floor(diff / measure);

　　33. pieces.push(format(num, consider[i]));

　　34. }

　　35. }

　　36.

　　37. this.innerHTML = (pieces.length == 1 ? pieces[0] :

　　38. pieces.slice(0, pieces.length - 1).join(", ") + " and " +

　　39. pieces[pieces.length - 1]) + " ago";

　　40. }

　　41. });

　　42. };

　　43. }());

　　該代碼首先處理兩種特殊的情況：差值大于一個月表示成“超過一個月(more than a month)”，差值大于一個星期時顯示星期數。函數然后差值收集準確的天數、小時數和秒數。當差值小于一天時，忽略天數，依此類推。

　　代碼看上去很合理，但是使用它時，馬上就會發布有些不太對勁。"Humanizing"一個8天的日期，返回“"and undefined”。使用console.log調試策略，我們應該開始并記錄初始的中間值來判定什么錯了。如記錄初始差值提醒我們實際得到的順序是錯誤的。好了，我們修正它：

　　[javascript] view plaincopy1. var diff = new Date(datetime.replace(/\+.*/, "")) - new Date();

　　得到正確差值解決了問題，我們現在得到了我們期望的“"1 week ago”。然后我們把這個插件放到產品中并期望它作為產品的一部分也能工作的很好(So we toss theplugin into production and keep happily hacking on some other part of theapplication.)。

　　第二天，有人溫和的通知我們那個“三天，80小時，4854分鐘和291277秒”("3 days, 80 hours, 4854minutes and 291277 seconds" )是不可接受的時間戳格式。結果我們在測試日期小于一周時失敗了。鍵入console.log，我們亂丟包括記錄語句的代碼(可能可能引入一些我們剛剛清除的記錄語句)最后發現剩下的差值不應該每次都重新計算：

原文轉自：http://www.anti-gravitydesign.com