4

大家好，我是 jquery 和 javascript 的新手。我已经编写了代码并想对其进行测试。但我被困在某个点上，需要专家的帮助。

这是我在myfile.js中定义的 jquery 类

$.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 仍然给我错误

在 file:///var/www/test.js:2:1 的测试 #1 中死亡：未定义 MyFirstFunc

任何人都可以通过将测试用例保存在单独的文件中或任何其他更好的方法来指导我做错了什么以及如何测试功能。

谢谢

4

3 回答 3

0

首先，您在 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-13T05:39:17.990 回答
0

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-13T05:40:57.117 回答
0

问题不在于您的测试用例，而在于您的函数定义。您不能简单地在另一个函数中声明一个函数并期望在全局命名空间中访问它。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-13T05:41:28.860 回答