0

I'm trying to author a Typescript file with unit tests for a Typescript source file. My project structure:

/js/my-unit.ts
/js-tests/my-unit.tests.ts
/Scripts/typings/qunit/qunit.d.ts
/chutzpah.json

Here's the my-unit.ts contents:

function globalFunc() { return { dummy: "object" }; }

Here's the my-unit.tests.ts contents:

/// <reference path="../scripts/typings/qunit/qunit.d.ts" />
/// <reference path="../js/my-unit.ts" />
QUnit.test("Test 1", assert => assert.ok(!!globalFunc()));

Here's the chutzpah.json file:

{
    "Compile": {
        "Mode": "External",
        "Extensions": [ ".ts" ],
        "ExtensionsWithNoOutput": [ ".d.ts" ]
    },
    "Tests": [
        { "Includes": [ "**/*-tests/**.ts" ] }
    ]
}

The test is red, because:

Can't find variable: globalFunc

Why!? How do I fix that?

What have I tried:

  • referencing the .js file in my tests file, but that isn't allowed
  • searching for dupes, finding mainly this question, but one answer didn't work, and the other (by Chutzpah's author, no less) seems to be similar to my own setup
  • re-reading the "Running Unit Tests with Typescript" documenation
  • changing the reference to the source to a path (with and without slash ending), but that gives me errors in Visual Studio
  • adding class Foo {} in the unit file and assert.ok(!!new Foo()) test, but this also fails
  • adding module My { export class Foo { } } in the unit file and assert.ok(!!new My.Foo()) test, but this also fails

  • using the "Open in browser" feature from the other Chutzpah extension, and check the source for the test file (which presumably is also generated for tests when run from the test explorer), where I see that indeed my source file (my-unit.ts or my-unit.js) is not referenced:

      <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8" />
      <title>QUnit Tests</title>
      <link rel="stylesheet" type="text/css" href="file:///E:/path/to/TestFiles/QUnit/qunit.css"/>
      <script type="text/javascript" src="file:///E:/path/to/TestFiles/QUnit/qunit.js"></script>
      <script type="text/javascript" src="file:///E:/path/to/project/js-tests/my-unit.tests.js"></script>
      <script>
          var amdTestPaths = [];
          // code ommitted for brevity...
      </script>
  </head>
  <body>    
      <div id="qunit"></div>
      <div id="qunit-fixture"></div>
  </body>
  </html>

  • Adding

    "References": [{ "Path":  "js", "Includes": [ "**.ts" ], "Excludes": [ "**.d.ts" ] }

    to my chutzpah.json file. This kind-of works, but is a rather brute-force hack, because now all my source files will be included for each test fixture...

The above is a (hopefully) minimal repro of my actual scenario. How can I get it to work?

Community
  • 1
  • 1
Jeroen
  • 60,696
  • 40
  • 206
  • 339

1 Answers1

0

TL;DR Version

After some more searching I found that setting ExpandReferenceComments to true fixes things:

"Tests": [
    {
        "ExpandReferenceComments":  true,
        "Includes": [ "**/js-tests/**.ts" ]
    }
]

It is explained here and will make sure the /// comments are expanded into <script> tags in the test files Chutzpah generates.

Full solution

Here's all files of a minimal repro that works:

/chutzpah.json

{
    "Compile": {
        "Mode": "External",
        "Extensions": [ ".ts" ],
        "ExtensionsWithNoOutput": [ ".d.ts" ]
    },
    "Tests": [
        {
            "ExpandReferenceComments":  true,
            "Includes": [ "**/js-tests/**.ts" ]
        }
    ]
}

/js/my-unit1.ts

function globalFunc1() { return { dummy: "object 1" }; }

/js/my-unit2.ts

function globalFunc2() { return { dummy: "object 2" }; }

/js-tests/my-unit1.tests.ts

/// <reference path="../scripts/typings/qunit/qunit.d.ts" />
/// <reference path="../js/my-unit1.ts" />
QUnit.test("globalFunc1 works", assert => assert.ok(!!globalFunc1()));

/js-tests/my-unit2.tests.ts

/// <reference path="../scripts/typings/qunit/qunit.d.ts" />
/// <reference path="../js/my-unit2.ts" />
QUnit.test("globalFunc2 works", assert => assert.ok(!!globalFunc2()));

Footnotes

I'm unsure why the default for ExpandReferenceComments is false, or when that would even be useful (perhaps when the Comple Mode is not External?).

The "Full solution" above includes two units and two test files, because I wanted to verify that the references are expanded per test file, which it does (if you run them in the browser you'll see that Chutpah only generates <script> tags for that fixture).

Community
  • 1
  • 1
Jeroen
  • 60,696
  • 40
  • 206
  • 339
  • 1
    `ExpandReferenceComments` is defaulted to false since it is recommended to explicitly set all your references in a `References` section in the chutzpah.json. This is more efficient and clearer. However, if you want the expanding behavior as you did the setting is there. – Matthew Manela May 12 '16 at 16:34
  • @MatthewManela Thanks for your authorative comment :). I had always thought of the `References` section as a "all fixtures need this" thing, e.g. I used it for including jQuery and Angular. (Being afraid that if I put paths to my app files there that each fixture would get all app files included.) At any rate, tomorrow I'll try to slipstream your comment's suggestion for the preferred method into my answer for others to enjoy. – Jeroen May 12 '16 at 21:04
  • 1
    Everything in the references will be added to your test harness. Typically this is ok for many people. However, if you need different sets of references for different tests you can actually make a hierarchy of chutzpah.json files that can inherit from each other. This is **advanced** but works well. – Matthew Manela May 12 '16 at 21:33