javascript - 如何用 jasmine-jquery 测试这个函数？

Question

这是我想测试的功能，但我不知道它是如何工作的。

conflictModalCancel: function () {
    this.$(":disabled").prop("disabled", false);
},

到目前为止我做了什么:

describe("function conflictModalCancel", function(){

    beforeAll(function(){
        loadFixtures('addvehicle.html');
    });

    it ("should set property disabled", function(){
        view.conflictModalCancel();
        expect($("selectTypeWrapper")).toHaveProp("disabled");
        expect($("selectTypeWrapper").prop("disabled")).toBe(false);
    });
});

我正在加载的夹具文件如下所示:

<div id="selectTypeWrapper" type="disabled" disabled="true">
    <div id=".panel">
        <div id=".panel-collapse"></div>
    </div>
</div>
<div id=":disabled"></div>
<select id="selectLanguage"></select>

它给出了这些错误:

Expected ({ length: 0, prevObject: ({ 0: HTMLNode, context: HTMLNode, length: 1 }), context: HTMLNode, selector: 'selectTypeWrapper' }) to have prop 'disabled'.

Expected undefined to be false.

我对所有这些东西都是新手，我可能误解了一些东西。你能帮我写这个测试让我明白如何处理这些问题吗？

Answer 1

您的选择器有误；它应该是 $("#selectTypeWrapper") 因为您要按 ID 查找元素。

我的另一个猜测是 prop("disabled", false) 删除了该属性。

要验证这一点，将函数更改为:

var node = $(":disabled");
console.log('before', node[0].outerHTML);
node.prop("disabled", false);
console.log('after', node[0].outerHTML);

这将向您展示 DOM 在控制台中的样子。

我还检查了 documentation for $.prop() jQuery 1.6 似乎有一些错误。因此，如果您使用的是该版本，请尝试至少升级到 1.6.1。

另见:

• > Disable/enable an input with jQuery?