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!

`expect(debugEl.query(By.css('#login'))).toBeNull();` does fail, because element with `id="login"` exists. What is your doubt here? — Amit Chigadani, Jul 22 '18 at 17:37
I may not understand exactly how angular does it, but I thought that if the result of an `*ngIf` was false, angular would not add the elements in a container to the DOM, therefore would not exist. I have successfully written tests with this understanding in the past, but the difference is that those if statements were in a `
` or some other native HTML element. — J-man, Jul 22 '18 at 17:40
You are right, If `*ngIf was false, angular would not add the elements in a container to the DOM, therefore would not exist.`. And the whole purpose of `ng-container` is to eliminate the need of those extra `
` which exist only to have the condition. `ng-container` will not be rendered inside the dom, but the content inside it will render if the condition is satisfied. — Amit Chigadani, Jul 22 '18 at 17:43
Right, so in my unit test I am using a router object to navigate to a page in my app called `login` and the condition is that if the route is login, display the contents of the `ng-container`, but my unit test is not passing. — J-man, Jul 22 '18 at 17:46
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();` — Amit Chigadani, Jul 22 '18 at 17:48
Does that resolve your issue? Or is there anything else that is causing a problem? — Amit Chigadani, Jul 22 '18 at 18:18
@Amit Chigadani, That did the trick. For some tests I needed to check the null, and others it was whether it was defined or not. Anyway, that's what I was missing. Thanks. — J-man, Jul 23 '18 at 15:59
Great! I have made an answer with that. Feel free to accept it. — Amit Chigadani, Jul 23 '18 at 16:58

score 2 · Accepted Answer · answered Jul 23 '18 at 16:57

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

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

1 Answers1