必应地图的 Chutzpah CDN 问题答案

【问题标题】：Chutzpah CDN issue with Bing Maps必应地图的 Chutzpah CDN 问题
【发布时间】：2015-02-28 02:27:02
【问题描述】：

我正在使用 Chutzpah 测试我的 TypeScript，但它似乎无法识别 Bing 地图 CDN：“http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0”。我尝试将它作为参考路径包含在 chutzpah.json 文件中，但没有效果。知道我可能做错了什么吗？

来源（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));
    }
}

测试 (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);
    });
});
}

运行测试导致错误：“MapViewer 测试：应该有地图”失败 ReferenceError：找不到变量：Microsoft in file://.../_Chutzpah.83.MapViewer.js。

顺便说一句，jQuery CDN 作为参考路径工作得很好。对包含 jQuery 的源的测试成功运行。

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" }
   ]
 }

【问题讨论】：

标签： javascript typescript bing-maps chutzpah

【解决方案1】：

问题在于 Chutzpah 假设 JS 文件将具有 .js 扩展名。将来可以修复此问题，以便假定您不打算使用 .js 扩展名，因为这是最常见的。

现在要解决这个问题，只需提供一个虚拟扩展，例如：

 {
  "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" }
   ]
 }

【讨论】：

谢谢马修！这帮助我继续前进，并且我能够通过添加更多内容来运行测试（在下面的答案中进行了概述）。

【解决方案2】：

基于 Matthew 的回答，这就是我最终用来测试实例化 Bing 地图的代码。我不得不进一步引用 Veapicore.js，并将容器 <div /> 注入到生成的 HTML 中。

测试 (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" }
   ]
 }

【讨论】：