使用ngModel的单元测试角度指令

时间:2023-01-30 15:59:26

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();
}));