1

帮助单元测试复选框的行为。我有这个页面：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('<div><input type="checkbox" name="makeHidden" id="makeHidden" checked="checked" />Make Hidden</div>').appendTo('body');
            $('<div id="displayer" style="display:none;">Was Hidden</div>').appendTo('body');

            $('#makeHidden').click(function() {
                var isChecked = $(this).is(':checked');

                if (isChecked) {
                    $('#displayer').hide();
                }
                else {
                    $('#displayer').show();
                }
                return false;
            });

        });

    </script>
</head>
<body>
</body>
</html>

这不起作用，因为return false;在单击处理程序中。如果我删除它，它会很好用。问题是如果我将 click 函数拉到它自己的函数中并使用 qunit 对其进行单元测试，如果没有return false;

[编辑] 使用@patrick 的回答我的结果是：

火狐：

  • 玩具的手动测试 - 好。
  • 单元测试 - 好。
  • 生产应用程序的手动测试 - 很好。

IE浏览器：

  • 玩具的手动测试 - 失败。
  • 单元测试 - 好。
  • 生产应用程序的手动测试 - 失败。

Internet Explorer 最初需要一键单击。之后，它需要两次点击。

我认为 jQuery 是为了抽象出浏览器？

我是否必须覆盖解决方案的整个复选框行为？

在我的单元测试中，这就是我对用户进行复选框模拟的方式：

$(':input[name=shipToNotActive]').removeAttr('checked');
$('#shipToNotActive').change();

并且：

$(':input[name=shipToNotActive]').attr('checked', 'checked');
$('#shipToNotActive').change();
4

3 回答 3

4

使用change而不是怎么样click？

$('#makeHidden').change(function() {
            var isChecked = $(this).is(':checked');

            if (isChecked) {
                $('#displayer').hide();
            }
            else {
                $('#displayer').show();
            }
            return false;
        });

由于return false;发生更改而触发了事件，因此不会妨碍。

于 2010-05-20T15:34:06.273 回答
2

这是一个解决方法。

现在我的代码是这样的：

        if ($.browser.msie) {
            $('#makeHidden').change(function () {
                this.blur();
                this.focus();
                onCheckboxClicked();
            });
        }
        else {
            $('#makeHidden').change(function() {
                return onCheckboxClicked();
            });
        }

我所有的测试，包括手工玩具和手工制作都很好。

有人有比这个黑客更好的东西吗？

于 2010-05-20T16:54:34.223 回答
0

试试这个：

$(function() {
    $('<div><input type="checkbox" name="makeHidden" id="makeHidden" checked="checked" />Make Hidden</div>').appendTo('body');
    $('<div id="displayer" style="display:none;">Was Hidden</div>').appendTo('body');

    $('#makeHidden').click(function() { return onCheckboxClicked(this) } );
});

function onCheckboxClicked(el) {
    var isChecked = $(el).is(':checked');

    if (isChecked) {
        $('#displayer').hide();
    }
    else {
        $('#displayer').show();
    }
    return false;
}
于 2010-05-20T15:32:02.083 回答