Document is not defined

[ebacka]

I want to test a property of a button in HTML using Chai I expect that this button to be disabled like this:

const chai = require('chai'); const expect = chai.expect; expect(document.getElementById('ref_button')).to.have.attr('disabled');

Wen including this line: chai.use(require('chai-dom'))

I get this error: Unhandled rejection ReferenceError: document is not defined at C:\Users\67563478\new_workspace\onconsup\node_modules\chai-dom\chai-dom.js:69:53 at Object.exports.use (C:\Users\67563478\new_workspace\onconsup\node_modules\chai\lib\chai.js:39:5) at Object.<anonymous> (C:\Users\67563478\new_workspace\onconsup\e2e_cucumber\features\step_definitions\protocolo.js:16:6) at Module._compile (module.js:643:30) at Object.Module._extensions..js (module.js:654:10) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3) at Module.require (module.js:587:17) at require (internal/module.js:11:18) at C:\Users\67563478\new_workspace\onconsup\node_modules\cucumber\lib\cli\index.js:135:16 at Array.forEach (<anonymous>) at Cli.getSupportCodeLibrary (C:\Users\67563478\new_workspace\onconsup\node_modules\cucumber\lib\cli\index.js:134:24) at Cli.<anonymous> (C:\Users\67563478\new_workspace\onconsup\node_modules\cucumber\lib\cli\index.js:144:39) at Generator.next (<anonymous>) at Generator.tryCatcher (C:\Users\67563478\new_workspace\onconsup\node_modules\bluebird\js\release\util.js:16:23)

That is aproblem inside chai-dom library. I had to comment these 3 lines so the error doesnt appear anymore. I comment: `isHTMLElement = function(el) { //return el.nodeType === window.Node.ELEMENT_NODE; },

//NODE_LIST_STRING = Object.prototype.toString.call(document.childNodes),

isNodeList = function(obj) { // return Object.prototype.toString.call(obj) === NODE_LIST_STRING; } But I don´t know if the library works like this with tese lines commented cause now when I want to test if this button <button id="ref_button" type="submit" [disabled]="editForm.form.invalid || isSaving" >has the attribute disabled like this: dom.window.document.getElementById("ref_button").should.have.attr('disabled');` It doesnt find this attribute. I have used JSDOM and dom.window.documentworks for otehr things.

[nathanboktae]

chai-dom is a plug-in for testing agaist the Document Object Model APIs for web browsers as defined by the W3C. Node.js is a server-side JavaScript runtime environment. If you want to replicate a DOM API on the server, check out jsdom

[nathanboktae]

You need to globally export document and window from jsdom .

Fundamentally this library is designed very specifically for browsers. node.js is not, so if you are going to fake it, do all you need to to replicate it.

My recommendation is also to not run your tests in Node.js but a real browser. Especially if you are doing DOM-level testing your setting yourself up for some land mines of incompatibility and maintenance. Headless Chrome is wonderful, check out mocha-chrome for running CI tests on it.

[ebacka]

Well, I am using a real browser actually. I am using Protractor, Cucumber and in the configuration of cucumber I put chrome as a browser. This means the import of chai-dom will work, right?

And secondly I haven't done any test, just the line of importing chai-dom is generating errors in the lines I have included.

[nathanboktae]

Ah ok this looks like a regression from #32 . and yes, you're using Node.js still via Browserify or whatever is consuming and processing your CommonJS-style require calls.

[nathanboktae]

@ebacka want to grab that version and verify if it works? I do need a test pass for this library using jsdom since it is so popular.

[nathanboktae]

Test this fix via:

npm install chai-dom@nathanboktae/chai-dom#master

As for if your setup is still wrong or there is another issue, you can try to write your tests without the chai-dom assertions, get them passing and working, then try adding in chai-dom and use the assertions.

[ebacka]

@nathanboktae well I dont know if this fixed it! I do this: `const dom = new JSDOM(html elements here; ) dom.window.document.getElementById("element").should.have.attr("...");

It gives error document not defined in the chai-dom: isNodeList = function(obj) { return Object.prototype.toString.call(obj) === Object.prototype.toString.call(document.childNodes) }

`

[nathanboktae]

You still need to export it

const dom = new JSDOM(/*options or whatever*/)
global.window = dom.window
global.document = dom.document

dom.window.document.getElementById("element").should.have.attr("...")

[nathanboktae]

actually I just updated it so you don't need to export it. Grab that version and try it ( rm -rf node_modules/chai-dom;npm install chai-dom@nathanboktae/chai-dom#master or I guess the windows equivalent of that. )

[ebacka]

@nathanboktae great! that worked! thanks! I opened another one https://github.com/nathanboktae/chai-dom/issues/35

[yairEO]

Nowhere in the README it is mentioned or advised to install jsdom lib, and it is inferred that it comes bundled with this lib, since obviously mocked-DOM is required when running tests on code mixed with DOM nodes / DOM APIs...