Develop Reference

How to change script tag url automatically on build

I'm running Backbone with node using the following code in index.html
<script src="js/api/require.js"></script>
<script>require(['js/require-cfg'],function(){require(['main'])});</script>
main.js looks like this:
require(['app'],
function(App){
App.initialize();
}
);
In production, I compile the files using r.js into main-build.js and redirect the link in the index.html file from main to main-build:
<script>require(['js/require-cfg'],function(){require(['main-build'])});</script>
Currently, if I want to deploy my code to production, I have to either manually change from main to main-build in index.html, or keep the link as main-build but change the contents of main-build.js to the same as main.js when I run a local or test environment, then switch back when deploying to production.
Is there a better (automatic) way of having the code use the compiled main-build.js when in production, and the content of main.js when in local or test environment?
eg: using node environment variables to either change the links in index.html (not sure how to change html!) or change the content of main-build.js but the content gets overwritten everytime r.js is run to compile for production

I personally use Gulp to process the index.html file with gulp-html-replace.
In development, you put the tags you need.
<script src="js/api/require.js"></script>
<!-- build:js -->
<script>require(['js/require-cfg'],function(){require(['main'])});</script>
<!-- endbuild -->
To make a build for production, create a gulp task which uses the gulp-html-replace plugin :
var gulp = require('gulp'),
htmlreplace = require('gulp-html-replace');
gulp.task('build', function() {
return gulp.src("index.html")
.pipe(htmlreplace({
js: {
src: [['main-build']],
tpl: '<script>require(["js/require-cfg"],function(){require(["%s"])});</script>'
},
}))
.pipe(gulp.dest("build/index.html"));
});
If you go the Gulp route, you could make all the build process through it. For example, here's a simple r.js task:
var rjs = require('requirejs');
gulp.task('optimize', function(done) {
rjs.optimize({
name: "main",
out: "build/js/main.min.js",
/* ...other options */
}, function(buildResponse) {
done();
}, done);
});

testing code transpiled for es6

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.

ReferenceError: module is not defined - Karma/Jasmine configuration with Angular/Laravel app

I have an existing Angular/Laravel app in which Laravel acts as an API to the angular frontend serving only JSON data. The page that loads the angular app, index.php, is currently served by Laravel. From there, Angular takes over.
I'm have a very difficult time trying to get started with Karma/Jasmine. When running my tests using karma start or karma start karma.conf.js from the root directory of my project, I get the following error:
ReferenceError: module is not defined
Full output:
INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [watcher]: Pattern "/Users/raph/coding/webroot/digitalocean/rugapp/public/rugapp/*.js" does not match any file.
INFO [Chrome 39.0.2171 (Mac OS X 10.9.5)]: Connected on socket 3OCUMp_xhrGtlGHwiosO with id 7897120
Chrome 39.0.2171 (Mac OS X 10.9.5) hello world encountered a declaration exception FAILED
ReferenceError: module is not defined
at Suite.<anonymous> (/Users/raph/coding/webroot/digitalocean/rugapp/tests/js/test.js:3:16)
at jasmineInterface.describe (/Users/raph/coding/webroot/digitalocean/rugapp/node_modules/karma-jasmine/lib/boot.js:59:18)
at /Users/raph/coding/webroot/digitalocean/rugapp/tests/js/test.js:1:1
Chrome 39.0.2171 (Mac OS X 10.9.5): Executed 2 of 2 (1 FAILED) (0.005 secs / 0.003 secs)
However, the chrome broswer does launch with the following displayed:
My karma.conf.js file is as follows:
// Karma configuration
// Generated on Mon Dec 22 2014 18:13:09 GMT-0500 (EST)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: 'public/rugapp/',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'*.html',
'**/*.js',
'../../tests/js/test.js',
'../../tests/js/angular/angular-mocks.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// 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: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};
My package.json file is shown below:
{
"devDependencies": {
"gulp": "^3.8.8",
"karma": "^0.12.28",
"karma-chrome-launcher": "^0.1.7",
"karma-jasmine": "^0.3.2",
"laravel-elixir": "*"
}
}
test.js
describe("hello world", function() {
var CreateInvoiceController;
beforeEach(module("MobileAngularUiExamples"));
beforeEach(inject(function($controller) {
CreateInvoiceController = $controller("CreateInvoiceController");
}));
describe("CreateInvoiceController", function() {
it("Should say hello", function() {
expect(CreateInvoiceController.message).toBe("Hello");
});
});
});
describe("true", function() {
it("Should be true", function() {
expect(true).toBeTruthy();
});
});
Any help would be greatly appreciated.

