コンポーネントテストシナリオ

      
import {Component, signal} from '@angular/core';@Component({  standalone: true,  selector: 'app-banner',  template: '<h1>{{title()}}</h1>',  styles: ['h1 { color: green; font-size: 350%}'],})export class BannerComponent {  title = signal('Test Tour of Heroes');}
    

      
import {ComponentFixture, TestBed} from '@angular/core/testing';import {BannerComponent} from './banner.component';describe('BannerComponent (inline template)', () => {  let component: BannerComponent;  let fixture: ComponentFixture<BannerComponent>;  let h1: HTMLElement;  beforeEach(() => {    TestBed.configureTestingModule({      imports: [BannerComponent],    });    fixture = TestBed.createComponent(BannerComponent);    component = fixture.componentInstance; // BannerComponent test instance    h1 = fixture.nativeElement.querySelector('h1');  });  it('no title in the DOM after createComponent()', () => {    expect(h1.textContent).toEqual('');  });  it('should display original title', () => {    fixture.detectChanges();    expect(h1.textContent).toContain(component.title);  });  it('should display original title after detectChanges()', () => {    fixture.detectChanges();    expect(h1.textContent).toContain(component.title);  });  it('should display a different test title', () => {    component.title = 'Test Title';    fixture.detectChanges();    expect(h1.textContent).toContain('Test Title');  });});
    

      
import {ComponentFixture, TestBed} from '@angular/core/testing';import {BannerComponent} from './banner.component';describe('BannerComponent (inline template)', () => {  let component: BannerComponent;  let fixture: ComponentFixture<BannerComponent>;  let h1: HTMLElement;  beforeEach(() => {    TestBed.configureTestingModule({      imports: [BannerComponent],    });    fixture = TestBed.createComponent(BannerComponent);    component = fixture.componentInstance; // BannerComponent test instance    h1 = fixture.nativeElement.querySelector('h1');  });  it('no title in the DOM after createComponent()', () => {    expect(h1.textContent).toEqual('');  });  it('should display original title', () => {    fixture.detectChanges();    expect(h1.textContent).toContain(component.title);  });  it('should display original title after detectChanges()', () => {    fixture.detectChanges();    expect(h1.textContent).toContain(component.title);  });  it('should display a different test title', () => {    component.title = 'Test Title';    fixture.detectChanges();    expect(h1.textContent).toContain('Test Title');  });});
    

      
expected '' to contain 'Test Tour of Heroes'.
    

      
import {ComponentFixture, TestBed} from '@angular/core/testing';import {BannerComponent} from './banner.component';describe('BannerComponent (inline template)', () => {  let component: BannerComponent;  let fixture: ComponentFixture<BannerComponent>;  let h1: HTMLElement;  beforeEach(() => {    TestBed.configureTestingModule({      imports: [BannerComponent],    });    fixture = TestBed.createComponent(BannerComponent);    component = fixture.componentInstance; // BannerComponent test instance    h1 = fixture.nativeElement.querySelector('h1');  });  it('no title in the DOM after createComponent()', () => {    expect(h1.textContent).toEqual('');  });  it('should display original title', () => {    fixture.detectChanges();    expect(h1.textContent).toContain(component.title);  });  it('should display original title after detectChanges()', () => {    fixture.detectChanges();    expect(h1.textContent).toContain(component.title);  });  it('should display a different test title', () => {    component.title = 'Test Title';    fixture.detectChanges();    expect(h1.textContent).toContain('Test Title');  });});
    

      
import {ComponentFixture, TestBed} from '@angular/core/testing';import {BannerComponent} from './banner.component';describe('BannerComponent (inline template)', () => {  let component: BannerComponent;  let fixture: ComponentFixture<BannerComponent>;  let h1: HTMLElement;  beforeEach(() => {    TestBed.configureTestingModule({      imports: [BannerComponent],    });    fixture = TestBed.createComponent(BannerComponent);    component = fixture.componentInstance; // BannerComponent test instance    h1 = fixture.nativeElement.querySelector('h1');  });  it('no title in the DOM after createComponent()', () => {    expect(h1.textContent).toEqual('');  });  it('should display original title', () => {    fixture.detectChanges();    expect(h1.textContent).toContain(component.title);  });  it('should display original title after detectChanges()', () => {    fixture.detectChanges();    expect(h1.textContent).toContain(component.title);  });  it('should display a different test title', () => {    component.title = 'Test Title';    fixture.detectChanges();    expect(h1.textContent).toContain('Test Title');  });});
    

      
import {ComponentFixture, TestBed} from '@angular/core/testing';import {BannerComponent} from './banner.component';describe('BannerComponent (inline template)', () => {  let component: BannerComponent;  let fixture: ComponentFixture<BannerComponent>;  let h1: HTMLElement;  beforeEach(() => {    TestBed.configureTestingModule({      imports: [BannerComponent],    });    fixture = TestBed.createComponent(BannerComponent);    component = fixture.componentInstance; // BannerComponent test instance    h1 = fixture.nativeElement.querySelector('h1');  });  it('no title in the DOM after createComponent()', () => {    expect(h1.textContent).toEqual('');  });  it('should display original title', () => {    fixture.detectChanges();    expect(h1.textContent).toContain(component.title);  });  it('should display original title after detectChanges()', () => {    fixture.detectChanges();    expect(h1.textContent).toContain(component.title);  });  it('should display a different test title', () => {    component.title = 'Test Title';    fixture.detectChanges();    expect(h1.textContent).toContain('Test Title');  });});
    

      
import {ComponentFixtureAutoDetect} from '@angular/core/testing';import {ComponentFixture, TestBed} from '@angular/core/testing';import {BannerComponent} from './banner.component';describe('BannerComponent (AutoChangeDetect)', () => {  let comp: BannerComponent;  let fixture: ComponentFixture<BannerComponent>;  let h1: HTMLElement;  beforeEach(() => {    TestBed.configureTestingModule({      providers: [{provide: ComponentFixtureAutoDetect, useValue: true}],    });    fixture = TestBed.createComponent(BannerComponent);    comp = fixture.componentInstance;    h1 = fixture.nativeElement.querySelector('h1');  });  it('should display original title', () => {    // Hooray! No `fixture.detectChanges()` needed    expect(h1.textContent).toContain(comp.title);  });  it('should still see original title after comp.title change', async () => {    const oldTitle = comp.title;    const newTitle = 'Test Title';    comp.title.set(newTitle);    // Displayed title is old because Angular didn't yet run change detection    expect(h1.textContent).toContain(oldTitle);    await fixture.whenStable();    expect(h1.textContent).toContain(newTitle);  });  it('should display updated title after detectChanges', () => {    comp.title.set('Test Title');    fixture.detectChanges(); // detect changes explicitly    expect(h1.textContent).toContain(comp.title);  });});
    

      
import {ComponentFixtureAutoDetect} from '@angular/core/testing';import {ComponentFixture, TestBed} from '@angular/core/testing';import {BannerComponent} from './banner.component';describe('BannerComponent (AutoChangeDetect)', () => {  let comp: BannerComponent;  let fixture: ComponentFixture<BannerComponent>;  let h1: HTMLElement;  beforeEach(() => {    TestBed.configureTestingModule({      providers: [{provide: ComponentFixtureAutoDetect, useValue: true}],    });    fixture = TestBed.createComponent(BannerComponent);    comp = fixture.componentInstance;    h1 = fixture.nativeElement.querySelector('h1');  });  it('should display original title', () => {    // Hooray! No `fixture.detectChanges()` needed    expect(h1.textContent).toContain(comp.title);  });  it('should still see original title after comp.title change', async () => {    const oldTitle = comp.title;    const newTitle = 'Test Title';    comp.title.set(newTitle);    // Displayed title is old because Angular didn't yet run change detection    expect(h1.textContent).toContain(oldTitle);    await fixture.whenStable();    expect(h1.textContent).toContain(newTitle);  });  it('should display updated title after detectChanges', () => {    comp.title.set('Test Title');    fixture.detectChanges(); // detect changes explicitly    expect(h1.textContent).toContain(comp.title);  });});
    

      
import {ComponentFixtureAutoDetect} from '@angular/core/testing';import {ComponentFixture, TestBed} from '@angular/core/testing';import {BannerComponent} from './banner.component';describe('BannerComponent (AutoChangeDetect)', () => {  let comp: BannerComponent;  let fixture: ComponentFixture<BannerComponent>;  let h1: HTMLElement;  beforeEach(() => {    TestBed.configureTestingModule({      providers: [{provide: ComponentFixtureAutoDetect, useValue: true}],    });    fixture = TestBed.createComponent(BannerComponent);    comp = fixture.componentInstance;    h1 = fixture.nativeElement.querySelector('h1');  });  it('should display original title', () => {    // Hooray! No `fixture.detectChanges()` needed    expect(h1.textContent).toContain(comp.title);  });  it('should still see original title after comp.title change', async () => {    const oldTitle = comp.title;    const newTitle = 'Test Title';    comp.title.set(newTitle);    // Displayed title is old because Angular didn't yet run change detection    expect(h1.textContent).toContain(oldTitle);    await fixture.whenStable();    expect(h1.textContent).toContain(newTitle);  });  it('should display updated title after detectChanges', () => {    comp.title.set('Test Title');    fixture.detectChanges(); // detect changes explicitly    expect(h1.textContent).toContain(comp.title);  });});
    

      
import {HttpClient, HttpHandler, provideHttpClient} from '@angular/common/http';import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';import {fakeAsync, TestBed, tick} from '@angular/core/testing';import {provideRouter, Router} from '@angular/router';import {RouterTestingHarness} from '@angular/router/testing';import {asyncData, click} from '../../testing';import {Hero} from '../model/hero';import {sharedImports} from '../shared/shared';import {HeroDetailComponent} from './hero-detail.component';import {HeroDetailService} from './hero-detail.service';import {HeroListComponent} from './hero-list.component';////// Testing Vars //////let component: HeroDetailComponent;let harness: RouterTestingHarness;let page: Page;////// Tests //////describe('HeroDetailComponent', () => {  describe('with HeroModule setup', heroModuleSetup);  describe('when override its provided HeroDetailService', overrideSetup);  describe('with FormsModule setup', formsModuleSetup);  describe('with SharedModule setup', sharedModuleSetup);});///////////////////const testHero = getTestHeroes()[0];function overrideSetup() {  class HeroDetailServiceSpy {    testHero: Hero = {...testHero};    /* emit cloned test hero */    getHero = jasmine      .createSpy('getHero')      .and.callFake(() => asyncData(Object.assign({}, this.testHero)));    /* emit clone of test hero, with changes merged in */    saveHero = jasmine      .createSpy('saveHero')      .and.callFake((hero: Hero) => asyncData(Object.assign(this.testHero, hero)));  }  beforeEach(async () => {    await TestBed.configureTestingModule(      Object.assign({}, appConfig, {        imports: [HeroDetailComponent, HeroListComponent],        providers: [          provideRouter([            {path: 'heroes', component: HeroListComponent},            {path: 'heroes/:id', component: HeroDetailComponent},          ]),          HttpClient,          HttpHandler,          // HeroDetailService at this level is IRRELEVANT!          {provide: HeroDetailService, useValue: {}},        ],      }),    )      .overrideComponent(HeroDetailComponent, {        set: {providers: [{provide: HeroDetailService, useClass: HeroDetailServiceSpy}]},      })      .compileComponents();  });  let hdsSpy: HeroDetailServiceSpy;  beforeEach(async () => {    harness = await RouterTestingHarness.create();    component = await harness.navigateByUrl(`/heroes/${testHero.id}`, HeroDetailComponent);    page = new Page();    // get the component's injected HeroDetailServiceSpy    hdsSpy = harness.routeDebugElement!.injector.get(HeroDetailService) as any;    harness.detectChanges();  });  it('should have called `getHero`', () => {    expect(hdsSpy.getHero.calls.count())      .withContext('getHero called once')      .toBe(1, 'getHero called once');  });  it("should display stub hero's name", () => {    expect(page.nameDisplay.textContent).toBe(hdsSpy.testHero.name);  });  it('should save stub hero change', fakeAsync(() => {    const origName = hdsSpy.testHero.name;    const newName = 'New Name';    page.nameInput.value = newName;    page.nameInput.dispatchEvent(new Event('input')); // tell Angular    expect(component.hero.name).withContext('component hero has new name').toBe(newName);    expect(hdsSpy.testHero.name).withContext('service hero unchanged before save').toBe(origName);    click(page.saveBtn);    expect(hdsSpy.saveHero.calls.count()).withContext('saveHero called once').toBe(1);    tick(); // wait for async save to complete    expect(hdsSpy.testHero.name).withContext('service hero has new name after save').toBe(newName);    expect(TestBed.inject(Router).url).toEqual('/heroes');  }));}////////////////////import {getTestHeroes} from '../model/testing/test-hero.service';const firstHero = getTestHeroes()[0];function heroModuleSetup() {  beforeEach(async () => {    await TestBed.configureTestingModule(      Object.assign({}, appConfig, {        imports: [HeroDetailComponent, HeroListComponent],        providers: [          provideRouter([            {path: 'heroes/:id', component: HeroDetailComponent},            {path: 'heroes', component: HeroListComponent},          ]),          provideHttpClient(),          provideHttpClientTesting(),        ],      }),    ).compileComponents();  });  describe('when navigate to existing hero', () => {    let expectedHero: Hero;    beforeEach(async () => {      expectedHero = firstHero;      await createComponent(expectedHero.id);    });    it("should display that hero's name", () => {      expect(page.nameDisplay.textContent).toBe(expectedHero.name);    });    it('should navigate when click cancel', () => {      click(page.cancelBtn);      expect(TestBed.inject(Router).url).toEqual(`/heroes/${expectedHero.id}`);    });    it('should save when click save but not navigate immediately', () => {      click(page.saveBtn);      expect(TestBed.inject(HttpTestingController).expectOne({method: 'PUT', url: 'api/heroes'}));      expect(TestBed.inject(Router).url).toEqual('/heroes/41');    });    it('should navigate when click save and save resolves', fakeAsync(() => {      click(page.saveBtn);      tick(); // wait for async save to complete      expect(TestBed.inject(Router).url).toEqual('/heroes/41');    }));    it('should convert hero name to Title Case', async () => {      harness.fixture.autoDetectChanges();      // get the name's input and display elements from the DOM      const hostElement: HTMLElement = harness.routeNativeElement!;      const nameInput: HTMLInputElement = hostElement.querySelector('input')!;      const nameDisplay: HTMLElement = hostElement.querySelector('span')!;      // simulate user entering a new name into the input box      nameInput.value = 'quick BROWN  fOx';      // Dispatch a DOM event so that Angular learns of input value change.      nameInput.dispatchEvent(new Event('input'));      // Wait for Angular to update the display binding through the title pipe      await harness.fixture.whenStable();      expect(nameDisplay.textContent).toBe('Quick Brown  Fox');    });  });  describe('when navigate to non-existent hero id', () => {    beforeEach(async () => {      await createComponent(999);    });    it('should try to navigate back to hero list', () => {      expect(TestBed.inject(Router).url).toEqual('/heroes');    });  });}/////////////////////import {FormsModule} from '@angular/forms';import {TitleCasePipe} from '../shared/title-case.pipe';import {appConfig} from '../app.config';function formsModuleSetup() {  beforeEach(async () => {    await TestBed.configureTestingModule(      Object.assign({}, appConfig, {        imports: [FormsModule, HeroDetailComponent, TitleCasePipe],        providers: [          provideHttpClient(),          provideHttpClientTesting(),          provideRouter([{path: 'heroes/:id', component: HeroDetailComponent}]),        ],      }),    ).compileComponents();  });  it("should display 1st hero's name", async () => {    const expectedHero = firstHero;    await createComponent(expectedHero.id).then(() => {      expect(page.nameDisplay.textContent).toBe(expectedHero.name);    });  });}///////////////////////function sharedModuleSetup() {  beforeEach(async () => {    await TestBed.configureTestingModule(      Object.assign({}, appConfig, {        imports: [HeroDetailComponent, sharedImports],        providers: [          provideRouter([{path: 'heroes/:id', component: HeroDetailComponent}]),          provideHttpClient(),          provideHttpClientTesting(),        ],      }),    ).compileComponents();  });  it("should display 1st hero's name", async () => {    const expectedHero = firstHero;    await createComponent(expectedHero.id).then(() => {      expect(page.nameDisplay.textContent).toBe(expectedHero.name);    });  });}/////////// Helpers //////** Create the HeroDetailComponent, initialize it, set test variables  */async function createComponent(id: number) {  harness = await RouterTestingHarness.create();  component = await harness.navigateByUrl(`/heroes/${id}`, HeroDetailComponent);  page = new Page();  const request = TestBed.inject(HttpTestingController).expectOne(`api/heroes/?id=${id}`);  const hero = getTestHeroes().find((h) => h.id === Number(id));  request.flush(hero ? [hero] : []);  harness.detectChanges();}class Page {  // getter properties wait to query the DOM until called.  get buttons() {    return this.queryAll<HTMLButtonElement>('button');  }  get saveBtn() {    return this.buttons[0];  }  get cancelBtn() {    return this.buttons[1];  }  get nameDisplay() {    return this.query<HTMLElement>('span');  }  get nameInput() {    return this.query<HTMLInputElement>('input');  }  //// query helpers ////  private query<T>(selector: string): T {    return harness.routeNativeElement!.querySelector(selector)! as T;  }  private queryAll<T>(selector: string): T[] {    return harness.routeNativeElement!.querySelectorAll(selector) as any as T[];  }}
    

      
import {Component} from '@angular/core';@Component({  standalone: true,  selector: 'app-banner',  templateUrl: './banner-external.component.html',  styleUrls: ['./banner-external.component.css'],})export class BannerComponent {  title = 'Test Tour of Heroes';}
    

      
import {Component, OnInit, signal} from '@angular/core';import {UserService} from '../model/user.service';@Component({  standalone: true,  selector: 'app-welcome',  template: '<h3 class="welcome"><i>{{welcome()}}</i></h3>',})export class WelcomeComponent implements OnInit {  welcome = signal('');  constructor(private userService: UserService) {}  ngOnInit(): void {    this.welcome.set(      this.userService.isLoggedIn() ? 'Welcome, ' + this.userService.user().name : 'Please log in.',    );  }}
    

      
import {ComponentFixture, inject, TestBed} from '@angular/core/testing';import {UserService} from '../model/user.service';import {WelcomeComponent} from './welcome.component';class MockUserService {  isLoggedIn = true;  user = {name: 'Test User'};}describe('WelcomeComponent', () => {  let comp: WelcomeComponent;  let fixture: ComponentFixture<WelcomeComponent>;  let componentUserService: UserService; // the actually injected service  let userService: UserService; // the TestBed injected service  let el: HTMLElement; // the DOM element with the welcome message  beforeEach(() => {    fixture = TestBed.createComponent(WelcomeComponent);    fixture.autoDetectChanges();    comp = fixture.componentInstance;    // UserService actually injected into the component    userService = fixture.debugElement.injector.get(UserService);    componentUserService = userService;    // UserService from the root injector    userService = TestBed.inject(UserService);    //  get the "welcome" element by CSS selector (e.g., by class name)    el = fixture.nativeElement.querySelector('.welcome');  });  it('should welcome the user', async () => {    await fixture.whenStable();    const content = el.textContent;    expect(content).withContext('"Welcome ..."').toContain('Welcome');    expect(content).withContext('expected name').toContain('Test User');  });  it('should welcome "Bubba"', async () => {    userService.user.set({name: 'Bubba'}); // welcome message hasn't been shown yet    await fixture.whenStable();    expect(el.textContent).toContain('Bubba');  });  it('should request login if not logged in', async () => {    userService.isLoggedIn.set(false); // welcome message hasn't been shown yet    await fixture.whenStable();    const content = el.textContent;    expect(content).withContext('not welcomed').not.toContain('Welcome');    expect(content)      .withContext('"log in"')      .toMatch(/log in/i);  });  it("should inject the component's UserService instance", inject(    [UserService],    (service: UserService) => {      expect(service).toBe(componentUserService);    },  ));  it('TestBed and Component UserService should be the same', () => {    expect(userService).toBe(componentUserService);  });});
    

      
import {ComponentFixture, inject, TestBed} from '@angular/core/testing';import {UserService} from '../model/user.service';import {WelcomeComponent} from './welcome.component';class MockUserService {  isLoggedIn = true;  user = {name: 'Test User'};}describe('WelcomeComponent', () => {  let comp: WelcomeComponent;  let fixture: ComponentFixture<WelcomeComponent>;  let componentUserService: UserService; // the actually injected service  let userService: UserService; // the TestBed injected service  let el: HTMLElement; // the DOM element with the welcome message  beforeEach(() => {    fixture = TestBed.createComponent(WelcomeComponent);    fixture.autoDetectChanges();    comp = fixture.componentInstance;    // UserService actually injected into the component    userService = fixture.debugElement.injector.get(UserService);    componentUserService = userService;    // UserService from the root injector    userService = TestBed.inject(UserService);    //  get the "welcome" element by CSS selector (e.g., by class name)    el = fixture.nativeElement.querySelector('.welcome');  });  it('should welcome the user', async () => {    await fixture.whenStable();    const content = el.textContent;    expect(content).withContext('"Welcome ..."').toContain('Welcome');    expect(content).withContext('expected name').toContain('Test User');  });  it('should welcome "Bubba"', async () => {    userService.user.set({name: 'Bubba'}); // welcome message hasn't been shown yet    await fixture.whenStable();    expect(el.textContent).toContain('Bubba');  });  it('should request login if not logged in', async () => {    userService.isLoggedIn.set(false); // welcome message hasn't been shown yet    await fixture.whenStable();    const content = el.textContent;    expect(content).withContext('not welcomed').not.toContain('Welcome');    expect(content)      .withContext('"log in"')      .toMatch(/log in/i);  });  it("should inject the component's UserService instance", inject(    [UserService],    (service: UserService) => {      expect(service).toBe(componentUserService);    },  ));  it('TestBed and Component UserService should be the same', () => {    expect(userService).toBe(componentUserService);  });});
    

      
import {ComponentFixture, inject, TestBed} from '@angular/core/testing';import {UserService} from '../model/user.service';import {WelcomeComponent} from './welcome.component';class MockUserService {  isLoggedIn = true;  user = {name: 'Test User'};}describe('WelcomeComponent', () => {  let comp: WelcomeComponent;  let fixture: ComponentFixture<WelcomeComponent>;  let componentUserService: UserService; // the actually injected service  let userService: UserService; // the TestBed injected service  let el: HTMLElement; // the DOM element with the welcome message  beforeEach(() => {    fixture = TestBed.createComponent(WelcomeComponent);    fixture.autoDetectChanges();    comp = fixture.componentInstance;    // UserService actually injected into the component    userService = fixture.debugElement.injector.get(UserService);    componentUserService = userService;    // UserService from the root injector    userService = TestBed.inject(UserService);    //  get the "welcome" element by CSS selector (e.g., by class name)    el = fixture.nativeElement.querySelector('.welcome');  });  it('should welcome the user', async () => {    await fixture.whenStable();    const content = el.textContent;    expect(content).withContext('"Welcome ..."').toContain('Welcome');    expect(content).withContext('expected name').toContain('Test User');  });  it('should welcome "Bubba"', async () => {    userService.user.set({name: 'Bubba'}); // welcome message hasn't been shown yet    await fixture.whenStable();    expect(el.textContent).toContain('Bubba');  });  it('should request login if not logged in', async () => {    userService.isLoggedIn.set(false); // welcome message hasn't been shown yet    await fixture.whenStable();    const content = el.textContent;    expect(content).withContext('not welcomed').not.toContain('Welcome');    expect(content)      .withContext('"log in"')      .toMatch(/log in/i);  });  it("should inject the component's UserService instance", inject(    [UserService],    (service: UserService) => {      expect(service).toBe(componentUserService);    },  ));  it('TestBed and Component UserService should be the same', () => {    expect(userService).toBe(componentUserService);  });});
    

      
import {ComponentFixture, inject, TestBed} from '@angular/core/testing';import {UserService} from '../model/user.service';import {WelcomeComponent} from './welcome.component';class MockUserService {  isLoggedIn = true;  user = {name: 'Test User'};}describe('WelcomeComponent', () => {  let comp: WelcomeComponent;  let fixture: ComponentFixture<WelcomeComponent>;  let componentUserService: UserService; // the actually injected service  let userService: UserService; // the TestBed injected service  let el: HTMLElement; // the DOM element with the welcome message  beforeEach(() => {    fixture = TestBed.createComponent(WelcomeComponent);    fixture.autoDetectChanges();    comp = fixture.componentInstance;    // UserService actually injected into the component    userService = fixture.debugElement.injector.get(UserService);    componentUserService = userService;    // UserService from the root injector    userService = TestBed.inject(UserService);    //  get the "welcome" element by CSS selector (e.g., by class name)    el = fixture.nativeElement.querySelector('.welcome');  });  it('should welcome the user', async () => {    await fixture.whenStable();    const content = el.textContent;    expect(content).withContext('"Welcome ..."').toContain('Welcome');    expect(content).withContext('expected name').toContain('Test User');  });  it('should welcome "Bubba"', async () => {    userService.user.set({name: 'Bubba'}); // welcome message hasn't been shown yet    await fixture.whenStable();    expect(el.textContent).toContain('Bubba');  });  it('should request login if not logged in', async () => {    userService.isLoggedIn.set(false); // welcome message hasn't been shown yet    await fixture.whenStable();    const content = el.textContent;    expect(content).withContext('not welcomed').not.toContain('Welcome');    expect(content)      .withContext('"log in"')      .toMatch(/log in/i);  });  it("should inject the component's UserService instance", inject(    [UserService],    (service: UserService) => {      expect(service).toBe(componentUserService);    },  ));  it('TestBed and Component UserService should be the same', () => {    expect(userService).toBe(componentUserService);  });});
    

      
import {Component, OnInit, signal} from '@angular/core';import {AsyncPipe} from '@angular/common';import {sharedImports} from '../shared/shared';import {Observable, of} from 'rxjs';import {catchError, startWith} from 'rxjs/operators';import {TwainService} from './twain.service';@Component({  standalone: true,  selector: 'twain-quote',  template: ` <p class="twain">      <i>{{ quote | async }}</i>    </p>    <button type="button" (click)="getQuote()">Next quote</button>    @if (errorMessage()) {      <p class="error">{{ errorMessage() }}</p>    }`,  styles: ['.twain { font-style: italic; } .error { color: red; }'],  imports: [AsyncPipe, sharedImports],})export class TwainComponent implements OnInit {  errorMessage = signal('');  quote?: Observable<string>;  constructor(private twainService: TwainService) {}  ngOnInit(): void {    this.getQuote();  }  getQuote() {    this.errorMessage.set('');    this.quote = this.twainService.getQuote().pipe(      startWith('...'),      catchError((err: any) => {        this.errorMessage.set(err.message || err.toString());        return of('...'); // reset message to placeholder      }),    );  }}
    

      
import {Component, OnInit, signal} from '@angular/core';import {AsyncPipe} from '@angular/common';import {sharedImports} from '../shared/shared';import {Observable, of} from 'rxjs';import {catchError, startWith} from 'rxjs/operators';import {TwainService} from './twain.service';@Component({  standalone: true,  selector: 'twain-quote',  template: ` <p class="twain">      <i>{{ quote | async }}</i>    </p>    <button type="button" (click)="getQuote()">Next quote</button>    @if (errorMessage()) {      <p class="error">{{ errorMessage() }}</p>    }`,  styles: ['.twain { font-style: italic; } .error { color: red; }'],  imports: [AsyncPipe, sharedImports],})export class TwainComponent implements OnInit {  errorMessage = signal('');  quote?: Observable<string>;  constructor(private twainService: TwainService) {}  ngOnInit(): void {    this.getQuote();  }  getQuote() {    this.errorMessage.set('');    this.quote = this.twainService.getQuote().pipe(      startWith('...'),      catchError((err: any) => {        this.errorMessage.set(err.message || err.toString());        return of('...'); // reset message to placeholder      }),    );  }}
    

      
import {fakeAsync, ComponentFixture, TestBed, tick, waitForAsync} from '@angular/core/testing';import {asyncData, asyncError} from '../../testing';import {Subject, defer, of, throwError} from 'rxjs';import {last} from 'rxjs/operators';import {TwainComponent} from './twain.component';import {TwainService} from './twain.service';describe('TwainComponent', () => {  let component: TwainComponent;  let fixture: ComponentFixture<TwainComponent>;  let getQuoteSpy: jasmine.Spy;  let quoteEl: HTMLElement;  let testQuote: string;  // Helper function to get the error message element value  // An *ngIf keeps it out of the DOM until there is an error  const errorMessage = () => {    const el = fixture.nativeElement.querySelector('.error');    return el ? el.textContent : null;  };  beforeEach(() => {    TestBed.configureTestingModule({      imports: [TwainComponent],      providers: [TwainService],    });    testQuote = 'Test Quote';    // Create a fake TwainService object with a `getQuote()` spy    const twainService = TestBed.inject(TwainService);    // Make the spy return a synchronous Observable with the test data    getQuoteSpy = spyOn(twainService, 'getQuote').and.returnValue(of(testQuote));    fixture = TestBed.createComponent(TwainComponent);    fixture.autoDetectChanges();    component = fixture.componentInstance;    quoteEl = fixture.nativeElement.querySelector('.twain');  });  describe('when test with synchronous observable', () => {    it('should not show quote before OnInit', () => {      expect(quoteEl.textContent).withContext('nothing displayed').toBe('');      expect(errorMessage()).withContext('should not show error element').toBeNull();      expect(getQuoteSpy.calls.any()).withContext('getQuote not yet called').toBe(false);    });    // The quote would not be immediately available if the service were truly async.    it('should show quote after component initialized', async () => {      await fixture.whenStable(); // onInit()      // sync spy result shows testQuote immediately after init      expect(quoteEl.textContent).toBe(testQuote);      expect(getQuoteSpy.calls.any()).withContext('getQuote called').toBe(true);    });    // The error would not be immediately available if the service were truly async.    // Use `fakeAsync` because the component error calls `setTimeout`    it('should display error when TwainService fails', fakeAsync(() => {      // tell spy to return an error observable after a timeout      getQuoteSpy.and.returnValue(        defer(() => {          return new Promise((resolve, reject) => {            setTimeout(() => {              reject('TwainService test failure');            });          });        }),      );      fixture.detectChanges(); // onInit()      // sync spy errors immediately after init      tick(); // flush the setTimeout()      fixture.detectChanges(); // update errorMessage within setTimeout()      expect(errorMessage())        .withContext('should display error')        .toMatch(/test failure/);      expect(quoteEl.textContent).withContext('should show placeholder').toBe('...');    }));  });  describe('when test with asynchronous observable', () => {    beforeEach(() => {      // Simulate delayed observable values with the `asyncData()` helper      getQuoteSpy.and.returnValue(asyncData(testQuote));    });    it('should not show quote before OnInit', () => {      expect(quoteEl.textContent).withContext('nothing displayed').toBe('');      expect(errorMessage()).withContext('should not show error element').toBeNull();      expect(getQuoteSpy.calls.any()).withContext('getQuote not yet called').toBe(false);    });    it('should still not show quote after component initialized', () => {      fixture.detectChanges();      // getQuote service is async => still has not returned with quote      // so should show the start value, '...'      expect(quoteEl.textContent).withContext('should show placeholder').toBe('...');      expect(errorMessage()).withContext('should not show error').toBeNull();      expect(getQuoteSpy.calls.any()).withContext('getQuote called').toBe(true);    });    it('should show quote after getQuote (fakeAsync)', fakeAsync(() => {      fixture.detectChanges(); // ngOnInit()      expect(quoteEl.textContent).withContext('should show placeholder').toBe('...');      tick(); // flush the observable to get the quote      fixture.detectChanges(); // update view      expect(quoteEl.textContent).withContext('should show quote').toBe(testQuote);      expect(errorMessage()).withContext('should not show error').toBeNull();    }));    it('should show quote after getQuote (async)', async () => {      fixture.detectChanges(); // ngOnInit()      expect(quoteEl.textContent).withContext('should show placeholder').toBe('...');      await fixture.whenStable();      // wait for async getQuote      fixture.detectChanges(); // update view with quote      expect(quoteEl.textContent).toBe(testQuote);      expect(errorMessage()).withContext('should not show error').toBeNull();    });    it('should display error when TwainService fails', fakeAsync(() => {      // tell spy to return an async error observable      getQuoteSpy.and.returnValue(asyncError<string>('TwainService test failure'));      fixture.detectChanges();      tick(); // component shows error after a setTimeout()      fixture.detectChanges(); // update error message      expect(errorMessage())        .withContext('should display error')        .toMatch(/test failure/);      expect(quoteEl.textContent).withContext('should show placeholder').toBe('...');    }));  });});
    

      
import {fakeAsync, ComponentFixture, TestBed, tick, waitForAsync} from '@angular/core/testing';import {asyncData, asyncError} from '../../testing';import {Subject, defer, of, throwError} from 'rxjs';import {last} from 'rxjs/operators';import {TwainComponent} from './twain.component';import {TwainService} from './twain.service';describe('TwainComponent', () => {  let component: TwainComponent;  let fixture: ComponentFixture<TwainComponent>;  let getQuoteSpy: jasmine.Spy;  let quoteEl: HTMLElement;  let testQuote: string;  // Helper function to get the error message element value  // An *ngIf keeps it out of the DOM until there is an error  const errorMessage = () => {    const el = fixture.nativeElement.querySelector('.error');    return el ? el.textContent : null;  };  beforeEach(() => {    TestBed.configureTestingModule({      imports: [TwainComponent],      providers: [TwainService],    });    testQuote = 'Test Quote';    // Create a fake TwainService object with a `getQuote()` spy    const twainService = TestBed.inject(TwainService);    // Make the spy return a synchronous Observable with the test data    getQuoteSpy = spyOn(twainService, 'getQuote').and.returnValue(of(testQuote));    fixture = TestBed.createComponent(TwainComponent);    fixture.autoDetectChanges();    component = fixture.componentInstance;    quoteEl = fixture.nativeElement.querySelector('.twain');  });  describe('when test with synchronous observable', () => {    it('should not show quote before OnInit', () => {      expect(quoteEl.textContent).withContext('nothing displayed').toBe('');      expect(errorMessage()).withContext('should not show error element').toBeNull();      expect(getQuoteSpy.calls.any()).withContext('getQuote not yet called').toBe(false);    });    // The quote would not be immediately available if the service were truly async.    it('should show quote after component initialized', async () => {      await fixture.whenStable(); // onInit()      // sync spy result shows testQuote immediately after init      expect(quoteEl.textContent).toBe(testQuote);      expect(getQuoteSpy.calls.any()).withContext('getQuote called').toBe(true);    });    // The error would not be immediately available if the service were truly async.    // Use `fakeAsync` because the component error calls `setTimeout`    it('should display error when TwainService fails', fakeAsync(() => {      // tell spy to return an error observable after a timeout      getQuoteSpy.and.returnValue(        defer(() => {          return new Promise((resolve, reject) => {            setTimeout(() => {              reject('TwainService test failure');            });          });        }),      );      fixture.detectChanges(); // onInit()      // sync spy errors immediately after init      tick(); // flush the setTimeout()      fixture.detectChanges(); // update errorMessage within setTimeout()      expect(errorMessage())        .withContext('should display error')        .toMatch(/test failure/);      expect(quoteEl.textContent).withContext('should show placeholder').toBe('...');    }));  });  describe('when test with asynchronous observable', () => {    beforeEach(() => {      // Simulate delayed observable values with the `asyncData()` helper      getQuoteSpy.and.returnValue(asyncData(testQuote));    });    it('should not show quote before OnInit', () => {      expect(quoteEl.textContent).withContext('nothing displayed').toBe('');      expect(errorMessage()).withContext('should not show error element').toBeNull();      expect(getQuoteSpy.calls.any()).withContext('getQuote not yet called').toBe(false);    });    it('should still not show quote after component initialized', () => {      fixture.detectChanges();      // getQuote service is async => still has not returned with quote      // so should show the start value, '...'      expect(quoteEl.textContent).withContext('should show placeholder').toBe('...');      expect(errorMessage()).withContext('should not show error').toBeNull();      expect(getQuoteSpy.calls.any()).withContext('getQuote called').toBe(true);    });    it('should show quote after getQuote (fakeAsync)', fakeAsync(() => {      fixture.detectChanges(); // ngOnInit()      expect(quoteEl.textContent).withContext('should show placeholder').toBe('...');      tick(); // flush the observable to get the quote      fixture.detectChanges(); // update view      expect(quoteEl.textContent).withContext('should show quote').toBe(testQuote);      expect(errorMessage()).withContext('should not show error').toBeNull();    }));    it('should show quote after getQuote (async)', async () => {      fixture.detectChanges(); // ngOnInit()      expect(quoteEl.textContent).withContext('should show placeholder').toBe('...');      await fixture.whenStable();      // wait for async getQuote      fixture.detectChanges(); // update view with quote      expect(quoteEl.textContent).toBe(testQuote);      expect(errorMessage()).withContext('should not show error').toBeNull();    });    it('should display error when TwainService fails', fakeAsync(() => {      // tell spy to return an async error observable      getQuoteSpy.and.returnValue(asyncError<string>('TwainService test failure'));      fixture.detectChanges();      tick(); // component shows error after a setTimeout()      fixture.detectChanges(); // update error message      expect(errorMessage())        .withContext('should display error')        .toMatch(/test failure/);      expect(quoteEl.textContent).withContext('should show placeholder').toBe('...');    }));  });});
    

      
import {fakeAsync, ComponentFixture, TestBed, tick, waitForAsync} from '@angular/core/testing';import {asyncData, asyncError} from '../../testing';import {Subject, defer, of, throwError} from 'rxjs';import {last} from 'rxjs/operators';import {TwainComponent} from './twain.component';import {TwainService} from './twain.service';describe('TwainComponent', () => {  let component: TwainComponent;  let fixture: ComponentFixture<TwainComponent>;  let getQuoteSpy: jasmine.Spy;  let quoteEl: HTMLElement;  let testQuote: string;  // Helper function to get the error message element value  // An *ngIf keeps it out of the DOM until there is an error  const errorMessage = () => {    const el = fixture.nativeElement.querySelector('.error');    return el ? el.textContent : null;  };  beforeEach(() => {    TestBed.configureTestingModule({      imports: [TwainComponent],      providers: [TwainService],    });    testQuote = 'Test Quote';    // Create a fake TwainService object with a `getQuote()` spy    const twainService = TestBed.inject(TwainService);    // Make the spy return a synchronous Observable with the test data    getQuoteSpy = spyOn(twainService, 'getQuote').and.returnValue(of(testQuote));    fixture = TestBed.createComponent(TwainComponent);    fixture.autoDetectChanges();    component = fixture.componentInstance;    quoteEl = fixture.nativeElement.querySelector('.twain');  });  describe('when test with synchronous observable', () => {    it('should not show quote before OnInit', () => {      expect(quoteEl.textContent).withContext('nothing displayed').toBe('');      expect(errorMessage()).withContext('should not show error element').toBeNull();      expect(getQuoteSpy.calls.any()).withContext('getQuote not yet called').toBe(false);    });    // The quote would not be immediately available if the service were truly async.    it('should show quote after component initialized', async () => {      await fixture.whenStable(); // onInit()      // sync spy result shows testQuote immediately after init      expect(quoteEl.textContent).toBe(testQuote);      expect(getQuoteSpy.calls.any()).withContext('getQuote called').toBe(true);    });    // The error would not be immediately available if the service were truly async.    // Use `fakeAsync` because the component error calls `setTimeout`    it('should display error when TwainService fails', fakeAsync(() => {      // tell spy to return an error observable after a timeout      getQuoteSpy.and.returnValue(        defer(() => {          return new Promise((resolve, reject) => {            setTimeout(() => {              reject('TwainService test failure');            });          });        }),      );      fixture.detectChanges(); // onInit()      // sync spy errors immediately after init      tick(); // flush the setTimeout()      fixture.detectChanges(); // update errorMessage within setTimeout()      expect(errorMessage())        .withContext('should display error')        .toMatch(/test failure/);      expect(quoteEl.textContent).withContext('should show placeholder').toBe('...');    }));  });  describe('when test with asynchronous observable', () => {    beforeEach(() => {      // Simulate delayed observable values with the `asyncData()` helper      getQuoteSpy.and.returnValue(asyncData(testQuote));    });    it('should not show quote before OnInit', () => {      expect(quoteEl.textContent).withContext('nothing displayed').toBe('');      expect(errorMessage()).withContext('should not show error element').toBeNull();      expect(getQuoteSpy.calls.any()).withContext('getQuote not yet called').toBe(false);    });    it('should still not show quote after component initialized', () => {      fixture.detectChanges();      // getQuote service is async => still has not returned with quote      // so should show the start value, '...'      expect(quoteEl.textContent).withContext('should show placeholder').toBe('...');      expect(errorMessage()).withContext('should not show error').toBeNull();      expect(getQuoteSpy.calls.any()).withContext('getQuote called').toBe(true);    });    it('should show quote after getQuote (fakeAsync)', fakeAsync(() => {      fixture.detectChanges(); // ngOnInit()      expect(quoteEl.textContent).withContext('should show placeholder').toBe('...');      tick(); // flush the observable to get the quote      fixture.detectChanges(); // update view      expect(quoteEl.textContent).withContext('should show quote').toBe(testQuote);      expect(errorMessage()).withContext('should not show error').toBeNull();    }));    it('should show quote after getQuote (async)', async () => {      fixture.detectChanges(); // ngOnInit()      expect(quoteEl.textContent).withContext('should show placeholder').toBe('...');      await fixture.whenStable();      // wait for async getQuote      fixture.detectChanges(); // update view with quote      expect(quoteEl.textContent).toBe(testQuote);      expect(errorMessage()).withContext('should not show error').toBeNull();    });    it('should display error when TwainService fails', fakeAsync(() => {      // tell spy to return an async error observable      getQuoteSpy.and.returnValue(asyncError<string>('TwainService test failure'));      fixture.detectChanges();      tick(); // component shows error after a setTimeout()      fixture.detectChanges(); // update error message      expect(errorMessage())        .withContext('should display error')        .toMatch(/test failure/);      expect(quoteEl.textContent).withContext('should show placeholder').toBe('...');    }));  });});
    

      
fakeAsync(() => { /*test body*/ })
    

      
import {fakeAsync, tick, waitForAsync} from '@angular/core/testing';import {interval, of} from 'rxjs';import {delay, take} from 'rxjs/operators';describe('Angular async helper', () => {  describe('async', () => {    let actuallyDone = false;    beforeEach(() => {      actuallyDone = false;    });    afterEach(() => {      expect(actuallyDone).withContext('actuallyDone should be true').toBe(true);    });    it('should run normal test', () => {      actuallyDone = true;    });    it('should run normal async test', (done: DoneFn) => {      setTimeout(() => {        actuallyDone = true;        done();      }, 0);    });    it('should run async test with task', waitForAsync(() => {      setTimeout(() => {        actuallyDone = true;      }, 0);    }));    it('should run async test with task', waitForAsync(() => {      const id = setInterval(() => {        actuallyDone = true;        clearInterval(id);      }, 100);    }));    it('should run async test with successful promise', waitForAsync(() => {      const p = new Promise((resolve) => {        setTimeout(resolve, 10);      });      p.then(() => {        actuallyDone = true;      });    }));    it('should run async test with failed promise', waitForAsync(() => {      const p = new Promise((resolve, reject) => {        setTimeout(reject, 10);      });      p.catch(() => {        actuallyDone = true;      });    }));    // Use done. Can also use async or fakeAsync.    it('should run async test with successful delayed Observable', (done: DoneFn) => {      const source = of(true).pipe(delay(10));      source.subscribe({        next: (val) => (actuallyDone = true),        error: (err) => fail(err),        complete: done,      });    });    it('should run async test with successful delayed Observable', waitForAsync(() => {      const source = of(true).pipe(delay(10));      source.subscribe({        next: (val) => (actuallyDone = true),        error: (err) => fail(err),      });    }));    it('should run async test with successful delayed Observable', fakeAsync(() => {      const source = of(true).pipe(delay(10));      source.subscribe({        next: (val) => (actuallyDone = true),        error: (err) => fail(err),      });      tick(10);    }));  });  describe('fakeAsync', () => {    it('should run timeout callback with delay after call tick with millis', fakeAsync(() => {      let called = false;      setTimeout(() => {        called = true;      }, 100);      tick(100);      expect(called).toBe(true);    }));    it('should run new macro task callback with delay after call tick with millis', fakeAsync(() => {      function nestedTimer(cb: () => any): void {        setTimeout(() => setTimeout(() => cb()));      }      const callback = jasmine.createSpy('callback');      nestedTimer(callback);      expect(callback).not.toHaveBeenCalled();      tick(0);      // the nested timeout will also be triggered      expect(callback).toHaveBeenCalled();    }));    it('should not run new macro task callback with delay after call tick with millis', fakeAsync(() => {      function nestedTimer(cb: () => any): void {        setTimeout(() => setTimeout(() => cb()));      }      const callback = jasmine.createSpy('callback');      nestedTimer(callback);      expect(callback).not.toHaveBeenCalled();      tick(0, {processNewMacroTasksSynchronously: false});      // the nested timeout will not be triggered      expect(callback).not.toHaveBeenCalled();      tick(0);      expect(callback).toHaveBeenCalled();    }));    it('should get Date diff correctly in fakeAsync', fakeAsync(() => {      const start = Date.now();      tick(100);      const end = Date.now();      expect(end - start).toBe(100);    }));    it('should get Date diff correctly in fakeAsync with rxjs scheduler', fakeAsync(() => {      // need to add `import 'zone.js/plugins/zone-patch-rxjs-fake-async'      // to patch rxjs scheduler      let result = '';      of('hello')        .pipe(delay(1000))        .subscribe((v) => {          result = v;        });      expect(result).toBe('');      tick(1000);      expect(result).toBe('hello');      const start = new Date().getTime();      let dateDiff = 0;      interval(1000)        .pipe(take(2))        .subscribe(() => (dateDiff = new Date().getTime() - start));      tick(1000);      expect(dateDiff).toBe(1000);      tick(1000);      expect(dateDiff).toBe(2000);    }));  });  describe('use jasmine.clock()', () => {    // need to config __zone_symbol__fakeAsyncPatchLock flag    // before loading zone.js/testing    beforeEach(() => {      jasmine.clock().install();    });    afterEach(() => {      jasmine.clock().uninstall();    });    it('should auto enter fakeAsync', () => {      // is in fakeAsync now, don't need to call fakeAsync(testFn)      let called = false;      setTimeout(() => {        called = true;      }, 100);      jasmine.clock().tick(100);      expect(called).toBe(true);    });  });  describe('test jsonp', () => {    function jsonp(url: string, callback: () => void) {      // do a jsonp call which is not zone aware    }    // need to config __zone_symbol__supportWaitUnResolvedChainedPromise flag    // before loading zone.js/testing    it('should wait until promise.then is called', waitForAsync(() => {      let finished = false;      new Promise<void>((res) => {        jsonp('localhost:8080/jsonp', () => {          // success callback and resolve the promise          finished = true;          res();        });      }).then(() => {        // async will wait until promise.then is called        // if __zone_symbol__supportWaitUnResolvedChainedPromise is set        expect(finished).toBe(true);      });    }));  });});