【Angular】fakeAsyncを使ったシンプルな非同期テスト

import { fakeAsync, tick } from '@angular/core/testing';

describe('非同期テストのサンプル', () => {
  it('タイマーのテスト', fakeAsync(() => {
    let called = false;

    setTimeout(() => {
      called = true;
    }, 1000);

    tick(1000);

    expect(called).toBe(true);
  }));
});

// 指定した時間（ミリ秒）だけ時間を進める
tick(1000); // 1秒進める

// 引数なしで呼び出すと、待機中のマイクロタスク（Promise）を実行
tick();

// 大きな値を指定すると、その時間内の全てのタイマーが実行される
tick(10000); // 10秒分の全てのタイマーを実行

import { fakeAsync, flush } from '@angular/core/testing';

it('複数のタイマーをテスト', fakeAsync(() => {
  let flag1 = false, flag2 = false;

  setTimeout(() => { flag1 = true; }, 100);
  setTimeout(() => { flag2 = true; }, 500);

  flush(); // 全てのタイマーを実行

  expect(flag1).toBe(true);
  expect(flag2).toBe(true);
}));

it('複数の非同期処理のテスト', fakeAsync(() => {
  let step = 0;

  // 複数のタイマーを設定
  setTimeout(() => { step = 1; }, 100);
  setTimeout(() => { step = 2; }, 200);
  setTimeout(() => { step = 3; }, 300);

  // 100ms進める
  tick(100);
  expect(step).toBe(1);

  // さらに100ms進める
  tick(100);
  expect(step).toBe(2);

  // さらに100ms進める
  tick(100);
  expect(step).toBe(3);
}));

it('Promiseのテスト', fakeAsync(() => {
  let result = '';

  Promise.resolve('success').then((value) => {
    result = value;
  });

  // この時点ではPromiseはまだ解決されていない
  expect(result).toBe('');

  // Promiseを解決させる
  tick();

  // Promiseが解決され、resultが更新されている
  expect(result).toBe('success');
}));

import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { TestBed, fakeAsync, tick } from '@angular/core/testing';
import { HttpClient } from '@angular/common/http';

describe('HTTP テスト', () => {
  let http: HttpClient;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule]
    });

    http = TestBed.inject(HttpClient);
    httpTestingController = TestBed.inject(HttpTestingController);
  });

  it('HTTPリクエストのテスト', fakeAsync(() => {
    let result: any = null;

    http.get('/api/data').subscribe(data => {
      result = data;
    });

    // リクエストをモック
    const req = httpTestingController.expectOne('/api/data');
    req.flush({ message: 'Success' });

    // Promiseを解決
    tick();

    expect(result).toEqual({ message: 'Success' });

    // 未処理のリクエストがないことを確認
    httpTestingController.verify();
  }));
});

// countdown.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-countdown',
  template: '<p>残り時間: {{ seconds }}秒</p>'
})
export class CountdownComponent implements OnInit {
  seconds = 3;

  ngOnInit() {
    this.startCountdown();
  }

  startCountdown() {
    const timer = setInterval(() => {
      this.seconds -= 1;

      if (this.seconds <= 0) {
        clearInterval(timer);
      }
    }, 1000);
  }
}

import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { CountdownComponent } from './countdown.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [CountdownComponent],
    }).compileComponents();
    fixture = TestBed.createComponent(CountdownComponent);
    component = fixture.componentInstance;
  });

  it('3秒のカウントダウンが正しく動作すること', fakeAsync(() => {
    fixture.detectChanges(); // ngOnInitを呼び出す

    expect(component.seconds).toBe(3);

    tick(1000);
    expect(component.seconds).toBe(2);

    tick(1000);
    expect(component.seconds).toBe(1);

    tick(1000);
    expect(component.seconds).toBe(0);

    // さらに時間が経過しても0のまま
    tick(1000);
    expect(component.seconds).toBe(0);
  }));
});

// user.service.ts
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

export interface User {
  id: number;
  name: string;
}

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private users: User[] = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];

  // APIリクエストをシミュレートする（実際の遅延を伴う）
  getUsers(): Observable<User[]> {
    return of(this.users).pipe(
      delay(1000) // 1秒の遅延をシミュレート
    );
  }

  getUserById(id: number): Observable<User | undefined> {
    const user = this.users.find(u => u.id === id);
    // APIリクエストをシミュレート
    return of(user).pipe(
      delay(500) // 500msの遅延
    );
  }
}

import { TestBed, fakeAsync, tick } from '@angular/core/testing';
import { UserService } from './user.service';

describe('UserService', () => {
  let service: UserService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(UserService);
  });

  it('全ユーザーを取得できること', fakeAsync(() => {
    let users: any[] = [];

    service.getUsers().subscribe(result => {
      users = result;
    });

    // 最初はデータがまだ取得されていない
    expect(users.length).toBe(0);

    // 1秒の遅延をシミュレート
    tick(1000);

    // データが取得されている
    expect(users.length).toBe(3);
    expect(users[0].name).toBe('Alice');
  }));

  it('IDでユーザーを検索できること', fakeAsync(() => {
    let user: any = null;

    service.getUserById(2).subscribe(result => {
      user = result;
    });

    // 最初はデータがまだ取得されていない
    expect(user).toBeNull();

    // 500msの遅延をシミュレート
    tick(500);

    // 指定したIDのユーザーが取得されている
    expect(user).toBeDefined();
    expect(user?.id).toBe(2);
    expect(user?.name).toBe('Bob');
  }));
});