We Keep Coding

How do I spy on private methods in a javascript module with sinon?

I am trying to unit test a module
var foobar = (function() {
function privateBar() {
privateBar();
}
function privateFoo() {
privateBar();
}
function init() {
privateFoo();
}
return {
init: init
};
}());
How can I use sinon to spy on privateFoo and privateBar to make sure they are called?

Typescript self executing function won't fire if there is an import

Consider this Typescript:
(()=> {
console.log('called boot'); // 'called boot'
})();
resulting JS:
(function () {
console.log('called boot');
})();
define("StockMarketService", ["require", "exports", "jquery"], function(require, exports, $) {
"use strict";
var StockMarketService = (function (_super) {
__extends(StockMarketService, _super);
...blah...
return StockMarketService;
}(Riot.Observable));
exports.StockMarketService = StockMarketService;
});
VS Typescript:
import {StockMarketService} from "./services/stockmarket-service";
(()=> {
console.log('called boot'); //NOTHING HAPPENS.
})();
Resulting JS:
define("StockMarketService", ["require", "exports", "jquery"], function(require, exports, $) {
"use strict";
var StockMarketService = (function (_super) {
__extends(StockMarketService, _super);
...blah...
return StockMarketService;
}(Riot.Observable));
exports.StockMarketService = StockMarketService;
});
define(["require", "exports"], function (require, exports) {
"use strict";
(function () {
console.log('called boot');
})();
});
In the second version the IFFE no longer works. This is the entry point to the application. It's not a module. I just want to execute the IFFE. All the dependencies are in the one file, and I need to reference/use them.
What am I doing wrong?

In the second version the IFFE no longer works.
The second example is module (more on this). Module bodies only execute if something requests the module. If you use the module (somewhere in the chain) from your application root the module body would execute. 🌹

any js code is valid TypeScript code,
so change
import {StockMarketService} from "./services/stockmarket-service";
(()=> {
console.log('called boot'); //NOTHING HAPPENS.
})();
to
import {StockMarketService} from "./services/stockmarket-service";
(function () {
console.log('called boot');
})();

How to call a function from another module

In my angularJS application, I have two modules : module A and module B.
angular.module('A').controller('ACtrl',function($scope){
$scope.alertA = function(){alert('a');}
//...
});
angular.module('B').controller('BCtrl',function($scope){
//...
});
How to call the function alertA in the module B ?

You need to define a factory in module A:
var moduleA= angular.module('A',[]);
moduleA.factory('factoryA', function() {
return {
alertA: function() {
alert('a');
}
};
});
Then use the alertA factory in module B:
angular.module('B',['A']).controller('BCtrl',function($scope,'factoryA'){
factoryA.alertA();
});

Refactor your code in following these steps:
Define a service in module A
Add module A as dependency to module B
Inject the service into the controller
Here is an example:
angular.module('A').service('API', function ($http) {
this.getData = function () { return $http.get('/data'); };
});
angular.module('B', ['A']).controller('dashboardCtrl', function ($scope, API) {
API.getData().then(function (data) { $scope.data = data; });
});

How to programatically inject html to qunit-fixture

I would like to programatically inject the html to test into the qunit-fixture. I have tried with $.load but the JS dealing with the HTML gets executed before the html is loaded.
The HTML:
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="../components/bower/qunit/qunit/qunit.js"></script>
<script>
QUnit.config.autostart = false;
</script>
<script data-main="tests" src="../components/bower/requirejs/require.js"></script>
The JS manipulating the html is the module I want to test:
define(['jquery'], function($) {
'use strict';
var Foo = {
_init: function() {
this._addClass();
},
_addClass: function() {
console.log('adding class testit');
$('.foo').addClass('testit');
},
greet: function() {
return "Hello";
}
};
Foo._init();
return {
greet : Foo.greet
};
});
And my test:
define(['foo'], function(foo) {
'use strict';
var Test = {
test: function() {
module( "module Foo");
asyncTest("foo class test", function() {
expect(1);
// foo() is executed before load is done :(
$('#qunit-fixture').load('../components/app/foo/foo.html', function(data) {
ok($('.foo').hasClass('testit'), ".foo should have class 'testit'");
QUnit.start();
});
});
}
};
return {
test: Test.test
};
});

Since the loading of the content is asynchronous you'll need to tell QUnit to wait before running. Note that this is just a guess at what your test harness might look like, it will likely need to be updated for your use case.
<!-- in your test HTML document -->
<script>
QUnit.config.autostart = false;
// your code to load the HTML dynamically in the fixture
// your test definitions
require(
[ "src/yourSourceCode", "tests/theTests" ],
function() {
QUnit.start(); // this starts the main QUnit code
}
);
</script>
UPDATE
Looks like the OP is, in fact, already stopping QUnit from running immediately, the problem (see the comment below) is that the module code runs before the HTML is loaded dynamically. I think this is because the _init() method is called inside the module. Instead, return the _init method as a property of the module and call it from the test:
define(['jquery'], function($) {
'use strict';
var Foo = {
_init: function() {
...
},
...
};
// Foo._init(); // don't do this here...
return {
greet : Foo.greet,
init : Foo._init // add the init method to your exports
};
});
Now, in your test you can do:
define(['foo'], function(foo) {
'use strict';
var Test = {
test: function() {
module( "module Foo");
asyncTest("foo class test", function() {
expect(1);
$('#qunit-fixture').load('../components/app/foo/foo.html', function(data) {
foo.init(); // we've moved the initialization to here...
ok($('.foo').hasClass('testit'), ".foo should have class 'testit'");
QUnit.start();
});
});
}
};
return {
test: Test.test
};
});

require js load function from a modul

despite i found already some answers i could not figure it out where i made the mistake in loading the module with require js, i always get the error Uncaught
TypeError: undefined is not a function
at the line where i try to call the function in the zoom.js file
myZoomingFunctions.minSize();
here my code:
main.js
require.config({
baseUrl: 'js/libs',
paths: {
'jquery': 'jquery-1.9.1',
'myDraw': '../draw',
'myZoomingFunctions': '../zoom'
}
});
require(['jquery', 'myDraw'], function ($, myDraw_ref) {
var myDraw = new myDraw_ref();
});
draw.js
define(['myZoomingFunctions'], function (myZoomingFunctions_ref) {
var myZoomingFunctions = new myZoomingFunctions_ref();
return draw = function() {
myZoomingFunctions.minSize();
}
});
zoom.js
define([], function () {
return zoom = function() {
function minSize(){
alert("minSize called");
}
}
});
thanks!

i figured out, maybe if someone else have the same problem, here is the solution:
main.js
require.config({
baseUrl: 'js/libs',
paths: {
'jquery': 'jquery-1.9.1',
'myDraw': '../draw',
'myZoomingFunctions': '../zoom'
}
});
require(['jquery', 'myDraw'], function ($, myDraw_ref) {
var myDraw = new myDraw_ref();
});
draw.js
define(['myZoomingFunctions'], function (myZoomingFunctions) {
return draw = function() {
myZoomingFunctions.minSize();
myZoomingFunctions.maxSize();
}
});
zoom.js
define([], function () {
return {
minSize: function() {
alert("min Size called");
},
maxSize: function() {
alert("max Size Called");
}
}
});