Menu
I'm setting up my SpecRunner.html/.js, RequireConfig.js, my paths and my shims just like I have with earlier release candidates of Jasmine + RequireJs, but now my test methods show Jasmine undefined. They've recently changed to a different method of loading Jasmine that I understand is incompatible with RequireJs.
Is my understanding correct? If so, will we ever be able to use Jasmine + RequireJs again?
772
The new boot.js does a bunch of the initialization and attaches it to window.onload() which has already been called by the time require.js loads Jasmine. You can manually call window.onload() to initialize the HTML Reporter and execute the environment.
SpecRunner.html
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Jasmine Spec Runner v2.0.0</title> <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0/jasmine_favicon.png"> <link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.0/jasmine.css"> <!-- specRunner.js runs all of the tests --> <script data-main="specRunner" src="../bower_components/requirejs/require.js"></script> </head> <body> </body> </html> specRunner.js
(function() { 'use strict'; // Configure RequireJS to shim Jasmine require.config({ baseUrl: '..', paths: { 'jasmine': 'tests/lib/jasmine-2.0.0/jasmine', 'jasmine-html': 'tests/lib/jasmine-2.0.0/jasmine-html', 'boot': 'tests/lib/jasmine-2.0.0/boot' }, shim: { 'jasmine': { exports: 'window.jasmineRequire' }, 'jasmine-html': { deps: ['jasmine'], exports: 'window.jasmineRequire' }, 'boot': { deps: ['jasmine', 'jasmine-html'], exports: 'window.jasmineRequire' } } }); // Define all of your specs here. These are RequireJS modules. var specs = [ 'tests/spec/routerSpec' ]; // Load Jasmine - This will still create all of the normal Jasmine browser globals unless `boot.js` is re-written to use the // AMD or UMD specs. `boot.js` will do a bunch of configuration and attach it's initializers to `window.onload()`. Because // we are using RequireJS `window.onload()` has already been triggered so we have to manually call it again. This will // initialize the HTML Reporter and execute the environment. require(['boot'], function () { // Load the specs require(specs, function () { // Initialize the HTML Reporter and execute the environment (setup by `boot.js`) window.onload(); }); }); })(); Example spec
define(['router'], function(router) { 'use strict'; describe('router', function() { it('should have routes defined', function() { router.config({}); expect(router.routes).toBeTruthy(); }); }); }); Here's an alternative approach that may be simpler in some cases - use Jasmine's asynchronous support to load your AMD module before executing tests, like this:
in MySpec.js:
describe('A suite', function() {
var myModule;
// Use require.js to fetch the module
it("should load the AMD module", function(done) {
require(['myModule'], function (loadedModule) {
myModule = loadedModule;
done();
});
});
//run tests that use the myModule object
it("can access the AMD module", function() {
expect(myModule.speak()).toBe("hello");
});
});
For this to work, you'll need to include require.js in your SpecRunner.html and possibly configure require (as you normally would, e.g. by setting the baseUrl), like this:
in SpecRunner.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Jasmine Spec Runner v2.0.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.0/jasmine.css">
<script src="lib/require.min.js"></script>
<script> require.config({ baseUrl: "src" }); </script>
<script src="lib/jasmine-2.0.0/jasmine.js"></script>
<script src="lib/jasmine-2.0.0/jasmine-html.js"></script>
<script src="lib/jasmine-2.0.0/boot.js"></script>
<script src="spec/MySpec.js"></script>
</head>
<body>
</body>
</html>
For this example, the AMD module implementation might look something like this:
in src/myModule.js:
define([], function () {
return {
speak: function () {
return "hello";
}
};
});
Here's a working Plunk that implements this complete example.
Enjoy!
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
