Disabled is not considered an HTML attribute

Question

I have this button in html

  const dom = new JSDOM(` <button id="ref_button" type="submit" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">`) 

I am testing it like this using Chai:

  dom.window.document.getElementById("ref_button").should.have.attr('type'); 

And it works perfectly. But if I want to test the same way the disabled attribute the test doesn't work:

  dom.window.document.getElementById("ref_button").should.have.attr('[disabled]'); 

Itt always says that the attribute exists. This is not normal, cause it should not exist according to teh condition (when I fill the form with valid data).

Am I doing something wrong in Chai?

Answer 1

I don't know more about Chai, but just gone through it try below one

prop() or property()

dom.window.document.getElementById("ref_button").should.have.prop('disabled');

or

dom.window.document.getElementById("ref_button").should.have.property('disabled');

Updated snippet

Can you try like below

is()

dom.window.document.getElementById("ref_button").is('[disabled]')).toBe(true)

Above one may work, please try it. If not, try below one also

hasAttr() or hasAttribute()

dom.window.document.getElementById("ref_button").hasAttribute('disabled')