角とジャスミン：it（）内の複数のアクションが順番に実行されない

Question

各INPUTフィールドが空でなければならないというテストを書いています。このテストを書く方法がわからないか（Jasmineが複数のアクションを1つのアクションで処理できない場合）。ここで

私が書くことを試みた何のようなものです：テストが実行され、その期待（）アクションが評価され

it('fails to login for blank credential fields', async(() => { 
    fixture.detectChanges(); 
    fixture.whenStable().then(() => { 
     comp = fixture.componentInstance; 
     de = fixture.debugElement; 
     let elLoginButton = de.query(By.css('#login')); 

     comp.name = ''; 
     comp.password = 'filled'; 
     elLoginButton.triggerEventHandler('click', null); 

     fixture.detectChanges(); 
     fixture.whenStable().then(() => { 
     expect(comp.name).toEqual('', 'name of (blank, filled) test'); 
     expect(comp.password).toEqual('filled', 'password of (blank, filled) test'); 
     }); 

     comp.name = 'filled'; 
     comp.password = ''; 
     elLoginButton.triggerEventHandler('click', null); 

     fixture.detectChanges(); 
     fixture.whenStable().then(() => { 
     expect(comp.name).toEqual('filled', 'name of (filled, blank) test'); 
     expect(comp.password).toEqual('', 'password of (filled, blank) test'); 
     }); 

    });  

})); 

私は（空白、満たされた）ことを意図し、その後、（空白、満たされた）テストが可能完了しました。

デバッガで表示されるのは、「塗りつぶされた、空白の」テストが実行されたために、「クリック」のバックグラウンドプロセスが実行されていることです。次に、（ブランク、塗りつぶし）のバックグラウンドプロセスが実行されます。次に、expects（）のすべてが実行されます。これは、expect（）の（塗りつぶされた、空白の）バージョンが、（空白の、塗りつぶされた）テストからの "comp"を参照することを意味します。

最後に、私は2つの異なるit（）テストを作成しました。これには「2つの別々のテスト」よりも良い方法がありますか？

Answer 1

同期プログラミングと非同期プログラミングを混在させようとしているからです。 fixture.whenStable()に電話すると、非同期タスクが解決するのを待っています。それが解決される前でも、あなたはより多くの変更やアサーションを作りたい場合は、あなたが

fixture.whenStable().then(() => { 
    expect(comp.name).toEqual('', 'name of (blank, filled) test'); 
    expect(comp.password).toEqual('filled', 'password of (blank, filled) test'); 

    comp.name = 'filled'; 
    comp.password = ''; 
    elLoginButton.triggerEventHandler('click', null); 

    fixture.detecChanged(); 
    fixture.whenStable().then(() => { 
    expect(..) 

    // do more changes and assertions 
    }) 
}); 

を解決するために、以前の非同期タスクを待つ必要がある、だから、最終的にはより多くの同期呼び出し

をしようとしています

多くの変更とアサーションを（非同期で）作成したい場合は、ネストを深くする必要があります。

この醜い獣を避けたい場合は、代わりにfakeAsync/tickを使用することを検討してください。 tickを呼び出すのは基本的にwhenStable()のようなものですが、同期方法でプログラムすることができます。 tick()コールは、非同期タスクが完了するのを待って、がと同期しているように見せます。

import { fakeAsync, tick } from '@angular/core/testing'; 

it('', fakeAsync(() => { 
    fixture.detectChanges(); 
    tick() 
    expect(..) 

    changeSomething() 
    fixture.detectChanges() 
    tick() 
    expect() 
})) 

も参照してください：再び

• What is the difference between fakeAsync and async in angular2 testing