Cool Trick For Unit Testing The Angular Controller

Almost always when writing unit tests for controller we need somehow to handle the fact that controller calls to some service/factory.

Lets look at following controller:

angular.module('siteApp')
        .controller('RegisterCtrl', function (
        $scope,
         auth,
         $location,
         $interval) {

            $scope.user = {};
            $scope.messages = [];


            var success = function(){
                $scope.messages.push({
                    type:'success',
                    text:'Congratulations,You are registered user!'
                });             
                $interval(function(){$location.path('/login')},6000,1)
            }, error =function(){
                $scope.messages.push({
                   type:'danger',
                   text:'error occurred during registration'
                });                
            };

            $scope.save = function(){
                auth.register($scope.user).then(success, error);         
            }

  });

The controller uses "auth" service and its "register" method, which sending a request.
We can mock the request with $httpBackend service which test if request is sended.

it('after clicking "save" some request should be sent', function () {
  initCtrl()
  $httpBackend.expectPOST('/api/register').respond(200, {});
  $scope.save();
  $httpBackend.flush();
});

Since we trying now to test the logic of the controller (not the service)- I think better practice is to mock the  service method and only test if it been called with proper parameters:

it('after clicking "save" auth.register should call', function () {

    initCtrl()
    spyOn(auth, 'register').andReturn($q.when()); 
    $scope.save();
    expect(auth.register).toHaveBeenCalledWith($scope.user);

    $scope.$digest();   //important!!!
    expect($scope.messages.length).toBe(1)


});

Notice that for testing the messages array you need 

  $scope.$digest(); 

statement for update the scope.

Hope you have fun reading...

Taking Advantage Of Bootstrap Mixins

Recently i took care of some css bug. Some transformation effect didnt looked good at IE.

 After examination of  less file i saw following code:

.parnetDetailsButton {
  float: left;  
  margin-top: 50px;  
  margin-left: -14px;  
  font-size: 15px;
  -webkit-transform-origin-x: 23px; 
  -webkit-transform-origin-y: 13px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

Quick look on this code shows that the reason the effect not acting correctly in IE is - missing microsoft prefix on transform and transform-origin  rules. It should be prefixed with "ms"

-ms-transform-origin: 23px 13px;

That can be quickly fixed by adding proper prefix.
But since we already using bootstrap i decided to take advantage of some of bootstrap less mixins:
.rotate and .transform-origin
mixins are like functions in the less language - they can get parameters and give output.
for using mixins we need the utils of bootstrap to be imported in our less file.

@import "../bower_components/bootstrap/less/mixins/vendor-prefixes";

now this code can be written in more accurate way:

.parnetDetailsButton {
  float: left;

  margin-top: 50px;

  margin-left: -14px;

  font-size: 15px;  

  .rotate(90deg);

  .transform-origin(23px 13px);

}

after less compiled it converted to following css:

.parnetDetailsButton {
  float: left;   

  margin-top: 50px; 

 margin-left: -14px;    

  font-size: 15px;  

 -webkit-transform: rotate(90deg);    

  -ms-transform: rotate(90deg);      

   -o-transform: rotate(90deg);        

     transform: rotate(90deg);  

-webkit-transform-origin: 23px 13px;   

  -moz-transform-origin: 23px 13px;    

   -ms-transform-origin: 23px 13px;     

    transform-origin: 23px 13px;

}