Chỉ thị kiểm tra sử dụng các mẫu

Question

Làm thế nào tôi có thể kiểm tra đơn vị chỉ thị sử dụng templateUrl để tải mẫu?

Vì $ httpBackend là một mô hình, nó cũng sẽ không tải mẫu. Tôi muốn để có thể sử dụng giống như

$httpBackend.whenGET(/^\/views\//).passThrough(); 

và để cho nó thực sự có được mẫu, nhưng tôi đã không tìm ra cách để làm điều này một cách chính xác.

Tôi nghĩ rằng tôi có điều gì đó nhầm lẫn về cách chỉ thị kiểm tra đơn vị. Tuyên bố từ chối trách nhiệm: Tôi không có kinh nghiệm kiểm tra, hoặc sử dụng hoa nhài và cũng không có tiếng.

Mọi trợ giúp đều được đánh giá cao.

Answer 1

Nhờ pkozlowski.opensource đã giúp tôi đi đúng hướng!

Đối với bất cứ ai tự hỏi làm thế nào tôi giải quyết nó:

1. Thêm https://npmjs.org/package/grunt-angular-templates để dự án của bạn.
2. Thêm tác vụ xây dựng grunt để biên dịch tất cả các mẫu của bạn thành tệp js.

Tệp JS này giờ đây sẽ đăng ký một mô-đun (tên có thể được định cấu hình trong gruntfile).

Trong tất cả các thử nghiệm của bạn phụ thuộc vào mẫu bạn phải tải mô-đun này.

kiểm tra Ví dụ:

'use strict'; 

describe('Component: comments', function() { 
    beforeEach(module('studentportalenApp'), module('app.templates')); 

    var element; 

    it('should render an error message if type is not recognized', inject(function($rootScope, $compile) { 
    element = angular.element('<comments></comments>'); 
    element = $compile(element)($rootScope); 
    expect(element.html()).toBe('Comments directive type not recognized.'); 
    })); 
}); 

Hãy cẩn thận để có được quan điểm của bạn bằng cách sử dụng cùng một url chính xác theo quy định tại các module app.templates. I E./views/và không phải views /, nếu không nó sẽ không khớp với các đường dẫn cache của template và các yêu cầu cháy theo yêu cầu.

Answer 2

IMO cách dễ nhất để kiểm tra các chỉ thị phụ thuộc vào mẫu (được tham chiếu bởi templateUrl) là đặt các mẫu đó ở mặt trước $templateCache. Thông thường điều này được thực hiện bởi quá trình xây dựng.

Để biết thêm chi tiết: mỗi đánh dấu mẫu được chuyển đổi thành mã JavaScript và được đưa vào $templateCache. Ngoài ra, một mô-đun AngularJS được tạo ra (với tên của một mô-đun là đường dẫn đến một khuôn mẫu).

Bằng cách áp dụng kỹ thuật này, chúng tôi chỉ có các tệp JavaScript để giải quyết và chúng tôi không cần giả lập bất kỳ cuộc gọi HTTP nào. Nhược điểm là bạn cần một bước xây dựng bổ sung.

Tôi tin rằng ban đầu kỹ thuật này được phổ biến bởi các kho lưu trữ tuyệt vời bởi Vojta Jina: https://github.com/vojtajina/ng-directive-testing nơi bạn có thể thấy các mẫu chuẩn bị here và thử nghiệm thực tế tham khảo một mô-đun với một mẫu tiền tải here.