单元测试是一种查找bug和验证程序正确性的测试方式,并且不需要纠结于调试工具和console.log/alert。单元测试还带来很多其他优点,我会在本文中讲述。

  什么是单元测试

  单元测试代码通常伴随着一个期望值运行在你的产品代码中。举个例子,我们假设之前jQuery.fn.differenceInWords例子中的两个bug还没有修复,然后试着用单元测试来查找Bug:

var second = 1000;
var minute = 60 * second;
var hour = 60 * minute;
var day = 24 * hour;
try {
 // 测试8天的差值结果是否为 "1 week ago"
 var dateStr = new Date(new Date() - 8 * day).toString();
 var element = jQuery('Replace me');
 element.differenceInWords();
 if (element.text() != "1 week ago") {
 throw new Error("8 day difference expected '1 week ago' got '"+
 element.text() + "'");
 }
 // 测试一个更短的日期
 var diff = 3 * day + 2 * hour + 16 * minute + 10 * second;
 dateStr = new Date(new Date() - diff).toString();
 var element = jQuery('Replace me');
 element.differenceInWords();
 if (element.text() != "3 days, 2 hours, 16 minutes and 10 seconds ago") {
 throw new Error("Small date difference expected " +
 "'3 days, 2 hours, 16 minutes and 10 seconds ago' " +
 "got '" + element.text() + "'");
 }
 alert("All tests OK!");
} catch (e) {
 alert("Assertion failed: " + e.message);
}

  上面的测试用例用已知的日期属性值对元素进行处理,然后如果结果和期望值有出入,则抛出一个错误。这些测试代码可以放置在另外的文件中,在使用这个插件的页面中将这个文件也一起载入进去。在浏览器中运行这个页面,我们可以看到提示“All tests Ok!”,或者一个注明错误位置的消息。

  这样的测试方式看起来可能会有些麻烦。我们不仅仅需要写log语句来检查代码,而且我们还需要创建元素,然后通过运行这个插件来检查生成的文本。这个测试方法的优点在于:

  ● 这个测试可以在任何时候任何浏览器中运行。

  ● 只要我们记得在修改代码之后运行这个测试用例,那么这个bug基本上不可能再次出现。

  ● 如果能正确地清理代码,这些测试可以作为代码的文档。

  ● 测试可以自动进行。无论我们增加了多少测试,我们依然只需要一个页面来检查是否存在问题。

  ● 测试不会干涉到产品代码,因此不需要冒着像alert或者console.log方式可能带来的风险。

  使用单元测试框架

  我们所写的测试包含了比较多的代码。幸运地是,现阶段存在很多测试框架让我们从大量测试代码中解脱出来。使用一个测试框架可以让我们减少测试本身包含的逻辑,从而减少测试本身出现bug的概率。一个框架可以提供更多自动测试和展示结果的选择。