2012-10-05 13 views
44

Tôi đang làm việc trên ứng dụng Rails 3.2 sẽ sử dụng AngularJS. Tôi có thể có được Angular để làm những gì tôi cần, nhưng tôi đang có một thời gian rất khó khăn để tìm ra cách để kiểm tra những gì tôi đang làm. Tôi đang sử dụng bảo vệ hoa nhài để chạy thông số kỹ thuật của Jasmine bằng cách sử dụng PhantomJS.Cách kiểm tra chỉ thị AngularJS

Dưới đây là (có liên quan) html:

<html id="ng-app" ng-app="app"> 
    <div id="directive-element" class="directive-element"> 
    </div> 
</html> 

Các javascript (trong coffeescript) trông giống như:

window.Project = 
    App: angular.module('app', []) 
    Directive: {} 

Project.Directive.DirectiveElement = 
    -> 
    restrict: 'C' 
    link: (scope, element, attrs) -> 
     element.html 'hello world' 
Project.App.directive 'directiveElement', Project.Directive.DirectiveElement 

Đoạn mã trên thực hiện chính xác những gì nó được thiết kế để làm. Các bài kiểm tra là vấn đề. Tôi không thể khiến họ làm việc cả. Đây là một điều tôi đã thử. Đăng bài này chủ yếu chỉ để bắt đầu cuộc trò chuyện ở đâu đó.

describe 'App.Directive.DirectiveElement', -> 
    it 'updates directive-element', -> 
    inject ($compile, $rootScope) -> 
     element = $compile('<div id="app" ng-app="app"><div id="directive'element" class="directive-element"></div></div>') 
     expect(element.text()).toEqual('hello world') 

Là một sang một bên, tôi mới để AngularJS, vì vậy nếu có bất kỳ thực hành tốt nhất về không gian tên, mô-đun, vv Tôi không tuân theo, hướng dẫn sẽ được đánh giá.

Làm cách nào để thử nghiệm tính năng này hoạt động?

Trả lời

68

Here's how alert directive is tested in angular-ui/bootstrap.

Here's another simple set of tests, for the buttons directive.

Dưới đây là một vài lời khuyên:

  • Hãy chắc chắn để nói với Á hậu kiểm tra những gì mô-đun bạn đang thử nghiệm với beforeEach(module('myModule')).

  • Nếu bạn có các mẫu biểu mẫu bên ngoài trong chỉ thị của mình, bạn sẽ muốn bằng cách nào đó trước khi lưu chúng vào bộ kiểm tra. Á hậu thử nghiệm không thể không đồng bộ GET mẫu. Trong bootstrap, chúng ta tiêm các khuôn mẫu vào javascript với một bước xây dựng, và làm cho mỗi mẫu một mô-đun. Chúng tôi sử dụng grunt-html2js nhiệm vụ grunt.

  • Trong thử nghiệm của bạn, hãy sử dụng trình trợ giúp inject trong số beforeEach để tiêm $ compile và $ rootScope và bất kỳ dịch vụ nào khác mà bạn cần. Sử dụng var myScope = $rootScope.$new() để tạo phạm vi mới cho mỗi thử nghiệm. Bạn có thể làm var myElement = $compile('<my-directive></my-directive>')(myScope); để tạo một thể hiện của chỉ thị của bạn và có quyền truy cập vào phần tử của nó.

  • Nếu chỉ thị tạo phạm vi riêng và bạn muốn kiểm tra, bạn có thể truy cập vào phạm vi chỉ thị đó bằng cách thực hiện var directiveScope = myElement.children().scope() - Nó sẽ nhận con của phần tử (chỉ thị) và nhận phạm vi cho điều đó .

  • Để hết thời gian chờ kiểm tra, bạn có thể sử dụng $timeout.flush() để kết thúc tất cả thời gian chờ đang chờ xử lý.

  • Đối với thử nghiệm những lời hứa, hãy nhớ rằng khi bạn giải quyết một lời hứa, nó sẽ không gọi then callbacks của nó cho đến khi tiêu hóa tiếp theo. Vì vậy, trong các bài kiểm tra, bạn phải làm điều này rất nhiều: deferred.resolve(); scope.$apply();.

Bạn có thể tìm thấy các thử nghiệm cho các chỉ thị về độ phức tạp khác nhau trong the bootstrap repo. Chỉ cần xem trong src/{directiveName}/test/.

+0

Vì người chơi có vẻ không hoạt động nữa, bạn có phiên bản làm việc không? Tài liệu hướng dẫn kiểm tra chỉ thị với Jasmine cho AngularJS là siêu xấu và gây tổn thương cho một ví dụ như một người ở plunker. – Philipp

+1

OK, tôi đã chỉnh sửa nó để cung cấp liên kết đến các kiểm tra thực tế :-) –

+0

bạn có chắc chắn về myElement.children(). Scope()? Tôi không làm việc cho tôi = ( -> UPD: Tôi phải làm $ scope. $ Apply() –