javascript - 单元测试 Angular Directive(指令)被文本区域取代

Question

嗨，我有这个指令定义，它被文本区域替换。它看起来像这样:

angular.module('xyz')
.directive('dir1', [function()
{
    return {
        scope : {},
        replace : true,
        template : "<textarea></textarea>",
        require : "ngModel",
        link : function(scope, element, attrs, ctrl)
        {
            ctrl.$parsers.push(function(value)
            {
                //..do some stuff
                return value;
            });
        }
    }
}]);

现在的问题是我无法真正测试 ctrl.$parsers 内的分支。我尝试了很多不同的事情。当它是一个表单时很容易，所以我只需执行类似 scope.input_form.input_value.$setViewValue('abcd') 的操作，模型就会更新等等。这种情况确实很难到达 $parsers。 //..do some stuff 的部分相当长，并且有一些极端情况，通过反复试验来测试它是不可行的。有人可以帮忙吗？如果不清楚，我将提供更多详细信息。

更新:

所以单元测试是这样的:

describe('Specs for dir1', function()
{
    var scope, dir_1;
    beforeEach(module('xyz'));
    beforeEach(inject(function($compile, $rootScope)
    {
         scope = $rootScope.$new();
         scope.test_data = "";
         dir_1 = $compile("<dir1 ng-model='test_data'></dir1>")(scope);
    }));

    it('Does some stuff in $parsers when view value changes', function()
    {
        //I want to do something like this:
        //<textarea>.setViewValue("some value") which will
        //call one of the functions injected in $parsers.
    });
});

顺便说一句，您可以放心，当我在浏览器中尝试时，即当我在文本区域中输入某些内容时，在渲染的 html 上尝试时，会调用 $parsers 中注入(inject)的函数。

Answer 1

由于您正在对代码进行单元测试，因此您希望尝试将不同的部分隔离成易于测试的单元。您提到 //..do some stuff 非常复杂。对我来说，这迫切需要重构为一项服务，因为您可以控制输入和输出，所以它本身可以轻松测试。

如果 //..do some stuff 与 DOM 交互并做了很多带有副作用的时髦事情，这是一种糟糕的代码味道，似乎应该重构它以减少副作用-效果。

一旦您正确提取了 //..do some stuff 并进行了单元测试，在 Controller 中进行测试所需的就是正确添加 $parser ，这是一个简单得多的测试。