1

I'm having trouble testing my directive with an ng-mouseenter directive.

I'd like to test several things, but first off, I need to test that the method supplied to ng-mouseenter is called.

my test:

describe('hover tests', function () {
        it('the triggerPopover method should be called on hover', function() {
            spyOn($scope, 'triggerPopover');
            var ars = jQuery(view.find('article.the-class-im-looking-for'));
            jQuery(ars[0]).trigger('mouseenter');
            expect($scope.triggerPopover).toHaveBeenCalled();
        });
    });

my directive use:

<article my-directive ng-mouseenter="triggerPopover();"></article>

Result:

Expected spy triggerPopover to have been called. The ng-mouseenter stuff doesn't seem to get called

binarygiant
  • 6,362
  • 10
  • 50
  • 73
  • Is there even a DOM present in the Jasmine test environment? I thought you had to use the `$compile` service. See https://docs.angularjs.org/guide/unit-testing#directives – Phil Oct 09 '14 at 00:34
  • I've shortened the code samples for brevity. All the normal beforeEach stuff has been done by the time we get to this point. – binarygiant Oct 09 '14 at 01:41

2 Answers2

0

If you are using PhantomJS for your tests, some mouse events that work in normal browsers will not work. If indeed that's the case, you can run your test with Chrome or Firefox, or alternatively implement a similar solution to this answer for a related question.

Community
  • 1
  • 1
Yaron Schwimmer
  • 5,327
  • 5
  • 36
  • 59
0

mouseenter as a native DOM event is not supported by all browsers: http://www.quirksmode.org/dom/events/index.html

ng-mouseenter builds on the mouseover event, so you can just trigger it like this:

jQuery(ars[0]).trigger('mouseover');
lex82
  • 11,173
  • 2
  • 44
  • 69
  • `mouseenter` support has improved. The quirksmode page has not been updated since 2011. See https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter#Browser_compatibility – Chic Dec 30 '15 at 18:25