什么是D3JS的单元测试策略？ [英] What are unit testing strategies for D3JS?

问题描述

我对D3JS是全新的，并且想了解D3 JS的测试策略。

I am completely new to D3JS and would like to understand the testing strategies for D3 JS.

为了进一步阐述问题 - 考虑我有一个简单的页面，显示使用TSV文件的线图。

To elaborate little more on question - consider I have a simple page that shows a line graph using a TSV file.

Java Script代码：

Java Script Code:

function LineManager() {}
function LineProperties() { // Line Properties }
LineManager.prototype.draw = function(properties) { 
  // D3 code to draw a line with the given properties.
}

我不能考虑测试用例考虑写单元测试。这是一个我写的示例测试。

I am not able to think of test cases to be considered for writing unit tests. Here is a sample test that I wrote ..

it("should throw an exception if line graph properties are not set.", function() {
        expect(lineManager.draw.bind(lineManager)).toThrow("Line Graph properties not set");
    });

it("It should have single line chart", function() {
    lineManager.draw(properties);
    expect(lineManager.countLines()).toEqual(1);
});

我已经写过单元测试，以确保TSV文件正确生成。但是，编写单元测试来查看数据是否正确呈现是有意义的？是不是更多的d3js单元测试而不是我的功能的单元测试？

I have written unit tests to make sure the TSV file is getting generated correctly. But does it make sense to write a unit test to see if the data is getting rendered correctly? Isn't that more of a d3js unit test rather than unit test for my function?

所以我的问题是 - 应该考虑什么测试由d3js生成的图表？ / p>

So my question is - what tests should be considered for charts generated by d3js?

推荐答案

我想我得到了自己的问题的答案。将尝试在这里解释它。

I think I got the answer to my own question. Will try to explain it here.

不可能验证图形是否使用D3JS编写的JS函数正确绘制。为此，我们可能需要使用Phantom.js或Chrisopher提到的类似框架。我不担心要确保D3JS正确地绘制图形，因为任何方式它是D3JS功能，我的代码可以安全地假设D3JS正在做它的工作。

It is not possible to validate whether the graph is plotted correctly by JS function written using D3JS. For this we may have to use Phantom.js or similar framework as mentioned by Chrisopher. I was not worried about making sure D3JS is plotting graph correctly, as any ways it is D3JS functionality and my code can safely assume D3JS is doing its work.

我的担心更多的是传递到D3JS的数据是否正确，并且根据我的要求。通过创建Spy对象，可以确保正确设置图形的属性。我提供了一个样例单元测试，覆盖了使用D3JS绘制一个Circle的JS代码的测试用例。

My worry is more of whether the data passed to D3JS is correct and as per my requirement. It is very much possible to make sure the properties of the graph are set correctly by creating Spy objects. I am providing a sample unit test covering test cases for a JS code plotting a Circle using D3JS.

CircleManager.js

function CircleManager() {};

CircleManager.prototype.draw = function(radius) {
    var svg = d3.select("body")
            .append("svg");

    svg.attr("width", 100)
            .attr("height", 100);    

    var circle = svg.append("circle");
    circle.style("stroke", "black")
        .style("fill", "white")
        .attr("r", radius)
        .attr("cx", 50)
        .attr("cy", 50);
};

CircleManagerSpec.js

describe("draw", function() {
    it("Constructs an svg", function() {
        var d3SpyObject = jasmine.createSpyObj(d3, ['append', 'attr']);

        // Returns d3SpyObject when d3.select method is called
        spyOn(d3, 'select').andReturn(d3SpyObject);

        var svgSpyObject = jasmine.createSpyObj('svg', ['append', 'attr', 'style']);

        // Returns svgSpyObject when d3.select.append is called.
        d3SpyObject.append.andReturn(svgSpyObject);


        d3SpyObject.attr.andCallFake(function(key, value) {
            return this;
        });

        svgSpyObject.append.andReturn(svgSpyObject);

        svgSpyObject.attr.andCallFake(function(key, value) {
            return this;
        });

        svgSpyObject.style.andCallFake(function(key, value) {
            return this;
        });

        var circleManager = new CircleManager();
        circleManager.draw(50);
        expect(d3.select).toHaveBeenCalledWith('body');
        expect(d3SpyObject.append).toHaveBeenCalledWith('svg');
        expect(svgSpyObject.attr).toHaveBeenCalledWith('r', 50);
        expect(svgSpyObject.attr).toHaveBeenCalledWith('width', 100);
        expect(svgSpyObject.attr).toHaveBeenCalledWith('height', 100);
        expect(svgSpyObject.style).toHaveBeenCalledWith('stroke', 'black');
        expect(svgSpyObject.style).toHaveBeenCalledWith('fill', 'white');
    });
});

希望这有帮助。

这篇关于什么是D3JS的单元测试策略？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！