Cómo burlarse de jQuery con Jasmine

jasmine-jquery

Question

Lo que quiero hacer: estamos escribiendo algunas pruebas para una base de código Javascript existente que usa fuertemente jQuery. Para las pruebas, no queremos tener elementos HTML reales (accesorios HTML). Preferiríamos que tuviéramos un objeto simulado jQuery que no haga nada relacionado con HTML.

Mi punto de partida: el enfoque más prometedor que encontré aquí:

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

Esto crea un método de ayuda que crea un simulacro pasando por las funciones de un objeto y creando un espía para cada función:

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

Entonces, si lo entiendo correctamente, lo usa así (ejemplo adaptado de su publicación en el blog):

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

Sin embargo, esto no funciona, ya que el es un object y no una function .

Mi enfoque para resolver este problema: refactoreé su función mock para dar cuenta del caso que constr es una 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;
}

Sin embargo, la segunda línea en la prueba arroja un Cannot read property css of undefined error Cannot read property css of undefined :

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

Otras ideas: también intenté fusionar el objeto espía en jQuery, pero tampoco ayudó.

¿Algunas ideas? Espero que no seamos los únicos que lo haremos sin accesorios HTML.

Answer 1

Lo encontré. Cuando mi versión de la función mock está configurada para devolver el objeto jQuery cuando se invoca la función jQuery, la prueba funciona:

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

Answer 2

Puedes usar stubs sinon.js , en lugar de utilizar tus propios métodos de ayuda.

stub = sinon.stub(jQuery.fn, ''css'');

// invoke code which calls the stubbed function

expect(stub.calledWith({ ''background'': ''red'' })).toBe(true);
stub.restore();