Angular Unit Testing

What is Unit Testing in Angular?

Angular projects come with a testing setup out of the box. TestBed configures a testing module, creates a component fixture, and lets you assert on the rendered DOM and the component instance.

Unit Testing example

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [JobListComponent],
      providers: [{ provide: JobService, useValue: { getJobs: () => of([{ id: '1', title: 'Intern' }]) } }],
    }).compileComponents();

    fixture = TestBed.createComponent(JobListComponent);
    fixture.detectChanges();
  });

  it('renders each job', () => {
    const items = fixture.nativeElement.querySelectorAll('li');
    expect(items.length).toBe(1);
    expect(items[0].textContent).toContain('Intern');
  });
});

Key points to remember

• Standalone components go in imports, not declarations.
• fixture.detectChanges() triggers change detection — without it the template never renders.
• Mock services with useValue so tests do not hit the network.
• fakeAsync with tick() controls timers and debounced code deterministically.

Common mistakes with Unit Testing

• Forgetting detectChanges and asserting on an empty DOM.
• Testing implementation details instead of rendered output.