我如何触发以成角度的2单元测试ngModel模型更新？ [英] How do I trigger a ngModel model update in an Angular 2 unit test?
本文介绍了我如何触发以成角度的2单元测试ngModel模型更新？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图测试包含一个文本输入元素的组成部分。我想验证当文本输入的值会改变预期的成分变化的状态。文本输入，当然，利用ngModel指令（双向绑定）。
虽然该组件在运行时正常工作，我无法创建一个有效的，通过测试。我已经发布什么，我认为应该在下面工作，测试结果如下这一点。
我在做什么错了？
测试：
进口{}组件从angular2 /核心;
进口{形容，它injectAsync，TestComponentBuilder}从'angular2 /测试';
从进口{} FORM_DIRECTIVESangular2 /通用';
从angular2 /平台/ common_dom进口{}通过;类TestComponent {
静态得到注解（）{
返回[
新组件（{
模板：'＆LT;输入类型=文本[（ngModel）] =名/＆GT;＆LT; P＆GT;您好{{名}}＆LT; / P＆GT;，
指令：[FORM_DIRECTIVES]
}）
]
}
}描述（'NgModel'，（）=＆GT; {
它（'应更新模式，injectAsync（[TestComponentBuilder]，TCB = GT; {
TCB回报
.createAsync（TestComponent）
。然后（夹具=＆GT; {
。fixture.nativeElement.querySelector（'输入'）值='约翰';
常量inputElement = fixture.debugElement.query（By.css（'输入'））;
inputElement.triggerEventHandler（'输入'，{目标：inputElement.nativeElement}）;
fixture.detectChanges（）;
期待（fixture.componentInstance.name）.toEqual（'约翰'）;
}）;
}））;
}）;
OUTPUT：
铬45.0.2454（Mac OS X的10.10.5）NgModel应该更新模型失败
预期不确定的平等约翰。
在/Users/nsaunders/Projects/ng2-esnext-seed/src/test/ngmodel.spec.js!transpiled:41:52
在ZoneDelegate.invoke (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:322:29)
在Zone.run (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:218:44)
在/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:567:58
在ZoneDelegate.invokeTask (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:355:38)
在Zone.runTask (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:254:48)
在drainMicroTaskQueue (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:473:36)
在XMLHtt prequest.ZoneTask.invoke (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:425:22)
解决方案
下面是一个办法做到这一点：
进口{}组件从angular2 /核心;
从angular2 /测试进口{形容，它注入，fakeAsync，剔，TestComponentBuilder};
从进口{} FORM_DIRECTIVESangular2 /通用';类TestComponent {
静态得到注解（）{
返回[
新组件（{
模板：'＆LT;输入类型=文本[（ngModel）] =名/＆GT;＆LT; P＆GT;您好{{名}}＆LT; / P＆GT;，
指令：[FORM_DIRECTIVES]
}）
]
}
}描述（'NgModel'，（）=＆GT; {
它（'应更新模式，注入（[TestComponentBuilder] fakeAsync（TCB =＆GT; {
让夹具= NULL;
tcb.createAsync（TestComponent）。然后（F =＆GT;夹具= F）;
蜱（）; fixture.detectChanges（）;
让输入= fixture.nativeElement.querySelector（'输入'）;
input.value ='约翰';
让EVT = document.createEvent（'事件'）;
evt.initEvent（输入，真，假）;
input.dispatchEvent（EVT）;
蜱（50）; 期待（fixture.componentInstance.name）.toEqual（'约翰'）;
}）））;
}）;
I am attempting to test a component containing a text input element. I want to verify that the state of the component changes as expected when the value of the text input changes. The text input, of course, utilizes the ngModel directive (two-way binding).
Although the component works fine at runtime, I'm having trouble creating a valid, passing test. I have posted what I think should work below, and the test result following that.
What am I doing wrong?
TEST:
import {Component} from 'angular2/core';
import {describe, it, injectAsync, TestComponentBuilder} from 'angular2/testing';
import {FORM_DIRECTIVES} from 'angular2/common';
import {By} from 'angular2/platform/common_dom';
class TestComponent {
static get annotations() {
return [
new Component({
template: '<input type="text" [(ngModel)]="name" /><p>Hello {{name}}</p>',
directives: [FORM_DIRECTIVES]
})
]
}
}
describe('NgModel', () => {
it('should update the model', injectAsync([TestComponentBuilder], tcb => {
return tcb
.createAsync(TestComponent)
.then(fixture => {
fixture.nativeElement.querySelector('input').value = 'John';
const inputElement = fixture.debugElement.query(By.css('input'));
inputElement.triggerEventHandler('input', { target: inputElement.nativeElement });
fixture.detectChanges();
expect(fixture.componentInstance.name).toEqual('John');
});
}));
});
OUTPUT:
Chrome 45.0.2454 (Mac OS X 10.10.5) NgModel should update the model FAILED
Expected undefined to equal 'John'.
at /Users/nsaunders/Projects/ng2-esnext-seed/src/test/ngmodel.spec.js!transpiled:41:52
at ZoneDelegate.invoke (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:322:29)
at Zone.run (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:218:44)
at /Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:567:58
at ZoneDelegate.invokeTask (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:355:38)
at Zone.runTask (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:254:48)
at drainMicroTaskQueue (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:473:36)
at XMLHttpRequest.ZoneTask.invoke (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:425:22)
解决方案
Here's a way to do it:
import {Component} from 'angular2/core';
import {describe, it, inject, fakeAsync, tick, TestComponentBuilder} from 'angular2/testing';
import {FORM_DIRECTIVES} from 'angular2/common';
class TestComponent {
static get annotations() {
return [
new Component({
template: '<input type="text" [(ngModel)]="name" /><p>Hello {{name}}</p>',
directives: [FORM_DIRECTIVES]
})
]
}
}
describe('NgModel', () => {
it('should update the model', inject([TestComponentBuilder], fakeAsync(tcb => {
let fixture = null;
tcb.createAsync(TestComponent).then(f => fixture = f);
tick();
fixture.detectChanges();
let input = fixture.nativeElement.querySelector('input');
input.value = 'John';
let evt = document.createEvent('Event');
evt.initEvent('input', true, false);
input.dispatchEvent(evt);
tick(50);
expect(fixture.componentInstance.name).toEqual('John');
})));
});
这篇关于我如何触发以成角度的2单元测试ngModel模型更新？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
