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

最近，我试图为指令编写测试用例

例如，这是一个在浏览器中手动操作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();

    });
});

descripe（'unittesting great quotes'，function（）{
var$compile；
var$rootScope；
在每个模块之前（模块（'myAppdemoApp'）；
beforeach（注入函数（$compile，$rootScope）{
$compile=\$compile；
$rootScope=\u$rootScope；
}));
它（'用适当的内容替换元素'，函数（）{
var元素=$compile（“”）（$rootScope）；
element.appendTo（document.body）；//appendTo到文档，以便in指令可以通过'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（输入2，'聚焦'）；
input1.val（'12345678'）；
input1.keyup（）；
expect（input2.focus）.havebeencall（）；
});
});

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

---

有人能帮我吗？Thx很多…

您的指令操纵DOM（焦点、绑定）。所以在测试中，您可以简单地检查DOM是否以预期的方式发生了更改。您不需要端到端测试。我想说你的测试有点太大了。我想你不需要

spyOn

和

appendTo

，只要：

使用

$compile

使用指令构建DOM

更改作用域和/或DOM的属性以触发预期的指令行为

触发角度（例如

范围.$apply（）

）

验证DOM

---

您可以在这里找到示例：

虽然我在6个月前收到了这封信，但是，谢谢您的回答。：）