đơn vị kiểm tra angularjs chỉ thị

Question

Tôi muốn bắt đầu làm thử nghiệm đơn vị cho dự án angularjs của tôi. Đó là xa thẳng về phía trước, tôi thấy nó thực sự khó khăn. Tôi đang sử dụng Karma và Jasmine. Để thử nghiệm các tuyến đường của tôi và phụ thuộc ứng dụng, tôi ổn. Nhưng làm thế nào bạn sẽ kiểm tra một chỉ thị như thế này?

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

    }   
} 

});

Làm cách nào để thử nghiệm mẫu được tìm thấy?

Answer 1

Đây là con đường để đi https://github.com/vojtajina/ng-directive-testing

Về cơ bản, bạn sử dụng beforeEach để tạo, biên dịch và lộ một yếu tố và nó phạm vi, sau đó bạn mô phỏng thay đổi phạm vi và xử lý sự kiện và xem nếu mã phản ứng và cập nhật các phần tử và phạm vi phù hợp. Đây là một ví dụ khá đơn giản.

Giả này:

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

Chúng tôi hy vọng rằng khi người dùng nhấp chuột vào phần tử với các chỉ thị, myPerson bất động sản trở nên clicked. Đây là hành vi chúng ta cần kiểm tra. Vì vậy, chúng tôi tiếp xúc với các chỉ thị biên dịch (liên kết với một phần tử) cho tất cả các thông số kỹ thuật:

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); 
})); 

Sau đó, bạn chỉ cần khẳng định rằng:

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. Bạn cần jQuery để thử nghiệm này, để mô phỏng click().