have.attr() in chai-dom not working properly

[ebacka]

Hello,

I have this button to test in a file test.html : <button id="ref_button" type="submit" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">

I am using protractor, cucumber, and chai dom to test if this button is disabled when the form data are invalid, so I check its attribute disabled like this:

`const jsdom = require("jsdom"); const { JSDOM } = jsdom; const chai = require('chai'); const expect = chai.expect; const should = chai.should(); chai.use(require('chai-dom'));

//In given when then step definitions I run teh app, login, go to the form and fill the form with valid data .... When('I put a valid name',{timeout: 90 * 1000}, function(callback) {

  element(by.css("*[id='field_nombre']")).click();
  element(by.css("*[id='field_nombre']")).sendKeys('').then(callback);    

}); Then('The button Save should be enabled', function() { JSDOM.fromFile("test.html").then(dom => { dom.window.document.getElementById("ref_button").should.not.have.attr("[disabled]");

}); ` Now the test fails because it always finds the attribute disabled, when the button is disabled or not, when the datas are valid or not.

Is this a chai-dom issue, or something I implement the wrong way and maybe it doesnt make take the form status valid or invalid?

[nathanboktae]

Remove the brackets.

someEl.should.have.attr('disabled')

[ebacka]

This way it never finds it

[nathanboktae]

No, you need it in your selector, but remove brackets from the chai-dom assertion call.

[ebacka]

Yeah, I did this before, but without brackets it always says that cannot find this attribute of this element. So I put the bracketc and thought that maybe this was the error.

[nathanboktae]

does this pass?

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

[ebacka]

Nope. AssertionError: expected false to be true. I think that it doesnt recognizes the changes in the form when it is valid and invalid. I have done almost the same thing in jasmine and it works this way.

[nathanboktae]

Nope

Well now that you have removed chai-dom out of the picture and your test is still failing, something else is wrong. Good luck on your investigation.

[nathanboktae]

The Element DOM API :)

[ebacka]

I still think it is an issue of chai-dom**. The investigation is difficult here without any example of implementing chai-dom.