Tag Archives: angularjs services

TDD Test AngularJs Service $Http

In my last post I have hardcode the data into the service to let my test pass, now in this post I will change that service to by inject the $http service into my module and let it return httpPromise.

Here is my new movieApi.js file


(function(){
   "use strict";
   
  var app =  angular.module('moviesApi',[]);

    app.factory('moviesApi',function($http, $q){
        var service = {};
        var baseUrl = 'http://www.omdbapi.com/?v=1&';

        function httpPromise (url) {
			var deferred = $q.defer();
			$http.get(url)
				.success(function(data) {
					deferred.resolve(data);
				})
				.error(function(error) {
					deferred.reject(error);
				});
			return deferred.promise;
		}

        service.search = function(query) {
			return httpPromise(baseUrl + 's=' + 
                               encodeURIComponent(query));
		} 
                    
   return service;
 });
})()

Then my unit test fail, that is because now my service return a promise and it has not resolve yet, but my test expect data, for how to solve this issue, angularjs has provide $httpBackend for Fake HTTP backend implementation for unit testing application that use the $http service.

Here is the new test code:

$httpBackend;
beforeEach(module('moviesApi'));
         //angular.mock is under the globe variable, so I have remove it 
         //the beforeEach is jasmine provide if you have multiple test need 
         //the same  set up, it will automatic set for each test, will reduce copy code
         //for name convenience  I also changed the service's name 
         //to match the module name
        //then in the dependence inject angularjs allow your put the underscore 
        //for your inject service,it will pick it up
	beforeEach(inject(function(_moviesApi_,_$httpBackend_) {
		moviesApi = _moviesApi_;
                $httpBackend = _$httpBackend_;
	}));
    
    it('should return search movies data',function(){
        var response;
        var expectedUrl = 'http://www.omdbapi.com/?v=1&s=star%20wars';
        $httpBackend.when('GET',expectedUrl)
                .respond(200,moviesData); 
        
        moviesApi.search('star wars')
                .then(function(data){
                        response = data;
                });

        //the fake $httpBackend has function flush will resolve the data for you to       //test

        $httpBackend.flush();

        expect(response).toEqual(moviesData);
    });

Tips: as frondend developer also could using this Fake data create a service response, so you do not need waiting for the backend service finished to do your job.

 

Now the test will pass.

Have fun!

Advertisements

Angularjs Service — Value and Constant Services

Value Services

  • Shorthand for factory with no parameters
  • Cannot be injected into a module configuration function
  • Can be overridden by an AngularJS decorator

Example using value

 angular.module('app')
        .value('clientId', 'a12345654321x');

Constant Services

  • Simply registers service with injector, no factory/provider calls
  • Can be injected into a module configuration function
  • Cannot be overridden by an AngularJSdecorator

Example

angular.module('app')
        .constant('constants', {
            APP_TITLE: 'My App',
            APP_DESCRIPTION: 'Description here.',
            APP_VERSION: '0.0.1'
        });

	

ANGULARJS SERVICES – Factory and Services

Using the factory function on the provide service is usually a much simpler option than using provider, if you don’t need to configure the underlying provider object. The snippet of code here is the Angular source code for the factory function.

function factory(name, factoryFn, enforce) { 
	return provider(name, { 
		$get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn 
		}); 
	}

You can see that all it really does is call the provider function and assign the function you pass to the factory function as the value of the get property on the provider.

Internally, it creates and passes the parameter name, enforce, just as a safety check to make sure the function passed to it actually returns an object. To use the factory function, you just pass it a name as the first parameter, like the provider function, and the second parameter is a function that will return an object that represents the service instance. If you don’t need to configure the provider, like previous post sample demo code, then using the factory function will be a much simpler and readable way to create your services.

The next service creation function we’ll look at is actually named service. It’s just a very thin wrapper around the factory function we just saw. The only difference is that the function you passed to the service method will be treated as a constructor function and called with the JavaScript “new” operator.

The snippet here is the Angular source code for the service function.

	function service(name, constructor) { 
	  return factory(name, ['$injector', function($injector) {  
	   return $injector.instantiate(constructor); 
	   }]);
	 }

It uses the instantiate method of the injector to call the function you pass to the service method. The instantiate method will then use the “new” operator to execute the function that creates the service. You would use the service method instead of the factory method if you specifically needed your function to be treated as a constructor and called with the “new” operator. There are several reasons why you may want that behavior. One is if you have defined an inheritance hierarchy in your code. Creating an instance with “new” will make sure that your instantiated object properly inherits from its prototypes.

Here is the example you must use the services instead of factory.

angular.module('app')
        .service('logger', MyLogger);

    function LoggerBase() { }

    LoggerBase.prototype.output = function(message) {
        console.log('LoggerBase: ' + message);
    };

    function MyLogger() {

        LoggerBase.call(this);

        this.log = function(obj) {
            console.log('Book: ' + obj.name);
        }
    }

    MyLogger.prototype = Object.create(LoggerBase.prototype);

only now I can use the output function, but using factory it won’t.

 app.config(['$logProvider',  function ( $logProvider) {
        $logProvider.output('what ever here!');

to be continue……..

AngularJs Services – Provider

Try to help reader to understanding of Angular service, and the confidence to choose the right technique when come to use it .

There are five functions you can use to create an Angular service. All of these functions may be called on the built-in provide service. All of them are also exposed on the module object as a convenience. The most fundamental service creation function is the provider function. Creating services with it allows you to explicitly create a configurable provider object. The provider knows how to create the resulting service. The remaining four functions all internally call the provider function.

Now start with the lower provider services, here is the example code for using the angularjs provider service:

app.provider('myApp', [function () {

        var includeVersion = false;
        this.setIncludeVersion = function (value) {
            includeVersion = value;
        };

        this.$get = function () {
            var appName = 'My first App";
            var version = '0.0.1';
            if (includeVersion) {
                appName += ' ' + version;
            }
            var appDesc = 'here is some description';
            return {
                appName: appName,
                appDesc: appDesc
            };
        };

    }]);

See in here you could pass a parameter to decided some basic setting, just like website have a web.config file, so the app in the client side also have their own config file.
Be aware of when you use the provider function the angularjs will automatic add the Provider to it, so when you use it need use the name with myAppProvider.

   app.config(['myAppProvider', function (bookingAppProvider) {
        
        myAppProvider.setIncludeVersion(true);
        
        ..................

    }]);

to be continue….