Component testing basics in Angular - Step-by-Step Execution

Concept Flow - Component testing basics

Write component code

↓

Write test file

↓

Setup TestBed with component

↓

Create component instance

↓

Run tests: check template & logic

↓

Assert expected output or behavior

↓

Test passes or fails

↓

End

This flow shows how Angular component tests are written, set up, run, and checked for expected results.

Execution Sample

Angular

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

describe('MyComponent', () => {
  let fixture: ComponentFixture<MyComponent>;
  beforeEach(() => {
    TestBed.configureTestingModule({ declarations: [MyComponent] }).compileComponents();
    fixture = TestBed.createComponent(MyComponent);
  });
  it('should display title', () => {
    fixture.componentInstance.title = 'Hello';
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Hello');
  });
});

This test creates the component, sets a title, triggers Angular change detection, and checks if the title appears in the template.

Execution Table

Step	Action	Component Instance State	Template Rendered	Test Assertion	Result
1	Configure TestBed with MyComponent	No instance yet	No template	N/A	Setup done
2	Create component instance	title: undefined	Initial template with empty title	N/A	Instance created
3	Set title = 'Hello'	title: 'Hello'	Template not updated yet	N/A	Property set
4	Call fixture.detectChanges()	title: 'Hello'	<h1>Hello</h1> rendered	N/A	Template updated
5	Query <h1> textContent	title: 'Hello'	<h1>Hello</h1>	Check if contains 'Hello'	Pass
6	Test ends	title: 'Hello'	<h1>Hello</h1>	All assertions passed	Test success

💡 Test ends after assertions pass or fail

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
title	undefined	undefined	'Hello'	'Hello'	'Hello'

Key Moments - 2 Insights

Why do we need to call fixture.detectChanges() after setting a property?

Because Angular does not automatically update the template when component properties change in tests. detectChanges() triggers Angular's change detection to update the template, as shown between steps 3 and 4 in the execution_table.

What does TestBed.createComponent() do?

It creates an instance of the component and its template for testing. This is shown in step 2 where the component instance is created but the template is not yet updated.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'title' after step 3?

A null

B undefined

C 'Hello'

D '' (empty string)

💡 Hint

Check the 'Component Instance State' column at step 3 in the execution_table.

At which step does the template update to show the new title?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look at the 'Template Rendered' column in the execution_table to see when

Hello

appears.

If fixture.detectChanges() was not called, what would happen to the test assertion?

A It would fail because the template is not updated

B It would pass because the title is set

C It would throw an error

D It would skip the test

💡 Hint

Refer to the difference between steps 3 and 4 in the execution_table about template updates.

Concept Snapshot

Angular component testing basics:
- Use TestBed to configure and create component
- Create component instance with TestBed.createComponent
- Set component properties directly
- Call fixture.detectChanges() to update template
- Query DOM to check rendered output
- Use expect() to assert behavior

Full Transcript

This visual execution shows how Angular component testing works step-by-step. First, TestBed is configured with the component. Then the component instance is created but the template is not updated yet. When we set a property like title, the template still does not reflect it until fixture.detectChanges() is called. This triggers Angular's change detection and updates the template. Finally, the test queries the DOM to check if the title appears as expected and asserts the result. This process helps ensure the component behaves correctly in isolation.