Angular Test HTML Element

By Arvind Rai, April 26, 2022

On this page we will learn testing HTML elements in Angular application.
1. Angular TestBed provides configureTestingModule() method to configure application module for testing.

beforeEach(async () => {
   await TestBed.configureTestingModule({
     declarations: [ PersonComponent ],
   }).compileComponents();
   fixture = TestBed.createComponent(PersonComponent);
   component = fixture.componentInstance;
});

The ComponentFixture is created using TestBed.createComponent() method. The ComponentFixture provides properties and methods to access components.
2. The compileComponents() is called when HTML and CSS are loaded using external files.

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
})

If we are running our tests in CLI environments, then calling compileComponents() is not required.
3. We can access HTML elements either by using elements name or its CSS class.
Find the code to access HTML element using element name.

it('should match H1 text', fakeAsync (() => {
  const h1 = fixture.debugElement.nativeElement.querySelector('h1');
  fixture.detectChanges();
  expect(component.message).toBe(h1.textContent);
}));

Find the code to access HTML element using CSS class.

const ul = fixture.debugElement.query(By.css('.nameList'));

Technologies Used

Find the technologies being used in our example.
1. Angular 13.1.0
2. Node.js 12.20.0
3. Jasmine 3.10
4. Karma 6.3

Complete Example

In our demo application, we are testing h1 and ul elements. Find the HTML file that contains h1 and ul elements.
person.component.html

<h1>{{message}}</h1>

<ul class="nameList">
    <li>Mahesh</li>
    <li>Krishn</li>
    <li>Ram</li>
</ul>

Find the test file.
person.component.spec.ts

import { ComponentFixture,  TestBed, fakeAsync, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { PersonComponent } from './person.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ PersonComponent ],
    }).compileComponents();
    fixture = TestBed.createComponent(PersonComponent);
    component = fixture.componentInstance;
  });

  it('should match H1 text', fakeAsync (() => {
    const h1 = fixture.debugElement.nativeElement.querySelector('h1');
    fixture.detectChanges();
    expect(component.message).toBe(h1.textContent);
  }));

  it('should match ul children number and its text', fakeAsync (() => {
    const ul = fixture.debugElement.query(By.css('.nameList'));
    fixture.detectChanges();
    const noOfChildren = 3;
    console.log(ul.childNodes[0].nativeNode.textContent);
    expect(ul.children.length).toEqual(noOfChildren);

    const name= "Mahesh";
    expect(ul.childNodes[0].nativeNode.textContent).toBe(name);
  }));

});

Find the print screen of the output.