Sign in
Skip to solution
easyFrontend

What is the fixture.detectChanges() method in Angular testing, and when should you call it?

125 views
01

Understand the problem

Explain the role of manual change detection in unit tests.

testingchange-detection
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

fixture.detectChanges() triggers Angular's change detection on the test component, updating template bindings and executing lifecycle hooks. It must be called manually in tests to reflect model changes in the DOM since test zones don't auto-run change detection.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Calling detectChanges() during state assertions
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component } from '@angular/core';

@Component({
  template: '<div id="box" [class.active]="isActive">Box</div>'
})
class ToggleComponent {
  isActive = false;
}

describe('ToggleComponent', () => {
  it('should render correct class bindings on detectChanges', () => {
    const fixture = TestBed.createComponent(ToggleComponent);
    const comp = fixture.componentInstance;

    fixture.detectChanges();
    let div = fixture.nativeElement.querySelector('#box');
    expect(div.classList.contains('active')).toBeFalse();

    comp.isActive = true;
    expect(div.classList.contains('active')).toBeFalse();

    fixture.detectChanges();
    expect(div.classList.contains('active')).toBeTrue();
  });
});
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 12 of 121 decoded in the Angular track. One more won't hurt.

Back to track