web-dev-qa-db-fra.com

Vérifiez si l'élément existe - Jasmine & Angular

Je veux écrire un test pour vérifier si un élément existe sur la page après avoir cliqué dessus. Ainsi, lorsque je clique sur l'élément avec la classe "addItem", cet élément est masqué à l'aide d'un * ngIf. J'ai essayé comme ça:

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

mais il est écrit: Property 'toExist' does not exist on type 'Matchers<DebugElement>'. Pouvez-vous nous dire comment procéder? Merci beaucoup!

angularjasmine
5
decebal

Vous pouvez essayer ceci pour vérifier si l'élément existe sur le Dom

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

ou 

expect(addItemDebugElement).toBeInDom();
1
Fateh Mohamed

Je vous recommande d'utiliser 

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

et...

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

voici la solution qui a fonctionné pour moi:

it('Should handle click on .addItem button', () => {
 spyOn(component, 'addItem');
 const fixture = TestBed.createComponent(AppComponent);

 addItemDebugElement = fixture.debugElement.query(By.css('.addItem'));


 addItemDebugElement.nativeElement.click(); 

 expect(fixture.debugElement.nativeElement).toContain(addItemDebugElement);  

});
0
Fateh Mohamed