Check if element exists - Jasmine & Angular

Question

I want to write a test to check if an element exists on the page after I click on it. So when I click on the element with the class "addItem", this element is hidden using an *ngIf. I tried it like this:

it('Should handle click on .addItem button', () => {
    spyOn(component, 'addItem');
    addItemDebugElement = componentFixture.debugElement.query(By.css('.addItem'));
    addItemDebugElement.nativeElement.click();  //  click on the button
    expect(addItemDebugElement).toExist();
});

but it says: Property 'toExist' does not exist on type 'Matchers<DebugElement>'. Can you please advise how to do this? Many thanks!

Answer 1

I'd recommend you use

//    Add Item Debug Ele comes out as null.
addItemDebugElement = componentFixture.debugElement.query(By.css('.addItem'));
expect(addItemDebugElement).toBeFalsy();

and...

//    Add Item Debug Ele comes out as not null.
addItemDebugElement = componentFixture.debugElement.query(By.css('.addItem'));
expect(addItemDebugElement).toBeTruthy();

Answer 2

You can try this to check if the element exist on the Dom

expect($(document)).toContain(addItemDebugElement)

or

expect(addItemDebugElement).toBeInDom();