當使用Jasmine進行測試時，RequireJS模塊墊片不工作

Question

我有一個JavaEE project，它使用RequireJS加載一些第三方框架。其中一個框架是OpenLayers3。 Openlayers3本地創建一個全局「ol」變量。但是，OpenLayers3被寫爲AMD兼容，並通過RequireJS作爲模塊工作。我也正在使用名爲「olLayerSwitcher」的OpenLayers3 plugin，該版本並未針對AMD進行優化。相反，它取決於「ol」變量是全局變量。

我需要配置如下所示：

paths: { 
    "sinon": ['/webjars/sinonjs/1.7.3/sinon'], 
    "jquery": ["/webjars/jquery/2.1.4/jquery"], 
    "backbone": ['/webjars/backbonejs/1.2.1/backbone'], 
    "underscore": ['/webjars/underscorejs/1.8.3/underscore'], 
    "text": ['/webjars/requirejs-text/2.0.14/text'], 
    "log4js": ['/webjars/log4javascript/1.4.13/log4javascript'], 
    "ol": ['/webjars/openlayers/3.5.0/ol'], 
    "olLayerSwitcher": ['/js/vendor/ol3-layerswitcher/1.0.1/ol3-layerswitcher'] 
}, 
shim: { 
    "olLayerSwitcher": { 
     deps: ["ol"], 
     exports: "olLayerSwitcher" 
    }, 
    'sinon' : { 
     'exports' : 'sinon' 
    } 
} 

該項目是採用骨幹，包括路由器模塊（/src/main/webapp/js/controller/AppRouter.js）：

/*jslint browser : true*/ 
/*global Backbone*/ 
define([ 
    'backbone', 
    'utils/logger', 
    'views/MapView' 
], function (Backbone, logger, MapView) { 
    "use strict"; 
    var applicationRouter = Backbone.Router.extend({ 
     routes: { 
      '': 'mapView' 
     }, 
     initialize: function() { 
      this.LOG = logger.init(); 
      this.on("route:mapView", function() { 
       this.LOG.trace("Routing to map view"); 

       new MapView({ 
        mapDivId: 'map-container' 
       }); 
      }); 
     } 
    }); 

    return applicationRouter; 
}); 

路由器模塊取決於視圖模塊上（/src/main/webapp/js/views/MapView.js）：

/*jslint browser: true */ 
define([ 
    'backbone', 
    'utils/logger', 
    'ol', 
    'utils/mapUtils', 
    'olLayerSwitcher' 
], function (Backbone, logger, ol, mapUtils, olLayerSwitcher) { 
    "use strict"; 

    [...] 

    initialize: function (options) { 
     this.LOG = logger.init(); 
     this.mapDivId = options.mapDivId; 
     this.map = new ol.Map({ 

      [...] 

       controls: ol.control.defaults().extend([ 
        new ol.control.ScaleLine(), 

        new ol.control.LayerSwitcher({ 
         tipLabel: 'Switch base layers' 
        }) 
       ]) 
      }); 

      Backbone.View.prototype.initialize.apply(this, arguments); 
      this.render(); 
      this.LOG.debug("Map View rendered"); 
     } 
    }); 

    return view; 
}); 

在V瀏覽模塊試圖同時引入OpenLayers3和第三方OpenLayers插件。

當項目建立和部署時，它可以在瀏覽器中正常工作。當視圖模塊被加載時，OpenLayers和第三方插件就可以正常工作了，一切都能正常呈現。

但是，當我試圖在茉莉花測試這是所有這些崩潰。

對於Jasmine，我使用的是Jasmine-Maven插件。它與我的圖書館一起拉入JasmineJS，PhantomJS和RequireJS並運行我的規格。問題是，當通過Jasmine運行時，MapView模塊嘗試加載OpenLayers3庫以及第三方插件（olLayerSwitcher），但由於第三方插件找不到「ol」而失敗。

測試：

