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

Question

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

我正在尝试测试由于茉莉花的鼠标悬停事件而导致的填充颜色变化。理想情况下，我希望路径元素的颜色在鼠标悬停时更改为“#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 和标签名称选择元素均无济于事，两者都产生与上述相同的读数。干杯。

Answer 1

所以我想出了一个通过测试，很大程度上受到此处提供的答案Testing Mouseover event in D3 with Sinon 的启发。唯一真正的区别是使用 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);
});

Answer 2

在代码中设置样式，在测试中设置属性。尝试更改为两者之一。此外，浏览器很可能会将十六进制颜色字符串强制转换为 rgb 颜色字符串。因此，如果将颜色设置为 '#ff0000'，它可能会被强制转换为 'rgb(255, 0, 0)'。最后，jQuery 的 trigger 不会触发使用 d3 的 on 注册的事件。详情请见https://github.com/mbostock/d3/issues/100。