web-dev-qa-db-fra.com

Comment obtenir Angular 2 élément via le nom de la classe dans Jasmine

Je peux obtenir un élément en utilisant le

fixture.debugElement.query(By.css('h1'));

Mais ce que je devrais faire quand je veux obtenir un élément via le nom de la classe. Quelque chose comme ça

fixture.debugElement.query(By.css('class="name"'))
unit-testingangularjasmine
24
user2510058

Vous utilisez By.css Pour passer un sélecteur css. Donc, tout sélecteur que vous pouvez utiliser avec css, vous pouvez utiliser avec By.css. Et un sélecteur de classe est simplement .classname (Avec point).

By.css('.classname')          // get by class name
By.css('input[type=radio]')   // get input by type radio
By.css('.parent .child')      // get child who has a parent

Ce ne sont que quelques exemples. Si vous connaissez les CSS, vous devez savoir comment utiliser les sélecteurs.

EDIT: Pour utiliser By.css(), assurez-vous de import { By } from '@angular/platform-browser';

58
Paul Samsotha

Juste pour ajouter quelques autres moyens utiles pour sélectionner des éléments:

// get element with multiple classes

fixture.debugElement.query(By.css('.className1.className2'));


// get a certain element from a group of elements with the same class name

fixture.debugElement.queryAll(By.css('.className'))[1];
6
Duarte

Je préférerais que l'ID utilisateur soit sur votre élément DOM, puis dans le test unitaire angular2, vous pouvez appeler quelque chose comme ci-dessous pour obtenir la référence de votre élément DOM souhaité et tester ce que vous préférez.

//typscript syntax

fixture = TestBed.createComponent(<your component>);

let result = fixture.nativeElement.querySelector('<id attribute name of html element>');

expect(result.id).toEqual("id  of your DOM element.").

J'espère que cette aide.

4
MikBTC