Month: July 2013

by Matthew Manela on Chutzpah

Chutzpah 2.4.3

This release of Chutzpah contains a few bug fixes, upgraded versions of Blanket.js and TypeScript and a new feature for injecting HTML templates.

TypeScript Upgraded

Chutzpah now uses TypeScript 0.9.0.1. This change may require an update for your .ts files. In this version of TypeScript the compiler errors if you do not specify the .d.ts file corresponding to your third party JS library. For example, if you are using QUnit you must reference the QUnit.d.ts file.

Improved Code Coverage

Code coverage has improved with two changes. The version of Blanket.js was upgraded to 1.1.5. In addition, Chutzpah will now prevent files you exclude from code coverage from getting instrumented. This helps improve performance of the coverage runs.

HTML Template Feature

This feature came in as pull request from Matthew Osborn. This allows you to specify an HTML template file from your tests. Chutzpah will inject this templates content into the head section of the generated test harness. For example, lets say you have an HTML template file named template.tmpl.html with the contents:

<script id="testTemplateId" type="text/html">
    <div id="testTemplateDiv">
        Cool!
    </div>
</script>

Then you can reference this file from your test with the syntax:

/// <template path="template.tmpl.html"/>

For example, this is a test case I wrote in Chutzpah to assert this feature works correctly:

/// <reference path="qunit.js" />
/// <template path="template.tmpl.html"/>
/// <reference path="../jquery-1.7.1.min.js" />

module("Html Template Test - QUnit");
test("Will load html template", function () {
    // Grab template text, convert to html, append to body
    $($("#testTemplateId").text()).appendTo("body");

    var templateDiv = $("#testTemplateDiv");

    equal(templateDiv.length, 1);
});

Which results in an HTML test harness which looks something like this:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="qunit.css"/>
  <script type="text/javascript" src="qunit.js"></script>
  <script id="testTemplateId" type="text/html">
      <div id="testTemplateDiv">
          Cool!
      </div>
  </script>
  <script type="text/javascript" src="query-1.7.1.min.js"></script>
  <script type="text/javascript" src="template-qunit.js"></script>
</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"></div>
</body>
</html>

The content from the template was injected into the head section above. This ability is useful for things like jQuery widgets and JS template renderers.