测试，我是否需要在我的函数中添加更多的 Return 语句？答案

【问题标题】：Testing, do I need to add more Return statements to my functions?测试，我是否需要在我的函数中添加更多的 Return 语句？
【发布时间】：2015-07-27 08:20:20
【问题描述】：

我想开始使用一个测试框架，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”吗？

【问题讨论】：

一个好的测试库不会要求您更改代码只是为了让测试运行:)
确实如此。测试函数的实际预期结果，而不是它告诉你的结果。它可能说的是一回事，但做了完全不同的事情。
谢谢。我想我正在寻找的是一个 api 我可以去“to.cause(loader.style.display == "none")”

标签： javascript mocha.js expect.js

【解决方案1】：

不，你没有。

改为检查 DOM 中的加载器元素显示属性。

评论后更新：

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

类似的东西当加载器显示时

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

当加载器被隐藏时

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

【讨论】：

好吧，这就是我所希望的。你有没有使用 mocha + expect 测试 dom 元素属性的经验，也许你可以在上面演示一下？

【解决方案2】：

最佳做法是：您的测试不应要求修改您的被测代码，以便它们可以通过/失败。所以你不应该像你建议的那样添加 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)
    });
  });
});

注意：我不能保证代码 sn-p 会起作用，这只是一个示例（大部分是从 mocha-jsdom 的页面窃取的！）。

【讨论】：