How to test this function with jasmine-jquery?

Question

This is the function I want to test, but I don't know how it works.

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

What I have done so far:

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);
    });
});

And the fixture file I am loading looks like this:

<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>

It gives these errors:

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

Expected undefined to be false.

I am new to all this stuff and I probably misunderstood something. Can you please help me to write this test for me to understand how to handle such problems?

Is `this.$(":disabled")` correct?? I don't expect `$(":disabled")` to be a method or property of `this`... Correct me if I'm wrong, this just makes no sense to me. I would expect something like `$(this).find(":disabled")` — Jeremy Thille, May 29 '15 at 07:19
well this is my problem, i did not write this code and i don't understand what this expression means. I only found [this link](https://api.jquery.com/button-selector/) about the colon. but i am not sure if this is what i need. — Garrarufa, May 29 '15 at 07:25
That's what I'm saying :) You don't understand what it does because it makes no sense. `$(":disabled")` is a jQuery selector that selects all disabled elements in the DOM. `this` is the current function. So `this.$(":disabled")` just makes no sense. IMO you can't test something that makes no sense and expect it to work. — Jeremy Thille, May 29 '15 at 07:30
You're missing a # in your selector : `expect($("#selectTypeWrapper"))` — Jeremy Thille, May 29 '15 at 07:43

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

Your selector is wrong; it should be $("#selectTypeWrapper") since you're looking for an element by ID.

My other guess would be that prop("disabled", false) removes the attribute.

To verify this, change the function to:

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

This will show you what the DOM looks like in the console.

I also checked the documentation for $.prop() and it seems that jQuery 1.6 had some bugs. So if you're using that version, try to upgrade to at least 1.6.1.

See also:

Disable/enable an input with jQuery?

edited May 23 '17 at 11:58

Community

1
1

answered May 29 '15 at 07:48

Aaron Digulla

297,790
101
558
777

i cannot execute your code because `node[0]` is undefined. did i actually set the disabled property properly? will `$(":disabled")` return all nodes with `disabled="..."` in it? or will it return all nodes with `type="disabled"`? or something else? – Garrarufa May 29 '15 at 08:07
`:disabled` should work: https://api.jquery.com/disabled-selector/ But according to the example, the value for `disabled` isn't `true` but `disabled`. – Aaron Digulla May 29 '15 at 08:10
one further mistake was that a `disabled` attribute is not allowed in `
`
– Garrarufa May 29 '15 at 08:18
Ah yes. It's only supported for `input` elements. – Aaron Digulla May 29 '15 at 08:20

How to test this function with jasmine-jquery?

1 Answers1