Develop Reference

Mock modules using jest that are imported using import * to test react components

File name Postman.js
"use strict";
define([], function() {
var postManSingleton = (function() {
var postManInstance
, createPostMan = function() {
var events = {};
return {
publish: function(event, payload) {
if(!events.hasOwnProperty(event))
return;
events[event].forEach(function(listener){
listener(payload || {});
});
},
subscribe: function(event, listener) {
if(!events.hasOwnProperty(event))
events[event] = [];
var index = events[event].push(listener)-1;
return {
remove: function () {
delete events[event][index];
}
}
}
}
};
return {
getInstance: function() {
if(!postManInstance)
postManInstance = createPostMan();
return postManInstance;
}
}
}());
return postManSingleton.getInstance();
});
Importing this file as in index.test.js
import * as Postman from 'postman.js';
How do I mock its publish and subscribe events in jest.
I have tried
jest.mock('Postman.publish', () =>({//some code}))
Error : Cannot find module Postman.publish from 'index.test.js'
Please help how it is possible to mock the above file. Is it even possible?

Your Postman.js is in AMD & Jest does not support AMD. So you need to convert AMD to commonjs.
You can use babel-plugin-transform-amd-to-commonjs for conversion.

javascript custom module system

i am trying to make a custom module based application myself.
1st the idea:
i want to have couple of modules which all will represent a file )
1 module: Object, with filename. Object.js
2nd module: Utils, with filename Utils.js
now as you can see in my code i am using get script to load all those files and prepare a global app object which i can use all accross my application.
However i want to combine all my js at the end of the development and minify it, so basically i dont know how to check ( and register ) those modules with requiring the file itself. Here are my app.js and my Object.js
app.js:
var shop = (function () {
'use strict';
var modules = [];
var getModulesDir = function () {
return document.location.origin + "/js/App/modules/"
}
var registerDefaultModules = function () {
modules.push({
name: "Object",
alias: "Object"
}, {
name: "Utils",
alias: "Utils"
});
};
var loadModules = function () {
jQuery.each(modules, function (key, module) {
if (module.name == "") {
console.error("loading script without name");
return true;
}
if (module.alias == "") {
module.alias = module.name;
}
if (typeof shop[module.alias] !== "undefined") {
return true;
}
window.moduleAlias = module.alias;
var path = "";
if (typeof module.path != "undefined") {
path = module.path;
}
if (path == "") {
path = getModulesDir() + module.name.split('.').join('/') + ".js";
}
$.getScript(path)
.done(function (script, textStatus) {
})
.fail(function (jqxhr, settings, exception) {
console.error('failed loading a script')
});
});
}
var init = function () {
registerDefaultModules();
loadModules();
}
return {
init: init
};
})();
jQuery(document).ready(function () {
shop.init();
});
Object.js
(function($, app) {
$(window).load(function(event) {
'use strict';
app.Object = {
getSize: function(object) {
var size = 0,
property;
for (property in object) {
if (object.hasOwnProperty(property)) {
size++;
}
}
return size;
}
}
return app;
});
})(jQuery, shop);
i could be totally wrong, and if so would be nice if someone show me the right way of doing it.

Angular2 Http Providers on ES5 (not TypeScript)

I'm working on an app and I'm playing around with Angular2 for fun. I'm using ES5 JavaScript, and my question right now is how do I access the Http service? All of the documentation available is TypeScript (which is not helpful) or it's for an alpha version of Angular2, and the system has changed since.
I'm using Angular2 version 2.0.0-beta.13. I am receiving the following error: TypeError: ng.http.get is not a function in [null]. I've tried using ng.http.Http.get to no avail. I have angular2-all.umd.js included in the head, as well as the other js requirements defined by angular.io (RxJS, es6 shims, polyfills, etc).
Here are the code snippets I have, for reference. All files are concatenated together for ease of reading.
;(function (app, ng) {
app.CommandService = (function () {
var CommandService = function () {
this.url = 'api/commands';
};
CommandService.prototype.all = function () {
return ng.http.get(this.url)
.map(function (response) {
return response.json().data;
})
.catch();
};
return CommandService;
})();
})(window.app || (window.app = {}), window.ng);
;(function (app, ng) {
app.CommandComponent = (function () {
function CommandComponent(commandService) {
this.commandService = commandService;
this.commands = [];
}
CommandComponent.parameters = [
app.CommandService
];
CommandComponent.annotations = [
new ng.core.Component({
selector: '#command-listing',
templateUrl: 'api/templates/commands/listing',
providers: [
app.CommandService,
ng.http.HTTP_PROVIDERS
]
})
];
CommandComponent.prototype.all = function () {
var self = this;
this.commandService.all().subscribe(
function (commands) {
self.commands = commands;
}, function (error) {
self.error = error;
}
);
};
CommandComponent.prototype.ngOnInit = function () {
this.all();
};
return CommandComponent;
})();
})(window.app || (window.app = {}), window.ng);
;(function (app, ng) {
document.addEventListener('DOMContentLoaded', function () {
ng.platform.browser.bootstrap(app.CommandComponent);
});
})(window.app || (window.app = {}), window.ng);
From a timing perspective, TypeScript does not seem to be a viable option. I tried to set up the environment as needed, and after a full day of debugging TS issues, I now have SystemJS issues, so I'm hoping the plain JS option can suffice for now until I have time to figure out all of the intricacies.
Let me know if more information is needed; I'm happy to give it.

Change your CommandService:
;(function (app, ng) {
app.CommandService = (function () {
var CommandService = function (http) { // this line changed
this.url = 'api/commands';
this.http = http; // this line added
};
CommandService.parameters = [ // this line added
ng.http.Http // this will be passed as arg in the constructor
]; // this line added
CommandService.prototype.all = function () {
return this.http.get(this.url) // this line changed
.map(function (response) {
return response.json().data;
})
.catch();
};
return CommandService;
})();
})(window.app || (window.app = {}), window.ng);
See plunker: http://plnkr.co/edit/4FG1Lrt7Yhnzo20azV8Z?p=preview
Just as an additional info, you could remove from the CommandComponent (line 41 of app/main.js) and add the ng.http.HTTP_PROVIDERS at the bootstrap() like this:
document.addEventListener('DOMContentLoaded', function () {
ng.platform.browser.bootstrap(app.CommandComponent, [ng.http.HTTP_PROVIDERS]);
});

RequireJS and Prototypal Inheritance

I'm running into an issue with using RequireJS and Prototypal inheritance. Here's my module:
define(function () {
function Module(data) {
this.data = data;
}
Module.prototype.getData = function () {
return this.data;
};
Module.prototype.doSomething = function () {
console.log(this.data);
console.log(this.getData());
};
return Module;
Module.prototype.callFunction = function (fn) {
if (this[fn]) {
console.log('call');
Module.prototype[fn]();
}
};
});
Then I instantiate the module, like so:
var module = new Module({ name: 'Marty' });
module.getData(); // returns { name: 'Marty' }
module.data; // returns { name: 'Marty' }
module.callFunction('doSomething') // returns undefined on the first (and second) console log
The console.logs in the module.doSomething() always return undefined. Am I misunderstanding how prototypal inheritance works with RequireJS?

As it turns out, I had written the callFunction method incorrectly. The correct way is:
Module.prototype.callFunction = function (fn) {
if (this[fn] && typeof this[fn] === "function") {
this[fn]();
}
};
The problem was using Module.prototype instead of this. Whoops.

Javascript optional parameters for callbacks

I want to do something like $.ajax() success and error callbacks.
This is what I have so far:
var FileManager = {
LoadRequiredFiles: function (onLoadingCallback, onCompleteCallback) {
//Not sure what to do here
this.OnLoading = onLoadingCallback;
this.OnCompleteCallback = onCompleteCallback;
this.OnLoading();
this.OnComplete();
},
OnLoading: function () {
//empty by default
}
OnComplete: function () {
//empty by default
}
};
//I want to do something like this:
FileManager.LoadRequiredFiles({OnLoading: function() {
alert('loading');
}
});
How do I fix this up properly? I'm using FileManager as my namespace.

You can check if the functions are defined:
var FileManager = {
LoadRequiredFiles: function (config) {
config = config || {};
this.OnLoading = config.onLoadingCallback;
this.OnCompleteCallback = config.onCompleteCallback;
if(typeof this.OnLoading =='function') {
this.OnLoading();
}
//Or use the shortcut:
if(this.OnComplete) {
this.OnComplete();
}
}
};
FileManager.LoadRequiredFiles(
{
onLoadingCallback: function() {
alert('loading');
}
}
);