CODEWITHSUNDEEP
angularjsunit-testingjasminekarma-runnerangular-material
rjralgar
rjralgar

Reputation: 153

Error when running jasmine tests on angularjs app with ngMaterial dependency

I have an app with a dependency on 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'}
  ];
});

and I am running tests using jasmine and karma with the following test code

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);
      });

  });

});

When I run karma start the following error occurs:

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)

``` Everything runs fine when I remove the ngMaterial dependency in the app module.

My karma.conf.js file has the following files array:

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'
],

Upvotes: 1

Views: 1336

Answers (1)

Egel
Egel

Reputation: 1956

You should include dependencies with the right order:

<!-- 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>

If you need further info, take a look on Installing Build section.

Upvotes: 1

Related Questions