如何在Ember測試中斷言運行循環DOM更改

Question

我正在編寫用Ember 1.6編寫的Ember應用程序的測試。

內部控制器我有一個函數時承諾的成功執行：

var me = this; 

function onSuccess(result) { 

    printSuccessMessage(); 

    Ember.RSVP.all(promises).then(function(value) { 
     Ember.run.later(this, function() { 
      clearMessages(); 
     }, 5000); 
    }); 
} 

然後，測試裏面，我想斷言出現的成功消息：

fillIn('#MyInputField', 'Some text'); 
    click('#MyButton'); 

    andThen(function() { 
     strictEqual(find('[data-output="info-message"]').text().trim().indexOf('Done!') >= 0, true, 'Expected success message!'); 
    }); 

但問題是，點擊後，andThen正在等待運行循環完成。所以在點擊之後，andThen等待5秒鐘，然後執行斷言。

在那一刻clearMessages()已經執行，消息div被清除，測試失敗。

任何想法如何斷言此消息具有某些文本？

Answer 1

如果你願意在你的代碼中的條件，即調查是否灰燼是測試模式，您可以在您的測試切換Ember.testing值，然後清晰與否在你的控制器清除消息，基於這個價值。然後，您的測試可以斷言該消息在一個實例中被清除，並在另一個實例中顯示。

在控制器的onSuccess呼叫，觀察Ember.testing條件：

onSuccess(message) { 
    this.printSuccessMessage(message); 

    if (Ember.testing) { // <-- HERE 
    // during testing 
    return; // don't clear the message and assert that it's there 
    } else { 
    // during dev, live in production, or Ember.testing === false 
    this.clearMessages(); // clear the message, and assert that it's gone 
    } 
}, 

在設置郵件的驗收測試，因爲Ember.testing是true默認情況下，控制器將不能清除消息，和下面的測試會成功：

test('setting the message', function(assert) { 
    visit('/messages'); 
    fillIn('input.text-input', 'Some text'); 
    click('button.clicker'); 

    // while Ember.testing is `true` (default), do not remove message 
    andThen(() => { 
    assert.equal(find('div.info-message').text(), 
       'Done!', 
       'The message was set properly.'); 
    }); 
}); 

在下面的測試中，觀察false的觸發爲Ember.testing，這將「效仿」活d ev或控制器的生產條件。控制器將清除消息，爲正常，而該測試也將成功：

test('clearing the message', function(assert) { 
    visit('/messages'); 
    fillIn('input.text-input', 'Some text'); 

    andThen(() => { 
    Ember.testing = false; 
    }); 

    click('button.clicker'); 

    // while Ember.testing is `false`, remove message, as normal, as in dev or prod 
    andThen(() => { 
    assert.equal(find('div.info-message').text(), 
       '', 
       'The message has been cleared.'); 
    }); 

    // reset Ember.testing to its default 
    andThen(() => { 
    Ember.testing = true; 
    }); 
}); 

請注意，Ember.testing只要不再需要false條件重置爲true它的默認值。這很重要，因爲Ember run loop behavior is different during testing by design。

在這個解決方案中，一些代碼已被重構，以隔離問題並使單元測試更容易。這是一個Ember Twiddle來演示，其中部分受到article on Medium的啓發。