J'utilise l'un des exemples qui testent un composant 'WelcomeComponent':
import { Component, OnInit } from '@angular/core';
import { UserService } from './model/user.service';
@Component({
selector: 'app-welcome',
template: '<h3>{{welcome}}</h3>'
})
export class WelcomeComponent implements OnInit {
welcome = '-- not initialized yet --';
constructor(private userService: UserService) { }
ngOnInit(): void {
this.welcome = this.userService.isLoggedIn ?
'Welcome ' + this.userService.user.name :
'Please log in.';
}
}
Ceci est le cas de test, je vérifie si le "h3" contient le nom d'utilisateur "Bubba":
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { UserService } from './model/user.service';
import { WelcomeComponent } from './welcome.component';
describe('WelcomeComponent', () => {
let comp: WelcomeComponent;
let fixture: ComponentFixture<WelcomeComponent>;
let componentUserService: UserService; // the actually injected service
let userService: UserService; // the TestBed injected service
let de: DebugElement; // the DebugElement with the welcome message
let el: HTMLElement; // the DOM element with the welcome message
let userServiceStub: {
isLoggedIn: boolean;
user: { name: string }
};
beforeEach(() => {
// stub UserService for test purposes
userServiceStub = {
isLoggedIn: true,
user: { name: 'Test User' }
};
TestBed.configureTestingModule({
declarations: [WelcomeComponent],
// providers: [ UserService ] // NO! Don't provide the real service!
// Provide a test-double instead
providers: [{ provide: UserService, useValue: userServiceStub }]
});
fixture = TestBed.createComponent(WelcomeComponent);
comp = fixture.componentInstance;
// UserService actually injected into the component
userService = fixture.debugElement.injector.get(UserService);
componentUserService = userService;
// UserService from the root injector
userService = TestBed.get(UserService);
// get the "welcome" element by CSS selector (e.g., by class name)
el = fixture.debugElement.nativeElement; // de.nativeElement;
});
it('should welcome "Bubba"', () => {
userService.user.name = 'Bubba'; // welcome message hasn't been shown yet
fixture.detectChanges();
const content = el.querySelector('h3');
expect(content).toContain('Bubba');
});
});
Lors du test et du débogage du scénario de test à l'aide de Karma, si j'évalue "el.querySelector ('h3') dans la console, il affiche les éléments suivants
<h3>Welcome Bubba</h3>
Comment, je peux obtenir le innerHtml de l'en-tête, car il ne résout pas en l'incluant dans le fichier ts et le scénario de test est toujours faux.
Voici ce qu'il dit: 'innerHTML' n'existe pas sur le type 'HTMLHeadingElement '
C'est parce que content
const content = el.querySelector('h3');
expect(content).toContain('Bubba');
est le HTMLNode
, pas le texte brut. Vous vous attendez donc à ce qu'un HTMLNode
soit une chaîne. Cela échouera.
Vous devez extraire le HTML brut avec content.innerHTML
ou content.textContent
(pour obtenir simplement du contenu entre les <h3>
Mots clés
const content = el.querySelector('h3');
expect(content.innerHTML).toContain('Bubba');
expect(content.textContent).toContain('Bubba');