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.

Answer 1

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.

1. 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.

2. 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.

Answer 2

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

Answer 3

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.