Question

我正在尝试围绕文本输入测试包装器组件。

我的组件如下所示：

@Component({
selector: 'my-textbox',
inputs: ['inputModel', 'label'],
outputs: ['inputModelChange'],    
template: `  

    <div ngForm class="field">
        <label>{{ label }}</label>            
        <input type="text" ngControl="{{ control }}" #item="ngForm" [ngModel]="inputModel" (ngModelChange)="setTextValue($event)">
    </div>
    `
})

export class IslTextboxComponent {

control;
inputModel: Object;
inputModelChange: EventEmitter<any> = new EventEmitter();
label: string;

constructor() {
    this.control = 'text'+ Math.floor(Math.random()*11);
}

setTextValue(newValue): void {
    this.inputModel = newValue;
    this.inputModelChange.emit(newValue);
}
}

这是我的测试：

describe('My Textbox Component', () => {

it('should show modify input model',
    injectAsync([TestComponentBuilder], (tcb) => {
        return tcb
            .createAsync(MyTextboxComponent)
            .then((fixture) => {

                let nativeElement = fixture.nativeElement;

                fixture.detectChanges();                   

                let input = nativeElement.querySelector('input');

                input.value = 'VALUE_TO_TEST';

                //???
                input.dispatchEvent(new Event('input'));                    

                fixture.detectChanges();                                  

                expect(nativeElement.inputModel).toBe('VALUE_TO_TEST');

            });
    }));

});

我想在文本框中输入文本并让inputModel自行更新，但事件未被触发。如何使ngModelChange事件触发？ inputModel永远不会更新...

Answer 1

let input = nativeElement.querySelector('input');
input.value = 'VALUE_TO_TEST';
let evt = document.createEvent('Event');
evt.initEvent('input', true, false);
setTimeout(expect(x).ToBe(z),1000);

你快到了。

setTimeout是关于让Change-Detection运行一秒钟。（以后可以减少。）
createEvent将EventInterface-Name作为参数，initEvent定义它。 “事件”是最基本的，没有负载。
在输入后不需要手动触发changeDetection，因为您在视图上触发了一个事件。

使用ngModel和ngModelChange进行Angular 2测试

1 个答案: