title: How can I check the innerHTML content of a paragraph using Jasmine and Karma in Angular
body: <p>I have an Angular component that has a <code>&lt;p&gt;</code> 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 <code>innerHTML</code> content.  However, all of my attempts seem to fail.  Am I going about this the wrong way?  Here is my markup and JavaScript:</p>
  
  <p>Angular component HTML</p>
  
  <pre><code>&lt;p&gt;
      Four score and seven years ago our fathers brought forth on this 
      continent, &lt;b&gt;a new nation&lt;/b&gt;, conceived in Liberty, and dedicated to the 
      proposition that all men are created equal.
  &lt;/p&gt;
  </code></pre>
  
  <p>Jasmine Unit Test</p>
  
  <pre><code>describe('TestComponent', () =&gt; {
      let component: TestComponent;
      let fixture: ComponentFixture&lt;TestComponent&gt;;
      let el: DebugElement;
  
      beforeEach(() =&gt; {
          fixture = TestBed.createComponent(TestComponent);
          component = fixture.componentInstance;
          el = fixture.debugElement;
          fixture.detectChanges();
      });
  
      it('should display "a new nation" as bold text', () =&gt; {
          const boldText = el.query(By.css('p')).nativeElement;
          expect(boldText.innerHTML).toContain('&lt;b&gt;a new nation&lt;/b&gt;');
      });
  });
  </code></pre>
  
  <p>I get the following failed error with this code:</p>
  
  <pre><code>Expected 'Four score and seven years ago our fathers brought forth on this continent, &lt;b _ngcontent-c1=""&gt;a new nation&lt;/b&gt;, conceived in Liberty, and dedicated to the proposition that all men are created equal.'.
  </code></pre>
  
  <p>Note that Angular is injecting its own ID to the <code>&lt;b&gt;</code> tag.  Is this the reason is fails?  Is this even the best way to go about this kind of test?</p>
  
  <p>Thanks!</p>