jeudi 31 mars 2016

unit testing $watch of a directive that requires itself

I am having some trouble unit testing the watch method of my directive. The directive requires the its own direcitive so ctrl houses one main method updateHeight

In my controller I have one method

 this.updateHeight = function (clientHeight) {
    $rootScope.haGlobalAlerts.clientHeight = clientHeight;
};

Inside of my link function I am calling this

 ctrl.updateHeight(el.clientHeight);

I have a $watch method that looks for changes

  $scope.$watch(function () {
    return el.clientHeight;
  },
    function (newHeight, oldHeight) {
        if (first || (newHeight !== oldHeight)) {
           first = false;
           ctrl.updateHeight(newHeight);
         }
    });

Identifying how to test and mock a change is really confusing me. In my directive I created scope like so ....

 html = angular.element("<div global alerts> </div>")
 element = $compile(html)($rootScope);

 $rootScope = $rootScope.$new()

 // added this to get update height

 controller = element.controller('GlobalAlerts')

 //setting controller gives me access to controller.updateHeight().

 scope = element.scope();

scope does not have access to this. I am not sure how to make a call to it.

If I call

controller.updateHeight() //It is not changing the value.

In my test I have $apply called on the scope

scope.$apply()

Here is my complete test

 it("should update client Height", function () {

        expect(element[0].clientHeight).to.equal(0);
        var newHeight = 20;
        controller.updateHeight(newHeight);
        scope.$apply();
        expect(element[0].clientHeight).to.equal(20);
    });

Aucun commentaire:

Enregistrer un commentaire