如何用 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'); returns（出于视觉目的已扩展组）：

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 是一个文本元素。

Answer 1

临时答案，直到有人有更好的答案（不涉及嘲笑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 更改为实际上 return 我可以更改 style 的其他功能我正在测试的功能的实际功能可以测试其中的功能。但是对于任何想知道将来如何解决这个问题的人来说，只需添加你自己的函数而不是使用预制的库函数。您不是在测试它们的功能。你在测试你的。使其 return 成为您想要的 return 并查看您的函数是否符合您期望的数据。

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

How to mock d3.select.selectall with sinon?

javascript

sinon

d3.js