角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」包含用戶名「布巴」：

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

當測試和調試使用噶，測試用例如果我評價「el.querySelector（‘H3’）在控制檯它顯示了以下

<h3>Welcome Bubba</h3> 

如何，我可以得到標題的innerHtml，因爲在將它包含在ts文件中並且測試用例總是計算爲false時，它不會解析。

這是它說：'的innerHTML' 不上鍵入 'HTMLHeadingElement'

Answer 1

存在這是因爲content

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

是HTMLNode，而不是原始文本。所以你期望HTMLNode是一個字符串。這將失敗。

你需要提取原始HTML要麼content.innerHTML或content.textContent（只得到了<h3>標籤

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