如何在事件执行的控制器范围内测试函数

时间:2016-08-31 12:53:09

标签: angularjs unit-testing jasmine karma-jasmine

控制器中的

功能:

angular.module('myApp').controller('MyController', function(){

   $scope.f = function($event){
      $event.preventDefault();
      //logic
      return data;
   }
})

describe('MyController', function(){
    'use strict';
    var MyController,
        $scope;

    beforeEach(module('myApp'));

    beforeEach($inject(function($rootScope, $controller){
       $scope = $rootScope.$new();
       MyController = $controller('MyController', {
          $scope: $scope
       })
    }));
})
it('should...', function(){
    //fire event and expect data
})

$scope.f函数在指令中使用,它可以由ng-click="f($event)"

执行

单位测试中火灾事件的正确方法是什么?

1 个答案:

答案 0 :(得分:4)

简答

您无需触发事件。您可以访问范围,该范围具有您要测试的功能。这意味着您只需执行该函数,然后断言。它看起来像这样:

it('should call preventDefault on the given event', function(){
  var testEvent = $.Event('someEvent');
  $scope.f(testEvent);
  expect(testEvent.isDefaultPrevented()).toBe(true);
});

请参阅以下内容:

完整规格

此外 - 您的it数据块应位于describe数据块中,以便它可以访问$scope字段。看起来应该更像这样:

describe('MyController', function(){
  'use strict';
  var MyController,
      $scope;

  beforeEach(module('myApp'));

  beforeEach($inject(function($rootScope, $controller){
    $scope = $rootScope.$new();
    MyController = $controller('MyController', {
      $scope: $scope
    })
  }));

  it('should call preventDefault on the given event', function(){
    var testEvent = $.Event('someEvent');
    $scope.f(testEvent);
    expect(testEvent.isDefaultPrevented()).toBe(true);
  });
})

关于结构的说明

不要害怕使用describe块来构建测试。想象一下,你在名为$scope的{​​{1}}上有另一个功能,那么你可能想要将你的spec文件分区更像这样:

f2

这样做的好处是,当测试失败时,您看到的错误消息是基于describe('MyController', function(){ 'use strict'; var MyController, $scope; beforeEach(module('myApp')); beforeEach($inject(function($rootScope, $controller){ $scope = $rootScope.$new(); MyController = $controller('MyController', { $scope: $scope }) })); describe('$scope', function() { describe('.f()', function() { // tests related to only the .f() function }); describe('.f2()', function() { // tests related to only the .f2() function }); }); }) 块的层次结构构建的。所以它会是这样的:

  

MyController $ scope .f()应该在给定的上调用preventDefault   事件