Unit Testing a Component (TestBed + Mock Service)

Let’s test a component that loads a username from a service. ## Component ```ts import { Component } from '@angular/core'; import { UserService } from './user.service'; @Component({ selector: 'app-greeting', standalone: true, template: `<h1>Hello {{ name }}</h1>`, }) export class GreetingComponent { name = ''; constructor(userService: UserService) { this.name = userService.getName(); } } ``` ## Test idea We do not want to use the real service in a unit test. We mock it. ```ts import { TestBed } from '@angular/core/testing'; import { GreetingComponent } from './greeting.component'; import { UserService } from './user.service'; describe('GreetingComponent', () => { it('shows name from service', () => { TestBed.configureTestingModule({ imports: [GreetingComponent], providers: [ { provide: UserService, useValue: { getName: () => 'Jessica Miller' }, }, ], }); const fixture = TestBed.createComponent(GreetingComponent); fixture.detectChanges(); const el: HTMLElement = fixture.nativeElement; expect(el.textContent).toContain('Hello Jessica Miller'); }); }); ``` ## Why this is clean - component is tested in isolation - predictable output - fast execution > Next: HTTP testing with HttpTestingController.