2015-07-28 63 views
1

我一直在關注這個開發商的例子,如何設置與AngularJS一些基本的茉莉花測試here注射錯誤使用茉莉花與AngularJS當

我的問題似乎是,在我的整個應用程序中,我使用一個我稱之爲myApp的模塊。然而在我的測試中,它抱怨缺少引用。

app.js

(function() { 
    "use strict"; 

    var myAppModule = angular.module('myApp', ['ngAnimate', 'ngRoute', 'ui.router', 'ngResource']); 
})(); 

dogService,JS

(function() { 
     "use strict"; 

     var myAppModule = angular.module('myApp'); 
     myAppModule.factory('Dog', function() { 

     var dogs = [ 
      { type: "Labrador", name: "Rover" }, 
      { type: "Tibetan Terrier", name: "Joey" }, 
      { type: "Yorkshire Terrier", name: "Rufus" } 
     ]; 

     return { 
      query: function() { 
       return dogs; 
      }, 
      add: function (dog) { 
       dogs.push(dog); 
      } 
     }; 
    }); 
}()); 

serviceSpec.js

///<reference path="~/Scripts/jasmine.js"/> 
///<reference path="~/Scripts/jasmine-html.js"/> 
///<reference path="~/Scripts/boot.js"/> 
///<reference path="~/Scripts/angular.js"/> 
///<reference path="~/Scripts/angular-mocks.js"/> 
///<reference path="~/Scripts/App/app.js"/> 
///<reference path="~/Scripts/App/Services/dogService.js"/> 
"use strict"; 
describe("dogService", function() { 

    beforeEach(module("myApp")); 

    describe("Dog service", function() { 

     var dog; 

     beforeEach(inject(function ($injector) { 
      dog = $injector.get('Dog'); 
     })); 

     it('should return 3 dogs when querying', function() { 
      expect(dog.query().length).toBe(3); 
     }); 

     it('should return 4 dogs when querying after adding a dog', function() { 
      dog.add({ name: 'Fido', type: 'German Shepherd' }); 
      expect(dog.query().length).toBe(4); 
     }); 
    }); 
}); 

最後我的錯誤:

finished in 0.071s2 specs, 2 failuresSpec List | FailuresSpec List | Failures 

dogService Dog service should return 3 dogs when querying 

Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr] Failed to instantiate module ngAnimate due to: Error: [$injector:nomod] Module 'ngAnimate' is not available! You either misspelled the module name or forgot to load it. 

如果我改變app.js這一點,我不會得到任何的錯誤,但我將不得不在模塊中的頂級注入依賴。

(function() { 
     "use strict"; 

     var myAppModule = angular.module('myApp', []); 
    })(); 

有沒有人有任何建議?

+1

您是否安裝了ngAnimate依賴項?這在Angular中默認不包含。 – jazmit

+0

@jazmit我在.net 4.5環境中開發,所以我有一個包含ngAnimate的腳本包,它絕對在腳本文件夾中,我沒有訪問網站的問題,注入錯誤只在運行測試時出現。 –

+0

但它不在serviceSpec.js文件頂部的引用腳本列表中。 ngRoute,ngResource和ui.router也一樣。順便說一句,爲什麼你同時使用ngRoute和ui.router。這沒有什麼意義。 –

回答

0

缺少對注入myApp的角度文件的引用。

///<reference path="~/Scripts/angular-animate.js"/> 
///<reference path="~/Scripts/angular-route.js"/> 
///<reference path="~/Scripts/angular-ui-router.js"/> 
///<reference path="~/Scripts/angular-resource.js"/> 

添加這些固定它,但它只是一個解決方案,因爲它爲每個測試腳本添加了很多引用。