2014-05-17 243 views
2

我很新,(總newb)AngularJS和Jasmine的BDD測試。我這個週末的目標是成爲更有能力的兩個。角+茉莉花測試

我目前正在關注angularJS網站上提供的教程,我正在本地處理這些文件。在Chapter 2它簡要介紹了用Jasmine創建Angular測試。

但是,我完全按照教程狀態進行,Jasmine失敗了。測試僅僅是爲了確保3個手機在HTML中呈現。 (有)。

這裏的測試:

describe('PhoneListCtrl', function() { 
    it('should create "phones" model with 3 phones', function() { 
     var scope = {}, 
      ctrl = new PhoneListCtrl(scope); 
     expect(scope.phones.length).toBe(3); 
    }); 
}); 

,我得到我的tests.html頁面上的錯誤是:

ReferenceError: PhoneListCtrl is not defined

這裏的tests.html:

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Jasmine Spec Runner v2.0.0</title> 

    <link rel="shortcut icon" type="image/png" href="jasmine/jasmine_favicon.png"> 
    <link rel="stylesheet" type="text/css" href="jasmine/jasmine.css"> 

    <script type="text/javascript" src="jasmine/jasmine.js"></script> 
    <script type="text/javascript" src="jasmine/jasmine-html.js"></script> 
    <script type="text/javascript" src="jasmine/boot.js"></script> 

    <!-- include source files here... --> 
    <script src="js/controllers.js"></script> 

    <!-- include spec files here... --> 
    <script type="text/javascript" src="spec/spec.js"></script> 

</head> 

<body> 
</body> 
</html> 

我知道js/controllers.js沒有錯,因爲3個手機正在呈現(由角)在我的index.html頁面所以我肯定是出了問題的地方與建立茉莉花但不完全知道在哪裏...

更新: PhoneListCtrl定義如下:

var phonecatApp = angular.module('phonecatApp', []); 
phonecatApp.controller('PhoneListCtrl', function ($scope) { .. }); 

我也曾嘗試以下操作:

describe('PhoneListCtrl', function(){ 

    beforeEach(module('phonecatApp')); 

    it('should create "phones" model with 3 phones', inject(function($controller) { 
    var scope = {}, 
     ctrl = $controller('PhoneListCtrl', {$scope:scope}); 

    expect(scope.phones.length).toBe(3); 
    })); 

}); 

,但上述我得到「模塊」是沒有定義...

+0

如何定義「PhoneListCtrl」?如果它是'mymodule.controller('PhoneListCtrl',...)'那麼它不會像這樣工作。 –

+0

@KarolisJuodelė我已經更新了主要帖子,它是如何定義的:) – leaksterrr

+1

模塊未定義,因爲您未加載angular-mocks.js – Constantinos

回答

2

教程項目Angular-phonecat基於angular-seed,它使用karma測試運行器來運行茉莉花測試。

所有JS文件都應該包含在karma配置文件test/karma.conf.js中。請參閱來自角手機來源的example。這將包括PhoneListCtrl該生產線是:

'app/js/**/*.js' 

測試可以使用npm test相等於karma start test/karma.conf.js(該命令在package.json文件中配置)

如果已經克隆了角phonecat項目類似指示運行在tutorial main page上,你應該已經有了工作karma配置文件。