Javascript Jasmine在d3中测试鼠标悬停事件

我正在考虑使用d3.js生成交互式图表元素

我正试图测试填充颜色的变化，这是由于茉莉花的鼠标悬停事件造成的。理想情况下，我希望鼠标上方的path元素的颜色更改为“#ff0000”，但我的jasmine终端告诉我这不会发生-元素看起来与最初设置的颜色保持相同，例如，id为#1的元素生成：预期“#1f77b4”为“#ff0000”

我也在使用jquery和jasmine jquery库

来自我的甜甜圈图表装置DonutChartFixture.html的相关代码

var color = d3.scale.category20();

var path = svg.selectAll("path")
              .data(pie(data))
              .enter().append("path").attr("class", "path")
              .attr("fill", function(d, i) { return color(i); })
              // removed id declaration here
              .attr("d", arc)
              .on("mouseover", function(){d3.select(this).style("fill", "#ff0000");})
              .on("mouseout" , function(){d3.select(this).style("fill", function(d) {   
                                                                   return d.color;
                                                                 });});

// want to highlight the first path element
var path_one = d3.select('.path').attr("id", "path_one");

还有一个来自我的规范文件DonutChart.js的测试

function loadDonutChart() {
    loadFixtures('DonutChartFixture.html');
}

describe("Mouseover events", function() {
    var spyEvent;

    beforeEach(function() {
        loadDonutChart();
    });

    // updated test for element d3.select('.path').attr("id", "path_one")
    it("#path_one should change fill colour to rgb(255,0,0)", function() {
        spyEvent = spyOnEvent('#path_one', 'mouseover');
        $('#path_one').trigger("mouseover");
        // expect('mouseover').toHaveBeenTriggeredOn('#path_one');
        expect(path_one.style('fill')).toEqual('rgb(255,0,0)');
    });

});

---

正如您所看到的，我尝试过按id和标记名选择元素，但都没有效果，两者都会产生与上面给出的相同的读数。干杯。

在代码中设置样式，在测试中设置属性。正在尝试为两者更改一个或另一个。此外，浏览器很可能会将十六进制颜色字符串强制转换为rgb颜色字符串。因此，如果将颜色设置为“#ff0000”，则可能会强制将其设置为“rgb（255，0，0）”。最后，jQuery的

触发器

不会触发在上与d3的

注册的事件。请参阅以了解详细信息。
因此，我提出了一个合格的测试，主要是受这里提供的答案的启发。唯一真正的区别是使用d3/jasmine语法代替Sinon。以下各项正确通过：

it("#path_one should change fill colour to rgb(255,0,0)", function() {
    var oldColor = path.style('fill');
    document.getElementById('path_one').dispatchEvent(new MouseEvent('mouseover'));
    expect(d3.select('#path_one').style('fill')).not.toEqual(oldColor);
});

我做了建议的改变，但似乎没有得到正确的答案。使用$（'path'）的测试现在给出：预期的'rgb（31，119，180）'等于'#ff0000'。使用$（'#1'）的测试现在给出：TypeError:undefined不是一个函数。我刚刚注意到，您在输入之后设置了属性fill。这和你的鼠标盖和现在的测试一致吗？我不知道你的确切意思。我可以看到您引用的是DonutChartFixture.html的第六行，但不确定这与测试有何关系。代码如下所示。因为您首先设置属性
fill
，然后当鼠标悬停时，您使用样式通过css进行设置。然后，您正在测试atttribe
fill
是否等于通过样式设置的值。这不会过去的。此外，d3将强制十六进制颜色字符串转换为rgb字符串，因此您必须编写测试来检查颜色的rgb字符串。结帐：谢谢你的例子。我做了建议的更改，并做了一些更改以确保选择了正确的元素：我已经标记了第一个path元素d3。select（'.path'）在默认情况下返回id为'#path_one'，因此我可以通过id正确选择该元素。但是，尽管我得到了一个像expect（'mouseover'）这样的测试。toHaveBeenTriggeredOn（'#path_one'））为了正确通过，我仍然得到不正确的颜色比较：预期“rgb（311119180）”等于“rgb（255,0,0）”。