How do I unit test if an element is visible when the *ngIf directive is used using Jasmine in Angular

Question

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!

Amit Chigadani · Accepted Answer · 2019-07-07T08:20:34.920

57

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;

edited Jul 07 '19 at 08:20

answered Jul 11 '18 at 18:01

Amit Chigadani

28,482
13
80
98

7

Ultimately what worked for me was to check the node itself as you did in the first line of this answer. Interestingly, however, instead of checking `undefined` I ended up checking whether or not the node was `null` using the `toBeNull()` function. That seemed to work for me. – J-man Jul 11 '18 at 18:33
1

Be careful with combining `fixture.debugElement.query` with invocations of `expect(...)`. This can cause Out-Of-Memory errors in the browser. Happened to me. See https://stackoverflow.com/a/48606192/2042301 – joecracker Feb 26 '19 at 10:33
I had the same question, and this was indeed the correct answer. However, we have (for _some_ reason) not the default change detection: `ChangeDetectionStrategy.OnPush.`. It turned out in the browser the element was removed automatically, but in the unit test I had to call the `ChangeDetectorRef.detectChanges()' manually in order to get it to work – Michel Jun 16 '20 at 09:14
The code here seems to pass for me even when the ngIf evaluates to false... – Jim Oct 08 '20 at 16:36

lealceldeiro · Answer 2 · 2018-07-11T20:03:36.680

When testing if a component is being shown or not using ngIf I try to get the element (in this case you use, i.e., debugElement.query(By.css('.header')).nativeElement) and if it should be shown I expect it to be truthy, otherwise falsy.

Something like this:

it('should hide contents if show is false', () => {
    // should be rendered initially
    expect(debugElement.query(By.css('.header')).nativeElement).toBeTruthy();
    //trigger change
    const button = debugElement.query(By.css('button')).nativeElement;
    button.click();   // this will change show to false
    fixture.detectChanges();
    // should not be rendered
    expect(debugElement.query(By.css('.header')).nativeElement).toBeFalsy();
});

Also, bear in mind that sometimes you need to use ComponentFixture#whenStable to detect when the fixture is stable like this:

  it('should hide contents if show is false', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.whenStable().then(() => {
      // same test code here
    });
  });

See this working test for a component which resembles this scenario.

See [GitHub repository]

Shouldn't the second example test function be marked as `async` since we're working with promises there? — Werek, Apr 08 '21 at 07:18
@Werek - As we are not awaiting the promise, but utilizing `then` to head over to callback-world, the function signature does not have to be marked with `async`. — paulroho, Jun 11 '21 at 00:42

score 9 · Answer 3 · answered Feb 01 '21 at 11:10

9

You need add fixture.detectChanges() after you change value of 'show' to true

component.show = true;
fixture.detectChanges()

answered Feb 01 '21 at 11:10

JP Bala Krishna

141
1
3

Thank you! In my case, I had an Observable and thus couldn't assign it to be true. I had to mock the observable and assign it to the ```component.thePropertyOnWhichTheConditionDepends```. The ```fixture.detectChanges()``` was the final bit what made the test work! – MikhailRatner Mar 17 '22 at 14:11

score 4 · Answer 4 · answered Oct 09 '18 at 18:12

4

Writing test case for *ngIf condition use toBeNull condition.

Try with below code, it works for me.

expect(fixture.debugElement.query(By.css('.header'))).toBeNull();

answered Oct 09 '18 at 18:12

Dharma Raju

51
2

score 3 · Answer 5 · answered Jul 11 '18 at 18:02

3

When using ngIf, angular completely removes the node from markup. So you need to check that this element not exists.

Documentation says:

ngIf evaluates the expression and then renders the then or else template in its place when expression is truthy or falsy respectively.

To be more precise, it's just not rendered

answered Jul 11 '18 at 18:02

Drag13

5,859
1
18
42

thanks! I also tried to test to see if the nativeElement is undefined and it keeps failing the test saying `Expected HTMLNode to be undefined` so it seems to be checking the value of the node rather than whether or not it exists in the DOM – J-man Jul 11 '18 at 18:09
2

@J-man check fixture.debugElement.query(By.css('.header')).nativeElement – Drag13 Jul 11 '18 at 18:12

How do I unit test if an element is visible when the *ngIf directive is used using Jasmine in Angular

5 Answers5

Linked