創建DOM組件列表的測試功能

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以減少函數調用的性能要好得多。 另外，append也很昂貴，因此最終為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(''));

免責聲明：未完全檢查標簽是否正確關閉/嵌套。