AngularJS example MotoAds unit tests

-
Unit tests result: Application folders tree:
In Angular the controller is separated from the view so it is easy to add the unit tests to MotoAds application. Recall the controller code which will be tested (controllers.js): 
motoAdsApp.controller('AdvertsController', ['$scope', 'Brand', 'Country', 'Advert', 
  function($scope, Brand, Country, Advert) {
    $scope.oneAtATime = true;

    $scope.brands = Brand.query();

    $scope.countries = Country.query();

    $scope.sortByCols = [{
        "key": "year",
        "name": "Year"
      }, {
        "key": "price",
        "name": "Price"
      }];

    $scope.adverts = [];
    var allAdverts = Advert.query(filterAdverts);

    $scope.filter = {
      brandName: null,
      modelName: null,
      country: null,
      region: null,
      yearFrom: null,
      yearTo: null
    };

    $scope.isAnyFilter = function() {
      var f = $scope.filter;
      if (f.brandName || f.modelName || f.country || f.region || f.yearFrom || f.yearTo) {
        return true;
      }
      return false;
    };

    $scope.removeAllFilter = function() {
      $scope.filter = {
        brandName: null,
        modelName: null,
        country: null,
        region: null,
        yearFrom: null,
        yearTo: null
      };
    };

    $scope.addBrandModelFilter = function(brand, model) {
      $scope.filter.brandName = brand.name;
      $scope.filter.modelName = model.name;
    };

    $scope.$watch('filter', filterAdverts, true);

    function filterAdverts() {
      $scope.adverts = [];
      angular.forEach(allAdverts, function(row) {
        if (!$scope.filter.country) {
          $scope.filter.region = null;
        }
        if ($scope.filter.brandName && $scope.filter.brandName !== row.brandName) {
          return;
        }
        if ($scope.filter.modelName && $scope.filter.modelName !== row.modelName) {
          return;
        }
        if ($scope.filter.country && $scope.filter.country.name !== row.countryName) {
          return;
        }
        if ($scope.filter.region && $scope.filter.region.name !== row.regionName) {
          return;
        }
        if ($scope.filter.yearFrom && $scope.filter.yearFrom > row.year) {
          return;
        }
        if ($scope.filter.yearTo && $scope.filter.yearTo < row.year) {
          return;
        }
        $scope.adverts.push(row);
      });
    };

  }]);
]]>
We should write the script for running unit tests (test.bat): 
@echo off

REM Windows script for running unit tests
REM You have to run server and capture some browser first
REM
REM Requirements:
REM - NodeJS (http://nodejs.org/)
REM - Karma (npm install -g karma)

set BASE_DIR=%~dp0
karma start "%BASE_DIR%\..\config\karma.conf.js" %*
]]>
We configure Karma for our tests (karma.conf.js): 
module.exports = function(config){
    config.set({
    basePath : '../',

    files : [
      'app/lib/angular/angular.js',
      'app/lib/angular/angular-*.js',
      'app/lib/ui-bootstrap/ui-bootstrap-*.js',
      'app/lib/angular/angular-mocks.js',
      'app/js/**/*.js',
      'test/unit/**/*.js'
    ],

    exclude: ['app/lib/angular/angular-scenario.js'],

    autoWatch : true,

    frameworks: ['jasmine'],

    browsers : ['Chrome'],

    plugins : [
      'karma-junit-reporter',
      'karma-chrome-launcher',
      'karma-firefox-launcher',
      'karma-jasmine'
    ],

    junitReporter : {
      outputFile: 'test_out/unit.xml',
      suite: 'unit'
    }

});};
]]>
When everything is ready we can start writing tests in controllersSpec.js.

Step 1
We prepare dummy data: 
var BRANDS_RESPONSE = [
  {"name": "Audi", "models": [{"name": "A1"}, {"name": "A3"}]},
  {"name": "Dacia", "models": [{"name": "Duster"}, {"name": "Logan"}]}
];

