Develop Reference

karma-test-shim.js calling TestBed.initTestEnvironment, but no effect. TestBed must be initialized again

I am currently trying to get unit testing working with Angular2 final and karma + jasmine.
I have the following problem:
TypeError: Cannot read property 'injector' of null if don't add: TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting())
.configureTestingModule({
declarations: [],
providers: [Stuff],
imports: [Stuff]
});
To my test.
But I can only call the initTestEnvironment and configureTestingModule once, so more than 1 test is not possible. And I'd like to prevent having an init test.
Here is my karma-test-shim.js
// #docregion
// /*global jasmine, __karma__, window*/
Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.
// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
// Error.stackTraceLimit = Infinity; //
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
var builtPath = '/base/app/';
__karma__.loaded = function () { };
function isJsFile(path) {
return path.slice(-3) == '.js';
}
function isSpecFile(path) {
return /\.spec\.(.*\.)?js$/.test(path);
}
function isBuiltFile(path) {
return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
}
var allSpecFiles = Object.keys(window.__karma__.files)
.filter(isSpecFile)
.filter(isBuiltFile);
System.config({
baseURL: '/base',
// Extend usual application package list with test folder
packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },
// Assume npm: is set in `paths` in systemjs.config
// Map the angular testing umd bundles
map: {
'#angular/core/testing': 'npm:#angular/core/bundles/core-testing.umd.js',
'#angular/common/testing': 'npm:#angular/common/bundles/common-testing.umd.js',
'#angular/compiler/testing': 'npm:#angular/compiler/bundles/compiler-testing.umd.js',
'#angular/platform-browser/testing': 'npm:#angular/platform-browser/bundles/platform-browser-testing.umd.js',
'#angular/platform-browser-dynamic/testing': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'#angular/http/testing': 'npm:#angular/http/bundles/http-testing.umd.js',
'#angular/router/testing': 'npm:#angular/router/bundles/router-testing.umd.js',
'#angular/forms/testing': 'npm:#angular/forms/bundles/forms-testing.umd.js',
},
});
System.import('systemjs.config.js')
.then(importSystemJsExtras)
.then(initTestBed)
.then(initTesting);
/** Optional SystemJS configuration extras. Keep going w/o it */
function importSystemJsExtras(){
return System.import('systemjs.config.extras.js')
.catch(function(reason) {
console.log(
'WARNING: System.import could not load "systemjs.config.extras.js"; continuing without it.'
);
console.log(reason);
});
}
function initTestBed(){
return Promise.all([
System.import('#angular/core/testing'),
System.import('#angular/platform-browser-dynamic/testing')
])
.then(function (providers) {
var coreTesting = providers[0];
var browserTesting = providers[1];
console.log("call initTestEnvironment")
coreTesting.TestBed.initTestEnvironment(
browserTesting.BrowserDynamicTestingModule,
browserTesting.platformBrowserDynamicTesting());
console.log("call configure teting module")
coreTesting.TestBed.configureTestingModule({
declarations: [],
providers: [],
imports: []
})
})
}
// Import all spec files and start karma
function initTesting () {
return Promise.all(
allSpecFiles.map(function (moduleName) {
return System.import(moduleName);
})
)
.then(__karma__.start, __karma__.error);
}
I thought calling the initTestEnvironment in the test shim is enough. I am surprised that I the call in the karma-test-shim.js seems to have no effect.
package.json and code are in a related question: AsyncTestCompleter Browserify Angular2 HTTP Mock Test
Thank you so much for your help.

RequireJS: How do I pass variables from one file to another?

