A component is more than a class; it's a bridge between logic and layout. Testing that bridge requires interacting with the DOM.
1The Component Fixture
When you use TestBed.createComponent(), Angular doesn't just return a class instance; it returns a ComponentFixture. This object is a wrapper that provides access to the component instance (componentInstance) and the DOM representation (nativeElement or debugElement). This is your primary tool for 'black-box' testing, where you verify that certain inputs or events result in the correct visual output in the browser.
2Manual Change Detection
One of the most common pitfalls in component testing is forgetting that the test environment is synchronous. Unlike a running application where Angular's Zone.js automatically detects changes, in a unit test, you must manually call fixture.detectChanges(). This tells Angular to run its change detection cycle and update the template. If you're seeing 'old' data in your test assertions, check if you've missed a call to this method.
