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 =我输入）的值正确限值（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 = '新文本';

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

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

Answer 1

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

Aurelia酒店观察DOM事件来更新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(); 
    }); 
});