Testing ajax calls with jasmine

Question

In my project, I get feeds from an API using jquery and ajax. This is the code that I use:

 function loadFeed(id, cb) {
 var feedUrl = allFeeds[id].url,
     feedName = allFeeds[id].name;

 $.ajax({
   type: "POST",
   url: 'https://rsstojson.com/parseFeed',
   data: JSON.stringify({url: feedUrl}),
   contentType:"application/json",
   success: function (result, status){

             var container = $('.feed'),
                 title = $('.header-title'),
                 entries = result.feed.entries,
                 entriesLen = entries.length,
                 entryTemplate = Handlebars.compile($('.tpl-entry').html());

             len = entriesLen;
             title.html(feedName);   // Set the header text
             container.empty();      // Empty out all previous entries

             /* Loop through the entries we just loaded via the Google
              * Feed Reader API. We'll then parse that entry against the
              * entryTemplate (created above using Handlebars) and append
              * the resulting HTML to the list of entries on the page.
              */
             entries.forEach(function(entry) {
                 container.append(entryTemplate(entry));
             });

             if (cb) {
                 cb();
             }
           },
   error: function (result, status, err){
             //run only the callback without attempting to parse result due to error
             if (cb) {
                 cb();
             }
           },
   dataType: "json"
 });

}

And now i am trying to test this with jasmine, but somehow I cant figure it out. I'm trying to check if my container (with the class "feed") has at least one entry (class "entry") appended to it. This is my code i used in jasmine:

    describe('Initial Entries', function() {
  /* TODO: Write a test that ensures when the loadFeed
   * function is called and completes its work, there is at least
   * a single .entry element within the .feed container.
   * Remember, loadFeed() is asynchronous so this test will require
   * the use of Jasmine's beforeEach and asynchronous done() function.
   */


   beforeEach(function(done) {
     loadFeed(0); // the async method
     done();
   });

   it('should have at least one entry element', function() {
     expect($(".feed").find(".entry").length).not.toBe(0);
   });

});

The problem with this whole thing is that the entry-elements are created dynamically, after the html was loaded, and therefore jquery can't access them. I know how to bind events to those elements using the jquery.on method, but I don't know how to access them to check if they exist or not.

What am i missing?

Thanks

Answer 1

Next time try to synthesize the question with a shorter example :) Anyway, I think that you have to call loadFeed(0, done) otherwise done callback it's called immediately