Angular 2和Jasmine单元测试:无法获取innerHtml [英] Angular 2 and Jasmine unit testing: cannot get the innerHtml

问题描述

我正在使用测试组件"WelcomeComponent"的示例之一:

I am using one of the examples that test a component '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'是否包含用户名'Bubba':

This is the test case, i am checking if the 'h3' contains the user name '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')"，则会显示以下内容

When Testing and debugging the test case using Karma, If i evaluate "el.querySelector('h3') in the console it shows the following

<h3>Welcome  Bubba</h3>

如何获取标题的innerHtml，因为将其包含在ts文件中并且测试用例始终为false时无法解析.

How, i can get the innerHtml of the heading, since it doesn't resolve when including it in the ts file and the test case evaluates to false always.

这就是它的意思:'innerHTML'在'HTMLHeadingElement '

推荐答案

这是因为content

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

是HTMLNode，而不是原始文本.因此，您期望HTMLNode是一个字符串.这将失败.

is the HTMLNode, not the raw text. So you're expecting an HTMLNode to be a string. This will fail.

您需要使用content.innerHTML或content.textContent提取原始HTML(以仅在<h3>标记之间获取内容

You need to extract the raw HTML either with content.innerHTML or content.textContent (to just get content between the <h3> tags

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

这篇关于Angular 2和Jasmine单元测试:无法获取innerHtml的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！