過去に 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');
理想的ではない行を削除しましたが、可能であれば、その行の一番下に到達したいと考えています!