console.log(‘Hello World!’);
console.info(‘Something happened…’); 
console.warn(‘Something strange happened…’); 
console.error(‘Something horrible happened…’);

登录后复制

我有一个用CoffeeScript编写的Backbone应用程序.我正在尝试使用Mocha(与Chai和Sinon一起)为DOM相关行为编写测试,但似乎隐藏的灯具(我现在使用的是 js-fixtures,但我也尝试使用隐藏的’#fixtures’失败了div)不注册某些与DOM相关的行为,这使得测试某些类型的DOM相关行为(看似)是不可能的.

例如,我的主应用程序视图有几个从不同时呈现的子视图：当应用程序视图呈现子视图A时,它会记住当前活动子视图B(@_visibleView)的焦点元素,将该信息保存在子视图B上,关闭子视图B,然后渲染子视图A.

_rememberFocusedElement: ->
      focusedElement = $document.activeElement
      if focusedElement
        focusedElementId = focusedElement.attr 'id'
        if focusedElementId
          @_visibleView?.focusedElementId = focusedElementId

这在我手动测试时有效,但当我尝试为此行为编写单元测试时,它们会失败,因为我无法将焦点(例如,通过$(selector).focus())设置为隐藏div / iframe中的元素. (我在监听窗口大小调整事件的功能方面遇到了同样的问题.)

我认为如果我将$document.activeElement更改为@ $’：焦点“我可能会得到不同的结果,但这并不能解决问题.

以下是我的Mocha(BDD)测试的相关部分.此规范将TEXTAREA打印到控制台然后未定义,表明有一个带有id =’transcription’的textarea,但我无法将焦点设置到它.

beforeEach (done) ->
      fixtures.path = 'fixtures'
      callback = =>
        @$fixture = fixtures.window().$"<div id='js-fixtures-fixture'></div>"
        @appView = new AppView el: @$fixture
        done()

    describe 'GUI stuff',->
      it 'remembers the currently focused element of a subview',(done) ->
        @appView.mainMenuView.once 'request:formAdd',=>
          @appView._visibleView.$('#transcription').focus()
          console.log @appView._visibleView.$('#transcription').prop 'tagName'
          console.log @appView._visibleView.$(':focus').prop 'tagName'
          done()
        @appView.mainMenuView.trigger 'request:formAdd'

有什么方法可以为这些类型的行为编写单元测试吗？

好的,首先让我澄清一下：“单元测试”一词对很多人来说意味着不同的东西.它经常成为“使用单元测试框架(如Mocha)编写的任何测试的同义词”.当我使用术语“单元测试”时,这不是我的意思：我的意思是测试只测试单个工作单元(在JS环境中,通常是单个函数,但可能是整个类).

好的,如果你真的试图对你的代码进行单元测试,你就会采取错误的方法.单元测试实际上不应该依赖于被测试函数的上下文之外的任何东西,因此依赖于(外部)DOM就是问题所在.

让我们假设您的焦点处理代码位于一个名为handleFocus的函数中(我不知道实际的方法名称).考虑以下测试,我将使用JavaScript编写,因为我的CoffeScript是生锈的：

describe('#handleFocus',function() {
    it('remembers the currently focused element of a subview',function() {
        var setFocusstub = sinon.stub($.fn,'focus');
        appView._visibleView.handleFocus();
        expect(setFocusstub.calledOnce).to.be(true);
    });
});

以上是一个过度简化,但希望它说明了这一点.你真正想要检查的不是DOM(假的还是真的)是否做X;您正在尝试检查的是您的函数是否执行X.通过关注测试中的那个,并依赖于检查“X”是否发生的存根,您完全消除了涉及DOM的需要.

当然,你可能会想：“非常好,这有助于我在试验场,但我怎么知道它会在真实环境中起作用？”我的答案是你的(可能是基于Selenium的)验收测试应该涵盖那种事情.验收测试应检查您的整体代码是否在现实世界中工作,而单元测试应确保该代码的各个部分在虚假环境中工作.

前者非常适合确保您的客户不会看到错误,而后者非常适合确定错误的来源,并使您能够安全地进行重构.

我使用摩卡,通过gulp-jsx-coverage和gulp-mocha运行我的测试套件.我所有的测试都按预期运行并通过/失败.但是,我测试的一些模块通过superagent库对我的API进行HTTP请求.

在开发过程中,我还在本地客户端应用程序旁边的localhost：3000上运行我的API,这就是我的客户端测试正在尝试访问的URL.测试时,API通常不会运行.这可能会导致以下错误：

Error in plugin 'gulp-mocha'
Message:
    connect ECONNREFUSED
Details:
    code: ECONNREFUSED
    errno: ECONNREFUSED
    syscall: connect
    domainEmitter: [object Object]
    domain: [object Object]
    domainThrown: false
Stack:
Error: connect ECONNREFUSED
    at exports._errnoException (util.js:746:11)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:983:19)

我尝试在全局帮助器中的所有超级代理(别名为请求)库中存储所有方法,如下所示：

function httpStub() {
  return {
    withCredentials: () => {
      return { end: () => {} };
    }
  };
};

beforeEach(function() {
  global.sandBox = sinon.sandBox.create();

  global.getStub = global.sandBox.stub(request,'get',httpStub);
  global.putStub = global.sandBox.stub(request,'put',httpStub);
  global.patchStub = global.sandBox.stub(request,'patch',httpStub);
  global.postStub = global.sandBox.stub(request,'post',httpStub);
  global.delStub = global.sandBox.stub(request,'del',httpStub);
});

afterEach(function() {
  global.sandBox.restore();
});

但是由于某些原因,当遇到一些测试时,方法不会被隐藏,所以我遇到了ECONNREFUSED错误.我已经三重检查,没有我在哪里恢复沙箱或任何存根.

有没有办法解决我遇到的问题,或者是整体上更清洁的解决方案？

问题可能是由于在测试中不正常进行异步处理.想象下面的例子：

it('is BAD asynchronous test',() => {
  do_something()
  do_something_else()
  return do_something_async(/* callback */ () => {
    problematic_call()
  })
})

当Mocha发现这样的测试时,它会同步执行do_something,do_something_else和do_something_async.在那一刻,从Mochas的角度来看,测试结束了,Mocha执行afterEach()(这是坏的,问题的还有待调用！)和(甚至更糟),它开始运行下一个测试！

现在显然,以并行方式运行测试(和beforeEach和afterEach)可能会导致真正奇怪和不可预知的结果,所以毫不奇怪的是,有一些错误(可能在每次被调用在一些测试之后,导致解开环境)

该怎么办？

当您的测试结束时,始终向Mocha发出信号.这可以通过返回一个Promise对象,或者通过调用done回调来完成：

it('is BAD asynchronous test',(done) => {
  do_something()
  do_something_else()
  return do_something_async(/* callback */ () => {
    problematic_call()
    done()
  })
})

https://mochajs.org/

这样,摩卡“知道”当你的测试结束,只有在它运行下一个测试.