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测试验证事件被捕获

回答

相关问题