javascript - 使用 jquery 测试 knockout javascript 页面

Question

我在网页上有 Jasmine、Knockout 和 jQuery。我已经编写了一些我认为可以验证 View 模型是否按照我期望的方式绑定(bind)到 DOM 的测试，但是 jQuery 似乎无法按照我认为的方式模拟用户交互:

例如

<input type='text' id='someField' data-bind='value: someField'>

<script>

  var viewModel = { someField: ko.observable() };

  // ...

  //this test passes
  it('should update the DOM when I edit the model', function(){

      $('#someField').val('not the test value');

      viewModel.someField('test value');

      expect( $('#someField').val() ).toBe('test value');
  });

  //this test does not
  it('should update the model when I change the DOM', function(){

      viewModel.someField('not the test value');

      $('#someField').val('test value');

      expect( viewModel.someField() ).toBe('test value');
  });

</script>

第一个测试通过，第二个测试失败。当我实际手动编辑 someField 时， View 模型确实发生了变化；只有测试失败，而不是它正在测试的行为。手动编辑页面时， View 模型更新似乎发生了“onblur”，所以我将测试中的相关行更改为:

$('#someField').val('test value').next('input').focus();

但还是失败了。

我对单选按钮有类似的测试。当我手动单击它们时， View 模型确实发生了变化，但在测试中，调用 $('#radioButton').click(); 不会更新 View 模型。

为什么 Knockout 无法识别 jQuery 对 DOM 的更改？

Answer 1

您需要调用 .change() 以让 knockout 识别该值已通过编程方式更改。

$('#someField').val('test value').change();

为此，必须在 knockout 之前包含/加载 jQuery!

这可能与以下事实有关:如果存在 jQuery，Knockout.js 将使用 jQuery 的抽象进行事件处理，否则它将直接使用 DOM 事件 API。 https://github.com/knockout/knockout/blob/master/src/utils.js (注册事件处理程序和触发事件)

这可能应该在 Knockout.js 中得到修复。