Jasmine not working for link directive on document click

Question

My Directive Link function is given below -

link:function(scope,elem,attr){
            $(document).on("click",function(event){
                var target = $(event.target);
                if(target.is('.detailBox') || target.closest('.detailBox').length){
                    return;
                }
                scope.$emit('closeDetailBox');
                scope.$apply();
            });
        }

And my jasmine TC for testing the emit is given below -

it('Some other box click', function () {
            spyOn($rootScope, '$emit');
            var theboxelement = '<button class="thebox"></button>';
            var thebox = $(theboxelement);
            $('body').append(thebox);
            var spyEvent = spyOnEvent('.thebox', 'click');

            thebox.trigger("click");
            expect($rootScope.$emit).toHaveBeenCalledWith('closeDetailBox',theboxelement);
            thebox.remove();
        });

The emit event should have been triggered and caught, but it was never triggered. I get the error - "Expected spy $emit to have been called with [ 'closeDetailBox', '' ] but it was never called."

I have been dealing with this issue since 2 days, could not get the fix, pls help!

score 2 · Accepted Answer · answered Jun 16 '16 at 15:06

2

As per your code, I think you need to call the link function. Then do the rest. Something like mydirective.link(); This would resolve the following function calls you make.

You can probably check on the following items, if the above does not work -

See if your module dependencies are resolving correctly.

Make use of local jasmine debugging. This is probably the easiest way to check your flow.

answered Jun 16 '16 at 15:06

bijoy tv

148
2
8

Thank you so very much! Invoking the link function was all that was required. Now it works like a charm. Thank you. – anand patil Jun 16 '16 at 15:13
@anandpatil can you show how you invoked link function? Did you pass scope,element, attrs parameters? – el vis Jun 20 '16 at 09:02
I just had to use directive.link(), without any parameters since I did not require them in my function. But if you need them you need to pass them. – anand patil Jun 22 '16 at 06:55

score 0 · Answer 2 · answered Jun 13 '16 at 09:03

0

Based on your directive, your event is emitted on from your directive's scope. Are you certain that this would trigger the $emit function of the $rootScope ?

Maybe you should use $broadcast on the $rootScope ?

answered Jun 13 '16 at 09:03

Paqman

456
3
8

I debugded and saw, after trigger on jasmine code, it is not entering the link code in directive. No clue why! – anand patil Jun 13 '16 at 09:23
Is $ related to jQuery in your directive ? – Paqman Jun 13 '16 at 09:24
Yes, it is related to jQuery – anand patil Jun 13 '16 at 09:34
The main problem i am facing is - the trigger function on the jasmine is not getting inside the directive at all. Something i am missing. – anand patil Jun 13 '16 at 09:42
Then you should not mix jquery and angularjs. Check this link http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background and especially the 5. chapter about directives and jQuery. This should explain everything and allow you to rewrite your directive without using jQuery. – Paqman Jun 13 '16 at 09:43

Jasmine not working for link directive on document click

2 Answers2