aurelia 测试视图更改未反映在视图模型中

Question

我有一个基本的自定义元素。

//my-component.html
<template>
  <input type="text" id="my-input" value.bind="searchText">
</template>

//my-component.js
export class MyComponent {  
  searchText = 'initial text';
}

我在单元测试中试图断言的是，当我在 dom 中更新输入字段 (id=my-input) 的值时，正确的绑定值 (searchText) 也会更新.

这是我的测试 (jasmine/karma)

import {StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';

describe('some desc', () => {
  let component;

  beforeEach(() => {    
    component = StageComponent
      .withResources('src/my-component')
      .inView('<div><my-component></my-component></div>');      
  });  

  it('some it', done => {
    component.create(bootstrap).then(() => {
      const inpuElement = document.querySelector('#my-input');

      inpuElement.value = 'new text';
      //component.viewModel.searchText = 'new text';      
      expect(component.viewModel.searchText).toBe('new text');

      done();
    }).catch(e => { console.log(e.toString()) });
  });

  afterEach(() => {
    component.dispose();
  });
});

当我运行测试失败时
预计 'initial text' 为 'new text'

为了让它通过，我需要更换 component.viewModel.searchText = 'new text'; 和 inpuElement.value = 'new text';

我真的不想这样做，因为我试图模仿用户直接在输入字段中输入文本。

这可以做到吗？如果可以，我还缺少什么？

Answer 1

我猜你正在寻找这样的东西：https://github.com/aurelia/testing/issues/70

Aurelia 正在观察 DOM 事件以更新虚拟机。由于您不触发任何事件，VM 不是 "notifying" 的变化。做这样的事情（假设你使用 aurelia-pal）：

import {StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';
import {DOM} from 'aurelia-pal';

describe('some desc', () => {
  let component;

  beforeEach(() => {    
    component = StageComponent
      .withResources('src/my-component')
      .inView('<div><my-component></my-component></div>');      
  });  

  it('some it', done => {
    component.create(bootstrap).then(() => {
      const inputElement = DOM.getElementById('my-input');
      inputElement.value = 'new text';
      inputElement.dispatchEvent(DOM.createCustomEvent('change'));

      setTimeout(() => {
          expect(component.viewModel.searchText).toBe('new text');
          done();
      }, 50);
    }).catch(e => { console.log(e.toString()) });
  });

  afterEach(() => {
    component.dispose();
  });
});

aurelia 测试视图更改未反映在视图模型中

aurelia test view change not reflected in viewmodel

jasmine

aurelia