AngularJS cách kiểm tra đơn vị để đảm bảo các chỉ thị như ng-click trỏ tới mã hợp lệ

Question

Tôi đang sử dụng Jasmine để viết các bài kiểm tra đơn vị cho các bộ điều khiển của chúng tôi, nhưng muốn nhận được phản hồi của cộng đồng về cách xử lý tình huống này ...

tôi có một bộ điều khiển - InvoiceController, như thế này:

angular.module('myModule').controller('myController', ['$scope', 
    function($scope) { 
     $scope.doSomething = function() { 
      $scope.something = 'bar'; 
     }; 
    } 
]}); 

trong các thử nghiệm đơn vị của tôi, tôi xác nhận rằng bộ điều khiển của tôi có các phương pháp dự kiến:

it('should be able to do some work', function() { 

    // initialize scope properties 
    scope.someProperty = 'foo'; 

    // load controller using those properties 
    injectController(); 

    // do I have all of the functions necessary to do this work? 
    expect(typeof (scope.doSomething)).toBe('function'); 

    // now execute test 
    scope.doSomething(); 
    expect(scope.something).toBe('bar');  

} 

Và cuối cùng, trong html của tôi, tôi có phần tử có cú nhấp chuột, như sau:

<button ng-click="doSomehing()">Do Something</button> 

Có vẻ tốt, phải không? NHƯNG, có ai bắt được những gì tôi đã làm sai không?

Phương pháp ng-click của tôi bị viết sai chính tả, nhưng tất cả các bài kiểm tra đều có màu xanh lá cây và cuộc sống có vẻ màu hồng ... cho đến khi tôi cố bấm vào anh chàng đó và không có gì xảy ra. Không có lỗi thời gian hiển thị, không có lỗi khi nhấp. Hmm.

Một vài lần bây giờ vì tôi đang mã hóa lại mã này, điều này đã giúp tôi. Tôi đổi tên doSomething thành doSomethingCooler trong bài kiểm tra đơn vị và trong bộ điều khiển nhưng bỏ lỡ một vị trí trong html. Sau một phút đầu gãi tôi thấy những gì đã bị bỏ qua.

Tôi muốn một cách để đảm bảo rằng đánh dấu hợp lệ. Các xét nghiệm E2E dường như là giải pháp hiển nhiên, nhưng những xét nghiệm này dễ bị tổn thương do đó chúng tôi hy vọng có một số giải pháp thay thế.

Nếu đây là ASP.Net tôi sẽ đính kèm các sự kiện nhấp chuột từ mã phía sau để tôi nhận được lỗi biên dịch thời gian và lỗi thời gian chạy.

Suy nghĩ ??

Thad

Answer 1

Một điều bạn có thể làm là lấy mẫu văn bản và chạy $compile trên đó. Và sau đó liên kết nó với phạm vi của bộ điều khiển của bạn. Sau đó, bạn có thể làm một cái gì đó như dom.find('[ng-click]').click();, mà nên ném nếu bất kỳ người trong số họ không được xác định trong phạm vi của bộ điều khiển của bạn. Điều này tương tự như cách bạn thường kiểm tra các chỉ thị.