2

過去に QUnit を使用したことはありますが、実際に使用するのは 1 年ぶりです。

ページがロードされるたびに失敗するものを除いて、非常にうまく機能しているQUnitテストがたくさんあります。リフレッシュするとテストは機能しますが、もう一度リフレッシュすると壊れます。予測可能になりましたが、なぜ機能しないのかわかりません。問題のテストはtrigger('change')イベントを使用する必要がありますが、これは 1 回おきにしか発生しません。

イベントをselectバインドする動的に入力されたものがあります。change値を保存し、値localStorageが設定されていることを確認するだけのテストです。

HTML の例:

<select id="options">
    <option value="">Please choose</option>
</select>
<p id="result"></p>

JS の例:

$(document).ready(function() {
    var data = {
        1: 'Option 1',
        2: 'Option 2',
        3: 'Option 3'
    }
    for(var d in data) {
        $('#options').append($('<option>').val(d).text(data[d]));
    }
    $('#options').on('change', function() {
        $('#result').text(this.value);
        if(this.value != '') {
            localStorage.setItem('optionValue') = this.value;
        } else {
            throw 'You must choose a team';
        }
    });
});

QUnit テストの例:

test('Test some other stuff', function(assert) {
    localStorage.removeItem('optionValue');
    // some tests to check things have worked correctly
});

test('Is value added to localStorage?', 2, function(assert) {
    throws(function() { throw new $('#chooseTeam').val('').change(); }, 'No option selected');
    $('#options').val(1).trigger('change');
    equal(localStorage.getItem('optionValue'), 1, 'The first item should be selected');
});

ただし、QUnit 出力の結果はundefined. 最初のテストに絞り込んだところ、localStorage.removeItem('optionValue')毎回呼び出される行であることがわかりましたが、変更イベントは 1 回おきにのみトリガーされます。

問題を実証するためにJSフィドルを作成しました。

とにかくこれを失敗させる明白な何かがありますか?

アップデート

役立つかもしれない情報で更新する必要があると思いました...

change メソッドでは、次console.log()のように を追加しました。

$('#options').on('change', function() {
    console.log('here');
});

change イベントが実際にトリガーされていることを確認したかっただけですが、テストが示すように、メソッドは 1 回おきにのみトリガーされます。

更新 2

テストに合格するために、localStorage.removeItem('optionValue');理想的ではない行を削除しましたが、可能であれば、その行の一番下に到達したいと考えています!

4

1 に答える 1