Perhaps this will help someone.
The solution, for me, was to make sure angular-mocks.js was loaded before my tests. If you're not sure, you control the order in karma.conf.js under the following section:
// list of files / patterns to load in the browser
files: [
// include files / patterns here
Next, to get my test to actually load my angular app, I had to do the following:
describe("hello world", function() {
var $rootScope;
var $controller;
beforeEach(module("YourAppNameHere"));
beforeEach(inject(function($injector) {
$rootScope = $injector.get('$rootScope');
$controller = $injector.get('$controller');
$scope = $rootScope.$new();
}));
beforeEach(inject(function($controller) {
YourControllerHere = $controller("YourControllerHere");
}));
it("Should say hello", function() {
expect(YourControllerHere.message).toBe("Hello");
});
});
And in your controller,
app.controller('YourControllerHere', function() {
this.message = "Hello";
});
Also, another way:
describe("YourControllerHere", function() {
var $scope;
var controller;
beforeEach(function() {
module("YourAppNameHere");
inject(function(_$rootScope_, $controller) {
$scope = _$rootScope_.$new();
controller = $controller("YourControllerHere", {$scope: $scope});
});
});
it("Should say hello", function() {
expect(controller.message).toBe("Hello");
});
});
Enjoy testing!

The error means angular was not able to inject your module. Most of the time this happens because of missing reference to script files. In this case, make sure to have all your script file is defined under [files] configuration of karma. Pay special attention to paths because if your script folder has nested structure, make sure to list as such. For example:
Scripts/Controllers/One/1.js
Scripts/Controllers/One/2.js
can be listed as in karma.conf.js>files as :
Scripts/Controllers/**/*.js

Just leave this here for future searchers.
If you are running angular unit tests in the browser directly without Karma (or in plunkr or jsfiddle ect...) Then it may be that
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular-cookies.js"></script>
<!-- The Mocha Setup goes BETWEEN angular and angular-mocks -->
<script>
mocha.setup({
"ui": "bdd",
"reporter": "html"
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular-mocks.js"></script>
<script src="myApp.js"></script>
<script src="myTest.js"></script> <!-- test is last -->
The Mocha Setup goes BETWEEN angular and angular-mocks

I encountered a similar message and turned out I got my angular-mocks file path wrong. I used npm to install angular and angular-mocks, and I specified their path wrongly in my Karma.conf.js like this:
files: [
'node_modules/angular/angular.js',
'node_modules/angular/angular-mocks.js',
'scripts/*.js',
'tests/*.js'
],
I should specify the path of angular-mocks.js as this:
'node_modules/angular-mocks/angular-mocks.js'
Very simple error, but could be time-consuming to locate if you just started with AngularJS unit testing and didn't know where to look.

Error In Getting AngulaJS + Angular AMD + RequireJS to Work with Karma and Jasmine

I ma trying to add Karma & Jasmine+Require Js based Unit testing support for an AngularJS +Angular AMD & RequireJS Application that I have created. I have been wrecking my brain around this for two days now but I am still nowhere close to sealing the deal.
I keep getting the error :
INFO [karma]: Karma v0.12.21 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 36.0.1985 (Mac OS X 10.9.4)]: Connected on socket 8oFHaa2hqJPs0ecgIXCa with id 31963369
Chrome 36.0.1985 (Mac OS X 10.9.4) ERROR: 'There is no timestamp for ../www/scripts/specs/UserControllerTest.js!'
WARN [web-server]: 404: /www/scripts/specs/UserControllerTest.js
Chrome 36.0.1985 (Mac OS X 10.9.4) ERROR
Uncaught Error: Script error for: specs/UserControllerTest
http://requirejs.org/docs/errors.html#scripterror
at /usr/local/lib/node_modules/requirejs/require.js:141
My Code is as follows :
The Karma Config file :
// Karma configuration
// Generated on Fri Aug 15 2014 20:49:40 GMT+1000 (EST)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '.',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine', 'requirejs'],
// list of files / patterns to load in the browser
files: [
'test-main.js',
{pattern: 'specs/*.js', included: true}
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// 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: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};
My test-main.js file.
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;
var pathToModule = function(path) {
return path.replace(/^\/base\//, '').replace(/\.js$/, '');
};
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
allTestFiles.push(pathToModule(file));
}
});
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: '../www/scripts',
// alias libraries paths
paths: {
'angular': '../libs/angular',
'angular-route': '../libs/angular-route',
'angular-animate':'../libs/angular-animate',
'angular-mocks':'../libs/angular-mocks',
'angularAMD': '../libs/angularAMD.min',
'Framework7':'../libs/framework7',
'UserController':'controller/UserCtrl',
'WebCallManager':'services/WebCallManager'
},
// Add angular modules that does not support AMD out of the box, put it in a shim
shim: {
'angularAMD': ['angular'],
'angular-route': ['angular'],
'angular-animate':['angular'],
'angular-mocks':['angular'],
'Framework7':{exports: 'Framework7'}
},
//kick start application
//deps: ['app'],
// dynamically load all test files
deps: allTestFiles,
// we have to kickoff jasmine, as it is asynchronous
callback: window.__karma__.start
});
And My Unit Test is :
describe('UserController', function () {
var scope,controller;
//mock Application to allow us to inject our own dependencies
beforeEach(angular.mock.module('app'));
//mock the controller for the same reason and include $rootScope and $controller
beforeEach(angular.mock.inject(function($rootScope, $controller) {
//create an empty scope
scope = $rootScope.$new();
//declare the controller and inject our empty scope
$controller('UserController', {$scope: scope});
}));
it('checks the controller name', function () {
expect(scope.name).toBe('Superhero');
});
});
I have uploaded all my code of my project to link here. Anyone who can help me with this is highly appreciated. I think In am at the end of my tether with this.

