我有一个包含另一个指令的指令。这是指令:
<div class="chat-container">
<h5 class="chat-header">
<span class="patient-name-container">{{encounter.patient.firstName }} {{encounter.patient.lastName}}</span></h5>
<div ng-show="showMessages">
<div messages-container messages="encounter.comments"></div>
</div>
</div>
这是我的测试:
var element;
beforeEach(module('app/views/chat.container.html'));
beforeEach(inject(function($templateCache, $compile, $rootScope) {
var chatTemplate = $templateCache.get('app/views/chat.container.html');
$templateCache.put('views/chat.container.html', chatTemplate);
var directive = angular.element('<div chat-container max-chat-count="800" class="pull-left"></div>');
element = $compile(directive)($rootScope);
$rootScope.$digest();
}));
it('the remaining count to be 800', function() {
expect(element.find('#counter').text()).toBe('800');
});
});
我的错误是Error: Unexpected request: GET views/messages.container.html
。它正在寻找html
来创建messages-container
指令,但它无法找到它。我试过在第一个之后添加另一个这样的指令:
var messagesTemplate = $templateCache.get('app/views/messages.container.html');
$templateCache.put('views/messages.container.html', messagesTemplate);
但我仍然得到同样的错误,所以我有2个问题。 首先 - 我该如何测试? 第二 - 我现在正在创建我的测试,依赖于另一个指令,处理它的正确方法是什么?
答案 0 :(得分:0)
问题是我在尝试访问之前没有使用module
函数添加模板。以下是解决问题的代码:
var element, scope;
beforeEach(module('app/views/chat.container.html'));
* beforeEach(module('app/views/messages.container.html'));
beforeEach(inject(function($templateCache, $compile, $rootScope) {
var chatTemplate = $templateCache.get('app/views/chat.container.html');
$templateCache.put('views/chat.container.html', chatTemplate);
var messagesTemplate = $templateCache.get('app/views/messages.container.html');
$templateCache.put('views/messages.container.html', messagesTemplate);
var directive = angular.element('<div chat-container max-chat-count="800" class="pull-left"></div>');
element = $compile(directive)($rootScope);
$rootScope.$digest();
scope = $rootScope;
}));
之前我没有使用*
的行。现在一切都很完美。