如何用sinon模拟d3.select.selectall?

时间:2019-08-09 08:43:54

标签: javascript d3.js sinon

我有以下代码需要测试:

window.d3.select(id).selectAll("text").attr("font-family", "FontAwesome"); 

var textsSelected = window.d3.select(id).selectAll('text');

var filtered = textsSelected.filter(function(value, index, arr) {
    return !((value===undefined)||(typeof (value) === "number"));
});

我正在努力模拟它,以便两行都运行而不会因错误而崩溃。

目前我有

var texts = {
    _group:[
        [{id: "textID2#StatusChangeChart",
           textContent: " New", 
           __data__: "hi"
            }]
        ],
    fontFamily: "shouldChange",
    __proto__:{
        attr: function (name, value) {
            if (name === 'font-family') {
                // this works
                this.fontFamily = value;
            }
        }
    }

};


var d3Select = sinon.stub(window.d3,'select');

 d3Select.withArgs("#testUpdateImage").returns({
    selectAll: function (e) {

        var objectToReturn = imageUpdateGroups;

        switch (e) {
           //stuff here
            case "text":
                objectToReturn = texts;

                //TODO
                break;

           //stuff here

        }
        return objectToReturn;
    }
});

作为模拟。

我收到错误TypeError: array.filter is not a function,并且console.log语句显示attr确实发生了应有的变化。

所选的文本应该是什么?

在控制台中键入window.d3.select('#PhaseChangeChart').selectAll('text');会返回(组已扩展以用于视觉目的):

Ct {_groups: Array(1), _parents: Array(1)}
  _groups: Array(1)
       0: NodeList(48) [text, text, text, text, text, text, text, text, 
                    text, text, text, text, text, text, text, text, text, 
                    text, text, text, text, text, text, text, text, text, 
                    text, text, text, text, text, text, text, text, text, 
                    text, text, text, text, text, text, text, text, text, 
                     text, text, text, text]
       length: 1
       __proto__: Array(0)
   _parents: [svg#PhaseChangeChart]
   __proto__: Object

每个text是一个文本元素。

1 个答案:

答案 0 :(得分:0)

临时答案,直到有人提出更好的答案(一个不涉及嘲笑filter的答案)

__proto__添加过滤器功能可停止该错误。

var toFilter =[
    {
        0: [
            {
                id: "textID2#StatusChangeChart",
                textContent: "New",
                __data__: "hi"
            }
        ]
    }
];

var texts = {
    _group: toFilter,
    fontFamily: "shouldChange",
    __proto__:{
        attr: function (name, value) {
            if (name === 'font-family') {
                this.fontFamily = value;
            }
        },
        filter: function (value, index,arr){
            return {_groups:[undefined]};
        }
    }

};

就我个人而言,我需要更改undefined才能真正返回我可以测试的其余功能的style的东西,因此该功能的实际功能可以测试。但是对于想知道将来如何解决该问题的任何人,只需添加您自己的函数即可,而不是使用预制的库函数。您没有测试它们的功能。您正在测试您的。使它返回您要返回的内容,并查看您的函数是否保留了您希望保留的数据。