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

Question

I am trying to write a unit test to see whether or not elements wrapped in an <ng-container> exist, but my tests fails because it seems the elements are created any way.

My code is:

HTML

<ng-container *ngIf="router.url === '/login'">
    <div id="login"></div>
</ng-container>

Unit Test

it('should display the login div when on the login page', fakeAsync(inject([Router], (router: Router) => {
    router.navigate(['/login']);
    fixture.detectChanges();
    expect(debugEl.query(By.css('#login'))).toBeNull();
})));

I would prefer not to have to wrap my <ng-container> in another element; I have seen a few articles online that say to do this, but is there a way to check elements in an Angular container without having around it?

Thanks!

Answer 1

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();