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

Question

我正在尝试测试简单的DOM操作，并遇到了一些麻烦。 想象以下简单的click事件：

$('.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());
     });       
  });
});