var COUNTRIES_RESPONSE = [
  {"name": "Germany", "regions": [{"name": "Bavaria"}, {"name": "Hesse"}]},
  {"name": "Poland", "regions": [{"name": "Lesser Poland"}, {"name": "Masovia"}]}
];

var ADVERTS_RESPONSE = [
  {
    "brandName": "Audi",
    "modelName": "A1",
    "year": 2011,
    "price": "35000",
    "imageUrl": "img/audi_a1_1.jpg",
    "countryName": "Germany",
    "regionName": "Bavaria"
  },
  {
    "brandName": "Audi",
    "modelName": "A1",
    "year": 2010,
    "price": "30000",
    "imageUrl": "img/audi_a1_2.jpg",
    "countryName": "Poland",
    "regionName": "Masovia"
  },
  {
    "brandName": "Dacia",
    "modelName": "Duster",
    "year": 2012,
    "price": "33000",
    "imageUrl": "img/dacia_duster_1.jpg",
    "countryName": "Poland",
    "regionName": "Masovia"
  },
  {
    "brandName": "Dacia",
    "modelName": "Duster",
    "year": 2009,
    "price": "27000",
    "imageUrl": "img/dacia_duster_2.jpg",
    "countryName": "Germany",
    "regionName": "Bavaria"
  }];
]]>

Step 2
Load modules, define dummy services, initialize scope, controller and filter: 
describe('MotoAds controllers', function() {
  beforeEach(module('motoAdsApp'));
  beforeEach(module('ui.bootstrap'));
  beforeEach(module('motoAdsServices'));

  describe('AdvertsController', function() {
    var scope, ctrl, $httpBackend, orderByFilter;

    beforeEach(inject(function(_$httpBackend_, $rootScope, $controller, $filter) {
      $httpBackend = _$httpBackend_;
      $httpBackend.expectGET('data/brands.json').respond(BRANDS_RESPONSE);
      $httpBackend.expectGET('data/countries.json').respond(COUNTRIES_RESPONSE);
      $httpBackend.expectGET('data/adverts.json').respond(ADVERTS_RESPONSE);
 
      orderByFilter = $filter('orderBy');

      scope = $rootScope.$new();
      ctrl = $controller('AdvertsController', {$scope: scope});
    }));

    // TEST WILL BE HERE

  });

});
]]>

Step 3
We write first test - filtering by brand and model: 
    it('should filter by brand and model', function() {
      expect(scope.adverts).toEqual([]);
      $httpBackend.flush();
      expect(scope.adverts.length).toBe(4);

      scope.$apply(function() {
        scope.filter = {
          brandName: "Audi",
          modelName: "A1",
          country: null,
          region: null,
          yearFrom: null,
          yearTo: null
        };
      });

      expect(scope.adverts.length).toBe(2);
    });
]]>

Step 4
We write second test - filtering by country and region: 
    it('should filter by country and region', function() {
      expect(scope.adverts).toEqual([]);
      $httpBackend.flush();
      expect(scope.adverts.length).toBe(4);

      scope.$apply(function() {
        scope.filter = {
          brandName: null,
          modelName: null,
          country: {name: "Germany"},
          region: {name: "Bavaria"},
          yearFrom: null,
          yearTo: null
        };
      });

      expect(scope.adverts.length).toBe(2);
    });
]]>

Step 5
We write third test - filtering by year: 
    it('should filter by from yearFrom to yearTo', function() {
      expect(scope.adverts).toEqual([]);
      $httpBackend.flush();
      expect(scope.adverts.length).toBe(4);

      scope.$apply(function() {
        scope.filter = {
          brandName: null,
          modelName: null,
          country: null,
          region: null,
          yearFrom: 2011,
          yearTo: 2012
        };
      });

      expect(scope.adverts.length).toBe(2);
    });
]]>

