Jasmine click trigger doesn't work on

Question

Here's the spec I am running

describe("Test", function() {

    beforeEach(function(){
        loadFixtures('modal.html');
    });

    it ("click a tag", function(){

        var spy = spyOnEvent($('.modal-link'), 'click');
        $('.modal-link').trigger('click');
        expect('click').toHaveBeenTriggeredOn($('.modal-link'));
        expect(spy).toHaveBeenTriggered();

    });

});

Inside the fixture (modal.html), it looks like this

<a class="modal-link">Test Link</a>

The test fails with this error:

Expected event [object Object] to have been triggered on [object Object]at Object.<anonymous>

Expected event click to have been triggered on [object Object] at Object.<anonymous>

But when I replace the a tag with div, span or p, the test passes.

<div class="modal-link">Test Link</div>

Is there some reason the a tag is not clickable in my test?

Edit on 19/04: I use Karma to run the test, here's the config file

module.exports = function(config) {
  config.set({
    frameworks: ['jquery-1.11.0', 'jasmine-jquery', 'jasmine'],
    reporters: ['mocha'],
    browsers: ['PhantomJS'],
    plugins: [
      // Karma will require() these plugins
      'karma-jasmine',
      'karma-jasmine-jquery',
      'karma-jquery',
      'karma-phantomjs-launcher',
      'karma-mocha-reporter'
    ],
    preprocessors: {
      'test/spec/**/*.html': ['html2js']
    },
    autoWatch: true,
    files: [
      {pattern: 'app/libs/jquery.min.js', watched: true, included: true, served: true},
      {pattern: 'app/libs/bootstrap/js/bootstrap.js', watched: true, included: true, served: true},
      {pattern: 'app/js/myjavascript.js', watched: true, included: true, served: true},
      {pattern: 'test/spec/**/*.js', watched: true, included: true, served: true},
      {pattern: 'test/spec/**/*.html', watched: true, included: false, served: true}
    ],

  });
};

jasmine default doesnt understand jquery methods, are u using the jq jasmine library ? — Felipe Quirós, Apr 18 '16 at 16:21
@MBielski, I've tried Chrome, Firefox and PhantomJS but the test keeps failing. — Helen Fung, Apr 19 '16 at 02:43
@FelipeQuirós, Yes, I've installed the 'karma-jasmine-jquery' plugin via npm. I did some other testing with the toHaveClass() matcher which was working as expect. — Helen Fung, Apr 19 '16 at 02:48

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

Your config is targeting PhantomJS, which has a problem clicking on things. The full answer is here: How to ng-click an A directive in a PhantomJS test but the short of it is to use this function in your tests:

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

edited May 23 '17 at 11:58

Community

1
1

answered Apr 19 '16 at 13:15

MBielski

6,628
3
32
43

I'm trying to use this but I get `el.dispatchEvent is not a function`, any hint? – teone Jun 15 '16 at 22:36
That means that your target element was not found. If you step through it, you'll find that 'el' is not defined. – MBielski Jun 16 '16 at 02:19

Jasmine click trigger doesn't work on

1 Answers1