学习单元测试和 Jasmine答案

【问题标题】：Learning unit testing and Jasmine学习单元测试和 Jasmine
【发布时间】：2012-04-21 11:16:40
【问题描述】：

我是前端开发人员，是 TDD 和 BDD 的新手。

我有这个任务。使用从 AJAX 调用接收到的 json 对象填充表。我将如何在套件和规范中描述这一点？

提前致谢

编辑

我将 BackboneJS 用于 MVC，将 sinon.js 用于间谍、存根等。

【问题讨论】：

标签： backbone.js tdd bdd jasmine sinon

【解决方案1】：

您并没有过多提及您使用的库，因此我将继续假设您的 ajax 请求由使用 jQuery 的 GET 请求组成。

通常是这样的：

$.ajax({
    url: 'http://server/populate_table',
    data: {foo: 'bar'},
    success: populate_table
});

我还假设服务器会返回以下对象{row: [1, 2, 3]} 对于初学者，您需要模拟 ajax 响应，因为您不想依赖可用的服务器。可以通过使用 spy 来实现模拟、检查参数和假返回数据：

var ajaxMock = spyOn($, 'ajax').andCallFake(function (options) {
    expect(options.url).toEqual('http://server/populate_table');
    expect(options.data.foo).toEqual('bar');
    options.success({row: [1, 2, 3]};
});

请注意您在上面如何定义在使用结果调用回调之前服务器应接收的 url 和数据的期望。

最后，您需要查看您的表格是否已填充。您没有提供有关数据或表格的任何信息，但再次猜测您使用 jQuery，您应该尝试jasmine-jquery。有了它，您可以轻松地描述对 DOM 的期望，查看扩展文档。确定要测试的内容后，您的完整测试将类似于：

it('populates the table making a JSON call', function () {
    var ajaxMock = spyOn($, 'ajax').andCallFake(function (options) {
        expect(options.url).toEqual('http://server/populate_table');
        expect(options.data.foo).toEqual('bar');
        options.success({row: [1, 2, 3]};
    });  

    $.ajax({
        url: 'http://server/populate_table',
        data: {foo: 'bar'},
        success: populate_table
    });

    expect($('#mytable')).toExist();
    // DOM specific expectations go here...

});

【讨论】：

【解决方案2】：

您想查看 jasmine 中内置的 asynchronous test 设施。

特别是waitFor 和run。

快速解释一下：您可以运行 Ajax 查询并让它在成功时返回 true。您等待该功能，然后运行您的测试。

【讨论】：

还要查看 Mocking & Stubbing，因为您可能不希望 AJAX 请求实际触发。他们有很多库，像这样：sinonjs.org（我没用过，但看起来很整洁）
我相信所有的sinon提供的间谍材料都在茉莉花中。我们只在茉莉花中使用间谍方法。我们确实希望触发 Ajax 请求——我们认为测试的重点是准确地模拟用户使用我们的代码的体验。

【解决方案3】：

由于您已经在使用 sinon.js，我认为最好的方法是使用 fakeServer 来测试从 ajax 调用接收到的对象。这里有很好的描述（假 Ajax 和假服务器部分）：

http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html

【讨论】：