Đơn vị thử nghiệm một chỉ thị xác định một bộ điều khiển trong AngularJS

Question

Tôi đang cố gắng để kiểm tra một chỉ thị sử dụng Karma và Jasmine mà làm một vài điều. Đầu tiên là nó sử dụng một templateUrl và thứ hai là nó định nghĩa một bộ điều khiển. Đây có thể không phải là thuật ngữ chính xác, nhưng nó tạo ra một bộ điều khiển trong khai báo của nó. Ứng dụng Góc được thiết lập sao cho mỗi đơn vị được chứa trong mô đun riêng của nó. Ví dụ, tất cả các chỉ thị được bao gồm trong mô-đun app.directive, tất cả các bộ điều khiển được chứa trong app.controller, và tất cả các dịch vụ được chứa bên trong app.service, v.v.

Để làm phức tạp hơn, bộ điều khiển được xác định trong chỉ thị này có một sự phụ thuộc duy nhất và nó chứa một hàm thực hiện một yêu cầu $ http để đặt một giá trị trên phạm vi $. Tôi biết rằng tôi có thể giả lập sự phụ thuộc này bằng cách sử dụng $ httpBackend giả lập để mô phỏng cuộc gọi $ http và trả về đối tượng thích hợp cho cuộc gọi của hàm này. Tôi đã làm điều này rất nhiều lần trên các bài kiểm tra đơn vị khác mà tôi đã tạo ra, và có một nắm bắt khá tốt về khái niệm này.

Mã bên dưới được viết bằng CoffeeScript.

Dưới đây là chỉ thị của tôi:

angular.module('app.directive') 
     .directive 'exampleDirective', [() -> 
     restrict: 'A' 
     templateUrl: 'partials/view.html' 
     scope: true 
     controller: ['$scope', 'Service', ($scope, Service) -> 
      $scope.model = {} 
      $scope.model.value_one = 1 

      # Call the dependency 
      Service.getValue() 
      .success (data) -> 
       $scope.model.value_two = data 
      .error -> 
       $scope.model.value_two = 0 
     ] 
     ] 

Dưới đây là các dịch vụ phụ thuộc:

angular.module("app.service") 
     .factory 'Service', ['$http', ($http) -> 

     getValue:() -> 
     options.method = "GET" 
     options.url = "example/fetch" 

     $http _.defaults(options) 

Dưới đây là quan điểm:

<div> 
     {{model.value_one}} {{model.value_two}} 
    </div> 

Tôi đã đơn giản hóa điều này một chút, vì mục tiêu của tôi chỉ là hiểu cách nối dây này lên, tôi có thể lấy nó từ đó. Lý do tôi cấu trúc nó theo cách này là bởi vì ban đầu tôi không tạo ra điều này. Tôi đang viết các bài kiểm tra cho một dự án hiện có và tôi không có khả năng cấu hình nó theo bất kỳ cách nào khác. Tôi đã thực hiện một nỗ lực để viết bài kiểm tra, nhưng không thể làm cho nó để làm những gì tôi muốn.

Tôi muốn kiểm tra xem liệu các giá trị có bị ràng buộc với chế độ xem hay không và nếu có thể cũng sẽ kiểm tra xem bộ điều khiển có tạo giá trị đúng cách hay không.

Đây là những gì tôi đã có:

'use strict' 

    describe "the exampleDirective Directive", -> 

     beforeEach module("app.directive") 
     beforeEach module("app/partials/view.html") 

     ServiceMock = { 
     getValue :() -> 

     options.method = "GET" 
     options.url = "example/fetch" 

     $http _.defaults(options) 
     } 

    #use the mock instead of the service 
    beforeEach module ($provide) -> 
     $provide.value "Service", ServiceMock 
     return 

    $httpBackend = null 
    scope = null 
    elem = null 

    beforeEach inject ($compile, $rootScope, $injector) -> 

    # get httpBackend object 
    $httpBackend = $injector.get("$httpBackend") 
    $httpBackend.whenGET("example/fetch").respond(200, "it works") 

    #set up the scope 
    scope = $rootScope 

    #create and compile directive 
    elem = angular.element('<example-directive></example-directive>') 
    $compile(elem)(scope) 
    scope.$digest() 

Tôi không biết tôi là khoảng cách giữa, hoặc nếu điều này thậm chí còn chính xác. Tôi muốn có thể khẳng định rằng các giá trị được ràng buộc với khung nhìn chính xác. Tôi đã sử dụng ví dụ của Vojtajina để thiết lập html2js trong tệp karma.js của tôi để cho phép tôi lấy các khung nhìn. Tôi đã thực hiện rất nhiều nghiên cứu để tìm câu trả lời, nhưng tôi cần một số trợ giúp. Hy vọng rằng một lập trình khôn ngoan hơn tôi có thể chỉ cho tôi đi đúng hướng. Cảm ơn bạn.

Answer 1

Tạo yếu tố trong nghiệp, sau đó sử dụng chức năng .controller() với tên chỉ thị của bạn để lấy bộ điều khiển. Ví dụ của bạn, hãy thay thế một vài dòng cuối cùng bằng các dòng sau:

elem = angular.element('<div example-directive></div>'); 
$compile(elem)($rootScope); 
var controller = elem.controller('exampleDirective'); 

Lưu ý rằng cách xác định chỉ thị của bạn, nó phải theo thuộc tính chứ không phải là một phần tử. Tôi cũng không chắc chắn 100%, nhưng tôi không nghĩ rằng bạn cần scope.$digest; thường tôi chỉ cần đặt bất cứ thứ gì cần được áp dụng vào khối scope.$apply(function() {}).