marcoseu is right, the There is no timestamp for... error means karma cant find the the file, but there is more.
I'd recommend making karma's base path your project root. This avoids Karma making the file paths absolute instead of relative which keeps things simpler and avoids path reference problems (at least on my windows OS).
Your test should be a require module (i.e. using define) so it can be sure the objects it requires are fully loaded. See the example test at http://karma-runner.github.io/0.12/plus/requirejs.html
karma.config.js
basePath: "../",
files: [
'test/test-main.js',
{pattern: 'test/specs/*.js', included: false},
{pattern: 'www/**/*.js', included: false},
],
Now your files are all served by Karma under /base.
test-main.js
require.config({
baseUrl: "/base/www/scripts",
Debugging
But most importantly you can debug all of this. Run Karma, switch to the Karma created chrome instance, click the debug button, open the chrome developer tools. Check the console, and your source files. Especially the source of debug.html, as at the bottom it has the definition of all your karma served files.
You can also set breakpoints and then refresh the page to watch the tests being executed. You will be able to see for yourself why you are getting test errors. Win.

The error There is no timestamp for... means that karma is unable to access the file in question. You need to define the www directory so that is is accessible by karma. Try the following:
karma.config.js
files: [
'test-main.js',
{pattern: './specs/*.js', included: true},
{pattern: '../../www/**/*.js', included: false}
],
Take a look at karma.conf in the angularAMD project and the Karma documentation for files.

Dojo 1.9 and Intern 1.7 - require.on is not defined?

Dojo 1.9 and Intern 1.7
I am having a problem with Intern in that it's reporting that require.on is not defined and my test suite is falling over.
This is only happening when trying to define a test that includes a widget. it looks like when the widget package is requried then it hits a line require.on("idle", onload) but fails because require.on is undefined.
As a test, I defined require.on and the test does not fall over.
All I can think of is that the version of dojo that intern ships with is interfering with the normal dojo module when requiring widgets using intern?
Here is a cut down version of my test:
define([
"intern!object",
"intern/chai!expect",
"dijit/form/Button"
],
function (
registerSuite,
expect,
Button) {
registerSuite({
name: "Simple test",
"failing test for demo" : function (){
expect(true).to.be.false;
}
});
});
Here is my configuration:
define({
// The port on which the instrumenting proxy will listen
proxyPort: 9000,
// A fully qualified URL to the Intern proxy
proxyUrl: 'http://localhost:9000/',
// Default desired capabilities for all environments. Individual capabilities can be overridden by any of the
// specified browser environments in the `environments` array below as well. See
// https://code.google.com/p/selenium/wiki/DesiredCapabilities for standard Selenium capabilities and
// https://saucelabs.com/docs/additional-config#desired-capabilities for Sauce Labs capabilities.
// Note that the `build` capability will be filled in with the current commit ID from the Travis CI environment
// automatically
capabilities: {
'selenium-version': '2.40.0'
},
// Browsers to run integration testing against. Note that version numbers must be strings if used with Sauce
// OnDemand. Options that will be permutated are browserName, version, platform, and platformVersion; any other
// capabilities options specified for an environment will be copied as-is
environments: [
{ browserName: 'chrome' }
],
// Maximum number of simultaneous integration tests that should be executed on the remote WebDriver service
maxConcurrency: 3,
// Whether or not to start Sauce Connect before running tests
useSauceConnect: false,
// Connection information for the remote WebDriver service. If using Sauce Labs, keep your username and password
// in the SAUCE_USERNAME and SAUCE_ACCESS_KEY environment variables unless you are sure you will NEVER be
// publishing this configuration file somewhere
webdriver: {
host: 'localhost',
port: 4444
},
// Configuration options for the module loader; any AMD configuration options supported by the specified AMD loader
// can be used here
loader: {
// Packages that should be registered with the loader in each testing environment
packages: [
{
name: "dojo",
location: "libs/dojo"
}{
name: "dijit",
location: "libs/dijit"
},{
name: "unitTests",
location: "test/unit"
}
]
},
// Non-functional test suite(s) to run in each browser
suites: [ /* 'myPackage/tests/foo', 'myPackage/tests/bar' */
"unitTests/exampleTest"
],
// Functional test suite(s) to run in each browser once non-functional tests are completed
functionalSuites: [ /* 'myPackage/tests/foo', 'myPackage/tests/bar' */
],
// A regular expression matching URLs to files that should not be included in code coverage analysis
excludeInstrumentation: /^tests\//
});
Folder structure is:
app/
libs/
dojo
dijit
intern
test/
unit/
exampleTest.js
intern.js
I am running the test straight from the google chrome browser:
http://{webroot}/app/libs/intern/client.html?config=../test/intern
I do have some tests that run successfully but do not include any widgets.
Thanks for any help.

You are running an outdated version of Dojo 1.9 that expects that the AMD loader being used is the one that comes with Dojo 1.9, which is not the case in a default installation of Intern. You have two options:
Upgrade to Dojo 1.9.3 or later. (Recommended.)
Use the useLoader configuration option to point to dojo.js from your copy of Dojo 1.9:
define({
// ...
useLoader: {
'host-browser': 'path/to/dojo1.9/dojo.js'
}
})