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;、クリック ハンドラーが原因です。私がそれを取り除くと、それはうまく機能します。問題は、クリック機能を独自の機能に引き出し、それを qunit で単体テストすると、return false;

[編集] @patrick の回答を使用すると、結果は次のようになります。

ファイアフォックス:

  • おもちゃの手動テスト - 良好。
  • 単体テスト - 良い。
  • 実稼働アプリの手動テスト - 良好。

インターネットエクスプローラ：

  • おもちゃの手動テスト - 不合格。
  • 単体テスト - 良い。
  • 本番アプリの手動テスト - 不合格。

Internet Explorer では、最初はワンクリックが必要です。その後、2 回クリックする必要があります。

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 に答える