使用jQuery在DOM中測試文本操作單元測試

我想測試簡單的DOM操作並遇到一些麻煩。想象一下下面這個簡單的單擊事件：使用jQuery在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包裝中添加第二個測試，但這看起來不正確或有效。

對此有任何提示？

來源

2017-02-22 Brandon Parker

我想說明「點擊」只是一個簡單的例子。我想測試文本可能發生變化的各種可能方式，包括被調用函數的一部分。 –

通過調用'$（..）。click（）'生成的事件被同步處理。你是否已經手動檢查過你的DOM實際上已經改變了，但你的測試只是沒有把它拿起來？ – Louis

是的。這並不總是我用來觸發DOM更改的點擊事件。如果我警告文本值是正確的。我認爲那些不使用.find（）和.children（）的函數會更高效，所以它們會毫無延遲地更改，而那些需要超時的更改。 –

使用。然後功能。像下面的代碼

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

來源

2017-03-01 07:49:01 saktivel

.then（）僅適用於返回承諾的函數，我不認爲點擊的功能。可能是錯誤的。 –

使用jQuery在DOM中測試文本操作單元測試

回答

相關問題