带角度路由的单元测试

Question

刚开始学习 Angular。因为我喜欢它的单元测试能力，所以我决定尝试对它进行 Karma/Jasmine 单元测试。

这是我的第一个测试应用：

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

这是我的单元测试应用：

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

而且效果很好。但是，一旦我尝试测试具有路由配置的应用程序（应用程序在浏览器中运行，我只想在单元测试中对其进行测试），一旦测试开始，它就会开始抛出注入错误。所以我复制了第一个正在运行的应用程序，并添加了带有路由的配置，它再次开始失败测试。

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

我确实在 karma 配置文件中包含了所有依赖项。实际上，我包含了每个 Angular 脚本只是为了确保。

 '../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'

现在我不知道我做错了什么，我会喜欢一些指导方针，因为我卡住了：|

业力调试页面中显示的错误之一：[$injector:unpr] 未知提供者：$scopeProvider

错误链接：https://docs.angularjs.org/error/$injector/unpr?p0=$scopeProvider%20%3C-%20$scope%20%3C-%20ReadListCtrl

还有多个其他错误，但我认为其中大部分都存在，因为无法正确创建控制器。

Answer 1

在您实际注入应用程序之前，您需要注入 ngRoute 即

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