liveBook · Manning

ComponentFixture

As explained in Pro Angular 16

ComponentFixture is an Angular testing API object that provides access to a component instance, its rendered view, and change-detection operations.

ComponentFixture is the test handle for an Angular component. TestBed.createComponent returns it, allowing tests to reach the component instance, inspect its rendered host element, and synchronize template output with component state. section 29.4.1 section 29.4.2

Use the fixture properties and methods for these tasks:

  • Read or modify the component through componentInstance. section 29.4.1
  • Inspect the template through debugElement, then reach its DOM representation with nativeElement. section 29.4.2
  • Call detectChanges() after changing component state so Angular reevaluates bindings and updates the template. section 29.4.2
  • Use whenStable() when a test must wait for an operation's effects to be fully applied. section 29.4.1

Create a fixture and test a binding

Configure TestBed in beforeEach, create the component, and retain both handles: `let fixture: ComponentFixture<SimpleComponent>; let component: SimpleComponent; fixture = TestBed.createComponent(SimpleComponent); component = fixture.componentInstance;`. To test a rendered product count, locate a span through `fixture.debugElement` and `By.css`, change `component.category`, call `fixture.detectChanges()`, and assert that the span's `textContent` contains the updated count. Without detectChanges(), the template does not reflect the changed category. section 29.4.1 section 29.4.2

Table 29.5. Useful TestBed methods
Name
Description
configureTestingModule
This method is used to configure the Angular testing module.
createComponent
This method is used to create an instance of the component.
compileComponents
This method is used to compile components, as described in the “Testing a Component with an External Template” section.

Review the related TestBed operations for configuring a testing module, creating a component, and compiling components with external templates. section 29.4.1

How Pro Angular 16 covers it

How deep it goes
Explains fixture creation and core inspection methods, stopping short of testing internals beyond change detection and asynchronous stabilization.
Examples
Uses SimpleComponent, a mock product repository, category changes, CSS element queries, and rendered product-count assertions.
What it assumes
Assumes basic Angular components and unit-test structure while configuring TestBed, declarations, injected services, and fixture handles.
What you can do after
Apply it via Angular TestBed to instantiate components, update state, synchronize templates, inspect DOM elements, and assert rendered output.
How it connects
Connects ComponentFixture with TestBed, DebugElement, data binding, DOM inspection, and dependency injection.
Cover of Pro Angular 16
liveBookmanning.com
Read Pro Angular 16 on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Pro Angular 16. The section links point to the parts of the book it draws on.