angularjs測試驗證事件被捕獲

我最近開始學習如何測試與業力/茉莉花的角度。angularjs測試驗證事件被捕獲

這裏是場景：我有一個指令，監聽一個事件，當它被調用時，它調用指令作用域上的函數。

這是我的測試。問題是該函數從未被調用過。下面的代碼不起作用，因爲間諜無法找到偵聽器所調用的函數。指令函數更新listItems值。不是很TDD，但目前它只能在現實中，而不是在測試：/

指令

(function() { 
    angular.module('app').directive('listComponent', function(utilities) { 
     return { 
      restrict: 'E', //element 
      templateUrl: 'views/listComponent.html', 
      scope: { 
       listItems: '=' 
      }, 
      replace: true, 
      link: function (scope, element, attributes) { 
       scope.title = attributes["title"]; 
       scope.listItemsGrouped = []; 
       var primary = attributes["primaryField"]; 

       var itemsGrouped = _.groupBy(scope.listItems, function (obj) { 
        return obj[primary]; 
       }); 

       scope.listItems = []; 
       angular.forEach(itemsGrouped[3016],function(item){ 
        scope.listItems.push({dimValueParent: item.dimValueParent,dimValueChild: item.dimValueChild, value: item.value}); 
       }); 

       scope.$on('refreshListItems', 
        function(evt,affectedValues) { 
         scope.refreshList(affectedValues); 
        }); 

      }, 
      controller: function($scope){ 
       $scope.refreshList = function(vals) { 
        //handle values affected by the update 
        angular.forEach(vals, function(affectedValue) { 
         var indexParent = utilities.findIndexOf($scope.listItems,"dimValueParent",affectedValue.Dimensions[0].Value); 
         var indexChild = utilities.findIndexOf($scope.listItems,"dimValueChild",affectedValue.Dimensions[1].Value); 
         if (indexParent > -1 && indexChild > -1) { 
          $scope.listItems[indexChild].value = affectedValue.CalculatedValue; 
         } 
        }); 
       } 
      } 
     } 
    }); 
}());

測試代碼，之前每個

beforeEach(inject(function ($compile, $rootScope) { 
     scope = $rootScope; 
     localScope = $rootScope.$new(); 
     ele = angular.element(
      '<list-component title="Testing generic list" list-items="list" ></list-component>' 
     ); 

     mockupDataFactory = konstruktMockupData.getInstance(); 

     //these variables are needed. 
     scope.data = mockupDataFactory.pivotedData; 

     scope.listItems = [ 
      {dimValueParent: "3016",dimValueChild: "100", value:101}, 
      {dimValueParent: "3016",dimValueChild: "110", value:102}, 
      {dimValueParent: "3016",dimValueChild: "120", value:103}]; 

     scope.affectedValues = [ 
      {CalculatedValue: 1000,Dimensions:[{ Key: "1", Value: "3016" }, { Key: "4", Value: "100" }]}, 
      {CalculatedValue: 1100,Dimensions: [{ Key: "1", Value: "3016" }, { Key: "4", Value: "110" }]}, 
      {CalculatedValue: 1200,Dimensions: [{ Key: "1", Value: "3016" }, { Key: "4", Value: "120" }]}]; 

     scope.$apply(); 

    }));

這裏是測試失敗

it('Should handle an update listItems event', inject(function(){ 
     var affectedAccountsAfterUpdateExpcted = [ 
      {dimValueParent: "3016",dimValueChild: "100", value:1000}, 
      {dimValueParent: "3016",dimValueChild: "110", value:1100}, 
      {dimValueParent: "3016",dimValueChild: "120", value:1200}]; 


     //spyOn(localScope, "refreshList"); 
     scope.$broadcast("refreshListItems", scope.affectedValues); 

     spyOn(scope, "$on").andCallFake(function (event, affectedValues) { 
      expect(affectedValues).toBe(scope.affectedValues); 
      expect(event).toEqual("refreshListItems"); 
     }); 

     expect(scope.$on).toHaveBeenCalled(); 

     scope.$apply(); 
     expect(scope.listItems).toBeDefined(); 
     //expect(scope.listItems).toEqual(affectedAccountsAfterUpdateExpcted); 
    }));

我很困難，接下來該做什麼。這是根據lght的回答進行的更新。如何解決，以便事件在測試中被捕獲？間諜似乎不是被叫做。奇怪，因爲我正在播出這個活動！

來源

2014-10-07 JohanLarsson

，而不是試圖去檢查，如果該事件被逮住，我在做什麼的檢查，如果範圍被嘲諷偵聽特定事件'$ on' – GeoffreyB 2014-10-07 15:21:40

好吧，你有一個例子嗎？ – JohanLarsson 2014-10-07 15:25:54

由於您在'$ on'上添加了間諜，您不應該再播放您的活動。否則，你應該監視你的指令的作用域，而不是'$ rootScope' – GeoffreyB 2014-10-08 08:19:16

，而不是試圖去檢查，如果該事件被逮住，我在做什麼，如果範圍被嘲諷$on

describe("Testing the initialization", function() { 
    beforeEach(function() { 
    controller = $controller("connectionBannerCtrl", { 
     $rootScope: $rootScope, 
     $scope: $scope, 
     ConnectionBanner: ConnectionBanner 
    }); 
    }); 
    it("should subscribe to the 'ConnectionBannerChanged' event", function() { 
    spyOn($rootScope, "$on").andCallFake(function (event, callback) { 
     expect(callback).toBe($scope.setup); 
     expect(event).toEqual("ConnectionBannerChanged"); 
    }); 
    controller = $controller("connectionBannerCtrl", { 
     $rootScope: $rootScope, 
     $scope: $scope, 
     ConnectionBanner: ConnectionBanner 
    }); 
    expect($rootScope.$on).toHaveBeenCalled(); 
    }) 
});

這是所有關於spyOn（http://jasmine.github.io/2.0/introduction.html#section-Spies）

監聽特定事件正在檢查

來源

2014-10-07 15:30:35 GeoffreyB

我試過類似上面但沒有運氣...請參閱我的修改題。似乎間諜沒有被調用 – JohanLarsson 2014-10-07 20:12:46

不要spyOn，所有你需要做的事情是broadcast事件，其餘的應該通過自動化。

it('should call the event',() => { 
 
    spyOn(scope, 'refreshList'); 
 
    scope.$broadcast('refreshListItems'); 
 
    expect(scope.refreshList).toHaveBeenCalled(); 
 
});

來源

2016-09-06 07:57:23

angularjs測試驗證事件被捕獲

回答

相關問題