Show List
Tutorials > Angular Testing > Testing HTML Change

Testing HTML Change

In order to access the HTML element, we use TestBed and ComponentFixture. ComponentFixture provides access to DebugElement which is the wrapper for DOM elements and represents component view. Elements are further accessed using By class. By class lets query the elements using a number of methods. Here are the sample code files.

greet.component.ts
This component uses MessageService which returns message based on the time of the year. Like "Happy New Year", "Happy Thanksgiving", "Merry Christmas". Sample service response: {message: "Happy New Year"}
import { Component, OnInit } from '@angular/core';
import { MessageService } from '../message.service';

@Component({
  selector: 'app-greet',
  templateUrl: './greet.component.html',
  styleUrls: ['./greet.component.css']
})
export class GreetComponent implements OnInit {

  response: any;
  constructor(private svc: MessageService) { }

  ngOnInit(): void {
    this.response = this.svc.getMessage();
  }

}

greet.component.html
<h1 id="msgHead">{{response.message}}</h1>


Here is the test class for the the above component. There are tests to validate the message displayed on the HTML page element.
  • ComponentFixture provides the component instance from the TestBed
  • HTML view is accessed using debugElement and individual element is filtered by using By class.
  • nativeElement.textContent provides the text value of the element.
greet.component.spec.ts
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { MessageService } from '../message.service';
import { DebugElement } from "@angular/core";
import { By } from "@angular/platform-browser";
import { GreetComponent } from './greet.component';

describe('GreetComponent Test Suite', () => {
  let component: GreetComponent;
  let fixture: ComponentFixture<GreetComponent>;
  let service: MessageService;
  let spy: any;
  let el: DebugElement;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [GreetComponent],
      providers: [MessageService]
    });

    // create component and test fixture
    fixture = TestBed.createComponent(GreetComponent);

    // get test component from the fixture
    component = fixture.componentInstance;

    // Service provided to the TestBed
    service = TestBed.inject(MessageService);

    //  get the HTML element by CSS selector (e.g., by id, class name)
    el = fixture.debugElement.query(By.css('#msgHead'));
  });

  it('Data field should be Happy New Year when the service returns Happy New Year', () => {
    let mockResp = { message: "Happy New Year" };
    spy = spyOn(service, 'getMessage').and.returnValue(mockResp);
    component.ngOnInit();
    expect(component.response.message).toBe("Happy New Year");
  });

  it('HTML template should display happy New Year when the service returns Happy New Year', () => {
    let mockResp = { message: "Happy New Year" };
    spy = spyOn(service, 'getMessage').and.returnValue(mockResp);
    fixture.detectChanges();
    expect(el.nativeElement.textContent.trim()).toBe("Happy New Year");
  });

  it('HTML template should display Happy Halloween when the service returns Happy Halloween', () => {
    let mockResp = { message: "Happy Halloween" };
    spy = spyOn(service, 'getMessage').and.returnValue(mockResp);
    fixture.detectChanges();
    expect(el.nativeElement.textContent.trim()).toBe("Happy Halloween");

  });
});


Source code
https://github.com/it-code-lab/angular-application


Next: Testing Directives

    Leave a Comment

  • captcha text