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 =私の入力）の値を更新する際、正しい界値（検索テキスト）も更新されていることです。

HERESに私のテスト（ジャスミン/カルマ）

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 = '新しいテキスト'; と inpuElement.value = 'new text';

私は実際に入力フィールドにテキストを入力するユーザを模倣しようとしているので、これをやりたいとは思わない。

これを行うことができますかもしそうなら、何が欠けていますか？

Answer 1

私はあなたがこのような何かを探していると思います：https://github.com/aurelia/testing/issues/70

オーレリアは、VMを更新するために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(); 
    }); 
});