Question

我正在使用uitest.js（内置的Jasmine.js）来测试我们的Kendo UI Mobile应用程序。我正在显示一个动作表并以编程方式选择选项。这在应用程序中正常工作，但抛出错误测试失败。

我正在使用这样的行动表：

<ul data-role="actionsheet" id="marketplace-price-actions" >
    <li class="km-actionsheet-title">Select Price</li>
    <li><a href="#" data-action="setPriceFilter('3')">$$$</a></li>
    <li><a href="#" data-action="setPriceFilter('2')">$$</a></li>
    <li><a href="#" data-action="setPriceFilter('1')">$</a></li>
</ul>

并且在我的规范中，我选择了以下选项之一：

$("#marketplace-price-actions li a").eq(2).mousedown().mouseup();

这可行，但会引发以下错误：

TypeError: "undefined is not a function"

我创建了一个在http://jsfiddle.net/zkent/DD6vj/2/显示的jsfiddle。务必打开控制台。

编辑根据所选答案，错误来自将值传递给函数。我选择创建单独的回调。请参阅http://jsfiddle.net/zkent/DD6vj/4/。

Answer 1

看起来您不应该将参数传递给您的操作。我不确定为什么它以这种方式实现，但这会导致你的错误（如果你只是点击它就会发生这种情况，所以它与Jasmine无关）。

据我所见，您有三种选择：

为每个项目使用单独的回调
修改ActionSheet源代码以将单击的元素提供给您的操作
对您传递的值使用闭包并返回处理程序

如果您只需要传递一个值但希望避免由于多个处理程序而导致代码重复，则选项3似乎是最佳解决方案。请注意，我根本没有测试过以下解决方案，因此请自担风险。

对于选项＃2，这样的事情可能会起作用：

kendo.mobile.ui.ActionSheet.fn._click = (function (click) {
    return function (e) {
        if (e.isDefaultPrevented()) {
            return;
        }

        var action = $(e.currentTarget).data("action");

        if (action) {
            kendo.getter(action)(window)({
                target: this.target,
                context: this.context,
                element: e.currentTarget // pass in the element that was clicked on 
            });
        }

        e.preventDefault();
        this.close();
    }
})(kendo.mobile.ui.ActionSheet.fn._click);

这样你至少知道点击了哪个元素，你可以添加数据属性来传递数据，如果你愿意，例如：

<li><a href="#" data-value="2" data-action="alertme">$$</a></li>

然后您可以在处理程序中读取：

function alertme(e) {
    console.log(e);
    console.log($(e.element).attr("data-value"));
}

（demo）

对于选项＃3，您只需将操作定义为：

function alertme(val) {
    return function(e) {
        console.log(e);
        console.log(val);
    };
}

并且您的元素将如下：

    <li><a href="#" data-action="alertme('2')">$$</a>

（demo）

以编程方式选择操作表会引发错误

1 个答案: