AngularJS - How to unit test a directive that manipulates HTML?

Question

Good evening, guys.

I'm having a bit of a problem testing a directive that takes an id and disables all the inputs that are children of it.

I mean, if I have a div with an id "id-from-my-div" and I have an input inside of this div, when the user clicks on the directive element, I'd disable the input. For example:

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

Here's the directive code:

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

And here's how my test looks like:

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

And this fails with:

Expected undefined to equal 'disabled'.

And if I 'dump' _element.find('#test123 input'), it'll show my '_html' with all the inputs not disabled.

Thanks in advance!

Answer 1

Your problem is that _element.find('#test123 input') actually searches inside the element, but the selector you have is #test123 input . There is no element with an id of "test123" within your element node, since the element node itself has that id.

If you were to replace it with just _element.find('input') , that should work.