0

我想开始使用测试框架，mocha + expect 对我来说似乎不错。

说我有这个功能，

/*
 * Hides or shows loading .gif
 * show : boolean
 */
function loadingMsg(show) {
    var $loader = $("#loader");
    if(show){
        $loader.show();
    }
    else{
        $loader.hide();
    }
}

为了使其可测试，我是否需要添加如下所示的 Return 语句？

/*
 * Hides or shows loading .gif
 * show : boolean
 */
function loadingMsg(show) {
    var $loader = $("#loader");
    if($loader){
        if(show){
            $loader.show();
            return "loader shown";
        }
        else{
            $loader.hide();
            return "loader shown";
        }
    }
    else {
        return "$loader undefined";
    }
}

还是我应该测试 dom 元素“loader”？

4

2 回答 2

2

不，你没有。

而是检查 DOM 中的 loader 元素显示属性。

评论后更新：

没有使用太多 mocha，但是在测试 UI 时，几乎在每个框架或库中都使用了类似的方式。使用 jQuery 或任何可用的选择器库在 DOM 中查找元素，并根据需要检查它们的内容。在您的情况下，您将检查 loader 元素是显示块还是不显示。

类似于显示加载程序时

expect($('#loader').css('display')).toBe('block');

当装载机被隐藏时

expect($('#loader').css('display')).toBe('none');
于 2015-07-27T08:22:26.667 回答
0

最佳实践是：您的测试不应该要求修改您的被测代码，以便它们可以通过/失败。所以你不应该像你建议的那样添加 return 语句，你也不应该有可以传递给函数以启用某些特殊测试状态的“测试”标志。

所以简单的答案是：不，你不应该添加 return 语句。

但只是提出问题本身对我来说听起来好像您是 DOM 测试的新手？听起来您希望对您在那里采样的代码进行单元测试，也许在您的应用程序的其余部分之外？

假设这是真的，那么也许你应该看看mocha-jsdom 之类的东西；我希望您能够编写如下测试：

describe('mocha tests', function () {
  var $;
  jsdom();

  before(function () {
    $ = require('jquery'); // Sets up jQuery to be available
  });

  describe('with visible=false', function() {
    it('shows the loader', function () {
      document.body.innerHTML = '<div id="loader">My faked loader</div>'
      loadingMsg(false);
      expect($("#loader:visible").length).eql(0)
    });
  });
});

注意：我不能保证代码片段会起作用，只是一个例子（大部分是从 mocha-jsdom 的页面偷来的！）。

于 2015-07-27T08:40:27.457 回答