角度のルーティングによるユニットテスト

Question

ちょうど角度を学習し始めました。ユニットテスト能力が好きなので、私はカルマ/ジャスミンユニットテストを試してみることにしました。これは私のユニットテスト用のアプリだった

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

そして、それがうまく働いた

これが私の最初のテストのアプリでした。しかし、いったん私は（アプリケーションがブラウザで動作していた、私はちょうど単体テストでそれをテストしたい）ルーティング構成を持っていた私のアプリケーションをテストしようとしたら、テストが始まった後に注入エラーを投げ始めました。だから私は働いていたこの最初のアプリケーションをコピーし、ちょうどそれにルーティングとconfigを追加し、それは再びテストに失敗し始めました。

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

私はカルマコンフィギュレーションファイルにすべての依存関係を含めました。実際には、すべての角度のスクリプトが含まれています。

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

私は何が間違っているのか分かりませんし、私はいくつかのガイドラインが好きです。

カルマデバッグページに表示されたエラーの

ワン：[$インジェクター：UNPR]不明者： - ：https://docs.angularjs.org/error/$injector/unpr?p0=$scopeProvider%20%3C-%20$scope%20%3C-%20ReadListCtrl

複数の他のerrosがありますが、私$ scopeProvider < $スコープは

リンク誤差にコントローラーを正しく作成することができなかったため、ほとんどがそこにあると思います。あなたがngRouteを注入する必要がある実際のアプリの注入前

Answer 1

は

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