CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopejasminekarma-jasmine
future
future

Reputation: 352

Angular Directive Behavior Testing Jasmine

Here's Plunker Link

Updated Plunker Updated Plunker

I have written a directive which hide and shows the div based on ajax call. How i can i test a behaviour of Directive written ?Its shows the spinner on Ajax Call.

Spec 

 describe('loader directive', function() {
     var $compile, scope;
     beforeEach(module('plunker'));
     beforeEach(inject(function(_$compile_, _$rootScope_) {
         $compile = _$compile_;
         scope = _$rootScope_.$new();
     }));

     it('check if div shows on', function() {
         var element = $compile('<div loading>Something</div>')(scope);
         scope.$apply();
     });

});

Directive

app.directive('loading',   ['$http' ,function ($http)
{
    return {
        restrict: 'A',
        link: function (scope, elm, attrs)
        {
            scope.isLoading = function () {
                return $http.pendingRequests.length > 0;
            };

            scope.$watch(scope.isLoading, function (v) {
                if(v) {
                    elm.show();
                } else {
                    elm.hide();
                }
            });
        }
    };

}]);

Upvotes: 0

Views: 454

Answers (1)

Esteban Felix
Esteban Felix

Reputation: 1561

You can just check for an .is(':visible'). 

describe('loader directive', function() {

  var $compile, scope, $httpBackend, $http, element;

  beforeEach(module('plunker'));

  beforeEach(inject(function(_$compile_, _$rootScope_, _$httpBackend_, _$http_) {
    $compile = _$compile_;
    scope = _$rootScope_.$new();
    $httpBackend = _$httpBackend_;

    $httpBackend.when('GET', '/test').respond(200, {
      test: true
    });

    $http = _$http_;
  }));

  afterEach(function() {
    $httpBackend.flush();

    if (element && element.length) {
      element.remove();
    }
  });

  it('check if div shows on http call', function() {
    element = $compile('<div class="loading-bar" loading>Something</div>')(scope);
    element.appendTo('body');

    $http.get('/test');

    scope.$apply();

    expect(element.is(':visible')).toBe(true);
  });

});

To mock out the $http calls you will need to use $httpBackend service.

Plunker Demo

Upvotes: 1

Related Questions