How to programatically inject html to qunit-fixture

Question

I would like to programatically inject the html to test into the qunit-fixture. I have tried with $.load but the JS dealing with the HTML gets executed before the html is loaded.

The HTML:

<div id="qunit"></div>
<div id="qunit-fixture"></div>

<script src="../components/bower/qunit/qunit/qunit.js"></script>
<script>
  QUnit.config.autostart = false;
</script>

<script data-main="tests" src="../components/bower/requirejs/require.js"></script>

The JS manipulating the html is the module I want to test:

define(['jquery'], function($) {

  'use strict';

  var Foo = {
    _init: function() {
      this._addClass();
    },
    _addClass: function() {
      console.log('adding class testit');
      $('.foo').addClass('testit');
    },
    greet: function() {
      return "Hello";
    }
  };

  Foo._init();

  return {
    greet : Foo.greet
  };

});

And my test:

define(['foo'], function(foo) {

  'use strict';

  var Test = {
    test: function() {
      module( "module Foo");
      asyncTest("foo class test", function() {
        expect(1);
        // foo() is executed before load is done :(
        $('#qunit-fixture').load('../components/app/foo/foo.html', function(data) {
          ok($('.foo').hasClass('testit'), ".foo should have class 'testit'");
          QUnit.start();
        });
      });
    }
  };

  return {
    test: Test.test
  };

});

Answer 1

Since the loading of the content is asynchronous you'll need to tell QUnit to wait before running. Note that this is just a guess at what your test harness might look like, it will likely need to be updated for your use case.

<!-- in your test HTML document -->
<script>
QUnit.config.autostart = false;

// your code to load the HTML dynamically in the fixture

// your test definitions

require(
    [ "src/yourSourceCode", "tests/theTests" ],
    function() {
        QUnit.start(); // this starts the main QUnit code
    }
);

</script>

UPDATE

Looks like the OP is, in fact, already stopping QUnit from running immediately, the problem (see the comment below) is that the module code runs before the HTML is loaded dynamically. I think this is because the _init() method is called inside the module. Instead, return the _init method as a property of the module and call it from the test:

define(['jquery'], function($) {

  'use strict';

  var Foo = {
    _init: function() {
      ...
    },
    ...
  };

  // Foo._init(); // don't do this here...

  return {
    greet : Foo.greet,
    init : Foo._init    // add the init method to your exports
  };

});

Now, in your test you can do:

define(['foo'], function(foo) {

  'use strict';

  var Test = {
    test: function() {
      module( "module Foo");
      asyncTest("foo class test", function() {
        expect(1);

        $('#qunit-fixture').load('../components/app/foo/foo.html', function(data) {

          foo.init(); // we've moved the initialization to here...

          ok($('.foo').hasClass('testit'), ".foo should have class 'testit'");
          QUnit.start();
        });
      });
    }
  };

  return {
    test: Test.test
  };

});