AngularJS控制器单元测试

时间:2016-05-26 15:19:10

标签: angularjs unit-testing karma-runner karma-jasmine

我是AngularJS的新手并尝试单元测试。我正在使用Karma和Jasmine。我为我的控制器创建了第一个测试,但它没有工作,我不知道为什么业力会出错。

所以请帮帮我。

BasicTabCtrl.js

// Basic Tab Controller 
myApp.controller('BasicTabCrtl', ['$scope', '$modal', 'BasicTabService', function ($scope, $modal, BasicTabService) {
    console.log("BAsic tab crtl");

    $scope.name = 'testing';
    $scope.tab1 = "BASIC";
    $scope.tab2 = "ADVANCE";
    $scope.tab3 = "FORM";

    $scope.user = {};
    // get user from service
    $scope.Tablelist = BasicTabService.getUser();

    // delete user
    $scope.deleteUser = function (obj) {
        console.log("OBJ => " + JSON.stringify(obj));
        if (obj != -1) {
            $scope.Tablelist.splice(obj, 1);
        }
    }
}]);

这是我的测试用例

example.js

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

 beforeEach(function(){
    module('myApp');
 });

  describe('BasicTabCrtl',function(){

    beforeEach(inject(function($rootScope,$controller){
        scope = $rootScope.$new();
        controller=$controller('BasicTabCrtl',{
            '$scope':scope
        });
        console.log("d");
    }));

    it('set the name',function(){
        expect(scope.name).toBe('testing');
    });

  });

});

错误

26 05 2016 20:47:50.890:INFO [watcher]: Changed file "/home/rahul/Documents/django_project/myfirstsite/test/example.js".
Firefox 46.0.0 (Ubuntu 0.0.0) myApp BasicTabCrtl set the tab1 name FAILED
    minErr/<@/home/rahul/Documents/django_project/myfirstsite/static/js/angular.js:68:12
    loadModules/<@/home/rahul/Documents/django_project/myfirstsite/static/js/angular.js:4587:15
    forEach@/home/rahul/Documents/django_project/myfirstsite/static/js/angular.js:322:11
    loadModules@/home/rahul/Documents/django_project/myfirstsite/static/js/angular.js:4548:5
    createInjector@/home/rahul/Documents/django_project/myfirstsite/static/js/angular.js:4470:19
    workFn@/home/rahul/Documents/django_project/myfirstsite/static/js/angular-mocks.js:2954:44
    TypeError: scope is undefined in /home/rahul/Documents/django_project/myfirstsite/test/example.js (line 19)
    @/home/rahul/Documents/django_project/myfirstsite/test/example.js:19:3
Firefox 46.0.0 (Ubuntu 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.023 secs / 0.018 secs)

3 个答案:

答案 0 :(得分:0)

我认为由于在角度方法

周围缺少_,注入无法正常工作
describe('myApp',function(){
 var scope,controller;

 beforeEach(function(){
    module('myApp');
 });

  describe('BasicTabCrtl',function(){

    beforeEach(inject(function(_$rootScope_, _$controller_){
        scope = _$rootScope_.$new();
        controller = $controller('BasicTabCrtl',{
            '$scope':scope
        });
        console.log("d");
    }));

    it('set the name',function(){
        expect(scope.name).toBe('testing');
    });

  });

});

答案 1 :(得分:0)

试试这个:

创建控制器实例:

callController = function () {
        return $controller('BasicTabCrtl', {
            $scope: scope,
            $routeParams: routeParams
        });
      };

然后测试它是否已定义。如果此测试通过,那么您可以继续进行单元测试。

describe('null test', function () {
    it('controller should be defined', function () {
      ctrl = callController();
      expect(ctrl).to.not.be.undefined;
    });
  });

答案 2 :(得分:0)

代码的问题在于,在实例化控制器时,不会注入所有依赖项。试试这个......

beforeEach(inject(['$scope', '$modal', 'BasicTabService', '$controller', '$rootScope', function ($scope, $modal, BasicTabService, $controller, $rootScope){
    scope = $rootScope.$new();
    controller=$controller('BasicTabCrtl',{
        '$scope':$scope,
        '$modal':$modal,
        'BasicTabService': BasicTabService
    });
    console.log("d");
}));

尝试Jasmine, Karma, Angular how to write test on my Angular app?的答案。我将介绍如何测试控制器,服务和指令。