testowanie jednostki angularjs dyrektywa

Question

Chciałbym rozpocząć wykonywanie testów jednostkowych dla mojego projektu angularjs. To nie jest proste, uważam, że jest to naprawdę trudne. Używam Karmy i Jasmine. Aby przetestować trasy i zależności aplikacji, wszystko jest w porządku. Ale jak testowałbyś dyrektywę taką jak ta?

angular.module('person.directives', []). 
directive("person", function() { 
return { 
    restrict: "E", 
    templateUrl: "person/views/person.html", 
    replace: true, 
    scope: { 
     myPerson: '=' 
    }, 
    link: function (scope, element, attrs) { 

    }   
} 

});

Jak mógłbym przetestować na przykład, że szablon został znaleziony?

Answer 1

Oto droga https://github.com/vojtajina/ng-directive-testing

Zasadniczo, można użyć beforeEach do tworzyć, skompilować i wystawiać elementem i jest to zakres, a następnie symulować zmiany zakres i obsługi zdarzeń i sprawdzić, czy kod reaguje i odpowiednio aktualizuje elementy i zakres. Oto całkiem prosty przykład.

Przyjmijmy to:

scope: { 
    myPerson: '=' 
}, 
link: function(scope, element, attr) { 
    element.bind('click', function() {console.log('testes'); 
    scope.$apply('myPerson = "clicked"'); 
    }); 
}   

Oczekujemy, że gdy użytkownik kliknie element z dyrektywą, myPerson nieruchomość staje clicked. To jest zachowanie, które musimy przetestować. Więc narażać skompilowany dyrektywę (związany z elementu) do wszystkich specyfikacji:

var elm, $scope; 

beforeEach(module('myModule')); 

beforeEach(inject(function($rootScope, $compile) { 
    $scope = $rootScope.$new(); 
    elm = angular.element('<div t my-person="outsideModel"></div>'); 
    $compile(elm)($scope); 
})); 

Wtedy po prostu stwierdzić, że:

it('should say hallo to the World', function() { 
    expect($scope.outsideModel).toBeUndefined(); // scope starts undefined 
    elm.click(); // but on click 
    expect($scope.outsideModel).toBe('clicked'); // it become clicked 
}); 

Plnker here. Do tego testu potrzebujesz jQuery do symulacji click().