How to test function within directive link

Question

I have a directive for which i am trying to write some unit test for:

return {
    restrict: 'E',
    replace: true,
    controllerAs: 'vm',
    transclude: true,
    template:   '<ul>' +
                    '<li ng-show="vm.hideItem">Home</li>' +
                    '<li ng-show="vm.hideItem">Products</li>' +
                    '<li ng-show="!vm.hideItem">Cart</li>' +
                    '<li ng-show="vm.hideItem">Contact Us</li>' +
                '</ul>',  
    link: function(scope, element, attrs, vm) {

        function getData(index) {
            if (index){
                vm.hideItem = true
            }
            else {
                var li = element.find("li");
                li.attr("context-driven", "");
            }
        }

        function getIndex(){
            index = myService.getIndex();
            getData(index);
        }

        getIndex();

    },
    controller: function(){}
};

I have the following, which pass:

describe('<-- myDirective Spec ------>', function () {

    var scope, $compile, element, myService;

    beforeEach(angular.mock.module('MyApp'));

    beforeEach(inject(function (_$rootScope_, _$compile_, _myService_) {
        scope = _$rootScope_.$new();
        $compile = _$compile_;
        myService = _myService_;

        var html = '<my-directive></my-directive>';
        element = $compile(angular.element(html))(scope);
        scope.$digest();
    }));

    it('should return an unordered list', function () {
        var ul = element.find('ul');
        expect(ul).toBeDefined();
    });

How can i test the call of getIndex, getData and ensure myService has been called?

It is not possible to do what you're asking without refactoring the code. Again, it is testability reasons that should define the way the code is written, not vice versa. Test-unfriendly code won't get 100% test coverage (testing myService.getIndex call is all that could be done here). — Estus Flask
– Estus Flask, Commented Apr 25, 2016 at 4:34

Estus Flask · Accepted Answer · 2016-03-02 18:55:57Z

4

+50

The key to successful directive testing is moving all view-related logic to controller, i.e.

    this.getIndex = function () {
        index = myService.getIndex();
        getData(index);
    }

After the element was compiled in spec, the controller instance can be retrieved and spied with

var ctrl = element.controller('myDirective');
spyOn(ctrl, 'getIndex').and.callThrough();

The good thing about writing specs is that they show design flaws. In current case it is DOM manual operation in getData. It is not clear from the code what context-driven attribute is for, but the same thing has to be achieved in Angular (data binding) and not jQuery (DOM manipulation) fashion in order to be test-friendly.

answered Mar 2, 2016 at 18:55

Estus Flask

227k79 gold badges478 silver badges621 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to test function within directive link

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related