Static selected variables are lost while running QUnit tests

Question

I just started using QUnit, and ran into an issue.

When I write my JavaScript files, I put all of my variables at the top of the page like this:

var $input1 = $('#input1');
var $submit = $('#submit');

Then, I wire up my events like this:

$submit.on('click', function (e) {
    submit(e);
});

That works great, and is a good way to not have to keep going through and finding all of the elements every time I need something. (No littering the code with $('#submit') everywhere.)

However, now that I'm running a test with QUnit, the items in the qunit-fixture div get replaced every time a new test is run. (I'm rewriting some code that someone else did, so there were some initial existing tests.)

As of right now, the test that the other person wrote appends some static HTML to the qunit-fixture div in the beforeEach of the module.

One final note of importance, this is a part of an ASP.NET MVC project, and we're running the tests with chutzpah so we aren't making explicit HTML pages to run each of the test files with. Our intent is to run them in a command line, especially as a part of the build process.

How do I get those static items that should always be on the page to stay that way when we aren't building that full HTML page for them to live in?

EDIT I've done a bit more research into this, and because I'm adding the HTML to the DOM during the Test file, when I select the variable at the top, those elements aren't on the page yet in the file I'm testing.

krillgar · Accepted Answer · 2016-03-03T17:33:56.583

Well it turns out that Chutzpah was the problem. The HTML that they use to test is absolutely horrible. All of the scripts are up in the <head> tag, so they will always be processed before any HTML is added to the DOM. The way to fix this is with a Customizable Test Harness.

Unfortunately, their documentation doesn't give any information on how to actually do make this document. They list out the items you need to include for them to replace, but (as with all JavaScript files) their order is very important, and not necessarily in the order they list them in. Here is what I used, and it works great.

<html>
    <head>
        <title>Chutzpah tests</title>

        @@ReferencedCSSFiles@@
    </head>
    <body>
        <h1 id="qunit-header">Unit Tests</h1>
        <h2 id="qunit-banner"></h2>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup, will be hidden</div>

        @@TestFrameworkDependencies@@
        @@CodeCoverageDependencies@@
        @@TestHtmlTemplateFiles@@

        @@ReferencedJSFiles@@

        @@TestJSFile@@

        @@AMDTestPath@@
        @@AMDModuleMap@@
    </body>
</html>

This way, you're able to add any static HTML that you want to the file. However, there are some caveats to that:

The qunit-fixture div MUST be at the same level as the other QUnit elements.
The qunit-fixture div MUST immediately follow the qunit-tests div.

But, by including all of the CSS at the bottom of the page, then it behaves just as you would expect from any HTML pages you would write yourself where they are located in that same location.

Also, you will need to add the following information to your chutzpah.json file:

"CustomTestHarnessPath": "CustomTestHarness.html",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"Tests": [
    { "Includes": ["*.js"]}
]

If you put your HTML page in the same location as the chutzpah.js and your tests, you will also need to add that Tests filter so that the HTML page won't be attempted to be run as a test.

Sorry you ran into some difficulties. Chutzpah has added those references in the head for a long time and this is the first I heard of an issue caused by it. I guess it is because people would just wrap their code in $(function(){}) call to ensure it happens after document ready. Does that work for you? If not we can look at changing the order but I need to make sure this won't break other people. I would ideally not want you to use the template since it is more fragile but I hear your feedback on the lacking documentation. Thanks! — Matthew Manela, Mar 04 '16 at 23:02

Static selected variables are lost while running QUnit tests

1 Answers1