I'm preparing to write some tests with Qunit for a Backbone app that is written for ES6 with babel.js applied to it so that it can run in contemporary browsers. To ensure that I have qunit set up properly and all the paths properly specified, I first tested an Backbone model written in ES5 and everything worked as expected. However, I then included bundle.js (which contains the results of my ES6 code with babel.js applied to it) into my tests/index.html, and wrote
test ( "Code transformed by babel.js contained in bundle.js can be tested", function(){
expect(1);
var es6model = new ES6Model();
equal( es6model.get("defaultproperty"), "defaultstring", "defaultproperty should be defaultstring");
})
and it's telling me ES6Model is not defined.
Question: is there something about code transformed by babeljs that would make it more challenging to be tested using Qunit?
In addition to all the complex js that babel writes at the top of the file, the code in bundle.js looks like this
var Model = Backbone.Model;
var View = Backbone.View;
var Collection = Backbone.Collection;
var Router = Backbone.Router;
var LocalStorage = Backbone.LocalStorage;
var ES6Model = (function (Model) {
function ES6Model() {
_classCallCheck(this, ES6Model);
if (Model != null) {
Model.apply(this, arguments);
}
}
_inherits(ES6Model, Model);
_prototypeProperties(Gopher, null, {
defaults: {
value: function defaults() {
return {
defaultproperty: "defaultstring"
};
},
writable: true,
configurable: true
}
});
return ES6Model;
})(Model);
Update
I include all the code created by babel.js in a file called bundle.js and include that in my index.html like I would any other js file, and it runs without issue, which is why I assumed I could test it like any other js code. However, it should be noted (as the commenter pointed out) that the code created by babel.js is contained in a module..this is how bundle.js begins with the model I'm trying to test coming after
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";
Update
I am using browserify to apply babel to the various files of my ES6 code which creates a bundle. To run the tests, I do npm run test and to compile the bundle, I try both of these (one of them uses modules --ignore) but neither of them work
"scripts": {
"test": "./node_modules/karma/bin/karma start --log-level debug",
"build-js": "browserify app/app.js app/views.js app/models.js app/d3charts.js -t babelify > app/bundle.js",
"t-build": "browserify app/app.js app/views.js app/models.js app/d3charts.js -t [babelify --modules ignore] > app/test/test-bundle.js"
},
(The application is a Backbone.js app).
This is my karma config file. I don't have any further configuration (so I'm guessing my inclusion of karma-require is a waste but maybe necessary...)
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['qunit'],
plugins: ['karma-qunit', 'karma-phantomjs-launcher', 'karma-requirejs'],
files : [
'app/test/jquery.js',
'app/test/d3.js',
'app/test/json2.js',
'app/test/underscore.js',
'app/test/backbone.js',
'app/backbone.localStorage.js',
'app/test/test-bundle.js',
'app/test/tests.js'
],
reporters: ['progress'],
// web server port
port: 8080,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// See http://stackoverflow.com/a/27873086/1517919
customLaunchers: {
Chrome_sandbox: {
base: 'Chrome',
flags: ['--no-sandbox']
}
}
});
};
For reference they way to do this with traceur is to compile the traceur-runtime.js file into the code (see https://github.com/google/traceur-compiler/issues/777 - a similar variable not defined error).
E.g.
traceur --out out/src/yourcode.js --script lib/traceur-runtime.js --script test/yourcode.js
(see Compiling Offline https://github.com/google/traceur-compiler/wiki/Compiling-Offline).
Import the Babel-generated module into your test before executing (recommended)
You'll need to include a module loader (e.g. SystemJS) to handle the imports. Babel has excellent documentation for its module system.
It looks something like this:
System.import( 'path/to/ES6Module' )
.then( function( ES6Module ) {
// … Run your tests on ES6Module here
});
Note: System.import() returns a Promise, so your test suite will need to support asynchronous operations.
Tell Babel to skip module generation (simpler)
You can tell Babel not to wrap your code in a module using the --modules ignore flag. This allows your code to set up global variables, immediately available to your unit tests. Global variables are not recommended (especially in production systems), but they are simpler to apply.
Related
Lets say I'm writing a module in JavaScript which can be used on both the browser and the server (with Node). Lets call it Module. And lets say that that Module would benefit from methods in another module called Dependancy. Both of these modules have been written to be used by both the browser and the server, à la CommonJS style:
module.js
if (typeof module !== 'undefined' && module.exports)
module.exports = Module; /* server */
else
this.Module = Module; /* browser */
dependancy.js
if (typeof module !== 'undefined' && module.exports)
module.exports = Dependancy; /* server */
else
this.Dependancy = Dependancy; /* browser */
Obviously, Dependancy can be used straight-out-of-the-box in a browser. But if Module contains a var dependancy = require('dependency'); directive in it, it becomes more of a hassle to 'maintain' the module.
I know that I could perform a global check for Dependancy within Module, like this:
var dependancy = this.Dependancy || require('dependancy');
But that means my Module has two added requirements for browser installation:
the user must include the dependency.js file as a <script> in their document
and the user must make sure this script is loaded before module.js
Adding those two requirements throws the idea of an easy-going modular framework like CommonJS.
The other option for me is that I include a second, compiled script in my Module package with the dependency.js bundled using browserify. I then instruct users who are using the script in the browser to include this script, while server-side users use the un-bundled entry script outlined in the package.json. This is preferable to the first way, but it requires a pre-compilation process which I would have to run every time I changed the library (for example, before uploading to GitHub).
Is there any other way of doing this that I haven't thought of?
The two answers currently given are both very useful, and have helped me to arrive at my current solution. But, as per my comments, they don't quite satisfy my particular requirements of both portability vs ease-of-use (both for the client and the module maintainer).
What I found, in the end, was a particular flag in the browserify command line interface that can bundle the modules and expose them as global variables AND be used within RequireJS (if needed). Browserify (and others) call this Universal Module Definition (UMD). Some more about that here.
By passing the --standalone flag in a browserify command, I can set my module up for UMD easily.
So...
Here's the package.js for Module:
{
"name": "module",
"version": "0.0.1",
"description": "My module that requires another module (dependancy)",
"main": "index.js",
"scripts": {
"bundle": "browserify --standalone module index.js > module.js"
},
"author": "shennan",
"devDependencies": {
"dependancy": "*",
"browserify": "*"
}
}
So, when at the root of my module, I can run this in the command line:
$ npm run-script bundle
Which bundles up the dependancies into one file, and exposes them as per the UMD methodology. This means I can bootstrap the module in three different ways:
NodeJS
var Module = require('module');
/* use Module */
Browser Vanilla
<script src="module.js"></script>
<script>
var Module = module;
/* use Module */
</script>
Browser with RequireJS
<script src="require.js"></script>
<script>
requirejs(['module.js'], function (Module) {
/* use Module */
});
</script>
Thanks again for everybody's input. All of the answers are valid and I encourage everyone to try them all as different use-cases will require different solutions.
Of course you could use the same module with dependency on both sides. You just need to specify it better. This is the way I use:
(function (name, definition){
if (typeof define === 'function'){ // AMD
define(definition);
} else if (typeof module !== 'undefined' && module.exports) { // Node.js
module.exports = definition();
} else { // Browser
var theModule = definition(), global = this, old = global[name];
theModule.noConflict = function () {
global[name] = old;
return theModule;
};
global[name] = theModule;
}
})('Dependency', function () {
// return the module's API
return {
'key': 'value'
};
});
This is just a very basic sample - you can return function, instantiate function or do whatever you like. In my case I'm returning an object.
Now let's say this is the Dependency class. Your Module class should look pretty much the same, but it should have a dependency to Dependency like:
function (require, exports, module) {
var dependency = require('Dependency');
}
In RequireJS this is called Simplified CommonJS Wrapper: http://requirejs.org/docs/api.html#cjsmodule
Because there is a require statement at the beginning of your code, it will be matched as a dependency and therefore it will either be lazy loaded or if you optimize it - marked as a dependency early on (it will convert define(definition) to define(['Dependency'], definition) automatically).
The only problem here is to keep the same path to the files. Keep in mind that nested requires (if-else) won't work in Require (read the docs), so I had to do something like:
var dependency;
try {
dependency = require('./Dependency'); // node module in the same folder
} catch(err) { // it's not node
try {
dependency = require('Dependency'); // requirejs
} catch(err) { }
}
This worked perfectly for me. It's a bit tricky with all those paths, but at the end of the day, you get your two separate modules in different files which can be used on both ends without any kind of checks or hacks - they have all their dependencies are work like a charm :)
Take a look at webpack bundler.
You can write module and export it via module exports. Then You can in server use that where you have module.export and for browser build with webpack. Configuration file usage would be the best option
module.exports = {
entry: "./myModule",
output: {
path: "dist",
filename: "myModule.js",
library: "myModule",
libraryTarget: "var"
}
};
This will take myModule and export it to myModule.js file. Inside module will be assigned to var (libraryTarget flag) named myModule (library flag).
It can be exported as commonJS module, war, this, function
Since bundling is node script, this flag values can be grammatically set.
Take a look at externals flag. It is used if you want to have special behavior for some dependencies. For example you are creating react component and in your module you want to require it but not when you are bundling for web because it already is there.
Hope it is what you are looking for.
When I run tsc, everything runs perfectly fine. However, I cannot understand how you are meant to import other typescript modules from node modules.
This is the important part of my gulp file:
gulp.task('compile-ts', ['clean'], function(){
var sourceTsFiles = [
config.allTs,
config.typings
];
var bundler = browserify({
basedir : "src",
debug : true})
.add("app.ts")
//.add("typings/tsd.d.ts")
.plugin(tsify);
return bundler.bundle()
.pipe(source("bundle.js"))
.pipe(gulp.dest("build"))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write({includeContent: false, sourceRoot: 'src'}));
});
When I use,
import {DataRepository, List} from "tsmvc";
Where tsmvc is a typescript module node module, I get cannot find module tsmvc. Atom doesn't complain and shows me intellisense, tsc doesn't complain, but tsify does.
Can anyone point me to a gulp file doing something similar or explain the process?
Here's the github repo: https://github.com/Davste93/typescript-mvc-consumer/blob/master/gulpfile.js
Prior to version 0.15.3 of tsify, it was not possible to import TypeScript files from within node_modules.
Internally, the tsify plugin creates a transform and Browserify does not transform files under node_modules for non-global transforms. In version 0.15.3 of tsify, the global option was added and can be specified as follows:
var bundler = browserify({
basedir: "src",
debug: true
})
.add("app.ts")
.plugin(tsify, { global: true });
I wrote a unit test for a Gulp file. The test runs through karma using Jasmine Framework (safari/chrome).
Knowing that Karma runs the test file, specified in the json config file, in the browser, it should have a way to run Node's modules in the browser.
After researching, I found that by using Browserify I'll be able to require modules in the browser.
When I write this command
browserify ./Test/GulpTest.js -o ./Test/TEST.js -d
The new TEST.js seems to be big
and I run the following command to start the test on the new TEST.js
karma start karma.conf.js
I get this error:
gulp input stream
✗ should compile from ts to js TypeError: Cannot read property 'isTTY' of undefined
at Object. (/Users/Snap/Desktop/Demo App/Test/TEST.js:75226:20)
at Object.252._process (/Users/Snap/Desktop/Demo App/Test/TEST.js:75284:4)
at s (/Users/Snap/Desktop/Demo App/Test/TEST.js:1:254)
at /Users/Snap/Desktop/Demo App/Test/TEST.js:1:305
at Object.31../lib/PluginError (/Users/Snap/Desktop/Demo App/Test/TEST.js:3530:9)
at Object.239../lib/PluginError (/Users/Snap/Desktop/Demo App/Test/TEST.js:75113:21)
at s (/Users/Snap/Desktop/Demo App/Test/TEST.js:1:254)
at /Users/Snap/Desktop/Demo App/Test/TEST.js:1:305
at Object.229.deprecated (/Users/Snap/Desktop/Demo App/Test/TEST.js:74824:13)
at s (/Users/Snap/Desktop/Demo App/Test/TEST.js:1:254)
Chrome 44.0.2403 (Mac OS X 10.10.4): Executed 1 of 1 (1 FAILED) ERROR
(0.037 secs / 0.03 secs)
it("should compile from ts to js", function () {
var gulp = require("gulp");
var ts = require("gulp-typescript");
var lazy = require("gulp-load-plugins");
var fs = require('graceful-fs');
var should = require('should');
var join = require('path').join;
/*
* * * Compile Typescript to JavaScript
*/
gulp.task("ts-compiler", function () {
return gulp.src("./Test/lib/file.ts")
.pipe(lazy.typescript({
// Generates corresponding .map file.
sourceMap : false,
// Generates corresponding .d.ts file.
declaration : true,
// Do not emit comments to output.
removeComments : false,
// Warn on expressions and declarations with an implied 'any' type.
noImplicitAny : false,
// Skip resolution and preprocessing.
noResolve : false,
// Specify module code generation: 'commonjs' or 'amd'
module : "amd",
// Specify ECMAScript target version: 'ES3' (default), or 'ES5'
target : "ES5"
}))
.pipe(gulp.dest("./Test/lib/dest"));
});
gulp.start("ts-compiler", function () {
console.log("compiling...");
should.exist("./Test/lib/dest/file.js");
});
});
You can't run Gulp inside karma and jasmine—you're running it as if it is a front-end library, and it is not.
You need to use a back-end testing library. You can still use jasmine, you just have to use it through nodejs, which is how gulp runs: https://www.npmjs.com/package/jasmine
You might be interested to see how I wrote unit tests for my gulp tasks where I work: https://github.com/Lostmyname/lmn-gulp-tasks/tree/master/test
I want to run some Jasmine 2.x tests for node.js modules in a Grunt build. My setup looks like this:
src/foo.js
exports.bar = 23;
spec/foo.spec.js
var foo = require("../src/foo.js");
define("foo", function() {
it("exports bar as 23", function() {
expect(foo.bar).toBe(23);
});
});
With grunt-contrib-jasmine the node module system is not available and I get
>> ReferenceError: Can't find variable: require at
>> spec/foo.spec.js:1
There is grunt-jasmine-node, but it depends on jasmine-node which is unmaintained and includes Jasmine 1.3.1, so this is not an option.
Jasmine supports node.js out of the box, by including a file jasmine.json in the spec directory, I can run the tests with the jasmine cli. Is there any clean way to run the same tests from grunt as well?
You could use grunt-exec, which just executes the value as if typed on the command line:
module.exports = function (grunt) {
grunt.initConfig({
exec: {
jasmine: "jasmine"
},
env: {
test: {
NODE_ENV: "test"
}
}
});
grunt.loadNpmTasks("grunt-exec");
grunt.loadNpmTasks("grunt-env");
grunt.registerTask("test", [
"env:test",
"exec:jasmine"
]);
};
This will allow you to keep jasmine up to date as well as use it with other grunt tasks.
I set up grunt to run node.js jasmine tests. For some reason, with this config, the results always show double the tests.
Here is my config:
I'm using jasmine-node which plugs into grunt.
/spec/some-spec.js:
var myModule = require('../src/myModule.js');
describe('test', function(){
it('works', function(done){
setTimeout(function(){
expect(1).toBe(1);
done();
}, 100);
});
});
Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
jasmine_node: {
options: {
forceExit: true
},
all: ['spec/']
}
});
grunt.loadNpmTasks('grunt-jasmine-node');
grunt.registerTask('default', ['jasmine_node']);
};
This results in two tests running rather than one.
> grunt
Running "jasmine_node:all" (jasmine_node) task
..
Finished in 0.216 seconds
2 tests, 2 assertions, 0 failures, 0 skipped
I was able to reproduce the behavior. This is what seems to be happening:
The task looks in the specified folder (spec in your case) for files with spec in the name.
Then it looks again in every folder in the whole project for files with spec in the name.
What it ends up with is 2 overlapping sets of test files to run.
My first attempt at trying to coerce it into more logical behavior was to set specNameMatcher: null (default is 'spec'), and leave the folder set to 'spec/'. This results in no tests being run, since apparently both conditions (name and folder) must be met for files in the specified folder. You get the same problem if specNameMatcher is left at the default value, but the files in the folder don't have 'spec' in the name.
What does work is to set the folder (or 'test set' or whatever you want to call it) to []:
jasmine_node: {
options: {
forceExit: true
},
all: []
}
The catch is that if you have any other files somewhere else in the project with 'spec' in the name, they'll be mistaken for tests by jasmine.
I would consider this behavior a bug, and it should probably be reported via the project's github issues page.
This grunt plugin ( https://github.com/jasmine-contrib/grunt-jasmine-node ) seems to be dead ( https://github.com/jasmine-contrib/grunt-jasmine-node/issues/60 ).
Maybe it is a better to switch to https://github.com/onury/grunt-jasmine-nodejs ?
The jasmine-node project is pretty old. The latest commit is from July of 2014. The grunt-jasmine-node plugin appears to be active, but running against something that is going stale seems a little pointless IMHO.
To test CommonJS modules using Jasmine I'd recommend using Karma along with the
karma-jasmine and karma-commonjs plugins. I got your example working with the following files:
package.json
{
"private": "true",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-jasmine-node": "^0.3.1",
"grunt-karma": "^0.10.1",
"jasmine-core": "^2.3.4",
"karma": "^0.12.31",
"karma-commonjs": "0.0.13",
"karma-jasmine": "^0.3.5",
"karma-phantomjs-launcher": "^0.1.4"
}
}
karma.conf.js
module.exports = function(config) {
config.set({
basePath: '.',
frameworks: ['jasmine', 'commonjs'],
files: [{
pattern: 'src/**/*.js'
}, {
pattern: 'spec/**/*.js'
}],
preprocessors: {
'src/**/*.js': ['commonjs'],
'spec/**/*.js': ['commonjs']
},
reporters: ['progress'],
browsers: ['PhantomJS']
});
};
Gruntfile.js (optional if you still want to use grunt)
module.exports = function(grunt) {
grunt.initConfig({
karma: {
unit: {
configFile: 'karma.conf.js',
options: {
singleRun: true
}
}
}
});
grunt.loadNpmTasks('grunt-karma');
grunt.registerTask('default', ['karma:unit']);
};
You should also install the karma command line runner globally, just like you probably did with grunt. npm install -g karma-cli
From your command line you can start karma by typing karma start. It will run the tests and then watch your files and re-run them on every save. (VERY NICE)
Alternatively you can run karma start --single-run to have it just run your tests once and exit. If you also updated your Gruntfile you can also just run grunt to run the tests once.
The current up voted answer isn't the solution. You simply modify the expression that's going to match your tests. The answer is as follows:
module.exports = function(grunt) {
grunt.initConfig({
jasmine_node: {
options: {
forceExit: true
},
all: ['spec/*spec.js']
}
});
grunt.loadNpmTasks('grunt-jasmine-node');
grunt.registerTask('default', ['jasmine_node']);
};
Here you can see that 'all' is set to *'spec/spec.js'. This will search for all tests.
Secondly, just because a project hasn't had a recently commit, doesn't mean it's "old". jasmine-node is simply stable.
I have the same issue using grunt-jasmine-node, and as aeryaguzov points out, that project is no longer maintained. Switching to grunt-jasmine-node-new solves the issue for me.
grunt-jasmine-node-new is a fork of grunt-jasmine-node that is actively maintained, and can be found here: https://www.npmjs.com/package/grunt-jasmine-node-new