I have a requireJS setup where I have an 'imageGallery' module which listens for and handles click events on '.gallery' elements. This in turn uses a plugin 'magnificPopup' to open a gallery of images based on the clicked element.
I want to test this using Jasmine; that is I want to test that the click event is called and that the html for the magnificPopup is in the dom - proving that the click event is successful.
My current click test uses 'waitsFor' but this is always failing. Any ideas on how I can acheive this?
Image Gallery Module
define(
['jquery', 'magnificPopup'],
function($, magnificPopup) {
return {
init: function() {
$('body').on('click', '.gallery', function(e) {
e.preventDefault();
//code to generate items...
$.magnificPopup.open({
items: items,
gallery: { enabled: true }
});
});
}
}
})
Image Gallery Jasmine Test
define(['imageGallery'],
function(imageGallery) {
jasmine.getFixtures().fixturesPath = '/';
describe('Image Galleries', function() {
beforeEach(function(){
loadFixtures('/path-to-my-fixture');
spyOn(imageGallery, 'init');
imageGallery.init();
});
it('Should be defined', function() {
expect(imageGallery).not.toBe(null);
});
it('Should be initialised via imageGallery.init()', function() {
expect(imageGallery.init).toHaveBeenCalled();
});
//fails
it('Should open a modal after a .gallery element is clicked', function() {
$('.gallery').click();
waitsFor(function() {
return ($('body').find('.mfp-ready').length > 0)
}, '.gallery to be clicked', 500);
});
});
}
);
