How to mock jQuery with Jasmine

cheesus

What I want to do: We are writing some tests for an existing Javascript code base that uses jQuery heavily. For the tests, we don't want to have actual HTML elements (HTML fixtures). We'd prefer it if we had a jQuery mock object that does not do anything HTML-related.

My starting point: The most promising approach I found here:

http://eclipsesource.com/blogs/2014/03/27/mocks-in-jasmine-tests/

This creates a helper method that creates a mock by going through the functions of an object and creating a spy for each function:

window.mock = function (constr, name) {
  var keys = [];
  for (var key in constr.prototype)
    keys.push( key );
  return keys.length > 0 ? jasmine.createSpyObj( name || "mock", keys ) : {};
};

Then, if I understand him correctly, he uses that like this (adapted example from his blog post):

var el = mock($);
el('.some-not-existing-class').css('background', 'red');
expect(el.css).toHaveBeenCalledWith('background', 'red');

However, this does not work, since el is an object and not a function.

My approach to resolve this problem: I refactored his mock function to account for the case that constr is a function:

mock (constr, name) {
  var keys = [];
  for (var key in constr.prototype)
    keys.push(key);
  var result = keys.length > 0 ? jasmine.createSpyObj(name || "mock", keys) : {};

  // make sure that if constr is a function (like in the case of jQuery), the mock is too
  if (typeof constr === 'function') {
    var result2 = result;
    result = jasmine.createSpy(name || 'mock-fn');
    for (var key in result2)
      result[key] = result2[key];
  }
  return result;
}

However, the second line in the test throws a Cannot read property css of undefined error:

var el = mock($);
el('.some-not-existing-class').css('background', 'red');
expect(el.css).toHaveBeenCalledWith('background', 'red');

Other ideas: I also tried to merge the spy object into jQuery, but that did not help either.

Any ideas? I hope we're not the only ones who do it without HTML fixtures.

cheesus

Found it. When my version of the mock function is set up to return the jQuery object when the jQuery function is invoked, the test works:

mock (constr, name) {
  var keys = [];
  for (var key in constr.prototype)
    keys.push(key);
  var result = keys.length > 0 ? jasmine.createSpyObj(name || "mock", keys) : {};

  // make sure that if constr is a function (like in the case of jQuery), the mock is too
  if (typeof constr === 'function') {
    var result2 = result;
    result = jasmine.createSpy(name || 'mock-fn');
    result.and.returnValue(result);
    for (var key in result2)
      result[key] = result2[key];
  }
  return result;
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to use spyOn to mock jQuery value for a selector in Jasmine?

From Dev

How to mock Angular $q service in Jasmine test?

From Dev

How to mock custom filter in Angular/Jasmine

From Dev

How to mock AngularJS $resource with $promise.then in jasmine

From Dev

How to mock socket.io with Angular and Jasmine

From Dev

Angular and Jasmine: how to mock a service that returns a promise

From Dev

How to mock $scope.variables in jasmine

From Dev

How to mock AngularJS $resource with $promise.then in jasmine

From Dev

Jasmine how to mock http request (for fetch and XMLXtthpRequest)

From Dev

How to mock $cookiestore.put in AngularJS/Jasmine

From Dev

How to mock an angular $resource object in Jasmine?

From Dev

How to correctly use Jasmine spies to mock transactions

From Dev

how do you mock an imported enum with jasmine

From Dev

How to have a mock controller pass data to a directive with Jasmine

From Dev

How do you mock process.platform in jasmine tests?

From Dev

How do I mock $http in AngularJS service Jasmine test?

From Dev

How to mock angularjs $window.sessionStorage with Jasmine and Karma

From Dev

Jasmine Test: How to mock a method inside a controller in AngularJS

From Dev

How do I inject a mock dependency into an angular directive with Jasmine on Karma

From Dev

How do I mock an Angular service using jasmine?

From Dev

how to mock $state.params in jasmine unit testing

From Dev

How to mock angular.module('myModule', []).value() in Jasmine/Protractor

From Dev

How to mock a window.location function in Karma/jasmine

From Dev

How do I inject a mock dependency into an angular directive with Jasmine on Karma

From Dev

Jasmine Test: How to mock a method inside a controller in AngularJS

From Dev

How to have a mock controller pass data to a directive with Jasmine

From Dev

Mock date constructor with Jasmine

From Dev

How to mock jquery ready function

From Dev

How to add jquery to jasmine/angularjs unittests

Related Related

  1. 1

    How to use spyOn to mock jQuery value for a selector in Jasmine?

  2. 2

    How to mock Angular $q service in Jasmine test?

  3. 3

    How to mock custom filter in Angular/Jasmine

  4. 4

    How to mock AngularJS $resource with $promise.then in jasmine

  5. 5

    How to mock socket.io with Angular and Jasmine

  6. 6

    Angular and Jasmine: how to mock a service that returns a promise

  7. 7

    How to mock $scope.variables in jasmine

  8. 8

    How to mock AngularJS $resource with $promise.then in jasmine

  9. 9

    Jasmine how to mock http request (for fetch and XMLXtthpRequest)

  10. 10

    How to mock $cookiestore.put in AngularJS/Jasmine

  11. 11

    How to mock an angular $resource object in Jasmine?

  12. 12

    How to correctly use Jasmine spies to mock transactions

  13. 13

    how do you mock an imported enum with jasmine

  14. 14

    How to have a mock controller pass data to a directive with Jasmine

  15. 15

    How do you mock process.platform in jasmine tests?

  16. 16

    How do I mock $http in AngularJS service Jasmine test?

  17. 17

    How to mock angularjs $window.sessionStorage with Jasmine and Karma

  18. 18

    Jasmine Test: How to mock a method inside a controller in AngularJS

  19. 19

    How do I inject a mock dependency into an angular directive with Jasmine on Karma

  20. 20

    How do I mock an Angular service using jasmine?

  21. 21

    how to mock $state.params in jasmine unit testing

  22. 22

    How to mock angular.module('myModule', []).value() in Jasmine/Protractor

  23. 23

    How to mock a window.location function in Karma/jasmine

  24. 24

    How do I inject a mock dependency into an angular directive with Jasmine on Karma

  25. 25

    Jasmine Test: How to mock a method inside a controller in AngularJS

  26. 26

    How to have a mock controller pass data to a directive with Jasmine

  27. 27

    Mock date constructor with Jasmine

  28. 28

    How to mock jquery ready function

  29. 29

    How to add jquery to jasmine/angularjs unittests

HotTag

Archive