【Angular】TimeoutErrorが発生する単体テストを作成する。

わざとTimeoutErrorを発生させる記事が探しても見当たらなかったため、備忘録として残しておきます。

テスト対象クラス

以下、HelloWorldServiceに対してテストを行います。

hello-world.service.ts

@Injectable({ providedIn: 'root' })
export class HelloWorldService {

  item: string = '';

  constructor(private requestService: RequestService) { }

  public setItemList(): void {
    // getItem() → Observable型のレスポンスDtoが返却されるメソッド
    this.requestService.getItem().pipe(
      map(
        response => {
          this.item = response.item
        }
      ),
      // Timeoutを2秒に設定
      timeout(2000),
      catchError((error) => {
        return throwError(() => error);
      })
    ).subscribe()
  }
}

テストクラス

続いて、テストクラスです。
Mock化したクラスに対して、返却される値（Observable型のレスポンスDto）を指定します。
返却される値に対して、pipe(delay(3000)) を使用します。
上記を行うことで、3秒処理を遅らせることができるため、TimeoutErrorが発生します。

hello-world.service.spec.ts

describe('HelloWorldService', () => {
  let helloWorldService: HelloWorldService;
  let requestService: jasmine.SpyObj<RequestService>;
  let response: Observable<Item>;

  response = of({
    item: 'テスト'
  });

  beforeEach(() => {
    TestBed.configureTestingModule(
      { providers: [HelloWorldService, { provide: RequestService, useValue: jasmine.createSpyObj('RequestService', ['getItem']) }] }
    )

    requestService = TestBed.inject(RequestService) as jasmine.SpyObj<RequestService>;
    // mock化して返却される値をテスト内で指定する。
    // pipe(delay(3000))を付与して、処理を3秒遅らせる。
    requestService.getItem.and.returnValue(<any>response.pipe(delay(3000)));
    helloWorldService = new HelloWorldService(requestService);
  });

  it('テスト', fakeAsync(() => {
      helloWorldService.setItemList();
  }));
});

実行結果

無事、TimeoutErrorを発生させることができました。
単体テストの参考になれば...