全端開發人員天梯

關於非同步程式的測試

首先先來看看一般情況下如何測試非同步程式，假設我們有個Service程式內容如下：

@Injectable()
export class AsyncService {

  theNumber: number;

  constructor() {
    this.theNumber = 0;
  }

  theMethod() {
    setTimeout(() => {
      this.theNumber = 10;
    }, 1000);
  }
}

這時要測試theMethod()時，使用AngularCLI產生的測試框架預設使用Karma+Jasmine，寫出來的測試可能長這樣

describe('AsyncService', () => {

  let testTarget: AsyncService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [AsyncService]
    });

    testTarget = TestBed.get(AsyncService);
  });

  it('呼叫theMethod之後theNumber應該為10', () => {
    testTarget.theMethod();
    expect(testTarget.theNumber).toBe(10);
  });
});

不難看出這樣的測試程式結果一定是錯的，由於theMethod()是非同步執行的，要在1000毫秒後才會將theNumber設為10，因此在呼叫theMethod()後立刻使用expect()檢查一定是錯的！

要解決這個問題也不難，把theMethod()裡面的程式用Promise包起來，接著搭配Jasmine內建的done就可以了。

theMethod()內容如下：

  theMethod() {
    return new Promise((resolve) => {
      setTimeout(() => {
        this.theNumber = 10;
        resolve();
      }, 1000);
    });
  }

測試程式如下：

  it('呼叫theMethod之後theNumber應該為10', (done) => {
    testTarget.theMethod().then(() => {
      expect(testTarget.theNumber).toBe(10);
      done();
    });
  });

就可以正常執行了沒有問題！

搭配fakeAsync/tick使用

上述是一般測試非同步成的簡單方法，不過這麼做其實有點問題，畢竟theMethod()裡面的內容很單純，如果只是為了方便寫測試程式而去動原來的production code，未免讓人感到心裡不舒服，而且也因此在production code和test code都造成了不必要的callback，讓程式可讀性也變得比較差！這時候我們可以使用fakeAsync與tick搭配，用同步執行的程式碼模擬非同步的效果！

我們可以先把theMethod()的Promise拿掉，並重新把測試程式用fakeAsync包起來，並且在呼叫theMethod()後，執行tick(500)，來模擬500毫秒過去後的變化(此時還沒改變theNumber的值)，再次執行tick(500)，代表總共1000毫秒過去了：

  it('呼叫theMethod之後theNumber應該為10', fakeAsync(() => {
    testTarget.theMethod();
    tick(500);
    expect(testTarget.theNumber).toBe(0);
    tick(500);
    expect(testTarget.theNumber).toBe(10);
  }));

如此一來主要的測試程式碼就不會產生不必要callback，原來的production code也不需要因此特地把程式改成Promise版本，一切看起來就像是同步執行的程式一樣，更重要的是，原來因為程式碼中setTimeout的關係，在測試這支程式時是必須要等待個1000毫秒，但透過tick模擬時間快轉效果，完全不需搖額外的等待，簡直就像是施放了時光魔術一樣，實在太神奇啦！

tick中的參數是用來讓時間產生快轉的效果，但大多非同步的程式並不會有類似setTimeout這固定延遲的狀況，像是ajax呼叫等等，此時我們會替這些程式設計測試替身，由於不會有無謂的延遲，我們就不須在tick中加入任何參數(預設值為0)。

  it('假設theMethod非同步但不會延遲1000毫秒，直接用tick()就好', fakeAsync(() => {
    spyOn(testTarget, 'theMethod').and.callFake(() => {
      setTimeout(() => {
        testTarget.theNumber = 999;
      });
    });
    testTarget.theMethod();
    tick();
    expect(testTarget.theNumber).toBe(999);
  }));

關於fakeAsync/tick的補充

雖然前文提到fakeAsync/tick是Angular提供的測試工具，但其實它是由Zone.js提供的測試工具(不過Angular又再包了一層)，而Angular則是透過Zone.js來管理非同步的程式執行及進行變更偵測決定畫面重新產生的時機，因此我們的Angular程式本來大部份就在Zone的管轄範圍之中，這樣的搭配也使得我們在Angular中撰寫非同步執行的測試程式時更加容易，開發更加輕鬆啦！

程式碼位置：https://github.com/wellwind/angular-advanced-topic-demo/tree/master/testing-with-fakeasync

參考資料：

https://angular.io/guide/testing#the-fakeasync-function

https://angular.io/api/core/testing/fakeAsync