mercredi 14 septembre 2016

angular jasmine addClass

I am fairly new to Angularjs and Jasmine and trying to test the following function and am not sure how to go about doing so.

Here is my controller function:

$scope.toggleSidebar = function() {
  var sbToggle = angular.element( document.querySelector('#sidebar'));
  var wrapToggle = angular.element( document.querySelector('#wrapper'));
  var buttonIcon = angular.element( document.querySelector('#sidebarToggle i.fa'));

  sbToggle.toggleClass('hide-sidebar');
  wrapToggle.toggleClass('hide-sidebar');

 if (sbToggle.hasClass('hide-sidebar')) {
    buttonIcon.removeClass('fa-angle-left');
    buttonIcon.addClass('fa-angle-right');
  } else {
    buttonIcon.removeClass('fa-angle-right');
    buttonIcon.addClass('fa-angle-left');
  }
}

Here is my attempt at testing it:

  describe("Test toggle sidebar", function(){
    var buttonIcon = angular.element('<button id="sidebarToggle"><i class="fa fa-angle-left"></i></button>');
    var sbToggle = angular.element('<div id="sidebar"></div>');

    spyOn(buttonIcon, "addClass('fa-angle-left')");
    spyOn(buttonIcon, "removeClass('fa-angle-right')");
    spyOn(buttonIcon, "addClass('fa-angle-right')");
    spyOn(buttonIcon, "removeClass('fa-angle-left')");

    $scope.toggleSidebar();

    if(sbToggle.hasClass('hide-sidebar')) {
        expect(buttonIcon.removeClass('fa-angle-left')).toHaveBeenCalled();
        expect(buttonIcon.addClass('fa-angle-right')).toHaveBeenCalled();
    }
    else {
        expect(buttonIcon.removeClass('fa-angle-right')).toHaveBeenCalled();
        expect(buttonIcon.addClass('fa-angle-left')).toHaveBeenCalled();
    }    
});

I am not even sure if I am close to being on the mark here but any help would be greatly appreciated!

Aucun commentaire:

Enregistrer un commentaire