nathanboktae / chai-dom

DOM assertions for the Chai assertion library using vanilla JavaScript

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

ebacka opened this issue · comments

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?

Remove the brackets.

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

This way it never finds it

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

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.

does this pass?

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

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.

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.

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