2013-04-03 145 views
5

我刚刚开始角度,我想为我的控制器写一些简单的单元测试,这里是我得到的。angularjs - 测试控制器

app.js:

'use strict'; 


// Declare app level module which depends on filters, and services 
angular.module('Prototype', ['setsAndCollectionsService']). 
    config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/dashboard', {templateUrl: 'partials/dashboard.html', controller: 'DashboardController'}); 
    $routeProvider.when('/setsAndCollections', {templateUrl: 'partials/setsAndCollections.html', controller: SetsAndCollectionsController}); 
    $routeProvider.when('/repetition', {templateUrl: 'partials/repetition.html', controller: RepetitionController}); 
    $routeProvider.otherwise({redirectTo: '/dashboard'}); 
    }]); 

和controllers.js

'use strict'; 

/* Controllers */ 

    var myApp = angular.module('Prototype'); 

    myApp.controller('DashboardController', ['$scope', function (scope) { 
     scope.repeats = 6; 
    }]); 

/*function DashboardController($scope) { 
$scope.repeats = 5; 
};*/ 

function SetsAndCollectionsController($scope, $location, collectionsService, repetitionService) { 
    $scope.id = 3; 
    $scope.collections = collectionsService.getCollections(); 
    $scope.selectedCollection; 
    $scope.repetitionService = repetitionService; 

    $scope.switchCollection = function (collection) { 
     $scope.selectedCollection = collection; 
    }; 

    $scope.addCollection = function() { 
     $scope.collections.push({ 
      name: "collection" + $scope.id, 
      sets: [] 
     }); 
     ++($scope.id); 
    }; 

    $scope.addSet = function() { 
     $scope.selectedCollection.sets.push({ 
      name: "set" + $scope.id, 
      questions: [] 
     }); 
     ++($scope.id); 
    }; 

    $scope.modifyRepetition = function (set) { 
     if (set.isSelected) { 
      $scope.repetitionService.removeSet(set); 
     } else { 
      $scope.repetitionService.addSet(set); 
     } 

     set.isSelected = !set.isSelected; 
    }; 

    $scope.selectAllSets = function() { 
     var selectedCollectionSets = $scope.selectedCollection.sets; 

     for (var set in selectedCollectionSets) { 
      if (selectedCollectionSets[set].isSelected == false) { 
       $scope.repetitionService.addSet(set); 
      } 
      selectedCollectionSets[set].isSelected = true; 
     } 
    }; 

    $scope.deselectAllSets = function() { 
     var selectedCollectionSets = $scope.selectedCollection.sets; 

     for (var set in selectedCollectionSets) { 
      if (selectedCollectionSets[set].isSelected) { 
       $scope.repetitionService.removeSet(set); 
      } 
      selectedCollectionSets[set].isSelected = false; 
     } 
    }; 

    $scope.startRepetition = function() { 
     $location.path("/repetition"); 
    }; 
} 

function RepetitionController($scope, $location, repetitionService) { 
    $scope.sets = repetitionService.getSets(); 
    $scope.questionsLeft = $scope.sets.length; 
    $scope.questionsAnswered = 0; 
    $scope.percentageLeft = ($scope.questionsLeft == 0 ? 100 : 0); 

    $scope.endRepetition = function() { 
     $location.path("/setsAndCollections"); 
    }; 
} 

现在我在转换全局函数控制器通过角API定义变量的过程中,你可以通过举例的DashboardController见。

现在,在我的测试:

describe("DashboardController", function() { 
    var ctrl, scope; 

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

    it("has repeats attribute set to 5", function() { 
     expect(scope.repeats).toBe(5); 
    }); 
}); 

我越来越

Error: Argument 'DashboardController' is not a function, got undefined 

我想知道的话,哪里是我的错?如果我理解这个权利,ctrl = $controller('DashboardController', {$scope: scope});应该将我新创建的示波器注入我的DashboardController,以便使用属性填充它 - 在本例中为repeats

+0

您是否确定将您的controllers.js包含在您的测试运行器中?例如在你的karma-runner配置文件中? – Xesued 2013-04-03 23:22:57

+0

我检查过,文件读取OK,有趣的是,如果我取消注释'DashboardController'的全局函数样式,这个简单的测试通过,所以这个文件应该包括在内。 – Andna 2013-04-03 23:30:34

+3

因为它值得你不应该挂在你的$ scope变量的元素。 $范围应该包含对您的模型的参考,但它不是您的模型。例如'$ scope.id'应该是'$ scope.SetsAndCollectionsModel.id'。其原因来自于试图将主要类型从子范围设置为父范围的问题。你可以观看描述这个[这里](http://www.egghead.io/video/DTx23w4z6Kc)的视频。创建Angular的Misko在[最佳实践](http://www.youtube.com/watch?v=ZhfUv0spHCY)视频中对此进行了讨论(抱歉,没有直接链接到时间) – 2013-05-18 14:08:02

回答

19

您需要先设置您的Prototype模块。

beforeEach(module('Prototype')); 

添加到您的测试,当前beforeEach将工作。

describe("DashboardController", function() { 
    var ctrl, scope; 

    beforeEach(module('Prototype')); 

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

    it("has repeats attribute set to 5", function() { 
    expect(scope.repeats).toBe(5); 
    }); 
}); 
+0

谢谢,那是失踪的片段。 – Andna 2013-04-04 07:47:45