Question

我正在尝试对使用ngModel并遇到困难的指令进行单元测试。似乎我的指令的链接功能永远不会被调用...

这是我的指令代码：

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

这是我的测试规范：

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

控制台日志输出＆＃34;调用＆＃34;永远不会发生，显然我的测试规范中的元素永远不会更新。

我做错了什么？

Answer 1

原来我在karma.config文件中没有包含该指令：S。添加它解决了我的所有问题。

Answer 2

你可以尝试两件事。

首先，不要只使用字符串tpl，而是尝试使用angular.element（）。

var tpl = angular.element('<core-unit ng-model="myUnit"></core-unit>');

其次，将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();
}));

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

2 个答案: