带有角形布线的单元测试

Question

Just started learning angular. Because i like its unit testing power, i decided to try Karma/Jasmine unit testing on it.

this was my first test app:

    angular.module('notesApp')
    .controller('ListCtrl', [function() {
            var self = this;    
            self.items = [      
                {id: 1, label: 'First', done: true},
                {id: 2, label: 'Second', done: false}    
                ];
            self.getDoneClass = function(item) {      
                return {        
                     finished: item.done,
                     unfinished: !item.done      
                       }; 
            }; }]); 

this was my unit test app:

describe('Controller: ListCtrl', function() {  

  beforeEach(module('notesApp'));
  var ctrl;
  beforeEach(inject(function($controller) {    ctrl = $controller('ListCtrl');  }));
  it('should have items available on load', function() {    
      expect(ctrl.items).toEqual([      
        {id: 1, label: 'First', done: true},      
        {id: 2, label: 'Second', done: false}    
        ]);  
    });




it('should have highlight items based on state', function() {    
    var item = {id: 1, label: 'First', done: true};
    var actualClass = ctrl.getDoneClass(item);    
    expect(actualClass.finished).toBeTruthy();    
    expect(actualClass.unfinished).toBeFalsy();


    item.done = false;    
    actualClass = ctrl.getDoneClass(item);    
    expect(actualClass.finished).toBeFalsy();    
    expect(actualClass.unfinished).toBeTruthy();  
});
});

And it worked fine. But once i tried to test my application which had routing configuration (application was working in browser, i just wanted to test it in unit tests), it started throwing injection errors once tests started. So i copied this first application that was working and just added config with routing to it and it started to fail tests again.

angular.module('notesApp', ['ngRoute'])
app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "/Templates/index-partial.html"
        }).when("/details", {
            templateUrl: "/Templates/details-partial.html"
        }).when("/create", {
            templateUrl: "/Templates/create-partial.html"
        }).when("/edit", {
            templateUrl: "/Templates/edit-partial.html"
        }).when("/delete", {
            templateUrl: "/Templates/delete-partial.html"
        }).otherwise({
            templateUrl: "/Templates/index-partial.html"
        });
    // use the HTML5 History API
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
})
.controller('ListCtrl', [function() {
    var self = this;    
    self.items = [      
        {id: 1, label: 'First', done: true},  
        {id: 2, label: 'Second', done: false}    
        ];
    self.getDoneClass = function(item) {      
        return {        
            finished: item.done, 
            unfinished: !item.done    
          };   
         }; }]); 

I did include all dependencies in karma config file. Actually I included every angular script just to make sure.

 '../Scripts/angular.js',
            '../Scripts/angular-route.js',
            '../Scripts/angular-sanitize.js',
            '../Scripts/angular-cookies.js',
            '../Scripts/ui-bootstrap.js',
            '../Scripts/ui-bootstrap-tpls.js',
            '../Scripts/angular-mocks.js',
            '../Scripts/angular-resource.js',
      '../Modules/myApp.js',
      '../Modules/myApp_UT.js'

Now i don't know what Im doing wrong and i would love some guidelines because im stuck :|

One of Errors that is shown in karma debug page : [$injector:unpr] Unknown provider: $scopeProvider <- $scope

Link to error: https://docs.angularjs.org/error/$injector/unpr?p0=$scopeProvider%20%3C-%20$scope%20%3C-%20ReadListCtrl

There are multiple other erros but I think most of them are there because controller couldn't be created properly.

Answer 1

before your actual app injection you need to inject ngRoute ie

beforeEach(module('ngRoute'));
beforeEach(module('notesApp'));