Angular and Jasmine: multiple actions in an it() aren't done sequentially -

i'm writing test each input field should not-empty. either don't know how write test (likely) or jasmine can't handle multiple actions in single it().

here tried write:

it('fails login 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');       });      });      })); 

i intend (filled, blank) test executed , expect() actions evaluated, (blank, filled) test completed.

what i'm seeing in debugger background process "click" done (filled, blank) test run. background process (blank, filled) run. of expects() run. means (filled, blank) versions of expect() see "comp" (blank, filled) test.

in end, created 2 different it() tests. there better way "two separate tests" this?

it's because you're trying mix asynchronous programming synchronous programming. when call fixture.whenstable(), you're waiting asynchronous task resolve. before it's resolved, trying make more synchronous calls

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

so ultimately, if want make more changes , assertions, need wait previous asynchronous task resolve

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(..)      // more changes , assertions   }) }); 

the more changes , assertions want make (that asynchronous), deeper in nesting need go.

if want avoid ugly beast, consider using fakeasync/tick instead. calling tick using whenstable() except can program in synchronous way. tick() call wait asynchronous tasks complete, making appear synchronous.

import { fakeasync, tick } '@angular/core/testing';  it('', fakeasync(() => {   fixture.detectchanges();   tick()   expect(..)    changesomething()   fixture.detectchanges()   tick()   expect() })) 

see also:

• what difference between fakeasync , async in angular2 testing