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