在具有 ngMaterial 依赖项的 angularjs 应用程序上运行 jasmine 测试时出错答案

【问题标题】：Error when running jasmine tests on angularjs app with ngMaterial dependency在具有 ngMaterial 依赖项的 angularjs 应用程序上运行 jasmine 测试时出错
【发布时间】：2014-12-04 15:30:30
【问题描述】：

我有一个依赖于 angular-material ngMaterial 的应用程序

var sequencesApp = angular.module('sequencesApp', ['ngMaterial']);

sequencesApp.controller('SequenceListCtrl', function ($scope) {
  $scope.sequences = [
    {'name': 'Sequence 1',
     'sequence': 'actgactgcatgctgctagctgcatgcta'},
    {'name': 'Sequence 2',
     'sequence': 'atgcatcatcatcatctctgcatgcatcatctacacataatagcatcgatctcatctcacacatgcatgctgcatcta'},
    {'name': 'Sequence 3',
     'sequence': 'atgcatacatcatcatctctgcatgcatcatctacacataatagcatcgatctcatctcacacatgcatgctgcatctaatgcatcatcatcatctctgcatgcatcatctacacataatagcatcgatctcatctcacacatgcatgctgcatctaatgcatcatcatcatctctgcatgcatcatctacacataatagcatcgatctcatctcacacatgcatgctgcatctaatgcatcatcatcatctctgcatgcatcatctacacataatagcatcgatctcatctcacacatgcatgctgcatctaatgcatcatcatcatctctgcatgcatcatctacacataatagcatcgatctcatctcacacatgcatgctgcatcta'}
  ];
});

我正在使用 jasmine 和 karma 使用以下测试代码运行测试

describe('SequenceListCtrl', function(){

  beforeEach(module('sequencesApp'));

  var $controller;

  beforeEach(inject(function(_$controller_){
    // The injector unwraps the underscores (_) from around the parameter names when matching
    $controller = _$controller_;
  }));

  describe('$scope.sequences', function() {

      beforeEach(function () {
          $scope = {};
          $controller = $controller('SequenceListCtrl', { $scope: $scope });
      });

      it('should create "sequences" model with 3 sequences', function () {
          expect($scope.sequences.length).toBe(3);
      });

  });

});

当我运行karma start 时出现以下错误：

Error: ngMaterial requires HammerJS to be preloaded.
    at MdCoreInitialize (/Users/rhysalgar/Dropbox/Projects/LabGeniusApp/bower_components/angular-material/angular-material.js:21:11)
    at Object.invoke (/Users/rhysalgar/Dropbox/Projects/LabGeniusApp/bower_components/angular/angular.js:4138:17)
    at /Users/rhysalgar/Dropbox/Projects/LabGeniusApp/bower_components/angular/angular.js:3960:71
    at forEach (/Users/rhysalgar/Dropbox/Projects/LabGeniusApp/bower_components/angular/angular.js:322:20)
    at Object.createInjector [as injector] (/Users/rhysalgar/Dropbox/Projects/LabGeniusApp/bower_components/angular/angular.js:3960:3)
    at Object.workFn (/Users/rhysalgar/Dropbox/Projects/LabGeniusApp/bower_components/angular-mocks/angular-mocks.js:2337:52)
TypeError: undefined is not a function
    at Object.<anonymous> (/Users/rhysalgar/Dropbox/Projects/LabGeniusApp/media/development/test/controllers.test.js:20:25)
TypeError: Cannot read property 'length' of undefined
    at Object.<anonymous> (/Users/rhysalgar/Dropbox/Projects/LabGeniusApp/media/development/test/controllers.test.js:24:34)

``` 当我删除 app 模块中的 ngMaterial 依赖项时，一切运行良好。

我的karma.conf.js 文件有以下files 数组：

files: [
  'test-main.js',
  'bower_components/angular/angular.js',
  'bower_components/angular-aria/angular-aria.js',
  'bower_components/angular-animate/angular-animate.js',
  'bower_components/hammerjs/hammer.js',
  'bower_components/angular-material/angular-material.js',
  'bower_components/angular-mocks/angular-mocks.js',
  'media/development/js/*.js',
  'media/development/test/*.js'
],

【问题讨论】：

标签： angularjs unit-testing jasmine karma-runner angular-material

【解决方案1】：

您应该以正确的顺序包含依赖项：

<!-- Angular Material Dependencies -->
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>

<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>

如果您需要更多信息，请查看Installing Build 部分。

【讨论】：