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> 

[OK]を、私は持っているので、今ユニットは、私の期待はある

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

テスト元のテキストが実際には「元のテキスト」であるため（最初はベースラインを設定するために行われたものであり、おそらく必須ではない）、最初のアサーションが成功すると主張します。

クリック後、「元のテキスト」から「変更されたテキスト」にテキストが変更されているため、2番目のアサーションが必要になります。しかし、このようなテストを実行すると、テストがすぐにの後に実行され、DOMがテキストをまだ更新していないため、2番目のアサーションが失敗します。

setTimeoutラッパーに2番目のテストを追加することはできますが、それは正しくないまたは効率的ではないようです。

これについてのヒントを教えてください。

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