Testing function that depends on jquery


#1

Hi all,
I’m trying to test several client functions that need manipulate a specific document, for instance,

const document = `
        <html><head></head><body>
          <ul>
              <li><a href="#" id="home">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
          </ul>
          </body></html>
        `;

where I need to test for instance $('#home').is(':hidden'))

I’ve tried to create a client test using practicalmeteor:mocha:

import $ from 'jquery';
import chai from 'chai';
var expect = chai.expect;
document.innerHTML = document;
expect( $('#home').is(':hidden')).to.be.false;

but this overrides the actual document where practicalmeteor:mocha shows its results.
I’ve tried using cheerio and cheerio.load(document) but it doesn’t work because cheerio “not produce a visual rendering”. jsdom also does not work on client side.

I tried to launch the test server side and use jsdom (and for that I needed to change by files from ‘client’ folders to other ones so Meteor does not ignore them), but with jsdom it does not work either https://github.com/tmpvar/jsdom/issues/1048

Does anyone know other options?

Thanks.
Best regards,
Hugo