Pull an HTML file into a TinyTest

Question

TinyTest seems to be concerned only with unit testing; however, may Meteor packages have UI elements, and it would be helpful to pull in a pre-crafted HTML file that exercises a widget. For instance, we might want to transform a <table> into a grid with DataTables.net, then test if the instantiation was correct.

How can external HTML files be used in a TinyTest?

package.js:

Package.onTest(function (api) {
  api.use(packageName, where);
  api.use(['tinytest', 'http'], where);

  // TODO we should just bring in src/test.html - but how to do that with TinyTest?
  api.addFiles('src/test.html', where);  // this won't magically display the HTML anywhere
  api.addFiles('meteor/test.js', where);
});

test.js:

Tinytest.addAsync('Visual check', function (test, done) {
  var iconsDropZone = document.createElement('div');
  document.body.appendChild(iconsDropZone);


  // TODO ideally we'd get src/test.html straight from this repo, but no idea how to do this from TinyTest
  HTTP.get('https://rawgit.com/FortAwesome/Font-Awesome/master/src/test.html', function callback(error, result) {
    if (error) {
      test.fail('Error getting the icons. Do we have an Internet connection to rawgit.com?');
    } else {
      iconsDropZone.innerHTML = result.content;
      test.ok({message: 'Test passed if the icons look OK.'});
    }

    done();
  });

});

Answer 1

I personally think TinyTest is not the right tool for the job! You may get away with finding out how to include the Asset package or writing your own file loader, but you'll soon face the problem of needing to query the DOM in your tests.

Here are some options I can think of:

Option 1: You can get access to a fully rendered page by using xolvio:webdriver. If you include this package in your onTest block, then you should have access to wdio in your TinyTest tests. I say should as I don't use TinyTest at all but I designed the webdriver package to be usable by any framework. Follow the instructions on the package readme and then do something like this:

browser.
  init().
  url('https://rawgit.com/FortAwesome/Font-Awesome/master/src/test.html').
  getSource(function(err, source) {
    // you have a fully rendered source here and can compare to what you like
  }).
  end();

It's a heavyweight option but might be suitable for you.

Option 2: If you're willing to move away from TinyTest, another option is to use Jasmine. It supports client unit testing so you can load up the unit that does the visuals and isolate it with a unit test.

Option 3: You can create a test app around your package. So you would have:

/package
/package/src
/package/example
/package/example/main.html
/package/example/tests
/package/example/tests/driver.js

And now the example directory is a Meteor app. In main.html you would use your package and under tests directory you can use the framework of your choice (jasmine/mocha/cucumber) in combination with webdriver. I like this pattern for package development as you can test the package as it is intended to be used by apps.