I have an Angular component that has a <p> tag with some text. One of the sentences inside of the paragraph is bold. I am trying to write a unit test in Jasmine/Karma to check the innerHTML content. However, all of my attempts seem to fail. Am I going about this the wrong way? Here is my markup and JavaScript:

Angular component 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>

Jasmine Unit Test

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

    beforeEach(() => {
        fixture = TestBed.createComponent(TestComponent);
        component = fixtureponentInstance;
        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>');
    });
});

I get the following failed error with this code:

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

Note that Angular is injecting its own ID to the <b> tag. Is this the reason is fails? Is this even the best way to go about this kind of test?

Thanks!

I have an Angular component that has a <p> tag with some text. One of the sentences inside of the paragraph is bold. I am trying to write a unit test in Jasmine/Karma to check the innerHTML content. However, all of my attempts seem to fail. Am I going about this the wrong way? Here is my markup and JavaScript:

Angular component 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>

Jasmine Unit Test

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

I get the following failed error with this code:

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

Note that Angular is injecting its own ID to the <b> tag. Is this the reason is fails? Is this even the best way to go about this kind of test?

Thanks!

• javascript
• angular
• jasmine
• karma-jasmine

1 Answer 1

Query directly the bold text :

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