TypeError：无法读取null的属性'forgotPassword'

时间：2014-07-30 09:49:44

标签： angularjs unit-testing

我是AngularJS的新手。我已经构建了一个app ..现在我想测试它.. 现在我正在使用AngularJS为我的应用程序的登录页面编写一个非常基本的测试用例，但是在运行该测试用例时遇到的错误如下：

  • Chrome 35.0.1916（Windows 7）mainCtrl动态消息应出现FAILED错误：[$ injector：modulerr] http://errors.angularjs.org/1.2.6/ $ injector

  • TypeError：无法读取null的属性'forgotPassword'：/ iLab/app/test/test_login.js：25：9）

完整错误：

这是整个错误：

Chrome 35.0.1916 (Windows 7) mainCtrl dynamic message should appear FAILED Error: [$injector:modulerr] http://errors.angularjs.org/1.2.6/$injector/modulerrp0=ngMock&p1=Error: [$injector:unpr] http://errors.angularjs.org/1.2.6/$injector/unpr?p0=%24%24rAFProvider
    at Error (native)
    at http://localhost:9876/base/lib/angular/angular.min.js?501db67e5cad2ba0361f46f3b7aa2aff9eb40143:15:11
    at http://localhost:9876/base/lib/angular/angular.min.js?501db67e5cad2ba0361f46f3b7aa2aff9eb40143:788:11
    at Object.c [as get] (http://localhost:9876/base/lib/angular/angular.min.js?501db67e5cad2ba0361f46f3b7aa2aff9eb40143:712:13)
    at Object.Yb.m.$provide.decorator (http://localhost:9876/base/lib/angular/angular.min.js?501db67e5cad2ba0361f46f3b7aa2aff9eb40143:775:16)
    at http://localhost:9876/base/bower_components/angular-mocks/angular-mocks.js?c83494fe10820a7dd953866c4e1cd590b17a0b15:1746:12
    at Object.d [as invoke] (http://localhost:9876/base/lib/angular/angular.min.js?501db67e5cad2ba0361f46f3b7aa2aff9eb40143:732:14)
    at http://localhost:9876/base/lib/angular/angular.min.js?501db67e5cad2ba0361f46f3b7aa2aff9eb40143:688:17
    at Array.forEach (native)
    at q (http://localhost:9876/base/lib/angular/angular.min.js?501db67e5cad2ba0361f46f3b7aa2aff9eb40143:32:7)

at Error (native) at 

D:/iLab/app/lib/angular/angular.min.js:15:11 at D:/iLab/app/lib/angular/angular.min.js:695:7 at Array.forEach (native) at q (D:/iLab/app/lib/angular/angular.min.js:32:7) at e (D:/iLab/app/lib/angular/angular.min.js:680:4) at Object.Yb [as injector] (D:/iLab/app/lib/angular/angular.min.js:7 95:5) at workFn (D:/iLab/app/bower_components/angular-mocks/angular-mocks.js:2150:52)TypeError: Cannot read property 'forgotPassword' of null at null.<anonymous> (D:/iLab/app/test/test_login.js:25:9) Chrome 35.0.1916 (Windows 7): Executed 1 of 1 (1 FAILED) ERROR(0.068 secs / 0.061 secs)

这些是我的档案：

的index.html 

<!doctype html>
<html lang="en" ng-app="angularProject">
<head>
  <meta charset="utf-8">
  <title>iLAB</title>
  <link rel="stylesheet" href="css/app.css"/>
  <link rel="stylesheet" href="css/bootstrap.min.css"/>
  <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/> 
  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>  

  <script src="lib/select2/jquery-1.10.1.min.js" type="text/javascript"></script>   
  <link href="lib/select2/select2.css" rel="stylesheet"/>
  <script src="js/jquery-ui.js"></script>
  <link href="css/jquery-ui.css" rel="stylesheet"/> 

  <script src="lib/angular/angular.min1_2_2.js"></script>  
  <script src="lib/angular/angular-ui.min.js"></script>   
  <script src="lib/angular/angular-route.js"></script>
  <script src="lib/angular/angular-resource.js"></script>
  <script src="js/controllers/main.js"></script>
  <script src="js/controllers/dashboard.js"></script>
  <script src="lib/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>  
</head>
<body ng-controller='mainCtrl' class="bodyColor"  onload="myFunction()">
<script type="text/javascript">
function myFunction(){
document.getElementById("userName").focus();
}
function forgotPassword(){
  console.log('test password!');
}
</script>

<div id="blanket"></div>
<div id="loginBox" >
<div id='loginFormContainer'>
<form  class="form_style" >
    <div class='loginFormLogo'><div class='logoText'>iLAB</div> </div>
    <div class="login_dyanamic_msg_contaier"><div class="alertBox login_dyanamic_msg h5" ng-hide="loginAlertMessage" >{{dyanamicMessage}}</div></div>
    <span  class="float-left" >
    <div class="text-left"><label class='lblUserName h4Bold' style="cursor: default;">Username</label></div>
    <div  style="padding-bottom:16px"><input id='userName'placeholder='john doe' type='text' ng-model='username'/></div>
    </span>
    <div class="float-left">
    <div class="text-left"><label class='lblPassword h4Bold' style="cursor: default;">Password</label></div>
    <div class="text-left">
        <input type='password' placeholder='&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;' ng-model='password' id="ilabpassword" ng-trim='false'/></div>        
    <div class="text-right h7 undolink" ><a Onclick="forgotPassword()">Forgot Password?</a></div>
    </div>      

    <div class='loginButton'>
    <button id="loginId" class='PrimaryBtn h3Bold' style="margin-top:20px;padding:15px 60px 15px 60px!important;" ng-click="checkLogin()">Login</button>
    </div>  
</form>
</div>
</div>
</div>
<div ui-view="main" class="container " ></div>
<div class="container" ui-view="footer"></div>
</body>
</html>

app.js 

'use strict';

google.load('visualization', '1', {
packages : ['corechart', 'table']
});

var myapp = angular.module('angularProject', ['ngRoute', 'ui.bootstrap', 'ui', 'ui.router', 'ui.sortable', 'angularProject.filters', 'angularProject.services','angularProject.directives', 'angularProject.controllers']).config(['$stateProvider', '$routeProvider', '$urlRouterProvider', 'RestangularProvider', function ($stateProvider, $routeProvider, $urlRouterProvider, RestangularProvider) 
{
    $stateProvider.
    state('home', {
    url : '/home',
    views : {
    "main" : {
    templateUrl : 'views/home.html',
    controller : 'homeCtrl'
                    }
             }
            })
            .state('home.dashboard', {
            url : '/dashboard',
            views : {
            "content" : {
            templateUrl : 'views/dashboard.html',
            controller : 'dashboardCtrl'
                    }
                }
            })
     }
]};

main.js 

'use strict';

angular.module('angularProject').controller('mainCtrl', function($scope, $state, $http, $rootScope, $timeout, keyboardManager, $location, Product, User, $stateParams, Restangular)
{
    $rootScope.loginFirst = 1;
    $scope.loginAlertMessage = true;
    $location.path("/");
    $scope.forgotPassword = function () {

    $scope.loginAlertMessage = false;
    $timeout(function () {
        $scope.loginAlertMessage = true;
    }, 3000);
    $scope.dyanamicMessage = "Check your email inbox!!";
};

$scope.checkLogin = function () {
    var user_data = {
        "username" : $scope.username,
        "password" : $scope.password
    };
  }
}

test_login.js 

describe('mainCtrl',function()
{
    var $controller = null;
    var $scope = null;

    beforeEach(function()
    {
        module('angularProject');
    });
    beforeEach(inject(function($controller, $rootScope)
    {
        $scope = $rootScope.$new();
        controller = $controller('mainCtrl',
        {
            $scope: $scope
        });
    }));
    it('dynamic message should appear',function()
    {
        $scope.forgotPassword();
        expect($scope.dyanamicMessage).toBe("Check your email inbox!!");
    });
});

karma.conf.js

// Karma配置 //生成于2014年7月28日星期一18:17:53 GMT + 0530（印度标准时间）

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: [
  'lib/angular/angular.min.js',
  'bower_components/angular-mocks/angular-mocks.js',
  'lib/bootstrap/*.js',
  'lib/googleChart/*.js',
  'lib/jquery/*.js',
  'lib/select2/*.js',
  'js/*.js',
  'js/controllers/*.js',
  'test/*.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
  });
};

请有人帮帮我吗？ 我无法追查问题，所以任何帮助肯定会受到赞赏.. :)

3 个答案:

答案 0 :(得分：1)

第一个错误（你实际上还没有包括整个错误）来自角度注入器。我想其余的错误是它无法找到模块angularProject。

您的app.js似乎正在正确定义模块，因此我认为您需要在运行测试之前检查您是否真正将app.js加载到浏览器中。

这是在karma.conf数组中的config.set.files文件中完成的。至少你会想要'/path/to/app.js'。你能确认一下吗？

其次，您实际使用main.js或类似方式在angular.module('angularProject').controller()注册控制器吗？

修改

确保您的项目安装了角度模拟，并在karma conf中的files数组中引用它。如果您认为自己已经这样做，请发布您的业力证明。

编辑2

您可以验证角度和角度模拟是否相同？即两个1.2.6？

上次和最后修改（希望如此）

您似乎正在使用两个不同版本的角度模块，您需要它们（确切地）匹配以确保不会出现兼容性问题。

答案 1 :(得分：1)

我发现错误..

棱角和角度模拟应该是相同的版本....（在这种情况下，它是1.2.6）

我面临的真正问题是由于angular.min.js文件的重复，我试图加载 angular.min.js 和 angular.min1_2_2.js < / strong> together..which导致模块依赖性不正确..

Bdw感谢您的帮助.. :)

答案 2 :(得分：0)

我认为这可能是由select2引起的错误。

我也使用了select2，我注意到，当我删除它时，错误消失了。尚未找到解决方案，但我会让您及时更新。

问候。

相关问题
最新问题