如何在Angular中使用Jasmine和Karma检查段落的innerHTML内容

Question

我有一个Angular组件，其中<p>带有一些文本标签。该段中的句子之一为粗体。我试图在Jasmine / Karma中编写一个单元测试来检查innerHTML内容。但是，我所有的尝试似乎都失败了。我会以错误的方式处理吗？这是我的标记和JavaScript：

角度组件HTML

<p>
    Four score and seven years ago our fathers brought forth on this 
    continent, <b>a new nation</b>, conceived in Liberty, and dedicated to the 
    proposition that all men are created equal.
</p>

茉莉花单元测试

describe('TestComponent', () => {
    let component: TestComponent;
    let fixture: ComponentFixture<TestComponent>;
    let el: DebugElement;

    beforeEach(() => {
        fixture = TestBed.createComponent(TestComponent);
        component = fixture.componentInstance;
        el = fixture.debugElement;
        fixture.detectChanges();
    });

    it('should display "a new nation" as bold text', () => {
        const boldText = el.query(By.css('p')).nativeElement;
        expect(boldText.innerHTML).toContain('<b>a new nation</b>');
    });
});

我收到此代码以下失败的错误：

Expected 'Four score and seven years ago our fathers brought forth on this continent, <b _ngcontent-c1="">a new nation</b>, conceived in Liberty, and dedicated to the proposition that all men are created equal.'.

注意，Angular会将自己的ID注入<b>标签。这是失败的原因吗？这甚至是进行这种测试的最佳方法吗？

谢谢！

Answer 1

直接查询粗体文本：

const boldText = el.query(By.css('p b')).nativeElement;
expect(boldText.textContent).toContain('a new nation');