소개

Angular의 테스트에서 다음과 같은 설명을 보지 못했습니까?

it('世界に挨拶します (async)', fakeAsync(() => {
    // テストコード
}));

여기서 무슨 일이 일어나고 있는가?
어떤 때에 이렇게 쓰면 좋을까?
벌써 해설 기사가 몇개나 있습니다만, 나름대로 정리해 보겠습니다.

fakeAsync를 사용하면 어떤 일이 발생합니까?

매뉴얼는 다음과 같이 작성되었습니다.

Wraps a function to be executed in the fakeAsync zone:

microtasks are manually executed by calling flushMicrotasks(),

timers are synchronous, tick() simulates the asynchronous passage of time.

쉽게 번역하면,

fakeAsync 영역 내에서 실행되도록 함수를 래핑합니다.

microtask는 flushMicrotasks()를 호출하여 수동으로 실행됩니다.

타이머가 동기화됩니다. tick() 을 사용하면 비동기 시간 대기를 시뮬레이션할 수 있습니다.

무슨 일이야.

fakeAsync 영역이란?

"fakeAsync 영역"은 "fakeAsync"라는 이름의 "영역"입니다.
「존」이라고 하는 것은, 실행 문맥과 같은 것이라고 합니다.

존을 해설하는 프레젠테이션 동영상 → htps //w w. 요츠베. 이 m/와 tch? v = 3 qt 무 ss_u & t = 150 1

무엇을 해 주겠는가 하면, 비동기 콜백을 프록시화해, AOP 할 수 있도록 한 것입니다.
비동기 콜백이 여러 곳에 있었기 때문에 호출 전에 실행 컨텍스트를 정비하여 비동기 콜백간에 정보를 공유할 수 있도록 해 줍니다.

어떻게 실현하고 있는가 하면setTimeout 뭐든지 원숭이 패치를 맞추고 있다고 합니다.

microtask란?

Zone.js 문서에 따르면 microtask는 Promise.Then으로 전달되는 비동기 콜백입니다.

즉, flushMicrotasks() 를 호출하면, 큐에 모인 Promise.Then 콜백을 모두 실행해 준다(루다라고 생각 ) 합니다.

참고로 비동기 콜백은 microtask와 함께 세 가지로 분류됩니다.

MicroTask

EventTask

MacroTask

tick() 은?

tick()는 간단합니다. 인수에 지정한 밀리 세컨드 시간 기다려 줍니다.

fakeAsync 사용하면 맛있어?

덧붙여 테스트를 랩 해 주는 것은 알았다.
어떤 장면에서 사용하면 기쁠까요?

해결해야 할 Promise가 있을 때

Promise의 해결 결과가 테스트에 영향을 미치면 fakeAsync로 묶습니다.

예를 들어 Router.navigateByUrl() 를 호출하는 클래스를 테스트할 때 사용합니다.

it('xxxしたら、oooへ遷移', fakeAsync(() => {
  // Given
  const location = TestBed.get(Location);

  // When
  instance.xxx(); // この中で、navigateByUrl を使っている

  flushMicrotasks(); // 溜まっているPromiseを強制解決

  // Then
  expect(location.path()).toBe('ooo'); // location.path() が変わっている
}));

참고 링크

Angular 공식 가이드

Angular와 Zone.js와 테스트 이야기

async await에서 깨끗한 코드를 쓸 수 없다면 매운 기분이 들었는데, zone.js를 사용하면 여러가지 해결할 수 있을 것 같았다.

Angular: Testing async stuff in the fakedAsync zone VS. providing custom schedulers

Angular fakeAsyncTest 사용법 모습

Implements Zones for JavaScript

YouTube는 자동 번역 자막을 낼 수 있게 되었다. 멋지다!  ↩