CODEWITHSUNDEEP
javascriptangularjskarma-jasmine
StrugglingCoder
StrugglingCoder

Reputation: 5021

Angular Module is not available Karma Jasmine

I am new to Karma , so the error might be very basic.

It is my karma.conf.js file 

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: [
      'bower_components/angular/angular.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'bower_components/angular-resource/angular-resource.js',
      'app/*.js',
      'test/*.js',
      'app/**/*.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,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

Inside app directory my js and html files reside.

enter image description here

The index.html looks like :

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-heroComponentSimple-production</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

  <script src="index.js"></script>
  <script src="heroDetail.js"></script>

</head>
<body ng-app="heroApp">
  <!-- components match only elements -->
<div ng-controller="MainCtrl as ctrl">
  <b>Hero</b><br>
  <hero-detail hero="ctrl.hero"></hero-detail>
</div>
</body>
</html>

And index.js looks like :

(function(angular) {
  'use strict';
    angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {
        this.hero = {
            name: 'Miles Bronson'
        };
    });
})(window.angular);

Now in my test spec file I tried :

describe('MainController',function(){
    var $rootScope,
        $scope,
        controller;
    beforeEach(function(){
        module('heroApp');

        inject(function($injector){
            $rootScope = $injector.get('$rootScope');
            $scope = $rootScope.$new();
            controller = $injector.get('$controller')('MainCtrl',{$scope: $scope});
        });
    });

    describe('Initialization',function(){
        it('should initialize name of the hero',function(){
            expect('$scope.hero.name').toEqual('Miles Bronson'); 
        });
    });

})

But it said Chrome 55.0.2883 (Windows 8.1 0.0.0) ERROR Uncaught Error: [$injector:nomod] Module 'heroApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.6.1/$injector/nomod?p0=heroApp at bower_components/angular/angular.js:2183.

What am I doing wrong ?

Upvotes: 1

Views: 1279

Answers (1)

Slava.K
Slava.K

Reputation: 3080

This is probably because files loading order is not specified and karma just loads your source files in alphabetical order, therefore heroDetail.js comes first, but heroApp module is defined in index.js. Try to change your karma config like this:

files: [
  'bower_components/angular/angular.js',
  'bower_components/angular-mocks/angular-mocks.js',
  'bower_components/angular-resource/angular-resource.js',
  'app/index.js',
  'app/heroDetail.js',
  'test/*.js',
  'app/**/*.js',
  'test/**/*.js'
],

Upvotes: 2

Related Questions