如何设计编写前端的测试(基于 Backbone)?

Question

公司网站用的 Backbone, 遗留下来的代码基于命名空间, 没有形成模块化, 也没有留下测试方案,
现在新功能和 Bug 增改中遇到的意外 Bug 逐渐出现, 就想到要增加测试,
刚开始接触 SeaJS 和 Angular 之类前端测试, 但这和后端的 API 测试又不一样,
加上 JS 前端异步的调用较多, 关联 UI 的操作需要关心的也特多,,
我应该怎样设计和编写前端的测试?

Answer 1

为什么要基于backbone？一个好的测试应该是不依赖任何框架的。（除了测试框架）

使用测试框架Jasmine或者Qunit都可以。

比如Jasmine提供runs和waitsFor这对方法来测试异步。

describe("Asynchronous specs", function() {
  var value, flag;

  it("should support async execution of test 
preparation and exepectations", function() {

    runs(function() {
      flag = false;
      value = 0;

      setTimeout(function() {
        flag = true;
      }, 500);
    });

    waitsFor(function() {
      value++;
      return flag;
    }, "The Value should be incremented", 750);

    runs(function() {
      expect(value).toBeGreaterThan(0);
    });
  });
});

还有丰富的Matcher，甚至自定义Matcher。像这样，在运行一个测试之前添加它：

beforeEach(function() {
  this.addMatchers({
    toBeLessThan: function(expected) {
      return this.actual < expected;
    }
  });
});

另外关于UI方面，推荐使用seleniun，这是一个Web自动测试工具，它可以模拟一段用户操作，然后在多浏览器上运行。支持浏览器情况：

• Google Chrome 12.0.712.0+
• Internet Explorer 6, 7, 8, 9 - 32 and 64-bit where applicable
• Firefox 3.0, 3.5, 3.6, 4.0, 5.0, 6, 7
• Opera 11.5+
• HtmlUnit 2.9
• Android – 2.3+ for phones and tablets (devices & emulators)

其他还有很多测试用的工具，比如JavascriptTestDriver，它可以捕获多个正在运行的服务器上的浏览器，自动运行测试页面。配合Jasmine（Jasmine的JSTD适配器）或Qunit等测试框架使用。