JasmineJS：意図した値を作成するためにDOMを変更する

Question

私は、処理するDOMから価値を得る必要がある関数の単体テストを書いています。

getProducts: function() { 
    //Create query 
    var queryData = {}; 
    var location = this.$('#location').val(); 
    var startDate = this.$('#arrival').datepicker('getDate'); 
    var endDate = this.$('#departure').datepicker('getDate'); 

    var locationType = this.$('#location option:selected').attr('data-location'); 
    if (locationType === 'hotel') { 
    queryData.hotel = location; 
    } else if (locationType === 'city') { 
    queryData.city = location; 
    } 
    queryData.startDate = bookingApp.util.formatDateToData(startDate); 
    queryData.endDate = bookingApp.util.formatDateToData(endDate); 

    if ((!queryData.hotel && !queryData.city) || !queryData.startDate || !queryData.endDate) { 
    return; // I need to get pass this 
    } 

    //Query to view 
    if (this.listView !== null) { 
    this.listView.cleanUp(); 
    } 
    bookingApp.summary.reset(); 
    this.listView = new bookingApp.OrderListView({ 
    query: queryData 
    }); 
    return false; 
}, 

私が最初リターン文を渡す取得する必要がありますが、彼らはローカル変数であるため、私はqueryData.cityまたはqueryData.hotelの値を設定することはできません。

if ((!queryData.hotel && !queryData.city) || !queryData.startDate || !queryData.endDate) { 
    return; // I need to get pass this 
    } 

の値を変更する方法はありますか？$（ '＃location'）.val（）返信をトリガーしませんか？

私が試してみた：

ビュー$（ "＃場所"）のval（ "NEWYORK"）;。。

$（ "＃location"）val（ "Newyork"）;

しかし、それらのどれも働いていません。

ここに私の仕様：

var view; 

beforeEach(function() { 
    view = new bookingApp.OrderView(); 
}); 

it ('getProducts() should create new listView', function() { 
    view.$("#location").val("Newyork"); 
    $("#arrival").val("2017-01-01"); 
    $("#departure").val("2017-01-03"); 
    view.getProducts(); 
    expect(view.listView instanceof bookingApp.OrderListView).toBe(true); 
}); 

Answer 1

あなたがテストを実行する前に、ビューは必要要素を模擬する必要があります。今は存在しない要素に値を設定しようとしています。テストランナーの文書でなければなりません。ここ

beforeEach(function() { 
    $('div class="my-app"> /* all the required elements here */</div>').appendTo(document.body); 
    view = new bookingApp.OrderView({ 
    el: '.my-app' 
    }); 
}); 

document.body：

それは次のようになります。