2013-04-03 15 views
5

Właśnie zaczynam od kątowego i chciałem napisać kilka prostych testów jednostkowych dla moich kontrolerów, oto co otrzymałem.angularjs - kontroler testujący

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

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

teraz jestem w procesie przekształcania kontrolerów globalna funkcja do tych określonych przez kątowej API jak widać na przykładzie DashboardController .

Teraz w moim teście:

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

jestem coraz

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

Zastanawiam się wtedy, gdzie jest mój błąd? Jeśli dobrze rozumiem to prawo, ctrl = $controller('DashboardController', {$scope: scope}); powinien wstrzyknąć mój nowo utworzony zakres do mojego DashboardController, aby zapełnić go atrybutami - w tym przypadku repeats.

+0

Czy upewniałeś się, że umieściłeś plik controllers.js w swoim biegiem testowym? Na przykład w twoim pliku konfiguracyjnym karma-runner? – Xesued

+0

Sprawdziłem, plik został odczytany OK, co jest ciekawe, że jeśli odkomentuję globalny styl funkcji 'DashboardController', ten prosty test przejdzie, więc ten plik powinien zostać dołączony. – Andna

+3

Za to, co warto, nie powinieneś zawieszać elementów ze zmiennej $ scope. $ scope powinien zawierać ODNIESIENIE do twojego modelu, ale NIE jest to twój model. na przykład '$ scope.id' powinno być czymś w rodzaju' $ scope.SetsAndCollectionsModel.id'. Przyczyną tego są problemy próbujące ustawić typy podstawowe z zakresu podrzędnego na zakres nadrzędny. Możesz obejrzeć film opisujący to [tutaj] (http://www.egghead.io/video/DTx23w4z6Kc). Misko, który stworzył Angular, opowiada o tym również w wideo [best practices] (http://www.youtube.com/watch?v=ZhfUv0spHCY) (przepraszam, nie mam linku bezpośrednio do czasu) –

Odpowiedz

19

Najpierw należy skonfigurować moduł Prototype.

beforeEach(module('Prototype')); 

Dodaj do testu, nad bieżącym beforeEach będzie działać.

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

Dzięki, to był brakujący fragment. – Andna

Powiązane problemy