Testing client side javascript code with Jasmine

Question

I have javascript code that looks like this:

this.ProgressBarUpdater = {
  poll: function() {
    setInterval(ProgressBarUpdater.request, 5000);
  },

  request: function() {
    $(".progress_bar_updater[data-url]").each(function(i, elem) {
      url = $(elem).data("url");

      $.getJSON(url, function(data) {
        if (isFinished(data)) {
          location.reload();
        };

        $.each(data, function(key, val) {
          updateProgressBar(key, val);
        });
      });
    });
  }
};

isFinished = function(obj) {
  var correct = true;
  for (key in obj) {
    var progress = typeof obj[key] == 'string' ? obj[key] : obj[key][1];
    if (progress != '100%') correct = false;
  }
  return correct;
}

updateProgressBar = function(key, val) {
  var progress_info_value = typeof val == 'string' ? val : val[0];
  var progress_bar_value = typeof val == 'string' ? val : val[1];
  $(key + ' .progress_info').html(progress_info_value);
  $(key + ' .progress-bar').width(progress_bar_value);
}

How can I test it with Jasmine? I can't find any good tutorials about this...

marcel · Accepted Answer · 2015-06-18 12:26:09Z

1

it is generally hard to test objects.

What you could do:

create the elements that your functions are using
put them into the DOM
call your functions
check the elements
remove elements from DOM

show this as an incentive:

describe('Test ProgressBarUpdater', function() {
    var elements = [];

    beforeAll(function() {
        // create elements and put into array

        elements.forEach(function(elem) {
            document.body.appendChild(elem);
        });
    });  

    afterAll(function() {
        // remove all elements from DOM
    });  

    it('call functions...', function() {
        // call the functions to test

        // check the elements
    });
});

answered Jun 18, 2015 at 12:26

marcel

3,1471 gold badge20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Testing client side javascript code with Jasmine

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related