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

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"

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

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

Answer 1

看起来您不应该将参数传递给您的操作。我不确定为什么要这样实现，但这会导致您的错误（如果您只是单击它也会发生这种情况，因此它与 Jasmine 无关）。

据我所知，你有三个选择：

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

如果您只需要传递一个值但又希望避免由于多个处理程序而导致代码重复，那么选项 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)