Question

最近我正在尝试为指令编写测试用例。

例如，这是在浏览器中对DOM进行操作的指令。

var demoApp = module('demoApp', ['']);
demoApp.directive('tabTo', function(){
    var linkFunc = function(scope, element, attrs, controllers){
        element.bind('keyup', function(e){
            var maxLength = attrs['maxlength'] || attrs['ng-maxlength'];
            if(maxLength && this.value.length === length){
                var tabTarget = angular.element.find('#' + attrs['tab-to']);
                if(tabTarget){
                    tabTarget.focus();
                }
            }          

        }
    } 
    return {
        restrict: 'A',
        link: linkFunc      
    }       

 });

然后我在这里实现了测试用例：

describe('Unit testing great quotes', function() {
    var $compile;
    var $rootScope;

    beforeEach(module('myAppdemoApp'));
    beforeEach(inject(function(_$compile_, _$rootScope_){

        $compile = _$compile_;
        $rootScope = _$rootScope_;
    }));

    it('Replaces the element with the appropriate content', function() {
        var element = $compile('<input type="text" maxlength="8" id="input1" tab-to="input2" /><input type="text" id="input2" maxlength="8" tab-to="input3"/> <input type="text" id="input3" max-length="8" />')($rootScope);
        element.appendTo(document.body); //appendTo to document so that in directive can find it by 'angular.element.find()'
        $rootScope.$digest();

        var tmpInputs = angular.element.find('#input1');
        var input1 = tmpInputs[0];

        tmpInputs = angular.element.find('#input2');
        var input2 = tmpInputs[0];

        spyOn(input2, 'focus');

        input1.val('12345678');
        input1.keyup();

        expect(input2.focus).haveBeenCalled();

    });
});

我的问题是，这是编写测试用例的正确方法吗？ Cuz'我对单元测试不太了解。我刚和我的同事谈过，他告诉我这看起来像是端到端的测试。那么是否意味着测试指令我们必须编写端到端测试？

有人能帮帮我吗？很多......

Answer 1

你的指令操纵DOM（焦点，绑定）。因此，在您的测试中，您只需检查DOM是否已按预期方式更改。你不需要端到端的测试。我会说你的测试有点太大了。我认为你不需要spyOn和appendTo，只需：

使用$compile使用您的指令构建DOM
更改范围和/或DOM的属性以触发预期的指令行为
触发角度（例如scope.$apply()）
验证DOM

您可以在此处找到示例：http://blog.piotrturski.net/2014/11/nesting-angular-directives.html

如何通过编写测试用例来测试指令？

1 个答案: