コンポーネント「WelcomeComponent」をテストする例の1つを使用しています。
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.';
}
}
これはテストケースです。「h3」にユーザー名「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');
});
});
Karmaを使用してテストケースをテストおよびデバッグするときに、コンソールで "el.querySelector( 'h3')を評価すると、次のように表示されます
<h3>Welcome Bubba</h3>
どのように、見出しのinnerHtmlを取得できます。これは、見出しをtsファイルに含めると解決されず、テストケースが常にfalseと評価されるためです。
これはそれが言うことです:「innerHTML」はタイプ「HTMLHeadingElement」に存在しません
content
const content = el.querySelector('h3');
expect(content).toContain('Bubba');
HTMLNode
であり、生のテキストではありません。つまり、HTMLNode
が文字列であることを期待しています。これは失敗します。
content.innerHTML
またはcontent.textContent
を使用して未加工のHTMLを抽出する必要があります(<h3>
タグ間のコンテンツを取得するには
const content = el.querySelector('h3');
expect(content.innerHTML).toContain('Bubba');
expect(content.textContent).toContain('Bubba');