javascript - 如何用 sinon 模拟 d3.select.selectall ？

Question

我需要测试以下代码:

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 确实发生了应有的变化。

textsSelected 应该是什么？

在控制台中输入 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

其中每个文本都是一个文本元素。

Answer 1

临时答案，直到有人找到更好的答案(不涉及模拟过滤器)

向 __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 以实际返回我可以更改我正在测试的函数的其余部分的样式的内容，以便实际功能可以测试该函数的功能。但对于任何想知道如何解决 future 问题的人来说，只需添加自己的函数，而不是使用预制的库函数。您没有测试它们的功能。你正在测试你的。让它返回您希望它返回的内容，然后看看您的函数是否能够满足您期望它能够承受的数据。