Is it possible to test a .each(function()) statement?

Question

I am attempting to test a javascript function. I am using jquery, sinon and running jsTestDriver.jstd in PhpStorm.

I have two different scenarios where I need to test .each(function()).

Scenario 1: My issue is that I need to test a function that uses a $(tagname).each(function()) line as it's function.

I tried using sinon to stub either $(tagname) or $(tagname).each(). The first returned a TypeError: $(...).each is not a function. The second didn't cause errors but I need to test what happens after the ORIGINAL each() not my stub which this does not do.

Code being tested:

function updateID(){
 $('div.monthpicker_input').each(function(){
    console.log("this is not called via testing");
    let id = this.parentNode.parentNode.htmlFor;
    id=id+"Input";
    this.id=id;
});
}

Relevant part of the testing code:

ActionsTestDate.prototype.testUpdateID = function () {
 var before =  $('div.monthpicker_input').each().id;
 updateID();
 var after = $('div.monthpicker_input').each().id;
 assertNotEquals(before, after);
};

ActionsTestDate.prototype.setUp = function() {
 var monthPicker = {
     id: "",
     parentNode: {
        parentNode: {
            htmlFor: "TestHtml"
        }
     }
  };

var the$ = sinon.stub(window, '$');
the$.withArgs('div.monthpicker_input').returns({
    monthPicker/*,
    each: function (a) {
     // a();
        return monthPicker
     }
 */
});
 };

ActionsTestDate.prototype.tearDown = function() {
  window.$.restore();
 };

I expect the id to change. It does not.

Scenario 2: I am testing a d3.selectAll(className).each(function()) statement.

I have quite a few of these.

An example:

d3.selectAll(".light").each(function() {  //light regions
    this.style['fill']= 'white';
    this.style['opacity']= 1;
    this.style['backgroundColor']= 'white';
    this.style['color']= 'white';
});

Another Example:

window.d3.selectAll(".c3-legend-item-hidden").each(function() {
    this.style['opacity']= 0.15;
});

Testing:

var d3selectAllWas = sinon.spy(window.d3, 'selectAll');
functionCalledHere();
assert(d3selectAllWas.calledWith(".light"));  //is true

I am just using sinon spy for selectAll at the moment but it doesn't do the function as selectAll doesn't return anything in tests.

Versions I am using:

jQuery JavaScript Library v1.11.1

Sinon version 7.3.2, 2019-04-17

D3 v5.9.7

C3 v0.7.2

What do you want to test? You could extract the callback given to `.each` and test it in isolation, then as a separate test stub it and see if it's called repeatedly to test if it's inside an `.each`. Or you could just mock a page and check what happens when `updateID` is called without caring for the implementation details. — VLAZ, Aug 13 '19 at 08:30
@VLAZ I want to check that the stuff inside the function happens e.g. the opacity is 0.15. This is very important to the function's functionality, I want it done for each of the 'selectAll' results which is why I initially tried with stubbing but stubbing removes each. — Sharon, Aug 13 '19 at 08:33
@VLAZ do you mean create a function that isn't anonymous and call it in each? Is that okay to do? — Sharon, Aug 13 '19 at 08:33
Yes, that's fine - having `function foo() {}` and then calling `$('selector').each(foo)` is correct - you are passing a function reference and that's what `.each` expects. An anonymous function (function *expression*) provides you with the same thing. — VLAZ, Aug 13 '19 at 08:37
As for mocking a page - not sure. I've not used your particular stack but I've just done a static HTML in the past and pointed a test at it. If you have the JS separate and the page is *similar enough* to your real page (you can omit some parts, if they aren't needed), then the test HTML + real JS will provide you with the same result functionality as the real page. Might be difficult to do if the real page is very dynamic or simply is updated a lot, as you need to update the test copy, too. — VLAZ, Aug 13 '19 at 08:40

Is it possible to test a .each(function()) statement?

0 Answers0