javascript - Mocha 测试与焦点相关的行为(Backbone/CoffeeScript 应用程序)

Question

我有一个用 CoffeeScript 编写的 Backbone 应用程序。我正在尝试使用 Mocha(与 Chai 和 Sinon)为与 DOM 相关的行为编写测试，但似乎隐藏的固定装置(我正在使用 js-fixtures 现在但我也尝试过使用隐藏的 '#fixtures' div) 不注册某些与 DOM 相关的行为，这使得测试某些类型的 DOM 相关行为(看似)不可能。

例如，我的主应用 View 有几个永远不会同时呈现的 subview :当应用 View 呈现 subview A 时，它会记住当前事件 subview B 的焦点元素(@_visibleView), 在 subview B 上保存该信息，关闭 subview B，然后呈现 subview A。

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

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

我认为如果我将 $ document.activeElement 更改为 @$ ':focus" 我可能会得到不同的结果，但这并不能解决问题。

这是我的 Mocha (BDD) 测试的相关部分的样子。此规范将打印 TEXTAREA 到控制台，然后打印 undefined，表明是一个 id='transcription' 的文本区域，但我不能将焦点放在它上面。

    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'

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

Answer 1

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

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

假设您的焦点处理代码位于名为 handleFocus 的函数中(我不知道实际的方法名称)。考虑以下测试，由于我的 CoffeScript 生锈了，我将使用 JavaScript 编写它:

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”是否发生的 stub ，你完全消除了涉及 DOM 的需要。

当然，您可能会想:“太好了，这对我在测试领域很有帮助，但我怎么知道它会在真实环境中工作呢？”我对此的回答是，您的(可能是基于 Selenium 的)验收 测试应该涵盖此类内容。验收测试应检查您的整体代码是否在现实世界中工作，而单元测试应确保该代码的各个部分在假环境中工作。

前者非常适合确保您的客户看不到错误，而后者非常适合找出这些错误的确切来源，并使您能够安全地进行重构。