角單元測試狀態濾波器

Question

我有一個過濾器，該過濾器依賴於服務來檢索某些配置，因此使過濾器成為有狀態的。 效果很好！ 但是，我想在它周圍添加單元測試，但無法弄清楚如何實現它們。

過濾器示例：

.filter("myFilter", function(myService) {
  var data = null, serviceInvoked = false;

  function realFilter(value) {
    return data + value;
  }

  filterStub.$stateful = true;
  function filterStub(value) {
    if( data === null ) {
      if( !serviceInvoked ) {
        console.log('no state'); // dirty console.log for unit test diagnostics
        serviceInvoked = true;
        myService.get().then(function(result){
           data = result;
        });
      }
      return "-";
    }
    else {
      return realFilter(value);
    }
  }

  return filterStub;
});

我可以測試最初是否返回“-”。

在我的下一個測試中，我將myService與sinonjs結合使用並返回一個promise。 我想用數據解決該承諾，並看到過濾器正確更新。 我的測試看起來像：

it('returns the value prepended with the data from the service', 
  function () {
    $scope.value = "World!";
    var markup = "<div>{{value | myFilter}}</div>";
    var element = $compile(markup)($scope);
    $scope.$digest();
    /*
     * Works:
     */
    expect(element.html()).toBe('-');

    /*
     * the following still returns "-" though I want to test 
     * that realFilter was executed
     */
    myServiceMock_getPromise.resolve('Hello ');
    $scope.$digest();

    // FAIL: Expected '-' to be 'Hello World!'
    expect(element.html()).toBe('Hello World!');
});

這在生產中有效，但是在單元測試中，每個摘要的篩選器中的console.log輸出“無狀態”， 這表明它不保持篩選器狀態。

我編譯標記的方式是否有些無法維護狀態或測試出錯的地方？

Answer 1

這與模板編譯無關。 這是關於promise和javascript ticks的。

已解決的promise將在另一個滴答中執行（無論$scope.$digest只啟動此過程）。 因此，應該將期望包裝在.then中.then然后應通過done回調將測試異步的事實通知測試引擎。

it('returns the value prepended with the data from the service', 
  function (done) {
    ...

    myServiceMock_getPromise.resolve('Hello ');
    $scope.$digest();
    myServiceMock_getPromise.promise.then(function(){
       expect(element.html()).toBe('Hello World!');
       done();
    });
 }