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

【问题标题】：Unit testing text manipulation in the DOM using jQuery使用 jQuery 对 DOM 中的文本操作进行单元测试
【发布时间】：2017-02-22 17:46:23
【问题描述】：

我正在尝试测试简单的 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 包装器中添加第二个测试，但这似乎不正确或不高效。

对此有什么建议吗？

【问题讨论】：

我想指出“点击”只是一个简单的例子。我想测试文本可能更改的所有可能方式，包括调用的函数的一部分。
同步处理调用$(..).click()产生的事件。您是否手动检查过您的 DOM 实际上已被更改，但您的测试无法识别它？
是的。这并不总是我用来触发此 DOM 更改的单击事件。如果我提醒文本值它是正确的。我认为不使用 .find() 和 .children() 的性能更高，因此它们会立即更改，而那些确实需要超时。
作为一个例子，我现在正在测试函数输出，所以我用一些数据调用一个函数，然后该函数根据该数据更改某些 DOM 元素的文本。该功能有效，文本更改发生，但不是立即发生。

标签： jquery unit-testing mocha.js karma-runner chai

【解决方案1】：

使用 .then 函数。像下面这样的代码

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

【讨论】：

.then() 仅适用于返回承诺的函数，我认为 click 不起作用。不过可能是错的。