angular unit test check a text html element

To check the text of an HTML element in an Angular unit test, you can use the nativeElement property of the element’s debugElement to access the element’s DOM node, and then use the textContent property to get the text of the element.

Here is an example of how you can check the text of an element with the tag h2:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

import { MyComponent } from './my.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MyComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should have the correct text in the h1 element', () => {
    const h2Element = fixture.debugElement.query(By.css('h2'));
    expect(h2Element.nativeElement.textContent).toBe('Foo');
  });
});

This will search the template of the component for an element with the tag h2, get the element’s DOM node using the nativeElement property, and then get the text of the element using the textContent property.

You can also use the innerHTML property to get the HTML content of the element, or the innerText property to get the text of the element with line breaks and white space preserved.