Testing Ajax code encounters error

Question

Testing Ajax code encounters error

Currently, I am running a code test with Jasmine and setting up a mock object for the ajax method.

spyOn($,'ajax').and.callFake(function(e){
console.log("is hitting");
})

In order to test the code snippet below:

$.ajax({
               url: AppManager.defaults.contextPath + "/solutions/mcn/mcn-lookup-list",
               data: {
                    mcnNumber       : mcnNumberData,
                    mcnCustomerName : mcnCustomerNameData
               },
               dataType: "json",
               type: "GET",
               global: false
        })
        .done(function(data) {
               solution.CommonObjects.theSolution.orderHandoff.mcnSearchData = self.filterMCNSearchData(data, resultObj);
               $promise.resolve();
        })
        .fail(function() {
             $promise.reject();
             self.displayErrorPopup('MCN Search Error','There is no MCN associated with MCN Number or MCN Customer Name Entered!!!');
        });
    },

An error is being thrown: "cannot read done of undefined". Do I also need to create a spy for that? Can you please provide assistance with the code for that?

javascript ajax jasmine

Answer 1

Answer №1

Code refinements needed:

You have correctly implemented the spying mechanism, but remember to return a promise object through your spy. In essence, your spy function should return something like this ==>
```
return new $.Deferred().resolve(dummyData).promise();
```
There are various methods to create a deferred object/promise object. I recommend studying both Promise & Deferred
Could you please clarify the origin of your $promise? Is it a feature of require.js?

Here's a sample way to simulate ajax calls.

var testObj = {
    ajaxFunction: function() {
      $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts/1'
      }).done(function(data){
        consoleLogFunction(data);
      });
    }
};

var consoleLogFunction = function(data){
    console.log("The length of array is..=> "+ data.length);
};

describe("ajax test suite", function() {
  it("expect true to be true", function() {
    var dummyData = ["Foo", "Boo"];
    spyOn($, 'ajax').and.callFake(function(e){
      return new $.Deferred().resolve(dummyData).promise();
    });
    spyOn(window, 'consoleLogFunction').and.callThrough();
    testObj.ajaxFunction();
    expect(window.consoleLogFunction).toHaveBeenCalledWith(dummyData);
  });
});

Answer 2

Code refinements needed:

You have correctly implemented the spying mechanism, but remember to return a promise object through your spy. In essence, your spy function should return something like this ==>
```
return new $.Deferred().resolve(dummyData).promise();
```
There are various methods to create a deferred object/promise object. I recommend studying both Promise & Deferred
Could you please clarify the origin of your $promise? Is it a feature of require.js?

Here's a sample way to simulate ajax calls.

var testObj = {
    ajaxFunction: function() {
      $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts/1'
      }).done(function(data){
        consoleLogFunction(data);
      });
    }
};

var consoleLogFunction = function(data){
    console.log("The length of array is..=> "+ data.length);
};

describe("ajax test suite", function() {
  it("expect true to be true", function() {
    var dummyData = ["Foo", "Boo"];
    spyOn($, 'ajax').and.callFake(function(e){
      return new $.Deferred().resolve(dummyData).promise();
    });
    spyOn(window, 'consoleLogFunction').and.callThrough();
    testObj.ajaxFunction();
    expect(window.consoleLogFunction).toHaveBeenCalledWith(dummyData);
  });
});

Testing Ajax code encounters error

Answer №1

Similar questions

Trimming Picture on User's Device

No need for jQuery with this scrolling image gallery

Reorganizing JSON structures by incorporating unique identifiers into nested elements

What is the process for deleting an animation using JavaScript, and how can the background color be altered?

I can view the data retrieved in the console, but I am having difficulty displaying it on the screen

Processing incoming requests with a loading interface in CodeIgniter

Unable to create account using PHP

Tips on showcasing a collection of orders stored in a database using Vue.js

When I select an option with an object, ng-model is receiving '[object Object]' instead of the actual object for <select> element

What is the best way to conceal a specific class of DIV within a container, and how can I also hide another DIV within the same container by

Need help with decoding XML namespaces?

Struggling to transfer information between POST and GET requests in Node/Express

Tips for setting the textfield value in JSP using Javascript

Keeping calculated values in the React state can cause issues

The ".splice()" method continuously removes the final element from an array

Need for input

Sorting Columns in PrimeVue DataTable by Date and Time

"Adjusting the height of Material UI card content to ensure fixed positioning at the bottom

ajaxStop and ajaxStart not functioning as expected

Angular 4 after ejection, coupled with automated end-to-end testing using Protractor/Selenium setup