Question

晚上好，伙计们。

我在测试带有id的指令时遇到了一些问题，并且禁用了它的所有输入。

我的意思是，如果我有一个id为“id-from-my-div”的div，并且我在这个div中有一个输入，当用户点击指令元素时，我将禁用输入。例如：

<div id="id-from-my-div">
  <input type="text" />
  <button i-disable-stuff="id-from-my-div"></button>
</div>

这是指令代码：

myApp.directive('iDisableStuff', [function()
{
    var _link = function(scope, element, attrs)
    {
        element.on('click', function()
        {
            var _id = '#' + attrs.iDisableStuff;

            var _toDisable = _id + ' input, ' +
                             _id + ' button, ' +
                             _id + ' textarea';

            $(_toDisable).prop('disabled', 'disabled');
        })
    }

    return {
                restrict: 'A',
                link: _link
           }
}])

以下是我的测试结果：

describe('iDisableStuff', function()
{
    var _scope, _element, _compile, _html;

    beforeEach(module('myApp'));

    beforeEach(inject(function($injector)
    {
        _scope = $injector.get('$rootScope').$new();
        _compile = $injector.get('$compile');

        _html =     '<div id="test123">' +
                        '<input type="text" />' +
                        '<input type="number" />' +
                        '<input type="date" />' +
                        '<input type="time" />' +
                        '<input type="button" />' +
                        '<textarea></textarea>' +
                        '<button id="click-me" i-disable-stuff="test123"></button>' +
                    '</div>'

        _element = angular.element(_html);

        _compile(_element)(_scope);

        _scope.$digest();
    }))

    describe('checks if the click is disabling inputs', function()
    {
        it('should disable all the inputs when clicked', function()
        {
            _element.find('#click-me').eq(0).click();

            expect(_element.find('#test123 input').attr('disabled')).toEqual('disabled');
        })
    })
})

这失败了：

Expected undefined to equal 'disabled'.

如果我'转储'_element.find（'＃test123输入'），它会显示我的'_html'，所有输入都没有被禁用。

提前致谢！

Answer 1

您的问题是_element.find('#test123 input')实际上在里面搜索元素，但您拥有的选择器是#test123 input。没有ID为＆＃34; test123＆＃34;的元素在元素节点内，因为元素节点本身具有该id。

如果你只用_element.find('input')替换它，那应该可行。

AngularJS - 如何对操作HTML的指令进行单元测试？

1 个答案: