測試一個jQuery的功能

大家好我是新來的jQuery和javascript.I已經寫了一個代碼，並想測試它。但我堅持在某一點，需要專家的幫助。測試一個jQuery的功能

這裏是我的jQuery類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); 
}

而且在我的index.html文件中定義我要叫DOM對象jQuery的我的班這樣

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

現在我想對這些函數進行單元測試，並將測試用例保存在單獨的文件中。我選擇了Qunit。我已經寫了下面的測試

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

也是我index_test.html文件我已經給myfile.js的路徑，但仍然Qunit是給我的錯誤

在文件死於測試＃1：/ //var/www/test.js:2:1：MyFirstFunc沒有定義

任何一個可以指導懇請我在哪裏做錯了，以及如何通過保持測試用例在一個單獨的文件來測試功能或者任何其他更好的方式來做到這一點。

謝謝

來源

2012-07-13 A_user

首先你在你的jquery對象中聲明壞方法。

相反的：

function MyFirstFunc (arg1, arg3) {

你應該使用：this.MyFirstFunc = function(arg1, arg3) {

你也應該調用一個jQuery對象的方法，如本例：

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

下面是一個例子正在進行的Qunit測試：

$.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"); 
});

來源

2012-07-13 05:39:17

非常感謝您的回覆，但我想自動調用一個init函數在我的文件中定義，請參閱編輯 – 2012-07-13 05:48:04

然後你使用jquery對象？ – 2012-07-13 05:53:10

其實我在我的DIV對象上調用這個類，並在該div上繪製了一個圖表。真正的代碼很長，所以我給出了一個簡化的例子 – 2012-07-13 05:59:11

未定義MyFirstFunc方法。爲了公開使用這些函數，必須在返回數組中定義MyFirstFunc和MySecFunc。您可以定義它像這樣

$.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); 
     } 
    } 
}

而且隨着

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

來源

2012-07-13 05:40:57 Bobby

非常感謝您的迴應但我不知道爲什麼我仍然得到相同的錯誤：/ – 2012-07-13 05:59:52

我現在有下面的錯誤對象[對象對象]沒有方法'MyClass' – 2012-07-13 06:01:31

的問題不在於你的測試用例進行測試，它與你的函數定義。你不能簡單地在另一個函數中聲明一個函數，並期望在全局名字空間中訪問它。 JavaScript中函數定義的一個基本屬性是它們是唯一提供範圍的東西，所以當你使用函數作爲對象時，對象的「實例變量」（在函數中聲明）只能在該對象內部訪問。

如果您嘗試使用方法創建對象，則需要將這些函數分配給對象的實例變量。 JavaScript中對象的實例變量是通過在構造函數（用於定義對象的函數）中分配this.<variable>來定義的。這樣一來就給MyClass兩種方法，你應該做這樣的事情：

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);

注意，只是給你的函數參數相同的名稱作爲構造函數的參數不從構造函數的方法傳遞參數。定義一個函數不會傳遞具體參數，所以MyFirstFunc arg1和arg2被解釋爲您可能傳遞給MyFirstFunc的參數的名稱，而不是將外部函數的參數傳遞給MyFirstFunc的指令。

最後，$.fn屬性是一個別名jquery.prototype，所以你正在使用$.fn.MyClass = function...做的是分配一個新的屬性給jQuery對象，基本上是打補丁用自己的附加庫。這可能不是你想要定義函數的一般方式，但我不知道你的用例。

來源

2012-07-13 05:41:28 Edward

Thanks @ Edward實際上在我的情況下，我想使用它像這樣$（「＃div1」）。MyClass（agr1_val，arg2_val，arg3_val）; 所以我發現沒有辦法，只能寫它像$ .fn因爲我對這一切都很新，所以沒有知道最好的方法 – 2012-07-13 05:51:50

測試一個jQuery的功能

回答

相關問題