2017-08-02 4 views
0

私はよくある状況があります: テンプレートは、別の入力要素に依存する要素を無効にしています。私のテストでテンプレート - ダイナミックディセーブル機能を持​​つテストコンポーネント

<input id="email" type="text" [(ngModel)]="login.username" name="username" 
<button type="button" id="login-button" [disabled]="(login.username.length < 5)"</button> 

私は、電子メールデータを挿入する前に、状況をチェックして、この挿入後:

expect(loginButton.disabled).toBe(true); // PASS 
expect(email.value === null).toBe(false); // PASS 
console.log(email.value); // RETURN: null 

email.value = "admin"; 
email.dispatchEvent(new Event('input')); 
fixture.detectChanges(); 

console.log(email.value); // RETURN: "admin"  
expect(email.value === null).toBe(false); // PASS 
expect(loginButton.disabled).not.toBe(true); // FAILD 

loginButton.disabledはまだ無効になっているのはなぜ?私はクロームコンソールで同じことを行う場合には、email.dispatchEvent後ログインボタンをアクティブに送っている:

var email = document.getElementById("email"); 
email.value = "admin"; 
email.dispatchEvent(new Event('input')); 

答えて

0

は、最後に私は答えを見つけました。 Angular2 RC5リリース以来、すべてのngModel操作は非同期なので、テストの際、私はasyncとwhenStable()メソッドを使用してください。

関連する問題