I am trying to unit test a directive that uses ngModel and having difficulties. It seems that the link function of my directive is never being called...
我正在尝试对使用ngModel并遇到困难的指令进行单元测试。似乎我的指令的链接功能永远不会被调用...
Here is my directive code:
这是我的指令代码:
coreModule.directive('coreUnit', ['$timeout', function ($timeout) {
return {
restrict: 'E',
require: '?ngModel',
template: "{{output}}",
link: function (scope, elem, attrs, ngModelCtrl) {
ngModelCtrl.$render = function () {
render(ngModelCtrl.$modelValue);
};
console.log("called");
function render(unit) {
if (unit) {
var output = '(' +
unit.numerator +
(unit.denominator == '' ? '' : '/') +
unit.denominator +
(unit.rate == 'NONE' || unit.rate == '' ? '' : '/' + unit.rate) +
')';
scope.output = output == '()' ? '' : output;
}
}
}
}
}]);
Here is my test spec:
这是我的测试规范:
describe('core', function () {
describe('coreUnitDirective', function () {
beforeEach(module('core'));
var scope,
elem;
var tpl = '<core-unit ng-model="myUnit"></core-unit>';
beforeEach(inject(function ($rootScope, $compile) {
scope = $rootScope.$new();
scope.myUnit = {};
elem = $compile(tpl)(scope);
scope.$digest();
}));
it('the unit should be empty', function () {
expect(elem.html()).toBe('');
});
it('should show (boe)', function () {
scope.myUnit = {
numerator: 'boe',
denominator: "",
rate: ""
};
scope.$digest();
expect(elem.html()).toContain('(boe)');
});
});
});
The console log output "called" is never occurring and obviously the elem in my test spec is never updating.
控制台日志输出“被叫”永远不会发生,显然我的测试规范中的元素永远不会更新。
What am I doing wrong??
我究竟做错了什么??
2 个解决方案
#1
3
Turns out that I wasn't including the directive in my karma.config file :S. Adding it in resolved all of my issues.
事实证明我没有在我的karma.config文件中包含该指令:S。添加它解决了我的所有问题。
#2
2
You can try out two things.
你可以尝试两件事。
First, instead of using just a string tpl, try angular.element().
首先,尝试使用angular.element(),而不是只使用字符串tpl。
var tpl = angular.element('<core-unit ng-model="myUnit"></core-unit>');
Second, place the tpl in the beforeEach block. So the result should look like this:
其次,将tpl放在beforeEach块中。所以结果应该是这样的:
beforeEach(inject(function ($rootScope, $compile) {
var tpl = angular.element('<core-unit ng-model="myUnit"></core-unit>');
scope = $rootScope.$new();
scope.myUnit = {};
elem = $compile(tpl)(scope);
scope.$digest();
}));
#1
3
Turns out that I wasn't including the directive in my karma.config file :S. Adding it in resolved all of my issues.
事实证明我没有在我的karma.config文件中包含该指令:S。添加它解决了我的所有问题。
#2
2
You can try out two things.
你可以尝试两件事。
First, instead of using just a string tpl, try angular.element().
首先,尝试使用angular.element(),而不是只使用字符串tpl。
var tpl = angular.element('<core-unit ng-model="myUnit"></core-unit>');
Second, place the tpl in the beforeEach block. So the result should look like this:
其次,将tpl放在beforeEach块中。所以结果应该是这样的:
beforeEach(inject(function ($rootScope, $compile) {
var tpl = angular.element('<core-unit ng-model="myUnit"></core-unit>');
scope = $rootScope.$new();
scope.myUnit = {};
elem = $compile(tpl)(scope);
scope.$digest();
}));