使用 ngModel 和 ngModelChange 进行 Angular 2 测试

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 是为了让更改检测在一秒钟内运行。 (以后可以减少)。
• createEvent 将 EventInterface-Name 作为参数，initEvent 正在定义它。 “事件”是最基本的，没有负载。
• changeDetection 不需要在输入后手动触发，因为您会在 View 上触发事件。