how to hide element in angular 4 using *ng-if?

Question

I am trying to test @Input in angular 2 .@Input hide or show my p tag .I want to test this functionality using jasmine.

here is my component

import { Component,Input } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 4';
  @Input() enable:boolean
  constructor() { }
}

testing code.

describe('@Input property ', () => {
    it('will not show p tag', () => {
      component.enable = false;
      fixture.detectChanges();
      PEl = fixture.debugElement.query(By.css('p'));
      console.log(PEl.nativeElement);
      expect(PEl.nativeElement.length).toEqual(0);
    })
  })

https://stackblitz.com/edit/angular-testing-wzxrin?file=app%2Fapp.component.spec.ts

If you use *ngIf and it's false then the element will not be rendered to the dom tree. So your PEl = fixture.debugElement.query(By.css('p')); returns nothing... that is what you would have to check in your test. — Fussel
– Fussel, Commented May 28, 2018 at 6:09

score 1 · Accepted Answer · 2018-05-28 06:29:16Z

1

Test if it's null, not if it has length.

component.enable = false;
fixture.detectChanges();
PEl = fixture.debugElement.query(By.css('p'));
console.log(PEl.nativeElement);
expect(PEl).toBeUndefined();

edited May 28, 2018 at 6:29

answered May 28, 2018 at 6:27

user4676340

Sign up to request clarification or add additional context in comments.

5 Comments

user944513 Over a year ago

what about when enable is true

user944513 Over a year ago

stackblitz.com/edit/…

user4676340 Over a year ago

expect(PEl).not.toBeUndefined()

user944513 Over a year ago

see your test is failing

user944513 Over a year ago

stackblitz.com/edit/…

Padmapriya Vishnuvardhan · Accepted Answer · 2018-05-28 07:20:12Z

0

Test for null not for length

component.enable = false;
fixture.detectChanges();
PEl = fixture.debugElement.query(By.css('p'));
expect(PEl).tobeNull();

answered May 28, 2018 at 7:20

Padmapriya Vishnuvardhan

2,16616 silver badges18 bronze badges

Collectives™ on Stack Overflow

how to hide element in angular 4 using *ng-if?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related