How to Unit Test If an Element Is Visible When the *Ngif Directive Is Used Using Jasmine in Angular

Element still defined even though *ngIf is false Jasmine unit testing Angular

Your queryAll is selecting elements that have an id of grid in the HTML and I bet that this elements do not exist. queryAll queries the whole DOM and returns the elements as an array and returns an empty array if it finds nothing. An empty array in JavaScript is truthy;

 it("should display the data grid", () => { 
    component.loading = true; 
    fixture.detectChanges(); 
    const dataGrid = el.queryAll(By.css("#grid")); 
    console.log(dataGrid); // See if you see [] here.
    expect(dataGrid).toBeTruthy("Datagrid not created"); 
    expect(dataGrid).toBeNull("Datagrid is created"); 
  });

To fix it, you can use query but if you want to use queryAll, check the length of the returned array.

 it("should NOT display the data grid when loading", () => { 
    component.loading = true; 
    fixture.detectChanges(); 
    const dataGrid = el.queryAll(By.css("dx-data-grid")); // change to dx-data-grid here
    console.log(dataGrid); // See if you see [] here, should still see [] here
    expect(dataGrid.length).toBe(0);
  });

What I would do:

 it("should NOT display the data grid when loading", () => { 
    component.loading = true; 
    fixture.detectChanges(); 
    const dataGrid = el.query(By.css("dx-data-grid")); // change to dx-data-grid here and query
    expect(dataGrid).toBeNull();
  });

query finds the first match and one element only.

Bypassing *ngIf on an Angular/Jasmine unit test

The problem is that DOM does not update until you manually detect changes, and you're attempting to query the DOM before your *ngIf renders (and ambassador value is detected).

  it('should search for an ambassador based off route param OnInit', () => {
    fixture.detectChanges();
     de = fixture.debugElement.query(By.css('.welcome'));
    el = de.nativeElement;
    const content = el.textContent;
    expect(content).toContain('jrmcdona', 'expected name');
  });

Moving the detectChanges() before the query() should solve the problem.

Angular unit testing component ngIf element is null

Try this:

it('should show the correct item count', () =>{
    let component = fixture.componentInstance;
    component.items = [...fakeItems];
    component.itemCount = 4;
    fixture.detectChanges();

    let bridge = fixture.debugElement.query(By.css('.bridge'));
    console.log(bridge); // make sure it logs something to the console
    expect(bridge).toBeTruthy();
});

If this doesn't work, I am thinking there is an *ngIf on top of the ul where it is not true and therefore this ul is not being displayed.

To test this, try:

<ul class="dummy-class" *ngFor="let item of items">
<li> 
    <ng-container *ngIf="itemCount && item.GroupId == 4">
        <span class="bridge">{{itemCount}}</span>
    </ng-container>
</li>

it('should show the correct item count', () =>{
    let component = fixture.componentInstance;
    component.items = [...fakeItems];
    component.itemCount = 4;
    fixture.detectChanges();

    let bridge = fixture.debugElement.query(By.css('ul.dummy-class'));
    console.log(ul); // make sure it logs something to the console
    expect(ul).toBeTruthy();
});

Unable to access an element inside ng-template while writing unit test using Jasmine

I am thinking your TestBed does not know how to render the pTemplate directive.

You have to do something like this (I assume you're using prime-ng):

import {TableModule} from 'primeng/table';

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        YourComponent,
        // If including TableModule in imports does not work, try including
        // the directive for pTemplate.
        // PTemplateDirective
      ],
      imports:[TableModule]
    }).compileComponents();
  }));

Once TableModule is imported and added to the imports array, the test should know how to paint it.

How can I test elements wrapped in an ng-container exist for Angular 6 with Jasmine?

From the comments,

Your unit test is not passing because you are checking for toBeNull(), which is false. Instead you should be checking something like

expect(debugEl.query(By.css('#login'))).not.toBeNull(); 

or

expect(debugEl.query(By.css('#login'))).toBeDefined();

---

Related Topics