Test freezes when expect(result).toBe(null) fails test. (Angular 2, Jasmine)

Question

I have a test that checks if part DOM element has been removed by an ngIf. When I check the DOM using: fixture.debugElement.query(By.css(".button-area")) the result is either null or a DOM element.

If the result is null, then the following test works fine. But, if the test result contains an element, it doesn't simply fail the test, it freezes up the browser.

The test looks like this:

var result = fixture.debugElement.query(By.css(".button-area"))
expect(result).toBe(null)

I have also tried expect(result).toEqual(null) and .toBeFalsy() which have the same result.

What is the proper way to test if a DOM element has been removed properly?

UPDATE 1/23/2017

I have found out this issue is specifc to the element returned by:

fixture.debugElement.query(By.css(".button-area"))

This might be a bug with angular 2 or jasmine. If I use document.getElementByClassName("button-area") it is not an issue and the test works fine.

Answer 1

Since this seems to be a bug with Jasmine or Angular, here is a quick workaround if you are in a bind:

var result = fixture.debugElement.query(By.css(".button-area"))
expect(result === null).toBeTruthy()

You should expect to fix this in your own code when the issue is resolved.