Exploring Things.....!
Front-End

Karma Jasmine Configuration

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Step by step Karma Jasmine Configuration

Karma Jasmine Configuration

Create Package.json – it is a collection of metadata which is use for reference, npm fetch the information from json file to install the dependency.

Node itself is only aware of two fields in the package.json:

{

“name” : “barebones”,

“version” : “0.0.0”,

}

For a more complete package.json, we can check out underscore:

{
“name”: “underscore”,
“description”: “JavaScript’s functional programming helper library.”,
“homepage”: “http://documentcloud.github.com/underscore/”,
“keywords”: [
“util”,
“functional”,
“server”,
“client”,
“browser”
],
“author”: “Jeremy Ashkenas <jeremy@documentcloud.org>”,
“contributors”: [

],
“dependencies”: [

],
“repository”: {
“type”: “git”,
“url”: “git://github.com/documentcloud/underscore.git”
},
“main”: “underscore.js”,
“version”: “1.1.6”
}

Since karma-jasmine 0.3.0 the jasmine library is no longer bundled with karma-jasmine and you have to install it on your own. You can simply do it by:

npm install jasmine-core --save-dev

// karma.conf.js
module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],

    files: [
      '*.js'
    ]
  });
};    Following commands to execute the karma jasmine test cases:
karma start &
karma run -- --grep=<pattern>
OR
module.exports = function(config) {
  config.set({
    ...
    client: {
      args: ['--grep', '<pattern>'],
      ...
    }
  });
};

Examples:
angular.module("myApp.store").controller("StoresCtrl", function($scope, StoreService, Contact) {
  StoreService.listStores().then(function(branches) {
    Contact.retrieveContactInfo().then(function(userInfo) {
        //more code here crossing user and stores data
    });  
  });
});

Follow the code’s comments to understand how to utilize these two concepts.
describe("Store Controller", function() {
  var $controller, Contact, StoreService, createController, scope;
  
  beforeEach(function() {
    module('myApp.store');
    
    // Provide will help us create fake implementations for our dependencies
    module(function($provide) {
    
      // Fake StoreService Implementation returning a promise
      $provide.value('StoreService', {
        listStores: function() {
          return { 
            then: function(callback) {return callback([{ some: "thing", hoursInfo: {isOpen: true}}]);}
          };
        },
        chooseStore: function() { return null;}
      });
      
      // Fake Contact Implementation return an empty object 
      $provide.value('Contact', {
        retrieveContactInfo: function() {
          return {
            then: function(callback) { return callback({});}
          };
        }
      });
      
      return null;
    });
  });
  
  beforeEach(function() {
  
    // When Angular Injects the StoreService and Contact dependencies, 
    // it will use the implementation we provided above
    inject(function($controller, $rootScope, _StoreService_, _Contact_) {
      scope = $rootScope.$new();
      StoreService = _StoreService_;
      Contact = _Contact_;
      createController = function(params) {
        return $controller("StoresCtrl", {
          $scope: scope,
          $stateParams: params || {}
        });
      };
    });
  });
  
  it("should call the store service to retrieve the store list", function() {
    var user = { address: {street: 1}};
    
    // Jasmine spy over the listStores service. 
    // Since we provided a fake response already we can just call through. 
    spyOn(StoreService, 'listStores').and.callThrough();
    
    // Jasmine spy also allows to call Fake implementations via the callFake function 
    // or we can return our own response via 'and.returnValue
    // Here we can override the response we previously defined and return a promise with a user object
    spyOn(Contact, 'retrieveContactInfo').and.callFake(function() {
      return {
        then: function(callback) { return callback(user); }
      };
    });
    
    createController();
    // Since we setup a spy we can now expect that spied function to have been called 
    // or to have been called with certain parameters..etc
    expect(StoreService.listStores).toHaveBeenCalled();
  });
});
Facebooktwittergoogle_pluslinkedinrssyoutube

Join the discussion

  1. Elmira

    Too many colmmipents too little space, thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *