Chutzpah CDN issue with Bing Maps

Question

I am using Chutzpah to test my TypeScript, and it doesn't seem to recognize the Bing Maps CDN: "http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0". I tried including it as a reference path in the chutzpah.json file, but to no effect. Any idea what I might be doing wrong?

Source (MapViewer.ts):

/// <reference path="../scripts/typings/bingmaps/microsoft.maps.d.ts" />

module Viewers {
export class MapViewer {
    private containerName: string;
    private map: Microsoft.Maps.Map;

    constructor(theContainerName: string) {
        this.containerName = theContainerName;
        this.map = new Microsoft.Maps.Map(document.getElementById(this.containerName));
    }
}

Test (MapViewerTest.ts)

///<reference path="../../lib/jasmine/jasmine.d.ts"/>
///<reference path="../../../FrontEndTools.WebUI/Services/MapViewer.ts"/>

module Viewers {
describe("MapViewer tests",() => {
    var viewer = null;

    beforeEach(() => {
        viewer = new MapViewer("myMapContainer");
    });

    it("should have a map",() => {
        var result = viewer;
        expect(result);
    });
});
}

Running the test results in an error: 'MapViewer tests:should have a map' failed ReferenceError: Can't find variable: Microsoft in file://.../_Chutzpah.83.MapViewer.js.

Incidentally, the jQuery CDN works fine as a reference path. The tests for the source that has jQuery in it run successfully.

Chutzpah.json

 {
  "Framework": "jasmine",
  "TestHarnessReferenceMode": "Normal",
  "TypeScriptModuleKind": "CommonJS",
  "TypeScriptCodeGenTarget": "ES5",
  "References" : [
   { "Path": "FrontEndTools.WebUI/lib/knockout.js" },
   { "Path": "http://code.jquery.com/jquery-2.1.0.min.js" },
   { "Path": "http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" }
   ]
 }

Answer 1

The issue is that Chutzpah is assuming that JS files will have a .js extension. In the future this could be fixed so that it assumes with no extension you intend .js since that is most common.

To get around the issue now just give a dummy extension like:

 {
  "Framework": "jasmine",
  "TestHarnessReferenceMode": "Normal",
  "TypeScriptModuleKind": "CommonJS",
  "TypeScriptCodeGenTarget": "ES5",
  "References" : [
   { "Path": "FrontEndTools.WebUI/lib/knockout.js" },
   { "Path": "http://code.jquery.com/jquery-2.1.0.min.js" },
   { "Path": "http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0#dummy.js" }
   ]
 }

Answer 2

Building upon Matthew's answer, this is what I ended up with to test code that instantiates Bing Maps. I had to further reference the Veapicore.js, and inject a container <div /> into the HTML that gets generated.

Test (MapViewerTest.ts)

///<reference path="../../lib/jasmine/jasmine.d.ts"/>
///<reference path="../../../FrontEndTools.WebUI/scripts/typings/jquery/jquery.d.ts" />
///<reference path="../../../FrontEndTools.WebUI/Services/MapViewer.ts"/>

module Viewers {
describe("MapViewer tests",() => {
    var viewer = null;

    beforeEach(() => {
        // Inject a container into the page 
        // before instantiating the map.
        var mapContainerName = "myMapContainer";
        var $div = $('<div />').appendTo('body');
        $div.attr('id', mapContainerName);

        viewer = new MapViewer(mapContainerName);
    });

    it("should have a map",() => {
        var result = viewer;
        expect(result).toBeDefined();
    });
});
}

Chutzpah.json

 {
  "Framework": "jasmine",
  "TestHarnessReferenceMode": "Normal",
  "TypeScriptModuleKind": "CommonJS",
  "TypeScriptCodeGenTarget": "ES5",
  "References" : [
   { "Path": "FrontEndTools.WebUI/lib/knockout.js" },
   { "Path": "http://code.jquery.com/jquery-2.1.0.min.js" },
   { "Path": "http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0#dummy.js" },
   { "Path": "http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20140904153057.64/js/en-us/veapicore.js" }
   ]
 }