AngularJS 控制器单元测试答案

【问题标题】：AngularJS Controller Unit TestingAngularJS 控制器单元测试
【发布时间】：2016-05-26 15:19:09
【问题描述】：

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

所以请帮帮我。

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)

【问题讨论】：

你错过了$controller
对此很抱歉，但无法正常工作
似乎无法加载一个或多个模块。你的 Karma 文件是否指向所有需要的 js 文件？

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

【解决方案1】：

我认为注入不起作用，因为缺少 _ 围绕角度方法

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');
    });

  });

});

【讨论】：

【解决方案2】：

试试这个：

创建控制器实例：

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;
    });
  });

【讨论】：

【解决方案3】：

您的代码的问题是您在实例化控制器时没有注入所有依赖项。试试这个...

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? 的回答。我描述了如何测试控制器、服务和指令。

【讨论】：