I have an Angular 6 app and writing some unit tests trying to determine if an element is visible or not based solely on the boolean result of an *ngIf
directive.
Markup:
<div class="header" *ngIf="show">
<div>...</div>
</div>
spec file:
it('should hide contents if show is false', () => {
const button = debugElement.query(By.css('button')).nativeElement;
button.click(); // this will change show to false
fixture.detectChanges();
expect(debugElement.query(By.css('.header')).nativeElement.style.hidden).toBe(true);
});
I can't seem to get the hidden
attribute from the div. Does angular use another approach to hiding the element from the DOM using the *ngIf
directive? Do I need to get another property from the nativeElement
?
Thanks!
If the element is hidden, then it wont be rendered inside the dom.
You can check
expect(fixture.debugElement.query(By.css('.header'))).toBeUndefined();
EDIT : toBeNull()
works better in the above case
expect(fixture.debugElement.query(By.css('.header'))).toBeNull();
And also you have a syntax error while fetching the button element. nativeElement
is not a function.
Change it this way :
const button = fixture.debugElement.query(By.css('button')).nativeElement;