使用jQuery在DOM中进行文本操作的单元测试

Question

我正在尝试测试简单的DOM操纵并遇到一些麻烦。想象以下简单点击事件：

$('.js-click-me').on('click', function(e) {
  e.preventDefault();
  $('.some-span').text('changed text');
});

现在还可以想象我的HTML包含以下内容：

<span class="some-span">Original Text</span>
<button class="js-click-me">Click Me</button>

好，所以现在我有一个单位测试

describe('text change test', function() {
  it('The text of .some-span should change when button is clicked', function() {
    assert.equal('Original Text', $('.some-span').text());
    $('.js-click-me').click();
    assert.equal('changed text', $('.some-span').text());
  });
});

我的期望是第一个断言将通过，因为原始文本实际上是"原始文本"（这只是为了设置基线而可能不需要）。

我期望通过的第二个断言，因为单击后，它将文本从"原始文本"更改为"更改文本"。但是，当我运行这样的测试时，第二个断言失败了，因为测试在此后立即运行，并且DOM尚未更新文本。

我可以在setTimeout包装器中添加第二个测试，但这似乎不正确或有效。

有什么技巧？

Answer 1

使用。然后函数。像以下这样的代码

describe('text change test', function() {
  it('The text of .some-span should change when button is clicked', function() {
    assert.equal('Original Text', $('.some-span').text());
    $('.js-click-me').click().then(function(){
         assert.equal('changed text', $('.some-span').text());
     });       
  });
});