karma jasmine - How to wait for DOM elements to finish rendering in Angular 2 Unit Tests -
i have following test. focuses html element, sets it's value , triggers blur event handler. blur event triggers validation check which, if invalid should disable save button.
currently during test run failing, if set break point , walk through it, set disabled attribute on save button , work.
based on guess whenstable promise not waiting elements finish re-rendering completely. threw settimeout wait whole second before checking button state, still isn't working me.
is there function on componentfixture class wait elements re-render before triggering callback or resolving promise or whatever?
fixture.whenstable().then(() => { inputhomephone.nativeelement.focus(); setinputvalue(inputhomephone, "123"); inputhomephone.nativeelement.blur(); fixture.detectchanges(); return fixture.whenstable(); }) .then(() => { settimeout(() => { expect(btnsave.classes['disabled']).tobe(true); expect(btnsave.nativeelement.disabled).tobe(true); debugger; }, 1000) })
the html button here. disabled when input values on form invalid.
<button *ngif="!loading" id="btn-save" [class.disabled]="!(profileform?.valid)" class="btn primary top-space uppercase" [disabled]="!(profileform?.valid)" (click)="savechanges()"> save </button>
okay figured out way trigger blur works me.
doing through nativeelement property makes work randomly. sure due angular 2 managing dom events. changing line
inputhomephone.nativeelement.blur();
to
inputhomephone.triggereventhandler('blur', null);
the save button disables , tests pass every time now.
i think in general supposed use triggereventhandler
function test using dom events in angular 2.
Comments
Post a Comment