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()return을 트리거하지 않습니까?

나는 시도했다 :

보기 $ ("# 위치") 발 ("뉴욕");..

$ ("# 위치") .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 :

이 뭔가를 보일 것입니다.