Tuesday, 19 May 2015

Unit test cases for AngularJs app using Karma and Jasmine testing framework

Configuration: 

Require Files: [angular.js, angular-mock.js, karma, karma-jasmine, karma-chrome-launcher]
configuration file: karma.conf.js (we can create it manually or via command karma init)

Description:
Karma is spectacular test runner for JavaScript, runs on Node.js and is available as a NPM package. Above all require files are available as an NPM package. To run test cases you just have to run command karma start karma.conf.js 
include all files in karma.conf.js as file option for which you wanted to write test cases.

I created a first test case for directive "CompareTo" define in "motorbot.reservation.directives". Here is code
in directives/reservationsDirective.js:


 var directives = angular.module("motorbot.reservation.directives", []);
 
 var compareTo = function() {
   return {
     require: "ngModel",
     scope: {
       otherModelValue: "=compareTo"
     },
    link: function(scope, element, attributes, ngModel) {
      ngModel.$validators.compareTo = function(modelValue) {
        return modelValue == scope.otherModelValue;
      };

      scope.$watch("otherModelValue", function() {
        ngModel.$validate();
      });
    }
  };
};
directives.directive('compareTo', compareTo);


This directive is use on view to compare password and password-confirmation:


 <input  type="password" class="form-control" name="user_password_confirmation" compare-to="patron.password" ng-model='patron.password_confirmation' required />

Here is test case for directive "compareTo" in test/directives/directiveSpec.js:
 

  describe('Directives', function() {
    //include modules
    beforeEach(angular.mock.module('motorbot.reservation.directives'));
     
    describe('testing directive compare to', function() {
      var $scope, element, scope;
      var html = '<input compare-to="password" ng-model="password_confirmation"/>';
         
      // Injecting angular services in unit test for this we need angular-mock.js
      beforeEach(inject(function($rootScope, $compile) {
        $scope = $rootScope;

        // load the values to send
        $scope.password = 'abc';
        $scope.password_confirmation = 'abc2';

        // create the element and compile it
        element = angular.element(html);
        $compile(element)($scope);

        // get the scope of this directive
        scope = element.scope();
        $scope.$digest();
      }));
       
      it("should not valid password_confirmation", function() {
        expect(element.hasClass('ng-invalid-compare-to')).toBeTruthy();
      });
       
      it("should valid password_confirmation", function() {
        $scope.password_confirmation = 'abc';
        $scope.$digest();
        expect(element.hasClass('ng-invalid-compare-to')).toBeFalsy();
      });
    });
  });


Here is sample for karma.conf.js file:


  // Karma configuration
  // Generated on Thu May 14 2015 18:59:11 GMT+0530 (IST)

  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
    // list of files for which you wanted to write test cases
    files: ['bower_components/angular/angular.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'directives/*.js',
      'test/**/*Spec.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
  });
};
         

33 comments:

  1. This will help my skill development... thanks
    Angularjs online Training

    ReplyDelete
    Replies
    1. IEEE Final Year projects Project Centers in Chennai are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes, while specialists like the enjoyment in interfering with innovation. For experts, it's an alternate ball game through and through. Smaller than expected IEEE Final Year project centers ground for all fragments of CSE & IT engineers hoping to assemble. Final Year Projects for CSE It gives you tips and rules that is progressively critical to consider while choosing any final year project point.

      Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining the authors explore the idea of using Java in Big Data platforms.

      Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. Great blog.you put Good stuff.All the topics were explained briefly.so quickly understand for me.I am waiting for your next fantastic blog.Thanks for sharing.Any coures related details learn...

    software testing course in chennai

    ReplyDelete

  4. i just go through your article it’s very interesting time just pass away by reading your article looking for more updates. Thank you for sharing.
    Best Devops Training Institute

    ReplyDelete
  5. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    top microservices online training

    ReplyDelete
  6. Resources like the one you mentioned here will be very useful to me ! I will post a link to this page on my blog. I am sure my visitors will find that very useful
    AWS training in chennai | AWS training in annanagar | AWS training in omr | AWS training in porur | AWS training in tambaram | AWS training in velachery

    ReplyDelete
  7. Excellent work done by you once again here. This is just the reason why I’ve always liked your work. You have amazing writing skills and you display them in every article. Keep it going!
    data scientist training and placement in hyderabad

    ReplyDelete
  8. Very Nice Blog…Thanks for sharing this information with us. Here am sharing some information about training institute.
    tableau online training in hyderabad

    ReplyDelete
  9. I think this is one of the very important information for me. And I am satisfied to read your article. Turkey transit visa. Within 5 minutes you can fill your visa application form turkey, you should receive an email asking you to confirm that you have started an application for an eVisa.

    ReplyDelete
  10. Very Nice Blog…Thanks for sharing this information with us.
    best devops online training in hyderabad

    ReplyDelete
  11. I am browsing this website daily and get good facts from here all the time. Aw, this was a really nice post. kenya single entry visa, Obtaining a single entry visa kenya is quite convenient for individuals who wish to travel to the country for tourism or business purposes.

    ReplyDelete
  12. Wow.. Very informative article thanks for sharing please keep it up.. India emergency visa on arrival get online through the India visa website.

    ReplyDelete
  13. Extremely overall quite fascinating post. I was searching for this sort of data and delighted in perusing this one.
    Continue posting. A debt of gratitude is in order for sharing.
    data scientist course in warangal

    ReplyDelete
  14. I think this is an informative post and it is very useful and informative. So, I would like to thank you for the effort you put into writing this article. The Indian e visa or Electronic Visa (eTV) is an online travel authorization. You can apply online for Indian e visas via the Indian e-visa website.

    ReplyDelete
  15. This is really an inspiring and helpful article. I am fully satisfied with your effort .There is no need to meet any embassy, especially to apply for Indian visa from Australia. You can easily apply online and easily get your evisa on your email id.

    ReplyDelete
  16. I will really appreciate the writer's choice for choosing this excellent article appropriate to my matter.Here is deep description about the article matter which helped me more. data science course in surat

    ReplyDelete
  17. I truly like your style of blogging. I added it to my preferred's blog webpage list and will return soon…https://360digitmg.com/course/certification-program-on-digital-marketing

    ReplyDelete
  18. Good to become visiting your weblog again, it has been months for me. Nicely this article that i've been waited for so long. I will need this post to total my assignment in the college, and it has exact same topic together with your write-up. Thanks, good share. data analyst course online

    ReplyDelete
  19. Great content that provides quality knowledge with interesting facts is what I love to read. The Turkish visa application form can be filled online from virtually anywhere in the world, so visitors from anywhere in the world can obtain their visa via email.

    ReplyDelete
  20. NordVPN 7.7.3 Crack for PC is a basic and well-known software that allows users to easily surf the Internet anonymously and securely.! Nord VPN Cracked

    ReplyDelete
  21. Kaspersky License Key also defend your browsers from sticked substance by remove them enduringly. Kaspersky Total Security 2019 Key

    ReplyDelete
  22. It feels wonderful to celebrate Christmas Eve feeling loved by you, I think I am the luckiest man in the world.Loved Ones Christmas Wishes

    ReplyDelete
  23. I like your writing style because it's different from everyone else's.
    Polyverse Music Infected

    ReplyDelete
  24. Nice thanks for sharing informative post like this keep posting if like more details visit my website linkhttps://snowflakemasters.in/

    ReplyDelete