Jasmine Tutorial: Unit Testing Promises In Angular Services

Leave a comment Standard

So recently I’ve been doing a lot of Angular unit tests with Jasmine and Grunt. I have to say, testing promises is extremely frustrating and most of the examples I found out there either 1) didn’t work or 2) wouldn’t allow you to test content in a then block if you had multiple chained promises, or if you had a promise being called from and returned from another service. After many hours of frustrating trial and errors I found a solution I’m happy with so I want to share.

Let’s assume this is your controller:

'use strict';

angular.module('myModule').controller('myCtrl', ['$scope', 'api',
function ($scope, $api) {

  $scope.data = null;
  $scope.message = null;

  /**
  * Load some data from the API service
  * @return boolean
  **/
  $scope.loadData = function () {

    var config = {
      method: 'GET',
      url: 'http://api.domain.com/someRESTfulEndpoint',
      headers: {'Content-Type': 'application/json'},
      data: null
    };

    return $api.load(config).then(function (request) {
      if (request) {
        $scope.message = 'Your data was successfully loaded';
        $scope.data = request.response;
        return true;
      } else {
        $scope.message = 'The API service failed';
      }
      return false;
    });
  };
}]);

And here is the service making your API calls:

'use strict';

angular.module('myModule').service('api', ['$rootScope', '$http',
  function ($rootScope, $http) {

    /**
    * Makes the $http request given the proper configuration options
    * @param Object configruation for the $http request
    * @return Object $http promise that resolves to request payload or error
    **/
    this.load = function (options) {
      return $http({
        method: options.method || 'GET',
        url: options.url || 'http://api.domain.com/someDefaultEndpoint',
        headers: options.headers || null,
        data: options.data || null
      }).then(
        function (request) {
          //we got a response back, return just the API payload data
          if (request.status === 200 && request.data) {
            return request.data;
          } else {
            return {
              results: false,
              message: 'API request error',
              response: request
           };
         }
       }
     );
   };
}]);

Finally, this is your working unit tests:

'use strict';

describe('testing myModule', function () {

  beforeEach(module('myModule'));

  var $controller, $rootScope, $scope, $api, $httpBackend, $q;

  beforeEach(
    inject(function (_$controller_, _$rootScope_, api, _$httpBackend_, _$q_) {
      $controller = _$controller_;
      $rootScope = _$rootScope_;
      $httpBackend = _$httpBackend_;
      $q = _$q_;
      $api = api;
      $scope = $rootScope.$new();

      $httpBackend.when('GET').respond('test http GET call');
      $httpBackend.when('POST').respond('test http POST call');

      $controller('myCtrl', {
        $scope: $scope,
        $api: $api
      });
    })
  );

  it('has a $scope.loadData() function', function() {

    var testConfig = {
      method: 'POST',
      url: 'http://api.domain.com/endpoint',
      data: { some: 'data'}
    };

    var fakeData = { data: 'is fake' };

    //we spy on the API service and also return a fake promise call
    spyOn($api, 'load').and.callFake(
      function() {
        var deferred = $q.defer();
        deferred.resolve({result: true, response: fakeData});
        return deferred.promise;
      });
    });

    $scope.loadData(testConfig); //call the function we're testing in the controller
    $scope.$apply(); //we have to call this so Angular will try and resolve the promise
    expect($api.load.calls.count()).toEqual(1); //make sure it's called the api service
    expect($scope.message).toEqual('Your data was successfully loaded');
    expect($scope.data).toEqual(fakeData);
  });

  it('returns an error if the API fails', function() {

    var testConfig = {
      method: 'POST',
      url: 'http://api.domain.com/endpoint',
      data: { some: 'data'}
    };

    spyOn($api, 'load').and.callFake(
      function() {
        var deferred = $q.defer();
        deferred.resolve({
        result: false,
        message: 'api error'
      });
      return deferred.promise;
    });

    $scope.loadData(testConfig);
    $scope.$apply();
    expect($scope.message).toEqual('api error');
    expect($api.load.calls.count()).toEqual(1);
  });
});

Continue reading

Sample Angular Website

Leave a comment Standard

So I’ve seen a lot of people using AngularJS but I see very few examples of a website made using it. That’s why I decided to post an example website to give you an idea of what a full website looks like using AngularJS. It has samples of some of the things you’ll commonly find in a website made entirely with Angular:

  •  Navigation & Routing
  • Providers & Directives
  • Controllers & Config Blocks
  • Data Calculations
  • Filtering

Sorry if you’re looking for Angular 2.0, this was made with Angular 1.5.8. View, fork and/or edit the files on Plunker!

Angular JS Tutorial: Difference between ng-hide and ng-if

Leave a comment Standard

It took me a while to even realize that there were two different ways toggle the display of HTML DOM elements with Angular JS — thank you Angular docs for not being nearly as helpful as you were when you had comments. Anyways (rant over), this is a really good thing to know because it will help you use the power of Angular to the fullest.

Ng-Show and Ng-Hide

These are use for when you want to toggle the visibility of a DOM element and that toggle can happen any number of times. This is like adding css styles for display. When ng-show is true the css display style is set to block/inline. When ng-show is false the css display style is set to none. Conversely if you use ng-hide instead when ng-hide is set to true display is none and when ng-hide is set to false display is block/inline. The DOM elements are always present no matter if the content is visible or not.

So, now for a good example using ng-show. Let’s say you only want to show a message to someone once they’ve entered their name:

<label for="nameInput">Enter Your Name:</label>
<input type="text" id="nameInput" ng-model="name" />

<div ng-show="name">
  <p>Hello {{name}}, it's nice to meet you!</p>
</div>

This also works using ng-hide, if there’s no name then we don’t want to show our greeting:

<label for="nameInput">Enter Your Name:</label>
<input type="text" id="nameInput" ng-model="name" />

<div ng-hide="!name">
  <p>Hello {{name}}, it's nice to meet you!</p>
</div>

Ng-If

So now let’s harness the power of Angular JS. If you have a DOM element that you ONLY want to display/hide once — like say when the page first or view first loads — then this is the option for you. Ng-If either adds or removes the DOM element from the DOM. When Ng-If is true then DOM element will be added to the document tree. When Ng-If is false the DOM element will be completely removed from the document tree. Why is this a good thing? This means your page will load faster because your document tree doesn’t have to render and then hide DOM elements that you’re never going to use.

Let’s pretend we have a data object like containing the first and last name of some famous people. We want to display this information in a table. However the data in our object comes from a query to a database — so we might not always have results to display. This is where Ng-If is really handy. Take a look at this example where if we have no results in our data object then our table HTML will be completely removed from the DOM — therefor making it faster — before angular renders the view:

<div ng-if="data.length > 0">
  <h4>Famous People</h4>
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Phone Number</th>
      <th>Email</th>
    </tr>
    <tr ng-repeat="person in data">
      <td>{{person.firstName}}</td>
      <td>{{person.lastName}}</td>
      <td>{{person.phone}}</td>
      <td>{{person.email}}</td>
    </tr>
  </table>
</div>