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値を切り替え、その後、クリアまたはすることはできません、その値に基づいて。テストでは、あるインスタンスではメッセージが消去され、もう一方のインスタンスにはメッセージが表示されます。 Ember.testingはデフォルトでtrueであるため、コントローラは、メッセージ、および次のテストをクリアしませんメッセージを設定するための受け入れテストでは

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 
    } 
}, 

、：コントローラのonSuccessコールで

、Ember.testing状態を観察成功します：

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.'); 
    }); 
}); 

次のテストでは、ライブd「をエミュレート」なる、Ember.testingためfalseのトグルを観察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によってインスピレーションを受けています。