We Keep Coding

Basic but proper use of beforeEach() or afterEach() with mocha.js and chai.js [duplicate]

This question already has answers here:
How does variable scope work within the Mocha test framework?
(2 answers)
Closed 6 years ago.
I want to use mocha/chai to test code related to binary search trees. Here, I am testing the public insert method. I want to use beforeEach() and/or afterEach() hooks to reset the test environment prior to each it() statement so that I don't have to completely repeat the basics. However, I keep getting various errors.
Spec
describe("BinarySearchTree insert function", function() {
beforeEach(function() {
var binarySearchTree = new BinarySearchTree();
binarySearchTree.insert(5);
});
it("creates a root node with value equal to the first inserted value", function () {
expect(binarySearchTree.root.value).to.equal(5);
});
it("has a size equal to the amount of inserted values", function () {
binarySearchTree.insert(3);
expect(binarySearchTree.size).to.equal(2);
});
it("returns an error for non-unique values", function () {
binarySearchTree.insert(3);
expect(binarySearchTree.insert(3)).to.throw(String);
});
it("if inserted value is larger than current node, make or descend to rightChild", function () {
binarySearchTree.insert(3);
binarySearchTree.insert(10);
binarySearchTree.insert(7);
expect(binarySearchTree.root.rightChild.value).to.equal(10);
});
});
Error: ReferenceError: binarySearchTree is not defined
In truth, I expected errors before there is no afterEach() resetting the test environment, not because binarySearchTree is not defined. I'd like to accomplish this, if at all possible, with only Mocha and Chai (and not other packages like Sinon, etc).
Tested Code
exports.Node = Node;
function Node(value) {
this.value = value;
this.leftChild = null;
this.rightChild = null;
}
exports.BinarySearchTree = BinarySearchTree;
function BinarySearchTree() {
this.root = null;
this.size = 0;
}
BinarySearchTree.prototype.insert = function(value) {
// 1) when root node is already instantiated
if (this.root === null) {
// tree is empty
this.root = new Node(value);
this.size++;
} else {
// 2) nodes are already inserted
var findAndInsert = function (currentNode) {
if (value === currentNode.value) {
throw new Error('must be a unique value');
}
// base case
if (value > currentNode.value) {
// belongs in rightChild
if (currentNode.rightChild === null) {
currentNode.rightChild = new Node(value);
} else {
findAndInsert(currentNode.rightChild);
}
} else if (value < currentNode.value) {
// belongs in leftChild
if (currentNode.leftChild === null) {
currentNode.leftChild = new Node(value);
} else {
findAndInsert(currentNode.leftChild);
}
}
};
findAndInsert(this.root);
this.size++;
}
};
Bonus question... I'm not sure if I am properly testing for the thrown error (when a non-unique value is inserted)?

It is undefined because it is not in test function scope. Define it one step before in describe scope. For reference, look at the Angular docs. https://docs.angularjs.org/guide/unit-testing
describe("BinarySearchTree insert function", function() {
var binarySearchTree;
beforeEach(function() {
binarySearchTree = new BinarySearchTree();
binarySearchTree.insert(5);
});
it("creates a root node with value equal to the first inserted value", function () {
expect(binarySearchTree.root.value).to.equal(5);
});
it("has a size equal to the amount of inserted values", function () {
binarySearchTree.insert(3);
expect(binarySearchTree.size).to.equal(2);
});
it("returns an error for non-unique values", function () {
binarySearchTree.insert(3);
expect(binarySearchTree.insert(3)).to.throw(String);
});
it("if inserted value is larger than current node, make or descend to rightChild", function () {
binarySearchTree.insert(3);
binarySearchTree.insert(10);
binarySearchTree.insert(7);
expect(binarySearchTree.root.rightChild.value).to.equal(10);
});
});

The reason you are getting binarySearchTree is undefined is explained already.
I would like to talk about beforeEach and afterEach functions.
In beforeEach function we generally do basic setup for test things like variables initialization, stubbing out external calls etc.
and 'afterEach' method works like destroy functions where generally we write memory releases stuff.

Deep nesting functions in JavaScript

I cannot find an proper example for the love of my life on how to do this or even if this is possible. Based on my pieced together understanding from fragments of exmaples, I have come up with the following structure
var t = function()
{
this.nestedOne = function()
{
this.nest = function()
{
alert("here");
}
}
}
t.nestedOne.nest();
However this is not working (obviously). I would greatly appreciate if someone could point me in the right direction!

