How do you spy on a call back in an ajax call with jasmine?

Question

I'm currently using enyo and I have a function on a component that takes a callback function and makes an ajax call, then calls the callback on success. I can't seem to figure out how to spy on the callback function.

enyo.kind({
  name: 'Login',
  isLoggedIn: function (callback) {
      $.ajax({
        url: '/checkLogin'
      })
      .done(function (data) {
         /* Some logic here */
         return callback.apply(null, data);  //IF all goes well this should call the spy
      })
      .fail(function(){/*Fail Stuff*/});
  }
  ....
});

For the test I have:

describe('Valid User', function() {
   var ajaxSpy;
   var loginTest = new Login();
   beforeEach( function () {

      ajaxSpy = spyOn($, 'ajax').andReturn({
         done: function (fn ) {
             fn();
         },
         fail: function (){}
      });
   });

   it("should call the callback", function () {
      var spy = jasmine.createSpy("spy");
      loginTest.isLoggedIn(spy);
      expect(spy).toHaveBeenCalled();
   });
 }

In this case when this runs the callback becomes undefined, I think it's probably because of the ajax spy intercepting it but I'm unsure how to fix it.

Answer 1

What the ajax call is doing is returning something call a promise.

There are various articles you can look on this regards:

• How to properly unit test jQuery's .ajax() promises using Jasmine and/or Sinon?
• JavaScript with Promises and Jasmine
• Stubbing Out $.ajax in Jasmine

But bottom line here are some sample code on how to achieve this:

spyOn( $, 'ajax' ).andCallFake( function (params) {
    
  params.success({foo: 'bar'});
      
});

spyOn( $, "ajax" ).andCallFake( function (params) {
        
  params.error({foo: "bar"});
      
});