define([ 
    "backbone", 
    "sinon", 
    'controller/AppRouter' 
], function (Backbone, sinon, Router) { 
    describe("Router", function() { 
     beforeEach(function() { 
      this.router = new Router(); 
      this.routeSpy = sinon.spy(); 
      this.router.bind("route:mapView", this.routeSpy); 

      try { 
       Backbone.history.start({silent: true}); 
      } catch (e) { 
      } 
      this.router.navigate("elsewhere"); 
     }); 

     it("does not fire for unknown paths", function() { 
      this.router.navigate("unknown", true); 
      expect(this.routeSpy.notCalled).toBeTruthy(); 
     }); 

     it("fires the default root with a blank hash", function() { 
      this.router.navigate("", true); 
      expect(this.routeSpy.calledOnce).toBeTruthy(); 
      expect(this.routeSpy.calledWith(null)).toBeTruthy(); 
     }); 
    }); 
}); 

從茉莉花錯誤：

[ERROR - 2015-08-08T21:27:30.693Z] Session [4610ead0-3e14-11e5-bb2b-dd2c4b5c2c7b] - page.onError - msg: ReferenceError: Can't find variable: ol 

:262 in error 
[ERROR - 2015-08-08T21:27:30.694Z] Session [4610ead0-3e14-11e5-bb2b-dd2c4b5c2c7b] - page.onError - stack: 
global code (http://localhost:58309/js/vendor/ol3- layerswitcher/1.0.1/ol3-layerswitcher.js:9) 

:262 in error 
JavaScript Console Errors: 

* ReferenceError: Can't find variable: ol 

從OL3-layerswitcher插件第9行相關的部分是：

[...] 
ol.control.LayerSwitcher = function(opt_options) { 
[...] 

所以它取決於「ol」是否在這一點上。

茉莉花，Maven插件創建其自己的規格亞軍HTML和相關的部分看起來像這樣：

<script type="text/javascript"> 
if(window.location.href.indexOf("ManualSpecRunner.html") !== -1) { 
    document.body.appendChild(document.createTextNode("Warning: Opening this HTML file directly from the file system is deprecated. You should instead try running `mvn jasmine:bdd` from the command line, and then visit `http://localhost:8234` in your browser. ")) 
} 

var specs = ['spec/controller/AppRouterSpec.js']; 

var configuration = { 
    paths: { 
    "sinon": ['/webjars/sinonjs/1.7.3/sinon'], 
    "jquery": ["/webjars/jquery/2.1.4/jquery"], 
    "backbone": ['/webjars/backbonejs/1.2.1/backbone'], 
    "underscore": ['/webjars/underscorejs/1.8.3/underscore'], 
    "text": ['/webjars/requirejs-text/2.0.14/text'], 
    "log4js": ['/webjars/log4javascript/1.4.13/log4javascript'], 
    "ol": ['/webjars/openlayers/3.5.0/ol'], 
    "olLayerSwitcher": ['/js/vendor/ol3-layerswitcher/1.0.1/ol3-layerswitcher'] 
    }, 
    shim: { 
    "olLayerSwitcher": { 
     deps: ["ol"], 
     exports: "olLayerSwitcher" 
    }, 
    'sinon' : { 
     'exports' : 'sinon' 
    } 
    } 
}; 

if (!configuration.baseUrl) { 
    configuration.baseUrl = 'js'; 
} 

if (!configuration.paths) { 
    configuration.paths = {}; 
} 

if (!configuration.paths.specs) { 
    var specDir = 'spec'; 
    if (!specDir.match(/^file/)) { 
     specDir = '/'+specDir; 
    } 
    configuration.paths.specs = specDir; 
} 

require.config(configuration); 

require(specs, function() { 
    jasmine.boot(); 
}); 

我能夠創建一個客戶HTML亞軍，但我不知道是什麼問題是如此我不知道需要改變什麼。

這似乎並不是一個PhantomJS問題，因爲我可以在瀏覽器中加載測試，並且遇到同樣的問題。

如果有人對這裏可能發生的事情有任何想法，我將不勝感激。我真的不想破解第三方模塊，將它轉換成RequireJS模塊，因爲茉莉花測試是完全實現它的最後一步，我完全陷在這裏。

我使用茉莉花2.3.0和2.1.18 RequireJS

我不連接更多道歉，但是這是一個新的帳戶，我沒有足夠的代表吧。

Answer 1

如果沒有安裝的運行版本，就很難找出問題所在。 但是，如果您能夠自定義由maven插件生成的jasmine的SpecRunner.html，只需在SpecRunner html-<script src="/<path_to_lib>">中包含茉莉花（/任何其他導致問題的庫）。

根據我的經驗，它通常不值得付出努力，使庫在源代碼兼容的情況下使用，並與其他所有庫一起使用以便進行測試設置。