Component testing basics in Angular

Introduction

Component testing helps you check if parts of your app work right by themselves. It finds mistakes early and keeps your app strong.

When you want to check if a button click changes the screen as expected.

When you add a new feature and want to make sure it works before sharing.

When fixing bugs to confirm the problem is solved.

When updating Angular versions to ensure components still behave correctly.

Syntax

Angular

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my.component';

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

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

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Use TestBed to set up the testing environment for your component.

fixture.detectChanges() runs Angular's change detection to update the view.

Examples

Check if the component's title property equals 'Hello'.

Angular

it('should have title as Hello', () => {
  expect(component.title).toBe('Hello');
});

Check if the rendered HTML contains the title inside an <h1> tag.

Angular

it('should render title in h1 tag', () => {
  const compiled = fixture.nativeElement as HTMLElement;
  expect(compiled.querySelector('h1')?.textContent).toContain('Hello');
});

Sample Program

This example shows a simple Angular component with a greeting message. The test checks if the component is created, if the greeting property has the right text, and if the text appears in the HTML inside an <h1> tag.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  template: `<h1>{{ greeting }}</h1>`
})
export class GreetingComponent {
  greeting = 'Hello, Angular!';
}

// Test file: greeting.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { GreetingComponent } from './greeting.component';

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

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

    fixture = TestBed.createComponent(GreetingComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create the component', () => {
    expect(component).toBeTruthy();
  });

  it('should have greeting text', () => {
    expect(component.greeting).toBe('Hello, Angular!');
  });

  it('should render greeting in h1 tag', () => {
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, Angular!');
  });
});

Important Notes

Always import ComponentFixture and TestBed from @angular/core/testing.

Use fixture.nativeElement to access the rendered HTML for checking content.

Run fixture.detectChanges() after changing component properties to update the view.

Summary

Component testing checks if parts of your app work alone.

Use TestBed to set up and create components for testing.

Check both component properties and rendered HTML to ensure correct behavior.