单元测试AngularJS:未捕获错误:[$ injector:nomod]模块不可用!和ReferenceError:运行Karma时未定义模块

时间:2015-03-05 04:13:45

标签: javascript angularjs karma-jasmine

我在茉莉花中有一个小单元测试与Karma一起运行。但是当我运行Karma时它显示错误:

  

未捕获错误:[$ injector:nomod]模块'material.controllers'不是   可以!您要么错误拼写了模块名称,要么忘记加载它。   如果注册模块,请确保将依赖项指定为   第二个论点。

     

FAILED单位:LoginController遇到了一个   声明例外

     

ReferenceError:未定义模块

这是我的源代码,配置Karma文件和unitTest。

karma.conf.js

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: [
      '/home/tanpham/Angular/Dev/libs/angular/angular.js',
      '/home/tanpham/Angular/Dev/js/**/*.js',
      '/home/tanpham/Angular/Dev/js/*.js',
      '/home/tanpham/Angular/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: {
    },

的index.html

<body ng-app="material" ng-controller="AppController">
    <ui-view></ui-view>
</body>

app.js

angular.module('material.controllers', []);
angular.module('material.services', []);
angular.module('material.directives',[]);
angular.module('material.filters',[]);
var app = angular.module('material', ['ui.router','material.directives','http-auth-interceptor','material.controllers','material.services','material.filters'])
.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
    $stateProvider
    .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "views/app.html"
    }).state('login', {
        url: "/login",
        templateUrl: "views/login.html",
        controller: "LoginController"
    });

    $urlRouterProvider.otherwise('/login');
})

的LoginController

angular.module('material.controllers').controller('LoginController', function($scope) {

      $scope.name = "Ari";
      $scope.sayHello = function() {
         $scope.greeting = "Hello " + $scope.name;
      }
});

helloSpec.js

describe('Unit: LoginController', function() {

      // Load the module with LoginController
      beforeEach(module('material.controllers'));

      var ctrl, scope;
      // inject the $controller and $rootScope services
      // in the beforeEach block
      beforeEach(inject(function($controller, $rootScope) {
        // Create a new scope that's a child of the $rootScope
        scope = $rootScope.$new();
        // Create the controller
        ctrl = $controller('LoginController', {
          $scope: scope
        });
      }));

      it('should create $scope.greeting when calling sayHello', 
        function() {
          expect(scope.greeting).toBeUndefined();
          scope.sayHello();
          expect(scope.greeting).toEqual("Hello Ari");
      });

})

那么,我可以做到这一点,我的模块名称是对的吗?

2 个答案:

答案 0 :(得分:8)

检查角度模块的加载顺序。作为karma conf中javascript文件的列表,查看模块定义文件是否先于其他使用它的文件加载。

调整此商家信息中的订单,明确加载文件&#39; material.controllers&#39;模块已定义。

files: [
  '/home/tanpham/Angular/Dev/libs/angular/angular.js',
  '/home/tanpham/Angular/Dev/js/**/*.js',
  '/home/tanpham/Angular/Dev/js/*.js',
  '/home/tanpham/Angular/Test/*.js'
],

答案 1 :(得分:1)

我遇到过这个问题。并解决了它。 只需在模块声明语句中的模块名称后面添加“,[]”。在这种情况下,chaged代码将为:

angular.module('material.controllers',[])
 .controller('LoginController', function($scope) {

  $scope.name = "Ari";
  $scope.sayHello = function() {
     $scope.greeting = "Hello " + $scope.name;
  }
});