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）也会更新。

继承我的考验（茉莉/业力）

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();
  });
});

当我运行此测试时，测试失败预期的“初始文本”为“新文本”

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

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

可以这样做，如果可以，我错过了什么？

Answer 1

我猜您正在寻找类似的内容：https://github.com/aurelia/testing/issues/70

Aurelia正在观察DOM事件以更新VM。由于您未触发任何事件，因此VM不会“通知”更改。做这样的事情（假设你使用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测试视图更改未反映在viewmodel中

1 个答案: