Angular 2 and Jasmine unit testing: cannot get the innerHtml

泄露秘密 提交于 2020-12-08 06:20:01

问题


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

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

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>

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.

This is what it says : 'innerHTML' doesn't exist on type 'HTMLHeadingElement'


回答1:


It's because content

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

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

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


来源:https://stackoverflow.com/questions/40227533/angular-2-and-jasmine-unit-testing-cannot-get-the-innerhtml

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!