2角度とジャスミンユニットテスト：私はコンポーネントをテストする例のいずれかを使用しています

Question

innerHTMLプロパティを取得することはできません「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.'; 
    } 
} 

これはテストケースで、私は「H3」かどうかをチェックしています私は、コンソールに「el.querySelector（ 『H3』）を評価した場合のテストとカルマを使用してテストケースをデバッグするには、それは次のよう

<h3>Welcome Bubba</h3> 

を示した場合

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

：ユーザー名「ババ」を含みます

どのようにして、見出しのinnerHtmlを得ることができます。これは、tsファイルに含めるときに解決されず、テストケースが常にfalseと評価されるためです。

これは、それが言うことである：'innerHTMLプロパティは' タイプに存在しません 'HTMLHeadingElement'

Answer 1

content

const content = el.querySelector('h3'); 
expect(content).toContain('Bubba'); 

がHTMLNode、ない生だからですテキスト。したがって、HTMLNodeが文字列であることを期待しています。これは失敗します。

あなただけの感謝がそれを明確にするため@peeskillet <h3>タグ

const content = el.querySelector('h3'); 
expect(content.innerHTML).toContain('Bubba'); 
expect(content.textContent).toContain('Bubba');