I'm using require with backbone + backbone-forms. I'm currently using RequireJS to seperate code into multiple files. I have models stored in separate files and want to keep form validators separately.
However, I am unable to access variables defined in one files, in another file that depends on this one. What I get is Uncaught ReferenceError: isEmptyName is not defined. isEmptyName is defined in validators and used in model. Any feedback about RequireJS config is also appreciated.
My config:
requirejs.config({
//By default load any module IDs from js/lib
baseUrl: 'js',
paths: {
jquery: 'lib/jquery',
app: 'lib/app',
wizard: 'lib/jquery.bootstrap.wizard.min',
bootstrap: 'lib/bootstrap.min',
underscore: 'lib/underscore-min',
backbone: 'lib/backbone-min',
backboneForms: 'lib/backbone-forms.min',
langSwitcher: 'lib/lang',
cookie: 'lib/cookie',
datepicker: 'lib/bootstrap-datepicker',
mask: 'lib/jquery.maskedinput.min',
validators: 'modules/validators',
// models
personalData: 'models/personal-data',
addressData: 'models/address-data',
workData: 'models/work-data',
productsData: 'models/products-data',
statmentData: 'models/statment-data',
model: 'models/form',
collection: 'collections/form',
view: 'views/form',
setup: 'setup',
send: 'send',
},
shim: {
'underscore': {
deps: ['jquery'],
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'backbone'
},
// all model needs to go within one collection
'bootstrap' : ['jquery'],
'wizard': ['jquery'],
'backboneForms': ['backbone'],
'validators': ['backbone','mask'],
'personalData' : ['backbone','backboneForms','validators'],
'addressData': ['backbone','backboneForms'],
'workData': ['backbone','backboneForms'],
'statmentData': ['backbone','backboneForms'],
//'collection': ['backbone','backboneForms','personalData'],
//'view': ['backbone','backboneForms','personalData']
}
});
Beginning of validators.js
require(['backbone','backboneForms'], function(){
var lettersOnly = /^[A-Za-zęóąśłżźćńĘÓĄŚŁŻŹĆŃ]+$/;
var lettersOnlyDash = /^[A-Za-zęóąśłżźćńĘÓĄŚŁŻŹĆŃ\-]+$/;
var err = {};
var errCh = {};
var errFormat = {};
var isEmptyName = function(value){
err = { message: 'Wpisz imię.'};
if (value.length === 0) return err;
};
Beginning of model.js that needs the validators in validators.js
require(['backbone','backboneForms','mask','validators'], function(backbone,backboneForms,mask,validators){
var PersonalData = Backbone.Model.extend({
schema: {
first_name:{
title: 'Imię',
validators: [isEmptyName, isLetter, minCharCount] //Accessing validators.js members here...
}, ...

I think you're using require when what you really need is define. From When should I use require() and when to use define()?,
With define you register a module in require.js that you than can
depend on in other module definitions or require statements. With
require you "just" load/use a module or javascript file that can be
loaded by require.js.
So here, you have some variables that are defined in one file, but are required to be accessed in another file. Seems like a 'Module', doesn't it? So now, you have two ways of using this file as a module:
Conform to AMD-ness
Conform to chaotic javascript global variable-ness
Using the AMD Approach
validators.js is now a module. Anybody wishing to use 'validator functions' can depend on this module to provide it for them. That is,
define(['backbone','backboneForms'], function(){
var lettersOnly = /^[A-Za-zęóąśłżźćńĘÓĄŚŁŻŹĆŃ]+$/;
var isEmptyName = function(value){
err = { message: 'Wpisz imię.'};
if (value.length === 0) return err;
return {
someVariable: lettersOnly,
someFunction: isEmptyName
}
};
You'll notice that the require has been replaced with define. Now, when somebody (model) depends on validator.js, they can access their dependencies as follows
require(['backbone','backboneForms','mask','validators'],
function(backbone, backboneForms, mask, validators) {
var isEmptyNameReference = validators.someFunction;
...
Using shim
Check Requirejs why and when to use shim config, which references this link which says,
if we were to just add the backbone.js file to our project and list
Backbone as a dependency from one of our modules, it wouldn’t work.
RequireJS will load backbone.js, but nothing in backbone.js registers
itself as a module with RequireJS. RequireJS will throw up its hands
and say something like, “Well, I loaded the file, but I didn’t find
any module in there.”
So, you could have your validator.js populate a global Validator namespace, and still use it the way we used it in the example above.
function(){
var lettersOnly = /^[A-Za-zęóąśłżźćńĘÓĄŚŁŻŹĆŃ]+$/;
var isEmptyName = function(value){
err = { message: 'Wpisz imię.'};
if (value.length === 0) return err;
Globals.Validator = {
someVariable: lettersOnly,
someFunction: isEmptyName
}
}();
Your config.js would then be,
shim: {
'validator': {
deps: ['backbone','backboneForms'],
exports: 'Globals.Validator'
},
...
Note that you can alias the namespace as you wish, but the alias is just a reference to the existing global object/namespace. This is helpful if you have, say, Foo.Bar.Foobar as your namespace, but want to refer to it as FB. Shimming, hence, is a way for non-AMD libraries to adapt to AMD usage. In this case, option 1 should be sufficient.

requirejs including module that returns an object in another similar module

I am facing a weird issue in a requirejs/backbonejs application. I have a Globals.js file which returns reusable utilities. It looks something like this.
define(
['newapp/routers/index', 'newapp/controllers/index', 'newapp/utilities'],
function(Router, Controller, Utilities) {
return {
router: new Router({controller: Controller}),
utilities: Utilities,
navigate: function(path, opts) {
this.router.navigate('app/' + path, opts);
}
}
})
When I require this module in modules that return Backbone Views, it is able to resolve Globals to an object and call methods on it. However, when I try to include it in a module that returns another object, it's resolved to undefined.
For example the code below is able to resolve Globals to the properties it exposes
define(
['marionette', 'templates', 'newapp/globals', 'newapp/views/Loader'],
function(M, T, Globals, mixins){
"use strict";
return M.ItemView.extend(
_.extend({}, mixins, {
template: T.brandPageInfo,
events: {
'click #getProductsForBrands': 'getProductsForBrands',
'click button[id^="goto__"]': 'actionOnGotoButtons'
},
onRender: function() {
this.flatIconsOnHover();
},
getProductsForBrands: function(e) {
e.preventDefault();
var searchQuery = this.model.get('name');
Globals.navigate('search?q=' + searchQuery, {trigger: true});
}
})
)
})
But the code below gives an error: Globals is undefined
define(
[
'newapp/collections/Boards', 'newapp/globals'
],
function(
BoardsCollection, Globals
) {
var boardsList;
return {
ensureBoardList: function() {
var defer = $.Deferred();
if (!boardsList || (boardsList && !boardsList.length)) {
boardsList = new BoardsCollection();
boardsList.fetch({
data: {_: (new Date()).getTime()},
success: function (boardsListCbData) {
boardsList = boardsListCbData;
defer.resolve(boardsList);
}
})
} else {
defer.resolve(boardsList);
}
return defer.done(function (boardsList) {
//make the boardsList usable for direct UI rendering by any view
return Globals.utilities.getFormattedBoardsCollection(boardsList);
});
}
}
})
How do I make Globals accessible in the second example?

Make sure you don't have any circular dependencies e.g.:
globals depends on newapp/controllers/index
newapp/controllers/index depends on the last module you displayed (we'll call it module M)
module M depends on global
Since each module depends on the other, the only thing RequireJS can do is set one of them to undefinedto "break the cycle" and get the other modules to load.
As far as I can tell, this is the most probable source of your problem, not the fact that you're returning another object.

method won't trigger when using requireJS

I have some issue with some requireJS setup. I posted a question before but the scope of the latest changed now.
I have some
requirejs.config({
paths: {
'tmpl': 'vendor/upload/tmpl.min'
}
});
require({
paths: {
'videoupload': 'vendor/upload/jquery.ui.videoupload'
}
}, ['js/main_video.js'], function (App) {
App.initial_video_upload();
});
and finally in main_video.js :
define(['tmpl', 'videoupload'], function () {
function initial_video_upload(tmpl, videoupload) {
'use strict';
$('#videoupload').videoupload({
//...some code
});
}
return{
initial_video_upload: initial_video_upload
}
}
);
This code works perfectly if I don't use requireJS (loading classically each file). In fact, when this code is triggered, I keep on having a message Uncaught TypeError: Object [object Object] has no method 'tmpl', this method is defined in tmpl.min.js. And this method is invoked in vendor/upload/jquery.ui.videoupload, as so
$.widget('videoupload', {
//...
_renderVideo: function (video) {
this._templateElement().tmpl({
id: video.id,
name: video.title
}).appendTo(this._listElement()).find(
this.options['delete-selector']
);
return this;
},
//...
How can I manage that ? (I had earlier an error time out message for this method tmpl, but it disappeared now, so I don't think this is it)

In the configuration object, the path is not the full path to the JS file BUT the path to the directory containing the JS file, so you may want to do something like this in the main_video.js file:
requirejs.config({
paths:{
'upload': 'vendor/upload'
}
});
define(['upload/tmpl','upload/jquery_videoupload'],function(tmpl, videoupload) {
function initial_video_upload(tmpl,videoupload){
'use strict';
$('#videoupload').videoupload({
//...some code
});
}
return{
initial_video_upload: initial_video_upload
}
}
);
And in the main app:
requirejs.config({
paths:{
'js': 'path/to/your/js/folder'
}
});
require(['js/main_video'], function(App) {
App.initial_video_upload();
});

There's a problem in the questions code, so this:
define(['tmpl', 'videoupload'], function () {
should become this:
define(['tmpl', 'videoupload'], function (tmpl, videoupload) {
The first one doesn't expose loaded dependencies to local variables of closure function, so that's might be a problem, although it's not very clear if it's the only one, from the provided code.
I would also like to mention, that it's not a good thing to use multiple requre.js configs, if you're intended to use optimizer. The configs will be overwritten by the last one, so it's a good idea actually to have only one config for the whole project.
Like this:
requirejs.config({
paths: {
'tmpl': 'vendor/upload/tmpl.min',
'videoupload': 'vendor/upload/jquery.ui.videoupload'
}
});

How to use relative paths in require.config?

I'd like to distribute a piece of code as an AMD module. The module depends on jQuery in a noConflict mode with two jQuery plugins.
I'd like the user to be able to use the module by simply requiring a single module file (module will be hosted on our servers), and let the dependencies be handled for them. However, for the dependencies to be loaded properly, I have to invoke require.config() and it seems to have the module paths relative to the web page, not to the invoking script. I could use the paths configuration to make all the paths absolute. That would solve the dependency problem, but would also make testing anywhere outside our production server a nightmare.
To be more specific, the module file looks roughly like this:
define (['./jquery-wrapper'], function ($) {
...
return module;
});
And the jquery-wrapper.js file in the same directory looks like this:
require.config ({
paths: {
'jquery-original': '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min',
// ^ naturally, this one has to be absolute
},
shim: {
'jquery-original': {
exports: '$',
},
'../plugin/js/jquery.nouislider.min': {
// ^ this path is relative to the web page, not to the module
deps: ['jquery-original'],
},
'../plugin/js/jquery.ie.cors': {
// ^ this path is relative to the web page, not to the module
deps: ['jquery-original'],
},
},
});
define (['jquery-original', './jquery.nouislider.min', './jquery.ie.cors'], function ($, slider, cors) {
// ^ these paths are relative to the module
console.log ('types: ' + typeof slider + typeof $.noUiSlider + typeof cors);
return $.noConflict (true);
});
Is there any way I can use paths relative to the module everywhere?

I think you can use separate configs to get this to work:
file structure
The other/module path simulates the other server in this example.
¦ a.js
¦ b.js
¦ c.js
¦ test.html
¦
+---other
+---module
main.js
module-file-1.js
other/module/main.js
Has a dependency, using a relative module name.
define(["./module-file-1"], function (mf1) {
console.log("load main", "deps", mf1);
return "main";
});
a.js
Has a dependency, using a relative module name.
define(["./b"], function(b) {
console.log("load a", "deps", b);
return "a";
});
b.js and c.js
Uninteresting.
define(function () {
console.log("load b");
return "b";
});
other/module/module-file-1.js
Uninteresting.
define(function () {
console.log("load module-file-1");
return "module-file-1";
});
test.html
Set up two require contexts, use each to load their own modules, and then wait for both sets of modules to load:
<script src="http://requirejs.org/docs/release/2.1.8/comments/require.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var localRequire = require({
context: "local"
});
var moduleRequire = require({
context: "module",
baseUrl: "http://localhost/other/module/"
});
function deferredRequire(require, deps) {
return $.Deferred(function(dfd) {
require(deps, function() {
dfd.resolve.apply(dfd, arguments);
});
}).promise();
}
$.when(deferredRequire(moduleRequire, ["main"]), deferredRequire(localRequire, ["a", "b", "c"])).then(function(deps1, deps2) {
// deps1 isn't an array as there's only one dependency
var main = deps1;
var a = deps2[0];
var b = deps2[1];
var c = deps2[2];
console.log("Finished", main, a, b, c);
});
</script>
Console
load b
load a deps b
load c
load module-file-1
load main deps module-file-1
Finished main a b c