Step 6
We write fourth test - sorting by year: 
    it('should sort by year', function() {
      expect(scope.adverts).toEqual([]);
      $httpBackend.flush();
      expect(scope.adverts.length).toBe(4);

      var sortedAdverts = orderByFilter(scope.adverts, "year");

      var prevYear = 0;
      for (var i = 0; i < sortedAdverts.length; i++) {
        var advert = sortedAdverts[i];
        expect(advert.year).toBeGreaterThan(prevYear);
        prevYear = advert.year;
      }
    });

Step 7
We run unit test in Node.js command prompt by running test.bat and we should see: 
D:\devhome\github\motoads>scripts\test.bat
INFO [karma]: Karma v0.10.4 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 30.0.1599 (Windows Vista)]: Connected on socket QZD2lLpZ-KlcZE2pqcrE
Chrome 30.0.1599 (Windows Vista): Executed 4 of 4 SUCCESS (0.517 secs / 0.076 secs)
]]>

If you want to run this example on your computer, you can download sources from GitHub.

Any comment would be highly appreciated.

Komentarze

Prześlij komentarz

Popularne posty z tego bloga

Java ESL program for connecting to the FreeSWITCH

-
Next simple Java program using Event Socket interface to control FreeSWITCH. First you should read: Mod event socket on wiki freeswitch Java ESL Client on wiki freeswitch Next you should not forget to change event_socket.conf.xml (to allow connections from any host on the network): Now we can write simple java ESL program for connecting to the FreeSWITCH. MyEslEventListener.java package myeslevent; import java.util.Map; import java.util.Set; import org.freeswitch.esl.client.IEslEventListener; import org.freeswitch.esl.client.transport.event.EslEvent; import org.slf4j.Logger; import org.slf4j.LoggerFactory; public class MyEslEventListener implements IEslEventListener { private final Logger log = LoggerFactory.getLogger(this.getClass()); @Override public void eventReceived(EslEvent event) { log.info("eventReceived [{}]\n[{}]\n", event, getEventToLog(event)); } @Override public void backgroundJobResultReceived(EslEve
Czytaj więcej

AngularJS example MotoAds more advanced than the tutorial on angularjs.org

-
Obraz
I have just been learning AngularJS and decided to build demo application that cover more techniques than the tutorial on angularjs.org . This application is only demo so it do not have complete server side, some features have the todos and there is not any test. This demo application is some kind of automotive adverts portal, so I called it MotoAds. It has two main features: List of adverts – includes an advanced filtering and sorting. Add advert – a form with some client side field validations. MotoAds application looks like this: Application folders tree: Root file index.html included external resource: bootstrap.css (2.3.2) angular.js, angular-resource.js (1.0.8) ui-bootstrap-tpls-0.6.0.js (0.6.0) and internal resource: app.css app.js services.js controllers.js Bootstrap angular application, add navigation and route templates In index.html we auto-bootstrap the angular application by defining directive ng-app : In app.js we define new
Czytaj więcej

Java program for connecting to the FreeSWITCH XML-RPC

-
I would like to show simple Java program which use XML-RPC interface to do some freeswitch commands. We should on freeswitch console load mod_xml_rpc: Worth checking out if it works, in web browser type: http://fshost8080/webapi/help If you see "FreeSWITCH help" it works. Next we download Apache XML-RPC library. Now we create Java program (using Apache XML-RPC): package fstest1; import java.net.URL; import java.util.Scanner; import org.apache.xmlrpc.client.XmlRpcClient; import org.apache.xmlrpc.client.XmlRpcClientConfigImpl; public class FsTest1 { public static void main(String[] args) { System.out.println("------ hello freeswitch -------\n"); XmlRpcClientConfigImpl config = new XmlRpcClientConfigImpl(); XmlRpcClient client = new XmlRpcClient(); try { config.setServerURL(new URL("http://fshost:8080/RPC2")); config.setBasicUserName("freeswitch"); config.setBasicPassword("works");
Czytaj więcej