Unit testing using Jasmine and Karma / AngularJS project

Question

I am writing test cases using AngularJS with Jamsine. Working on mobile application using AngularJS and for UI using IONIC framework. So I am calling one of controller function from my spec.js for testing. Meantime, I am getting error like.

Error: Unexpected request: GET ./partials/main.html

No more request exceepted

This is my mail html file. In main.html file we are loading all other states of application.

And I already injected html in spec.js. See below code.

beforeEach(inject(function ($rootScope, $controller, $q,$injector) {

        $httpBackend = $injector.get('$httpBackend');
        $httpBackend.whenGET('./partials/main.html').respond(200, '');

}));

Still i ma not able to resolve error. Can i add those html files in 'spec.js' ? or any other solution ? Please help me. I am a fresher with Karma and Jasmine.

Thanks in advance.

Answer 1

Change your code to expectGET in place of whenGET like this

beforeEach(inject(function ($rootScope, $controller, $q,$injector) {

    $httpBackend = $injector.get('$httpBackend');
    $httpBackend.expectGET('./partials/main.html').respond(200);

}));

Answer 2

Yes Keshav. Please see below code :

Below is my karma.conf.js file. Here are all files added which I need to test. And as well as I have added a few plugins for generating reports and code coverage.

module.exports = function(config) {
  config.set({
     basePath: '',
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],
    plugins: [
      'karma-jasmine',
      'karma-coverage',
      'karma-chrome-launcher',
      'karma-html-reporter',
      'karma-ng-html2js-preprocessor'
],

// list of files / patterns to load in the browser
files: [

    'my_dir_path/www/js/libs/angular.js',
    'my_dir_path/www/js/libs/angular-mocks.js',
    'my_dir_path/www/js/libs/ionic.js',
    'my_dir_path/www/js/libs/angular.min.js',
    'my_dir_path/www/js/libs/angular-route.js',
    'my_dir_path/www/js/libs/angular-sanitize.js',
    'my_dir_path/www/js/libs/angular-animate.js',
    'my_dir_path/www/js/libs/angular-touch.min.js',
    'my_dir_path/www/js/libs/angular-ui-router.js',
    'my_dir_path/www/js/libs/ionic-angular.js',
    'my_dir_path/www/js/libs/http-auth-interceptor.js',
    'my_dir_path/www/js/libs/ng-map.min.js',
    'my_dir_path/www/js/index.js',
    'my_dir_path/www/js/app.js',
    'my_dir_path/www/js/controllers.js',
    'my_dir_path/www/js/services.js',
    'my_dir_path/www/js/startSpec.js',
    '*.html'
],

// 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: {
  //'**/*.html': ['angular-templating-html2js']
  "my_dir_path/www/partials/*.html": ["ng-html2js"]
},

ngHtml2JsPreprocessor: {
    // If your build process changes the path to your templates,
    // use stripPrefix and prependPrefix to adjust it.
    //stripPrefix: "source/path/to/templates/.*/",
    //prependPrefix: "web/path/to/templates/",
    stripPrefix:"my_dir_path/www/",
    // the name of the Angular module to create
    moduleName: 'partials'
},

// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'html'],

// the default configuration
/* htmlReporter: {
  outputDir: 'karma_html',
  templatePath: 'node_modules/karma-html-reporter/jasmine_template.html'
}, */

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

And this is my spec.js file. Here I am writing unit test cases for the controller. In this specs calling function "$scope.onClickResetForgot()" (That is in controller) for testing controller code. In controller I am also calling one HTTP service. After HTTP call, we are not able to back in response that why we have updating scope manually via $scope.$digest().

   'use strict';

    describe('loginController', function () {
        var $scope,$controller,$httpBackend, AuthenticationService, def, respData = {data : {Success:true,ErrorMsg:""}};

        beforeEach(inject(function ($rootScope, $controller, $q,$injector) {

            $httpBackend = $injector.get('$httpBackend');
            $httpBackend.expectGET('./partials/main.html').respond(200);

            AuthenticationService = {
              forgotPassword: function (data) {
                console.log(data);  
                def = $q.defer();
                return def.promise;
              }
            };

            spyOn(AuthenticationService, 'forgotPassword').and.callThrough();
            $scope = $rootScope.$new();
            $controller = $controller('loginController', {
            '$scope': $scope,
            AuthenticationService : AuthenticationService    
            });
        }));

        it("Verifying login credentials, device token and device id." , function() {

            $scope.Reset.Email = "harish.patidar@gmail.com";
            $scope.onClickResetForgot();
            def.resolve(respData);
            // Update response to controller. So we need to call below line manually. 
            $scope.$digest();
            expect(AuthenticationService.forgotPassword).toHaveBeenCalled();
            $httpBackend.flush();   
        })
    });

});

And this is my controller in controller.js.

    .controller('loginController', ['$rootScope', '$scope', '$http', '$state', 'AuthenticationService', '$ionicPopup', function($rootScope, $scope, $http, $state, AuthenticationService,$ionicPopup) {

    $scope.onClickResetForgot =function(type) {

      console.log($scope.Reset.Email);
      $scope.forgotMessage = "";
      $rootScope.message = "";
      AuthenticationService.forgotPassword({"Email": $scope.Reset.Email}).then(function (resp) {

            var forgotPasswordPopup = $ionicPopup.alert({
                  title: "Forgot Password",
                  template: "An email has been sent to '"+$scope.Reset.Email+"' with instructions for recovering your AlertSense credentials"
              });

            forgotPasswordPopup.then(function(res) {
                $scope.onCancelForgot();
            });


      });
    }

}])

So after updating scope to controller, I am getting error as mentioned above. Please let me know if you need more information.