从Karma和Jasmine测试中调用控制器功能

时间:2021-09-04 23:12:25

This is my angular controller :-

这是我的角度控制器: -

 angular.module('authoring-controllers', []).
        controller('NavCtrl', function($scope, $location, BasketNavigationService) {

$scope.test= function() {
                $scope.testVar = BasketNavigationService.showBasketList();
            };
        });

TEST class

describe('NavCtrl', function() {
    var scope, $location, createController;

    beforeEach(inject(function ($rootScope, $controller, _$location_) {
        $location = _$location_;
        scope = $rootScope.$new();

        createController = function() {
            return $controller('NavCtrl', {
                '$scope': scope
            });
        };
    }));

    it('should create $scope.testVar when calling test', 
        function() {
          expect(scope.testVar).toBeUndefined();
          scope.test();
          expect(scope.testVar).toBeDefined();
      });
});

Getting an error when i run that test case :- scope.test() is undefined..

运行该测试用例时出错: - scope.test()未定义..

If i removed BasketNavigationService functionality from controller then it is working..

如果我从控制器中删除了BasketNavigationService功能,那么它正在工作..

Please help me to solve that karma test case.

请帮我解决业力测试案例。

3 个解决方案

#1


2  

here is the working demo , hope it helps. problem was with injecting the dependencies.

这是工作演示,希望它有所帮助。问题在于注入依赖项。

//--- CODE --------------------------
(function(angular) {
  // Create module
  var myApp = angular.module('myApp', []);

  // Controller which counts changes to its "name" member
  myApp.controller('MyCtrl', ['$scope', 'BasketNavigationService',
    function($scope, BasketNavigationService) {

      $scope.test = function() {
        $scope.testVar = BasketNavigationService.showBasketList();;
      };
    }
  ]);


})(angular);



// ---SPECS-------------------------

describe('myApp', function() {
  var scope,
    controller;
  beforeEach(function() {
    module('myApp');
  });

  describe('MyCtrl', function() {
    beforeEach(inject(function($rootScope, $controller) {
      scope = $rootScope.$new();
      controller = $controller('MyCtrl', {
        '$scope': scope,
        'BasketNavigationService': {
          showBasketList: function() {
            return null;
          }
        }
      });
    }));
    it('should create $scope.testVar when calling test',
      function() {
        expect(scope.testVar).toBeUndefined();
        scope.test();
        //     scope.$digest();
        expect(scope.testVar).toBeDefined();
      });
  });


});

// --- Runner -------------------------
(function() {
  var jasmineEnv = jasmine.getEnv();
  jasmineEnv.updateInterval = 1000;

  var htmlReporter = new jasmine.HtmlReporter();

  jasmineEnv.addReporter(htmlReporter);

  jasmineEnv.specFilter = function(spec) {
    return htmlReporter.specFilter(spec);
  };

  var currentWindowOnload = window.onload;

  window.onload = function() {
    if (currentWindowOnload) {
      currentWindowOnload();
    }
    execJasmine();
  };

  function execJasmine() {
    jasmineEnv.execute();
  }

})();
<script src="http://jasmine.github.io/1.3/lib/jasmine.js"></script>
<script src="http://jasmine.github.io/1.3/lib/jasmine-html.js"></script>
<script src="https://code.angularjs.org/1.2.9/angular.js"></script>
<script src="https://code.angularjs.org/1.2.9/angular-mocks.js"></script>

<link href="http://jasmine.github.io/1.3/lib/jasmine.css" rel="stylesheet" />

fiddle : http://jsfiddle.net/invincibleJai/pf1deoom/1/

小提琴:http://jsfiddle.net/invincibleJai/pf1deoom/1/

#2


0  

Please change your createController setup to:

请将您的createController设置更改为:

 createController = function() {
            return $controller('NavCtrl', {
                '$scope': scope,
                '$location':$location,
                'BasketNavigationService':{showBasketList: function(){return 'test'} }
            });
        };

You are not injecting all the dependencies. I have injected dummy BasketNavigationService, you can inject the real one.

您没有注入所有依赖项。我已经注入了虚拟的BasketNavigationService,你可以注入真正的一个。

#3


0  

Have you tried running createController();? I don't think your NavCtrl controller gets mocked.

你试过运行createController();?我不认为你的NavCtrl控制器被嘲笑。

#1


2  

here is the working demo , hope it helps. problem was with injecting the dependencies.

这是工作演示,希望它有所帮助。问题在于注入依赖项。

//--- CODE --------------------------
(function(angular) {
  // Create module
  var myApp = angular.module('myApp', []);

  // Controller which counts changes to its "name" member
  myApp.controller('MyCtrl', ['$scope', 'BasketNavigationService',
    function($scope, BasketNavigationService) {

      $scope.test = function() {
        $scope.testVar = BasketNavigationService.showBasketList();;
      };
    }
  ]);


})(angular);



// ---SPECS-------------------------

describe('myApp', function() {
  var scope,
    controller;
  beforeEach(function() {
    module('myApp');
  });

  describe('MyCtrl', function() {
    beforeEach(inject(function($rootScope, $controller) {
      scope = $rootScope.$new();
      controller = $controller('MyCtrl', {
        '$scope': scope,
        'BasketNavigationService': {
          showBasketList: function() {
            return null;
          }
        }
      });
    }));
    it('should create $scope.testVar when calling test',
      function() {
        expect(scope.testVar).toBeUndefined();
        scope.test();
        //     scope.$digest();
        expect(scope.testVar).toBeDefined();
      });
  });


});

// --- Runner -------------------------
(function() {
  var jasmineEnv = jasmine.getEnv();
  jasmineEnv.updateInterval = 1000;

  var htmlReporter = new jasmine.HtmlReporter();

  jasmineEnv.addReporter(htmlReporter);

  jasmineEnv.specFilter = function(spec) {
    return htmlReporter.specFilter(spec);
  };

  var currentWindowOnload = window.onload;

  window.onload = function() {
    if (currentWindowOnload) {
      currentWindowOnload();
    }
    execJasmine();
  };

  function execJasmine() {
    jasmineEnv.execute();
  }

})();
<script src="http://jasmine.github.io/1.3/lib/jasmine.js"></script>
<script src="http://jasmine.github.io/1.3/lib/jasmine-html.js"></script>
<script src="https://code.angularjs.org/1.2.9/angular.js"></script>
<script src="https://code.angularjs.org/1.2.9/angular-mocks.js"></script>

<link href="http://jasmine.github.io/1.3/lib/jasmine.css" rel="stylesheet" />

fiddle : http://jsfiddle.net/invincibleJai/pf1deoom/1/

小提琴:http://jsfiddle.net/invincibleJai/pf1deoom/1/

#2


0  

Please change your createController setup to:

请将您的createController设置更改为:

 createController = function() {
            return $controller('NavCtrl', {
                '$scope': scope,
                '$location':$location,
                'BasketNavigationService':{showBasketList: function(){return 'test'} }
            });
        };

You are not injecting all the dependencies. I have injected dummy BasketNavigationService, you can inject the real one.

您没有注入所有依赖项。我已经注入了虚拟的BasketNavigationService,你可以注入真正的一个。

#3


0  

Have you tried running createController();? I don't think your NavCtrl controller gets mocked.

你试过运行createController();?我不认为你的NavCtrl控制器被嘲笑。