Question

我有一个创建组件数组的函数。每个组件都是一个带有几个内部div的外部div。

function createDivs(quizQuestions) {
    var returnElements = new Array();
    $.each(quizQuestions.questions, function(i, val){

    // create the div.
    quizDiv = $('<div class="questionContainer radius">')
    questionDiv = $('<div class="question"><b><span>QuestionText</span></b></div>');
    quizDiv.append(questionDiv);

    // Now change the question div text.
    questionDiv.text = val.question;
    answerDiv = $('<div class="answers">');
    // ...
    // ...
    // Now the answers.
    questionDiv.append(answerDiv);
    returnElements[i] = quizDiv;
});
return returnElements;

我传递JSON，例如：

   {questions:[{"question":"Name the best Rugby team?",
   "answers":["Leinster", "Munster", "Ulster", "Connaught"],
   "correct_answer":"Leinster"},
   {"question":"Name the best DJ?",
   "answers":["Warren K", "Pressure", "Digweed", "Sasha"],
   "correct_answer":"Leinster"}]};

我想编写一个simpe单元测试，这样我就可以测试div返回的数组了吗

任何提示？

另外，我最好还是返回DOM组件还是只返回文本？后者更容易测试。

感谢。

Answer 1

不确定您想要测试的是什么，但是在字符串中创建尽可能多的html以减少函数调用的效果要高得多。附加也很昂贵，所以最终为JSON所代表的所有新内容制作一个字符串将是最大的性能提升。

在我看来，它也使代码更具可读性，因为片段的顺序与html编辑器中的顺序相同

示例（我的偏好是创建所有字符串片段的数组，也常用连接）：

var newcontent = [];
$.each(quizQuestions.questions, function(i, val) {
    newcontent.push('<div class="questionContainer radius">');
    newcontent.push('<div class="question"><b><span>' + val.question + '< /span></b > < /div>');

    $.each(val.answers, function(idx, answer) {
        newcontent.push('<div class="answers">' + answer + '</div > ')
    })

    newcontent.push(' </div></div > ');
});

然后向DOM添加内容：

$('#someDiv').append( newcontent.join(''));

免责声明：未完全检查标签的正确关闭/嵌套。

测试功能，用于创建DOM组件列表

1 个答案: