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;
},

我需要通过第一个 return 语句，但我无法将 queryData.city 或 queryData.hotel 的值设置为它们是局部变量：

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

有没有办法修改this.$('#location').val()的值，使其不会触发return？ p>

我试过了：

view.$("#location").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应该是test runner的文档。