How to test for disabled attribute?

[ttrmw]

I have a component that, given some props, sets disabled on a select.

What would be the right way to test for this? I've set up the test like so:

it("disables company select", () => {                                             
    const wrapper = render(<OpportunityEditor opportunity={mockOpportunity}    
                                              companies={mockCompanies}             
                                              departments={mockDepartments} />);

    const companySelect = wrapper.find("select[name='company[remote_id]']");   
});

and, upon examining companySelect I can see that attribs, where I would probably expect to see the attribute, does not contain disabled.

[ttrmw]

Okay - I was being silly, disabled is actually set on the select's fieldset in my component - d'oh!

I have ended up with the following assertion, which still feels clunky:

 expect(companySelect.closest("fieldset")[0].attribs["disabled"]).toBe("");

Is there a cleaner approach?

[ljharb]

does expect(companySelect.closest('fieldset').props('disabled')).toBe(''); work?

[ttrmw]

Nah:

  - TypeError: companySelect.closest(...).props is not a function
        at Object.eval (__tests__/OpportunityEditor-test.js:79:46)
        at attemptSync (../node_modules/jest-jasmine2/vendor/jasmine-2.3.4.js:1791:24)
        at QueueRunner.run (../node_modules/jest-jasmine2/vendor/jasmine-2.3.4.js:1779:9)
        at QueueRunner.execute (../node_modules/jest-jasmine2/vendor/jasmine-2.3.4.js:1764:
...

I also tried ...closest(..)[0] but this had the same result.

[aweary]

@ttrmw what does companySelect.closest() return?

[mvattuone]

@ttrmw I was having a problem with props() but I think if you use prop('disabled'), you'll find success.

[Exegetech]

EDITED: its working, it turns out I have to remove the quotes from "true" in the expect block and replace it with {}

I'm having similar issue. I was trying to check whether my form contains a disabled button or not.

The test always fails, until I remove disabled property from the button, then it works.

So this fails

// Form.js
// --- other components
<button type="submit" disabled={pending}>
   {(() => {
       if (pending) {
           return <i className="fa fa-spinner fa-spin"></i>;
       }
   })()}Sign up
</button>
// -- other components

// Form.test.js
expect(wrapper.to.contain(
   <button type="submit" disabled="true">
      Sign up
     </button>
)).to.equal(true);

but this works, by removing the disabled property

// Form.js
// --- other components
<button type="submit">
   {(() => {
       if (pending) {
           return <i className="fa fa-spinner fa-spin"></i>;
       }
   })()}Sign up
</button>
// -- other components

// Form.test.js
expect(wrapper.to.contain(
   <button type="submit">
      Sign up
     </button>
)).to.equal(true);

So this works

// Form.js
// --- other components
<button type="submit" disabled={pending}>
   {(() => {
       if (pending) {
           return <i className="fa fa-spinner fa-spin"></i>;
       }
   })()}Sign up
</button>
// -- other components

// Form.test.js
expect(wrapper.to.contain(
   <button type="submit" disabled={true}>
      Sign up
     </button>
)).to.equal(true);

[ljharb]

@christiansakai that's to be expected - "true" is the string "true", which is an invalid value for the "disabled" HTML attribute. In pure HTML it'd be disabled="disabled", and disabled={true} or just disabled is a shortcut for that.

[Exegetech]

@ljharb right, thank you

[leimonio]

@ttrmw @christiansakai Another way you could probably check the html disabled attribute above could be
expect(companySelect.closest('fieldset').is('[disabled]')).toBe(true);

[SavePointSam]

@kwnccc Unfortunately, that won't work either as .is('[disabled]') is always going to return true if a valid node is found.

For right now the cleanest and more reliable way I've found to determine if an element has the disabled attribute is the following:

wrapper.find('input').html().includes('disabled=""');

This, however, can be replaced with a more accurate CSS disabled pseudo selector:

wrapper.find('input:disabled');

Or with a dedicated attribute lookup. For example:

wrapper.find('input').hasAttr('disabled');
wrapper.find('input').hasAttribute('disabled');

[arnarleifs]

I believe you can use wrapper.getNode().props.disabled.

[dnp1]

Currently you can use wrapper.prop('disabled').

The bug on selector [disabled] persists, still.

[tomisu]

I think the best current way to do this is:

wrapper.getDOMNode().disabled

This will be true/false. It's short and clear.

[karak]

@dnp1 How can we reproduce "the bug on selector [disabled]?" All the test-cases I tried in the code:https://github.com/karak/enzyme-issue-336/blob/master/test.jsx did work fine.

[walliby]

expect(companySelect.closest("fieldset").hasAttribute('disabled','disabled')).toBeFalsy()
or
expect(companySelect.closest("fieldset").hasAttribute('disabled','disabled')).toBeTruthy()

[ljharb]

This seems addressed; if you're still having trouble and using render, you'll need to file an issue on cheerio - if you're using shallow/mount, please file a new issue.

[dinukadesilva]

For me, it worked as below

expect(companySelect.find('input').props()["disabled"]).toBe(true)

props() returns an object having all the attributes of the selector and then it can be browsed as an object.

Hope this helps too....

[JESii]

For those who get here in the present, getNode() is no longer supported (as in wrapper.getNode().props.disabled).

[ckangnz]

For me, it worked as below

expect(companySelect.find('input').props()["disabled"]).toBe(true)

props() returns an object having all the attributes of the selector and then it can be browsed as an object.

Hope this helps too....

I also found companySelect.find('input[type="submit"]').props().disabled).toBeTruthy() working.
:D!

[ghost]

expect(app.find('.btn').props().disabled).toBe(true)

this seems ok !!

[superelement]

This worked for me (plusBtn is of type ReactWrapper)

expect(plusBtn.getDOMNode().hasAttribute("disabled")).toBe(true);