Testing jquery functions

Question

Hello everyone. I am new to jquery and javascript. I wrote the code and want to test it. But I got stuck at some point and need help from experts.

Here is my jquery define class in myfile.js

$.fn.MyClass = function(arg1 ,arg2, arg3) { function MyFirstFunc (arg1, arg3) { //Do some thing return arg1 + arg3; }; function MySecFunc (arg2, arg3) { //Do some thing }; MyFirstFunc(arf1 ,arg2); } 

And in my index.html file I need to call my jquery class on a DOM object like this

 $("#div1").MyClass(agr1_val, arg2_val, arg3_val); 

Now I want to do unit testing of these functions and save the test cases in a separate file. I chose Qunit. I wrote the following test

 test('MyFirstFunction function test', function() { equal(MyFirstFunc (4, 5),"9" ,"function working correctly"); }); 

Also in my index_test.html file I gave the path to myfile.js file, but Qunit still gives me an error

Died on test # 1 in file: ///var/www/test.js: 2: 1: MyFirstFunc not defined

Can someone kindly guide me where I am doing wrong, and how to test functions by storing test cases in a separate file Or any other better way to do this.

thanks

Answer 1

First of all, you declare bad methods in your jquery object.

Instead:

 function MyFirstFunc (arg1, arg3) { 

You should use: this.MyFirstFunc = function(arg1, arg3) {

You should also call your methods using the jQuery object, as in this example:

 equal($("#div1").MyClass(1, 2, 3).MyFirstFunc(4, 5),"9" ,"function working correctly"); 

Here is an example of a Qunit working test:

 $.fn.MyClass = function(arg1 ,arg2, arg3) { this.MyFirstFunc = function(arg1, arg3) { //Do some thing return arg1 + arg3; }; this.MySecFunc = function(arg2, arg3) { //Do some thing }; return this.MyFirstFunc(arg1, arg3); }; $(function() { $("#div1").MyClass(1, 2, 3); }); test('MyClass function test', function() { equal($("#div1").MyClass (1,2,3),"4" ,"function working correctly"); }); 

Answer 2

The MyFirstFunc method is not defined. MyFirstFunc and MySecFunc must be defined in the returned array to use these functions publicly. You can define it like this:

 $.fn.MyClass = function (arg1, arg2, arg3) { function MyFirstFunc(arg1, arg3) { //Do some thing return arg1 + arg3; }; function MySecFunc(arg2, arg3) { //Do some thing }; return { MyFirstFunc: function (arg1, arg3) { return MyFirstFunc(arg1, arg3); }, MySecFunc: function (arg2, arg3) { return MySecFunc(arg2, arg3); } } } 

And test it with

 test('MyFirstFunction function test', function() { equal($().MyClass().MyFirstFunc(4, 5),"9" ,"function working correctly"); }); 

Answer 3

The problem is not in your test case, but in the definition of functions. You cannot just declare a function inside another function and expect access to it in the global namespace. The fundamental property of function definitions in JavaScript is that they are the only things that provide scope, so when you use a function as an object, the "instance variables" object (declared inside the function) is only available inside that object.

If you are trying to create an object using methods, you need to assign these functions to the instance variables of the object. JavaScript object instance variables are determined by the purpose of this.<variable> in the constructor function (the function that you use to define the object). Therefore, to give MyClass two methods, you should do something like this:

 MyClass = function(arg1, arg2, arg3) { this.myFirstFunc = function(arg1, arg2) { //Do something }; this.mySecFunc = function(arg1, arg2) { //Do something }; }; var myInstance = new MyClass(x,y,z); myInstance.myFirstFunc(a,b); 

Note that simply providing the arguments of your functions with the same name as the arguments to the constructor does not pass arguments from the constructor to the method. The definition of a function does not pass concrete arguments to it, so MyFirstFunc arg1 and arg2 are interpreted as just the names of the arguments you could pass to MyFirstFunc, rather than instructions for passing external arguments to the MyFirstFunc function.

Finally, the $.fn property is an alias of jquery.prototype , so what you do with $.fn.MyClass = function... assigns a new property to the JQuery object, essentially fixing the library with its own add-in. This is probably not how you want to define functions in general, although I don't know your use case.