Question

因此，通常应首先学习单元测试的基础知识。我已经阅读了几次关于单元测试的内容。但我可能缺乏良好的知识。通常的方法是首先学习基础知识，然后应用到您的应用程序。不幸的是，我没有那么多时间。这当然不是你的问题，这里存在downvote的风险，但我抓住机会。

这是一个非常小的JavaScript应用程序。我正在寻找的是将单元测试理论与这个小项目联系起来，并了解如何构建测试，基本上要测试什么。

一个javascript文件（app.js）调用另一个文件（funcs.js）中的函数以json格式从资源获取结果。然后，app.js将验证解码的json是否为长度＆gt; 0。在这种情况下，它在这个json结构中的帖子之间进行迭代。对于每次迭代，app.js将调用funcs.js中的函数从json中提取数据以获取帖子，同时构建html-structure，并将其返回给app.js.

最后，app.js将使用funcs.js传递的html结构填充html元素（在app.html中）。

所以我现在需要创建一些单元测试。我想测试的最佳部分是func.js？该文件包含一些功能。例如，用于打开，解析和返回json resuorce的函数。或者用于获取json结构的字段（在迭代期间）并构建html元素的函数。然后归还。

我是对的吗？我该怎么测试？这可能是一个好策略：

我创建了一个test.js文件。我在funcs.js中找到了一些函数（相关的函数）。我尝试多次调用它们，传递好的和坏的参数（例如，首先是现有资源，然后是请求json资源的函数的空参数资源）。

我仍然有点不确定如何测试将返回html元素的部分。如果你能给出一些建议那就太棒了。

- - - - - - - - 编辑

我添加了一些代码以更好地了解情况。

在funcs.js中：

function get_resource (url, method){
    var xhReq = new XMLHttpRequest();
    xhReq.open(method, url, false);
    xhReq.send(null);
    var json = xhReq.responseText;
    var obj = JSON.parse(json);
    return obj;
}

function set_text(value, id){
    if(value !== undefined){
        document.getElementById(id).textContent = value;
    }
}

function set_img(value, id, img_class){
    if(value !== undefined && imageExists(value)){
        var img = document.createElement("img");
        img.src = value;
        img.className = img_class;
        document.getElementById(id).appendChild(img);
    }
}

在app.js中：

var json = get_resource('example.com', 'GET');

set_text(json.name, 'title');

set_img(json.src, 'main_div', 'img_class');

app.html：

<body>
    <div id="title"></div>
    <div id="main_div"></div>
</body>

Answer 1

我认为你在func.js中测试什么的问题突出了单元测试的主要（恕我直言）好处。它允许您在app.js和func.js之间创建契约，并显示您希望如何访问代码。我一直认为测试是我的代码的客户端，如果很难测试它通常很难让某人使用你的代码。通过更改代码以便于测试，您还可以使代码更易于使用。

现在你已经添加了一些代码，我可以给你一个具体的例子。你的set_text很难测试，因为它引用了一个html元素。你可以嘲笑它，但是如果你真的传入了元素那么测试会更容易，只需使用asserts而不是console.log消息

如果它只返回了一个json而另一个函数处理了http调用，那么就像获取资源一样。此外，当您开始为app.js编写测试时，您将了解如何使用func.js，如果您只是初始化它并设置您可以检索的值等等。

希望有所帮助。

function set_text(value, el){
    if(value !== undefined){
        el.textContent = value;
    }
}

var value;
var el={textContent:'not set'}

set_text(value,el);

console.log(el)

value='value'

set_text(value,el)

console.log(el)

为JavaScript应用程序编写单元测试

1 个答案: