Testing with fixtures and debug elements in Angular

Introduction

Testing with fixtures and debug elements helps you check if your Angular components work correctly by simulating how they behave in real use.

When you want to check if a button click changes the component state.

When you need to verify that the component shows the right text after some action.

When you want to find and interact with elements inside your component during tests.

When you want to debug why a component test is failing by inspecting its elements.

Syntax

Angular

let fixture: ComponentFixture<MyComponent>;
let component: MyComponent;

beforeEach(() => {
  TestBed.configureTestingModule({ declarations: [MyComponent] }).compileComponents();
  fixture = TestBed.createComponent(MyComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

// Access debug element
const debugElement = fixture.debugElement;
// Find element by CSS
const button = debugElement.query(By.css('button'));
// Trigger event
button.triggerEventHandler('click', null);
fixture.detectChanges();

fixture holds the component instance and its rendered template for testing.

debugElement lets you find and interact with elements inside the component's template.

Examples

This finds a button inside the component and simulates a click on it.

Angular

const debugElement = fixture.debugElement;
const button = debugElement.query(By.css('button'));
button.triggerEventHandler('click', null);
fixture.detectChanges();

This checks if the <h1> element contains the text 'Welcome'.

Angular

const debugElement = fixture.debugElement;
const title = debugElement.query(By.css('h1'));
expect(title.nativeElement.textContent).toContain('Welcome');

Sample Program

This test creates a simple counter component. It checks the initial count text and then simulates a button click to verify the count increases.

Angular

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

@Component({
  selector: 'app-counter',
  template: `
    <h1>Counter: {{count}}</h1>
    <button (click)="increment()">Increment</button>
  `
})
class CounterComponent {
  count = 0;
  increment() {
    this.count++;
  }
}

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

  beforeEach(() => {
    TestBed.configureTestingModule({ declarations: [CounterComponent] }).compileComponents();
    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should display initial count', () => {
    const h1 = fixture.debugElement.query(By.css('h1'));
    expect(h1.nativeElement.textContent).toBe('Counter: 0');
  });

  it('should increment count on button click', () => {
    const button = fixture.debugElement.query(By.css('button'));
    button.triggerEventHandler('click', null);
    fixture.detectChanges();
    const h1 = fixture.debugElement.query(By.css('h1'));
    expect(h1.nativeElement.textContent).toBe('Counter: 1');
  });
});

Important Notes

Always call fixture.detectChanges() after changing component state or triggering events to update the view.

Use By.css() to find elements easily by CSS selectors.

Debug elements help you test the component's template without needing a browser.

Summary

Fixtures hold the component and its template for testing.

Debug elements let you find and interact with elements inside the component.

Trigger events and call detectChanges() to test dynamic behavior.