How to ng-click an A directive in a PhantomJS test

Question

App generated by Yeoman with angular-generator.

Directive:

angular.module('psApp').directive('scrollTop', function () {
  return {
    restrict: 'A',
    scope: true,
    template: '<a href="#" ng-click="click()" class="scroll-top"><span class="glyphicon glyphicon-arrow-up"></span> Back to top</a>',
    controller: ['$scope', '$element', '$document', function ($scope, $element, $document) {
      $scope.click = function () {
        $document.scrollTop(0, 500);
      };
    }]
  };
});

Test:

describe('Directive: scrollTop', function () {

  // load the directive's module
  beforeEach(module('psApp'));

  var scope, element;

  beforeEach(inject(function ($rootScope, $compile) {
    scope = $rootScope.$new();
    element = $compile('<div scroll-top></div>')(scope);
    scope.$apply();
  }));

  it('should have "Back to top" as text', inject(function () {
    expect(element.html()).toBe('<a href="#" ng-click="click()" class="scroll-top"><span class="glyphicon glyphicon-arrow-up"></span> Back to top</a>');
    expect(element.text()).toBe(' Back to top');
    element.click();
  }));
});

Error:

PhantomJS 1.9.7 (Mac OS X) Directive: scrollTop should have "Back to top" as text TypeError: 'undefined' is not a function (evaluating 'element.click()')

I cannot understand where the problem is. :( Please post functional code.

possible duplicate of [PhantomJS; click an element](http://stackoverflow.com/questions/15739263/phantomjs-click-an-element) since the accepted answer is **very** similar to the most upvoted one. — Artjom B., Sep 17 '14 at 23:39

score 5 · Answer 1 · answered Sep 17 '14 at 20:05

This is not a deficiency of PhantomJS, but rather a known limitation of the jqLite package that is included with AngularJS. It does not have a 'click' function in its element class: https://docs.angularjs.org/api/ng/function/angular.element

There are two alternate approaches for testing purposes.

Include jQuery in your tests. If jQuery is included, the jqLite package is automatically replaced with the full jQuery package, which does have the full click() implementation. I realize that this is not ideal, since your application presumably does not use jQuery.
Use the 'triggerHandler()' function of jqLite to call the click handler. But this approach would call your handler with a dummy event; see the documentation for triggerHandler. Test code would look something like:
```
element.triggerHandler('click');
```
Since triggerHandler does not pass a 'real' event object, you might need to adjust your tests accordingly.

This is a very good answer. It analyses the problem and shows two possible solutions. — Artjom B., Sep 17 '14 at 23:41

score 3 · Accepted Answer · answered Aug 29 '14 at 14:04

3

For some reason PhantomJS does not have a click() function in it. Here is the workaround:

//Need to create a cross browser click() function no .click() in PhantomJS
function click(el){
    var ev = document.createEvent('MouseEvent');
    ev.initMouseEvent(
        'click',
        true /* bubble */, true /* cancelable */,
        window, null,
        0, 0, 0, 0, /* coordinates */
        false, false, false, false, /* modifier keys */
        0 /*left*/, null
    );
    el.dispatchEvent(ev);
}

And here is how to use it:

it('Should set the month when the month is changed', function(){
    var obj = element[0].getElementsByClassName('month_opt')[1];
    click(obj);
    expect(scope.dt.getMonth()).toEqual(1);
});

answered Aug 29 '14 at 14:04

MBielski

6,628
3
32
43

ok, i do it, but how i will know if it was scrolled? I tried with $window.scrollY before and after the click(); but it equal to 0. What's wrong? Cheers! – Thales P Aug 31 '14 at 02:57
That's a totally different question, and one I don't have the answer to. Sorry. – MBielski Sep 01 '14 at 14:56
Answer is likely taken from here: http://stackoverflow.com/questions/15739263/phantomjs-click-an-element – Artjom B. Sep 17 '14 at 23:37
That's possible, but I have no way of knowing as I got this solution from a co-worker some months before this post. – MBielski Sep 18 '14 at 14:26

score -1 · Answer 3 · answered Mar 10 '15 at 09:23

This isn't place for testing browser action (in this case click). In UNIT test you should test it isolated so test just click action from the scope:

$scope.$$childHead.click(); // in test $$childHead is scope of your directive in application
...your assertions here

The thing you want to test, click on the browser is more integration test since you are testing click in the browser and response in directive -> this is more job for Selenium for example.

How to ng-click an A directive in a PhantomJS test

3 Answers3

Linked