javascript - How to programatically inject html to qunit-fixture -

i programatically inject html test qunit-fixture. have tried $.load js dealing html gets executed before html 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 html module want 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 test:

define(['foo'], function(foo) {    'use strict';    var test = {     test: function() {       module( "module foo");       asynctest("foo class test", function() {         expect(1);         // foo() executed before load 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   };  }); 

since loading of content asynchronous you'll need tell qunit wait before running. note guess @ test harness might like, need updated use case.

<!-- in test html document --> <script> qunit.config.autostart = false;  // code load html dynamically in fixture  // test definitions  require(     [ "src/yoursourcecode", "tests/thetests" ],     function() {         qunit.start(); // starts main qunit code     } );  </script> 

update

looks op is, in fact, stopping qunit running immediately, problem (see comment below) module code runs before html loaded dynamically. think because _init() method called inside module. instead, return _init method property of module , call test:

define(['jquery'], function($) {    'use strict';    var foo = {     _init: function() {       ...     },     ...   };    // foo._init(); // don't here...    return {     greet : foo.greet,     init : foo._init    // add init method exports   };  }); 

now, in test 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 initialization here...            ok($('.foo').hasclass('testit'), ".foo should have class 'testit'");           qunit.start();         });       });     }   };    return {     test: test.test   };  });