Difference between revisions of "Javascript jasmine"
| Line 32: | Line 32: | ||
}); | }); | ||
| + | |||
| + | |||
| + | |||
| + | == RequireJS and JQuery == | ||
| + | To setup Jasmine to run unit test agains modules that use jquery you need to first import the jquery package through NPM. Then you need to set up a headless browser using JSDom and then attach it to the module you want to test. | ||
| + | |||
| + | 1. Install NPM require packages. | ||
| + | npm install jquery | ||
| + | npm install jsdom | ||
| + | |||
| + | 2. Write your test and include headless DOM. | ||
| + | |||
| + | require(['jquery', 'jsdom', 'jqueryService.js'], function($, jsdom, JQueryService) { | ||
| + | |||
| + | describe('JQueryService Tests', function() { | ||
| + | |||
| + | it('should default', function() { | ||
| + | |||
| + | // Create headless DOM model. | ||
| + | var markup = '<html><body><button id="nextButton">Hello</button></body></html>'; | ||
| + | var myWindow = jsdom.jsdom(markup).parentWindow; | ||
| + | $ = new $(myWindow); | ||
| + | |||
| + | var jqueryService = new JQueryService($); | ||
| + | |||
| + | jqueryService.changeButtonId(); | ||
| + | |||
| + | expect($("#nextButton").html()).toBe('Ok'); | ||
| + | |||
| + | }); | ||
| + | |||
| + | }); | ||
| + | |||
| + | 3. Here is the example module that is being tested. | ||
| + | |||
| + | define( | ||
| + | [ | ||
| + | 'jquery' | ||
| + | ], | ||
| + | function($) { | ||
| + | |||
| + | function JQueryService(jq) { | ||
| + | |||
| + | if(jq) $ = jq; | ||
| + | |||
| + | this.changeButtonId = function() { | ||
| + | $('#nextButton').html('Ok'); | ||
| + | } | ||
| + | |||
| + | } | ||
| + | |||
| + | // Define the class methods. | ||
| + | JQueryService.prototype = {}; | ||
| + | |||
| + | // Return the module constructor. | ||
| + | return( JQueryService ); | ||
| + | |||
| + | } | ||
| + | ); | ||
| + | |||
| + | |||
| + | }); | ||
Revision as of 11:13, 28 May 2015
RequireJS
Using RequireJS with Jasmine is totally possible.
1. To load in your modules to test, you must tell Jasmine-node to run using requireJS and not node-require.
jasmine-node --runWithRequireJs --requireJsSetup etc/spec/requirejs-setup.js etc/spec/ --captureExceptions
2. Need to setup the require-setup.js. This require the use of coping two files from github.
https://github.com/mhevery/jasmine-node/blob/master/spec-requirejs/requirejs-setup.js
and
https://github.com/mhevery/jasmine-node/blob/master/spec-requirejs/requirejs-wrapper-template.js
3. Just setup you test. and done.
require(['classService.js'], function(ClassService) {
describe('ClassService Tests', function() {
it('should default', function() {
var classService = new ClassService();
expect(classService.getName()).toBe('Ok');
});
});
});
RequireJS and JQuery
To setup Jasmine to run unit test agains modules that use jquery you need to first import the jquery package through NPM. Then you need to set up a headless browser using JSDom and then attach it to the module you want to test.
1. Install NPM require packages.
npm install jquery npm install jsdom
2. Write your test and include headless DOM.
require(['jquery', 'jsdom', 'jqueryService.js'], function($, jsdom, JQueryService) {
describe('JQueryService Tests', function() {
it('should default', function() {
// Create headless DOM model.
var markup = '<html><body><button id="nextButton">Hello</button></body></html>';
var myWindow = jsdom.jsdom(markup).parentWindow;
$ = new $(myWindow);
var jqueryService = new JQueryService($);
jqueryService.changeButtonId();
expect($("#nextButton").html()).toBe('Ok');
});
});
3. Here is the example module that is being tested.
define(
[
'jquery'
],
function($) {
function JQueryService(jq) {
if(jq) $ = jq;
this.changeButtonId = function() {
$('#nextButton').html('Ok');
}
}
// Define the class methods.
JQueryService.prototype = {};
// Return the module constructor.
return( JQueryService );
}
);
});
