I need to write tests for legacy JavaScript script which runs from node.js. It has a global object which is initialised in one function and then accessed from another. I mean script.js looks like:
var object;
function first() {
object = Initialise.object();
...
}
function second() {
object.doSomething();
...
}
I need to write a unit test for the second() function. We are using a jasmine test framework and I am struggling to create a mock (stub) for the object. It is because I don't know how can I access it from script-spec.js. I have tried
var script = require("../src/script.js");
var testObject = script.object;
but testObject is undefined.
My knowledge of JavaScript is limited which doesn't help me as well (I have Java background).
How can I test second() function? I understand that I might need to refactor/redesign script.js which I am OK with.
I would rewrite the code to be more functional:
function first() {
return Initialise.object();
}
function second(object) {
object.doSomething();
...
}
Then later when the code is used:
var object = first()
second(object)
Then mocking becomes pretty trivial, because you can control what gets passed as an argument to second in the test.
Check out Avoid Side Effects in the Clean Code Javascript repo for some more info about this.
It would be easier if it was a global variable, you could just do a global.object = mockObject. What it really is a module level variable, modules are really just functions. The only way to reassign object is from a function defined inside script.js such as
function injectMockObject (mockObject) {
object = mockObject;
}
which you would need to add to script.js
Related
I have a js file that exports a function myFunction. Then, I have another function defined outside the exported module. How can I access it dynamically by its name?
I'm trying in this way but it doesn't work:
exports.myFunction = () => {
let functionName = 'helperFunction';
global[functionName]();
}
const helperFunction = () => {
console.log('helperFunction invoked');
}
I'm trying with the global scope global[functionName]();, but doesn't work. What is the scope of the helper function?
The reason why helperFunction is outside the export is because I export multiple functions in the same file that call helperFunction.
TLDR:
Use eval.
Hi there,
I tell you one thing about hoisting and then answer your question.
Now that you have defined your helperFunction after the export, it might cause a problem because of a JS behaviour called hoisting. The declaration of helperFunction is recognized in myFunction, but not the initialization. That will give you the following error:
ReferenceError: Cannot access 'helperFunction' before initialization
So, just move the helperFunction to the top of the file.
Now, to the actual answer. As you might have realized your helperFunction is actually in scope and you can call it. To do this, you need to evaluate the string: helperFunction(). You can use the following snippet:
console.log('hi');
let functionName = 'helperFunction';
eval(`${functionName}()`);
console.log('bye');
Bonus: what you are actually doing with your code is creating an array with one string element and call that array. That, of course, throws the following error:
TypeError: [functionName] is not a function
Theoretically speaking, you can make it work with global.
global.helperFunction = () => {
console.log('helperFunction invoked');
}
const myFunction = () => {
let functionName = 'helperFunction';
global[functionName]();
}
Whether or not this is a good idea... well, that's an entirely different discussion.
I don't know any details, but using Classes is usually the way to go in these cases.
I have question about the fundamentals of JS.
So, in JS we all agree that a function is an object. So lets suppose this:
const mainFunction = () => { //Do stuff };
mainFunction.nested = () => { //Do other stuff };
So I have two functions:
a main function which I can call like this: mainFunction()
and a nested function I can call like this: mainFunction.nested()
I quite understand that I can access to the nested function, because she is inside an object and I'm accessing it with . like JS syntax wants to.
But I'm wondering how can JS understand which code to run when I just call mainFunction() ?
Let me know if I'm clear enough, Its kind of a silly question...
Thanks
and a nested function I can call like this: mainFunction.nested()
It's not a nested function. This is a nested function:
function example() {
function nested() {
}
}
It's just a function assigned to a property.
But I'm wondering how can JS understand which code to run when I just call mainFunction() ?
Because there's no ambiguity, you're referring to mainFunction. If you wanted to use the other function, you'd refer to it itself (the way you showed, mainFunction.nested()). It's exactly how there's no ambiguity between obj and obj.prop; the former refers to the object, the latter refers to the object's property.
I'm having issues with Jest testing that a closure (an inner function) has been called after calling the outer function. I've tried using the spyOn with no positive result. This seems to be a relatively simple problem, to which I haven't found any results from googling.
// helper.js
export const bar = () => {}
export const foo = () => {
bar(); //How do I test that this has been called?
}
//helper.test.js
import * as H from 'helper';
const barSpy = jest.spyOn(H, 'bar');
H.foo();
expect(barSpy).toHaveBeenCalled(); // Jest throws error "Expected mock function to have been called."
I had the same issue once, and found this article which is very well explained: https://www.exratione.com/2015/12/es6-use-of-import-property-from-module-is-not-a-great-plan/
From the article:
Stubbing a function in Javascript requires the function to be bound to a context, any context, that is in scope for both the test code and the code being tested. In a sane world this context is provided by the module. For example, in ES5 Node.js:
exports.fn = function () {}
The thing to avoid doing in ES5 is the following, overriding module.exports with a function. All too many people do this and it is inconsiderate, as any module using that code must then take extra steps to be usefully unit tested:
module.exports = function () {}
So the last exported function can't be stubbed since it's not bound to any context, theres a workaraound for that, bounding the function to the exports object of the module you are testing and calling it as exports.importedFunction, like so:
var example = require('./example');
// Exported for test purposes. If we don't do this, then
// example is encapsulated here and cannot be stubbed.
exports.example = example;
// Usage.
exports.invokeExample = function () {
return exports.example();
};
Then you'll be able to spy on it, but you had to write that extra code, which is kinda ugly and not very useful neither clear.
In ES6 using "import { x } from 'y'" is analogous to overwriting module.exports with a function in ES5. The result is that an imported function is encapsulated in the module and cannot be stubbed in unit tests without writing more boilerplate code that would otherwise have been the case.
This also happens for your case: import * as H from 'helper'
I read some JS module design patterns recently. I came across this small code snippet as below.
(function(window) {
var Module = {
data: "I'm happy now!"
};
window.Module = Module;
})(window);
Still not quite understand this code well, my questions are:
How to use/call this module outside this particluar JS file? Need I
assign a variable to this module? e.g. var module1 = (...)(...);
Could anyone explain what the window parameter here stands for?
Is it a good practice to have two/three such kind of modules in the
same file?
The main reason to create an anonymous function in this case is to prevent global object pollution. It's not really a module pattern.
The problem arise when you declare a variable. Without the function scope, the variable will be added to the global object (window). If you were to declare the variables within a function. It would add the variable to the function scope without polluting the global object window.
What happen is that a javascript file could add a variable named foo and on a different file use that variable named foo too. Unless you really want to have a variable shared by two javascript files, it would probably create conflicts and bug that are difficult to fix.
For example: a.js
var foo = "one"
b.js
var foo = "two"
c.js
alert(foo)
In this case, the alert box might show either "one" or "two", depending of the order in the javascript files are included.
But having this a.js:
(function () {
var foo = "one"
})()
b.js
(function () {
var foo = "two"
})()
c.js
(function () {
alert(foo)
})()
This would create an error as you cannot alert a non declared variable.
One way to detect undefined variables, is to make sure to execute the javascript code in strict mode.
To do that, add the string "use strict" at the top of the file or function.
function () {
"use strict"
...
}
Undeclared variable will raise errors and it should be possible to fix the code that way.
Also, if you forget to declare a variable with the var keyword, it might end up adding the variable to the global scope even if the code is scoped into a function. The only way to prevent global scope pollution is to run the code in strict mode.
In the code snippet that you provided, the module with name Module is explicitly added to the window object. You can access the window object from any place in javascript unless the window name is ghosted by an other variable.
Now, back to the modules. If you want to define modules, it can be done in many ways. As an exemple, you could create an object on the window object called modules. In this object, you'll insert your modules.
module.js
window.modules = {}
foo.js
(function (window) {
var module = {}
...
window.modules.foo = module
})(window)
This variant isn't super good as you have to manually add the module to the modules object. You have to manually modify the window object, and that can be subject to errors.
modules.js
window.modules = {}
function define(name, constructor) {
var module = {exports: {}}
constructor(module)
window.modules[name] = module.exports
}
function require(name) {
return window.modules[name]
}
foo.js
define("foo", function (module) {
module.exports.one = function () {
return 1
}
module.exports.plus = function (a, b) {
return a + b
}
})
bar.js
define("bar", function (module) {
module.exports = function () {
var foo = require("foo")
return foo.plus(foo.one(), foo.one())
}
})
This is a module definition that looks a bit like module defined with http://requirejs.org/. It is quite basic as it doesn't take into account module dependencies so if bar is loaded and used before foo. Then the require method won't be able to return the module.
Also, if you want to store modules without having them visible into the global scope, you can only define the require and define method on the window object and hide modules into an anonymous scope like this:
(function (window) {
var modules = {}
function define(name, constructor) {
var module = {exports: {}}
constructor(module)
modules[name] = module.exports
}
function require(name) {
return modules[name]
}
window.define = define
window.require = require
})(window)
This way, define and require are the only function that can give you access to modules. Other modules won't be able to modify other modules without requiring them first. This can be useful when using third parties script that could conflict with your module system.
In fact this is not a module, but a Self-Invoking Ananymous function or an Immediate function which gets an object in parameter and assign a Module property to it:
The page window is a parameter passed to this function.
So an object named Module containing a data property is assigned to window.
JavaScript Self-Invoking Functions:
A self-invoking expression is invoked (started) automatically, without being called.
Function expressions will execute automatically if the expression is
followed by ().
You cannot self-invoke a function declaration.
You have to add parentheses around the function to indicate that it is
a function expression
So As you can see Immediate Functions can't be called as its name states it will be immediately executed and by its self, no other function or scope can execute it.
For better reference take a look at :
Javascript Self Invoking Functions.
Self-Invoking Functions section in JavaScript Function Definitions.
And concerning your last question about its benefits and good practices as shown on the given Article reference:
Where to use self-executing functions?
One obvious situation is when you want to auto-run a function like I
showed in above example but that is trivial. If you are in a situation
where you want to run a piece of code repeatedly like updating
something in the database based on user interaction or fetching
records from database every 10 seconds or you want to load new stories
via ajax similar to how facebook does on its homepage or some other
similar situation, one would normally go for setInterval function
something like this:
setInterval(doStuff, 10000);
Above, doStuff function will get called every 10 seconds. That is the
normal approach most developers seem to go with. However, there is a
huge problem with that.
The setInterval will call doStuff function exactly at specified time of 10 seconds again and again irrespective
of whether doStuff function actually finished doing what it is
supposed to do. That is bad and will certainly get you into unexpected
results.
That is one example of where setInterval is "bad" and should be
avoided.
This is exactly where self-executing functions come in handy. We can
do the same task with the help of self-executing function along with
setTimeout like this:
function foo(){
// your other code here
setTimeout(foo, 10000);
}();
This code will also repeat itself again and again with one difference.
setTimeout will never get triggered unless doStuff is finished. A much
better approach than using setInterval in this situation.
Calling it from another file:
And if this function is on another file it will be called automatically if this file is included.
Why do we use Self-Invoking Functions in JavaScript?
And if you ask yourself why do we use these functions, self-invoked function are used to manage Variable Scope.
Take a look at the answer here for further information.
I have a script that I didn't write already running on a page. I'd like to, in a script I did write, be able to execute a function from the original script. Here's a simplified example of what I'm trying to do:
(function ($) {
$.fn.myExistingFunction = function (options) {
function doMyThing(text) {
alert(text);
}
}
}(jQuery));
jQuery(document).ready(function($) {
$.fn.myExistingFunction.doMyThing("alert text");
});
However, when I run this, I get the console output:
Uncaught TypeError: Object function (options) {
function doMyThing(text) {
alert(text);
}
} has no method 'doMyThing'
But it clearly has the method! I can see it right there. What am I getting wrong here?
You can only access that method from the scope of the plugin function. It is not defined in the global scope.
So you can't call that function. All you can do in your code is call functions that are available through what's called the scope chain where the function is called. In your case that is everything that is either defined in your function($){} or in global scope. But the function in the plugin is neither.
When you call $.fn.myExistingFunction.doMyThing you are treating doMyThing like an field in the myExistingFunction object. But actually it is defined inside the function. Maybe this code makes it clearer:
$.fn.myExistingFunction = function (options) {
var doMyThing = function(text) {
alert(text);
}
var hi = "hello";
}
In hi and doMyThing are local variables in the scope of myExistingFunction. If the plugin wasn't designed to expose the functionality to external code you can't access the variables.
An example of a plugin that was designed to expose some of its internal functions would be the jQuery UI datepicker (documentation). It needs functions like parseDate and formatDate interally, but these utility functions are likely to be useful for general development as well, which is why they have been added to the datepicker object explicitly.
I think your code needs a major rewriting, 'cause as it is it will never work, in fact your function doMyThing is not a property of $.fn.myExistingFunction, it is simply declared inside of it, and due to how the scope works in javascript, you'll never be able to call it.