2014-07-21 46 views
0

這可能似乎傻給你,但我從過去幾天的擔心,因爲我是新來angularjs和茉莉花以及如何測試單元測試文件angularjs

在這裏,我已經下載了角種子從https://github.com/angular/angular-seed -master和目錄結構:

enter image description here

在我的應用程序/ JS文件夾,我有代碼

'use strict'; 

/* Controllers */ 

angular.module('myApp.controllers', []).controller('MyCtrl1', ["$scope",function($scope) { 

    $scope.name = 'Hello World!'; 

    }]); 
一controllers.js文件調用

開創了同一個文件夾名爲home.tests.js文件,並具備

'use strict'; 

describe('MyCtrl1', function() { 
      var scope, $httpBackend; //we'll use these in our tests 

      //mock Application to allow us to inject our own dependencies 
      beforeEach(angular.mock.module('myApp')); 
      //mock the controller for the same reason and include $rootScope and $controller 
      beforeEach(angular.mock.inject(function ($rootScope) { 
        //create an empty scope 
        scope = $rootScope.$new(); 
        //declare the controller and inject our empty scope 
        $controller('MyCtrl1', { 
         $scope: scope 
        }); 
       })); 
       // tests start here 
       it('should have variable text = "Hello World!"', function() { 
        expect(scope.text).toBe('Hello World!'); 
       }); 
      }); 

的代碼和我的人緣文件是這樣的:

// Karma configuration 
// Generated on Tue Jul 15 2014 14:30:06 GMT+0530 (India Standard Time) 

module.exports = function(config) { 
    config.set({ 

    // base path that will be used to resolve all patterns (eg. files, exclude) 
    basePath: '', 


    // frameworks to use 
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 
    frameworks: ['jasmine'], 


    // list of files/patterns to load in the browser 
    files: [ 
    'app/bower_components/angular/angular.js', 
    'app/bower_components/angular-route/angular-route.js', 
    'app/bower_components/angular-mocks/angular-mocks.js', 
    'app/js/*.js' 
    ], 


    // list of files to exclude 
    exclude: [ 
    ], 


    // preprocess matching files before serving them to the browser 
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 
    preprocessors: { 
    }, 


    // test results reporter to use 
    // possible values: 'dots', 'progress' 
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter 
    reporters: ['progress'], 


    // web server port 
    port: 9876, 


    // enable/disable colors in the output (reporters and logs) 
    colors: true, 


    // level of logging 
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 
    logLevel: config.LOG_INFO, 


    // enable/disable watching file and executing tests whenever any file changes 
    autoWatch: true, 


    // start these browsers 
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 
    browsers: ['Chrome'], 


    // Continuous Integration mode 
    // if true, Karma captures browsers, runs the tests and exits 
    singleRun: false 
    }); 
}; 

而且已經列入的index.html文件:

我的index.html文件:

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <meta charset="utf-8"> 
    <title>My AngularJS App</title> 
    <link rel="stylesheet" href="css/app.css"/> 
</head> 
<body> 
    <ul class="menu"> 
    <li><a href="#/view1">view1</a></li> 
    <li><a href="#/view2">view2</a></li> 
    </ul> 

    <div ng-view></div> 

    <div>Angular seed app: v<span app-version></span></div> 

    <!-- In production use: 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> 
    --> 
    <link data-require="jasmine" data-semver="2.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.css" /> 
    <script data-require="json2" data-semver="0.0.2012100-8" src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script> 
    <script data-require="jasmine" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.js"></script> 
    <script data-require="jasmine" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine-html.js"></script> 
    <script data-require="[email protected]*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/boot.js"></script> 
    <script data-require="angular.js" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> 
    <script data-require="angular-mocks" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular-mocks.js"></script>  

    <script src="lib/angular/angular.js"></script> 
    <script src="lib/angular/angular-route.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/controllers.js"></script> <!--Controller file--> 
    <script src="js/home.tests.js"></script> <!--Testing file--> 
</body> 
</html> 

所以,當我運行該文件與我的域名爲http://local.collective.net/#/view1

錯誤的樣子: enter image description here

請讓我知道,是什麼問題。

預先感謝

回答

0

有幾個錯誤:

什麼angular.mock.module(或module其是別名)所做的是一個模塊加載到所述測試。

您正試圖加載myApp模塊來測試不在該模塊中的控制器,但是測試了myApp.controllers。那裏的點沒有進行任何類型的關係或繼承,它只是一個名稱,所以如果您在該確切模塊上有控制器,則需要加載它。

另一方面,在測試中,您使用的是$controller,但您沒有注入它,並且當您想要說scope.name時,您還期待scope.text

看到它的工作here