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[=37 设置值=] 或 queryData.hotel 因为它们是局部变量：

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

有什么方法可以修改 this.$('#location').val() 的值，使其不会触发 return?

我试过：

view.$("#location").val("Newyork");

$("#location").val("Newyork");

但是 none 他们在工作。

这是我的规格：

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应该是测试运行ner的文档。