骨干.视图测试输出不同于控制台输出

Backbone.View test output differs console output

本文关键字:输出 不同于 控制台 测试 视图 骨干      更新时间:2023-09-26

我不理解Backbone.View.render()和。el的操作。在render()中我分配了这个。我期望看到的支持输出的属性,这些属性都在这里。. El在测试时返回预期的输出,并且. El在控制台中返回预期的输出。但是在测试中没有出现输出

下面是代码和测试(请忽略粗糙,我正在学习并努力保持测试绿色):

var RowLabelData = Backbone.Model.extend({});
var RowLabel = Backbone.View.extend({
    initialize: function() {
           this.for_attr = this.model.get("for_attr");
           this.text_val = this.model.get("text_val");
           this.el.setAttribute("for", this.for_attr);
        },
    render: function() {
        $(this.el).html(this.text_val);
        return this;
        }
});

我用QUnit测试如下:

test_row_data   =   new RowLabelData({
                        for_attr: "id_username",
                        text_val: "Username:"
                    });
test_row_v      =   new RowLabel({
                        model: test_row_data,
                        tagName: 'label'
                    });
test_row_v.render();
test_row = test_row_v.el;
equal(test_row.textContent, "Username:");
equal(test_row.getAttribute("for"), "id_username");
// FAILS:
equal(test_row, '<label for="id_username">Username:</label>');

QUnit表示在上次测试中<<test_row>>返回<label></label>。但是在JavaScript控制台,<<Test_row>>返回文本中期望的字符串。

主干文档说render()应该将所需的HTML放入el中,但我试图使用render()的默认行为,并且它在控制台中确实有效。为什么在测试中不起作用?

dira是对的,问题是Object与字符串的比较。

下面的测试代码创建了一个类似的元素,然后将该元素和测试对象转换为字符串进行比较:

new_label = document.createElement("label");
new_label.setAttribute("for", "id_username");
t = document.createTextNode("Username:");
new_label.appendChild(t);
equal(
    $('<div>').append($(test_row).clone()).remove().html(),
    $('<div>').append($(new_label).clone()).remove().html(),
    "convoluted!"
);

这通行证。这些具有克苏鲁价值的咒语的控制台输出是"<label for="id_username">Username:</label>"

尽管它涉及到那些人类本不应该知道的事情,但勇敢的人,或者鲁莽的人,都能在这里发现这个神秘的秘密。