That is simply done with:
var t = {
nestedOne: {
nest: function() {
alert('here');
}
}
};
Your code otherwise doesn't make sense. this inside function doesn't refer to the function itself, it refers to the object context that the function is invoked in. And you are not even invoking the functions in your code.
If I say obj.func() then this inside func will be obj for that call. So assigning this.asd = true will assign true to that object's "asd" property.
If you wanted to do a nested class, it looks very different:
ClassA = (function() {
function ClassA() {
}
ClassA.prototype.method1 = function() {
};
function ClassB() {
}
ClassB.prototype.method1 = function() {
};
return ClassA;
}())
only ClassA can now make instances of ClassB. This should achieve same goals as nested classes in java.

See http://jsfiddle.net/CstUH/
function t(){
function f(){
this.nest = function()
{
alert("here");
}
}
this.nestedOne = new f();
}
var myt=new t();
myt.nestedOne.nest()
Edit 1:
You can also use
new t().nestedOne.nest()
instead of
var myt=new t();
myt.nestedOne.nest()
(http://jsfiddle.net/CstUH/1/)
Edit 2:
Or even more condensed:
function t(){
this.nestedOne = new function(){
this.nest = function(){
alert("here");
}
}
}
new t().nestedOne.nest()
http://jsfiddle.net/CstUH/2/

In JS functions are prime class objects, and you can access them directly in the code [i.e. without using reflection or so].
The code you put inside t body would be performed when actually executing t:
t();
You wrote t.nestedOne,nest(), but t has no nestedOne property - you should do like this:
var t = {
nestedOne : {
nest : function()
{
alert("here");
}
}
};
t.nestedOne.nest(); ​
I advice you to have a trip on John Resig's Learning Advanced JavaScript tutorial, it was very enlightening for me.

A simple callback handler I wrote today as an example of how I do deep nesting. I apologize if it's not the bees knees when it comes to code style, it made the concept a little clearer for me.
function test () {
this.that = this;
this.root = this;
this.jCallback = new Array(new Array()); // 2d
this.jCallbackCount = -1;
this.str = "hello";
// Callback handler...
this.command = {
that : this, // let's keep a reference to who's above us on the food chain
root : this.root, // takes us back to the main object
// add : function() { var that = this; console.log(that.that.str); },
add : function(targetFnc, newFunc) {
var that = this;
var home = that.that; // pretty much root but left in as an example of chain traversal.
var root = this.root; // useful for climbing back up the function chain
// console.log(that.that.str);
home.jCallbackCount++;
// target, addon, active
home.jCallback[home.jCallback.length] = { 'targetFunc' : targetFnc, 'newFunc' : newFunc, 'active' : true, 'id': home.jCallbackCount};
console.log('cbacklength: ' + home.jCallback.length);
console.log('added callback targetFunction:[' + targetFnc + ']');
return home.jCallbackCount; // if we want to delete this later...
},
run : function(targetFnc) {
var that = this;
var home = that.that;
console.log('running callback check for: ' + targetFnc + ' There is : ' + (home.jCallbackCount + 1) + 'in queue.');
console.log('length of callbacks is ' + home.jCallback.length);
for(i=0;i < home.jCallback.length - 1;i++)
{
console.log('checking array for a matching callback [' + targetFnc + ']...');
console.log('current item: ' + home.jCallback[i]['targetFunc'] );
if( home.jCallback[i]['targetFunc'] == targetFnc )
{
// matched!
home.jCallback[i]['newFunc']();
}
// console.log(that.that.jCallback[i].targetFunction);
}
}
};
}
test.prototype = {
say : function () {
var that = this;
console.log('inside');
// that.command('doSay');
that.command.run('doSay');
console.log(that.str);
}
} // end proto
// BEGIN TESTING **************************************************************************
// BEGIN TESTING **************************************************************************
// BEGIN TESTING **************************************************************************
var testing = new test();
testing.command.add('doSay', function () { console.log('213123123'); } );
testing.command.add('doSay', function () { console.log('12sad31'); } );
testing.command.add('doSay', function () { console.log('asdascccc'); } );
testing.say();
live:
http://jsfiddle.net/Ps5Uf/
note: to view console output, just open inspector in chrome and click on the "console" tab.

Strange JavaScript function binding. Is this control flow correct?

I have the following function definitions in the same .js file (call it A.js)
function PParser() {
....
makeExpression = function (lexemes, index) {
return makeNumber(lexemes, index);
}
makeDeclaration = function(lexemes, index)
{
if (lexemes[index].TokenType != LALLPLexer.VAR) {
throw "Expected VAR at index " + index;
}
if (lexemes[index + 1].TokenType != LALLPLexer.ID) {
throw "Expected ID at index " + index + 1;
}
if (lexemes[index + 2].TokenType != LALLPLexer.ASSIGN) {
throw "Expected ASSIGN at index " + index + 2;
}
var expressionNodeResult = makeExpression(lexemes, index + 3);
...
when the "makeExpression" invocation is reached, I was expecting control flow to move to the function defined just above. However, instead, another function named "makeExpression" is called in a completely different .js file (B.js).
function Controller()
{
...
this.parseToStatement = function(statementText)
{
makeExpression = function(expressionNode)
{
return new IntLiteral(expressionNode.Content);
}
try {
statement = parser.parseStatement(new LALLPLexer().lex(statementText));
if (statement.NodeType == LALLPParser.DECLARATION) {
return new Declaration(statement.Id, makeExpression(statement.Expression));
}
}
catch (exception) {
statement = new UnknownStatement(statementText);
}
return statement;
}
}
I'm not sure why. Interestingly enough, the line "parseStatement" shown above is up the call chain from the "makeExpression" invocation. Is this correct javascript behavior and, if so, why should I expect this behavior? How can I get the intended behavior?

I'm not entirely sure about this, but I think js doesn't make variables local by standard, so all those functions might be attached globally (To the window variable) and hence may overwrite each other.
Try adding var to all of those definitions (or this.where appropriate). Maybe that will help.

JavaScript error: "is not a function"

It looks like "$smth is not a function" is a very common problem with JavaScript, yet after looking through quite a few threads I still cannot understand what is causing it in my case.
I have a custom object, defined as:
function Scorm_API_12() {
var Initialized = false;
function LMSInitialize(param) {
errorCode = "0";
if (param == "") {
if (!Initialized) {
Initialized = true;
errorCode = "0";
return "true";
} else {
errorCode = "101";
}
} else {
errorCode = "201";
}
return "false";
}
// some more functions, omitted.
}
var API = new Scorm_API_12();
Then in a different script I am trying to use this API in the following way:
var API = null;
function ScormProcessInitialize(){
var result;
API = getAPI();
if (API == null){
alert("ERROR - Could not establish a connection with the API.");
return;
}
// and here the dreaded error pops up
result = API.LMSInitialize("");
// more code, omitted
initialized = true;
}
The getAPI() stuff, looks like this:
var findAPITries = 0;
function findAPI(win)
{
// Check to see if the window (win) contains the API
// if the window (win) does not contain the API and
// the window (win) has a parent window and the parent window
// is not the same as the window (win)
while ( (win.API == null) &&
(win.parent != null) &&
(win.parent != win) )
{
// increment the number of findAPITries
findAPITries++;
// Note: 7 is an arbitrary number, but should be more than sufficient
if (findAPITries > 7)
{
alert("Error finding API -- too deeply nested.");
return null;
}
// set the variable that represents the window being
// being searched to be the parent of the current window
// then search for the API again
win = win.parent;
}
return win.API;
}
function getAPI()
{
// start by looking for the API in the current window
var theAPI = findAPI(window);
// if the API is null (could not be found in the current window)
// and the current window has an opener window
if ( (theAPI == null) &&
(window.opener != null) &&
(typeof(window.opener) != "undefined") )
{
// try to find the API in the current window�s opener
theAPI = findAPI(window.opener);
}
// if the API has not been found
if (theAPI == null)
{
// Alert the user that the API Adapter could not be found
alert("Unable to find an API adapter");
}
return theAPI;
}
Now, the API is probably found, because I do not get the "Unable to find..." message, the code proceeds to try to initialize it. But firebug tells me API.LMSInitialize is not a function, and if I try to debug it with alert(Object.getOwnPropertyNames(API));, it gives me a blank alert.
What am I missing?

For more generic advice on debugging this kind of problem MDN have a good article TypeError: "x" is not a function:
It was attempted to call a value like a function, but the value is not
actually a function. Some code expects you to provide a function, but
that didn't happen.
Maybe there is a typo in the function name? Maybe the object you are
calling the method on does not have this function? For example,
JavaScript objects have no map function, but JavaScript Array object
do.
Basically the object (all functions in js are also objects) does not exist where you think it does. This could be for numerous reasons including(not an extensive list):
Missing script library
Typo
The function is within a scope that you currently do not have access to, e.g.:
var x = function(){
var y = function() {
alert('fired y');
}
};
//the global scope can't access y because it is closed over in x and not exposed
//y is not a function err triggered
x.y();
Your object/function does not have the function your calling:
var x = function(){
var y = function() {
alert('fired y');
}
};
//z is not a function error (as above) triggered
x.z();

Your LMSInitialize function is declared inside Scorm_API_12 function. So it can be seen only in Scorm_API_12 function's scope.
If you want to use this function like API.LMSInitialize(""), declare Scorm_API_12 function like this:
function Scorm_API_12() {
var Initialized = false;
this.LMSInitialize = function(param) {
errorCode = "0";
if (param == "") {
if (!Initialized) {
Initialized = true;
errorCode = "0";
return "true";
} else {
errorCode = "101";
}
} else {
errorCode = "201";
}
return "false";
}
// some more functions, omitted.
}
var API = new Scorm_API_12();

I also hit this error. In my case the root cause was async related (during a codebase refactor): An asynchronous function that builds the object to which the "not a function" function belongs was not awaited, and the subsequent attempt to invoke the function throws the error, example below:
const car = carFactory.getCar();
car.drive() //throws TypeError: drive is not a function
The fix was:
const car = await carFactory.getCar();
car.drive()
Posting this incase it helps anyone else facing this error.

In addition to the popular answers above, if you are using a services or helper functions file and doing an export on the functions that you will later import in your project.
Make sure that the function name you are importing matches the exact name of the function being exported from the services, helper, or utils file - and that the function actually exists in the right file! I got stuck on this error and was debugging for a few hours, getting nowhere until I found this out.

Had the same issue on Next.js. On _app.tsx I forgot to wrap the Component with the AuthProvider where I had all the Authentication functions.

In my case after a ton of stackoverflowing I saw what a function thing would go with here... it was merely a silly typo , I forgot to put $ in start of the next line's instruction:
function o_chir(id,nom) {
_id_ochirish = id
_nom= nom
//here it threw that "Uncaught TypeError: nom is not a function"
('#nom').val(s_)
$('#o_chir').modal('show')
}
and PHPStorm didnt give any warning

I received this error when I copied a class object incorrectly using JSON.parse and JSON.stringify() which removed the function like:
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
// Method
calcArea() {
return this.height * this.width;
}
}
const square = new Rectangle(10, 10);
console.log('area of square: ', square.calcArea());
const squareCopy = JSON.parse(JSON.stringify(square));
// Will throw an exception since calcArea() is no longer function
console.log('area of square copy: ', squareCopy.calcArea());

Assertions in JavaScript

Extensively reading about various assertion frameworks in JavaScript. Is there any kind of de-facto/most common "standard" library/framework? When selecting one - which points are most worth noticing?
The (only) requirement I can think about is close-to-zero performance overhead when in production mode.

Two possible solutions:
Have your build release script remove the Assert lines.
or
Have your build script override the Assert function so it is just an empty function. Downside to this is if you assert call has logic in it [aka assert( x > 100 , "foo" )] than that logic [x > 100] is still going to be run.

Here is what I use:
When I'm working on the code I have initDevMode(); at the top of the file I'm working with, and when I'm ready to release to production, I just remove that line and all the asserts just go to an empty function.
/**
* Log a message to console:
* either use jquery's console.error
* or a thrown exception.
*
* call initDevMode(); before use to activate
* use with:
* assert(<condition>, "message");
* eg: assert(1 != 1, "uh oh!");
*
* Log errors with:
* errorLog(message);
* eg: errorLog(xhr.status);
*/
assert = function(test, msg) { }
errorLog =function(msg) { }
initDevMode = function() {
assert = function(test, msg) {
msg = msg || "(no error message)";
if(!test) {
try {
throw Error();
} catch(e) {
var foo = e;
var lines = e.stack.split('\n');
for(i in lines) {
if(i > 2) {
errorLog(msg + lines[i]);
}
}
}
}
throw("Assertion failed with: " + msg);
};
errorLog = function(msg) {
if(typeof console.error == 'function') {
console.error(msg);
} else {
function errorLog(msg) {
console.log("foo");
setTimeout(function() {
throw new Error(msg);
}, 0);
}
}
};
}

I use the following to replace console.assert when it's unavailable for whatever reason.
It's definitely not a de-facto standard, and it is far from ideal, but it does satisfy your requirement that the assertion not be evaluated in production mode. Also, it shows you the expression that triggered the failed assertion, which aids debugging.
The screwy calling syntax (with a function expression) is there to create a closure, so that the assert function has access to the same variables that its caller had access to.
I suspect that this has high compile-time and run-time overhead, but I haven't attempted to verify that.
function assert(func) {
var name;
if (typeof(ENABLE_ASSERTIONS) !== "undefined" && !ENABLE_ASSERTIONS) {
return;
}
name = arguments.callee.caller;
name = name ? name.name : "(toplevel)";
if (!func()) {
throw name + ": assertion failed: " + ('' + func).replace(/function[^(]*\([^)]*\)[^{]*{[^r]*return/, '').replace(/;[ \t\n]*}[ \t\n]*$/, '');
}
}
Using it looks like:
function testAssertSuccess() {
var i = 1;
assert(function() { return i === 1; });
}
function testAssertFailure() {
var j = 1;
assert(function() { return j === 2; });
}
ENABLE_ASSERTIONS = true;
testAssertSuccess();
testAssertFailure();
HTH!

Take a look to Jascree; basically it is a tool that can remove assertions with almost arbitrary logic from your code. It is handy to use as a batch processor to generate your production code or for a fastcgi-backed scripts directory that you can use when you need to test performance/profile your code.