Angular 角度测试不';t检测输入的变化';s值

Angular 角度测试不';t检测输入的变化';s值,angular,Angular,我有一个应用程序,我在其中更改输入的值,它应该立即更改h1的值。手动测试时,它运行良好(更改输入会更改h1),但测试时它不起作用(更改输入不会影响h1) 我已经仔细检查了我是否调用了detectChanges和whenStable当我认为应该调用时,但我仍然没有运气 有人能看出我做错了什么吗 app.component.ts 从'@angular/core'导入{Component,OnInit}; @组成部分({ 选择器:'应用程序根', 模板:` H1内容为“{myText}” ` }) 导

我有一个应用程序,我在其中更改
输入的值,它应该立即更改
h1
的值。手动测试时,它运行良好(更改
输入
会更改
h1
),但测试时它不起作用(更改
输入
不会影响
h1

我已经仔细检查了我是否调用了
detectChanges
whenStable
当我认为应该调用时,但我仍然没有运气

有人能看出我做错了什么吗

app.component.ts
从'@angular/core'导入{Component,OnInit};
@组成部分({
选择器:'应用程序根',
模板:`
H1内容为“{myText}”
`
})
导出类AppComponent实现OnInit{
public myText='默认值';
ngOnInit():void{
this.myText='Value from ngOnInit';
}
}
app.component.spec.ts
从'@angular/core/testing'导入{TestBed,async};
从“./app.component”导入{AppComponent};
从'@angular/forms'导入{FormsModule};
描述('AppComponent',()=>{
beforeach(异步(()=>{
TestBed.configureTestingModule({
进口:[
FormsModule
],
声明:[
应用组件
],
}).compileComponents();
}));
它('应该工作',()=>{
const fixture=TestBed.createComponent(AppComponent);
console.log(fixture.componentInstance.myText);//值正常:“默认值”
fixture.detectChanges();
fixture.whenStable()然后(()=>{
console.log(fixture.componentInstance.myText);//值正常:“来自ngOnInit的值”
const compiled=fixture.debugElement.nativeElement;
compiled.querySelector('input')。value='value from test';
fixture.detectChanges();
fixture.whenStable()然后(()=>{
console.log(compiled.querySelector('input').value);//值正常:“来自测试的值”
console.log(fixture.componentInstance.myText);//值意外:“来自ngOnInit的值”
console.log(compiled.querySelector('h1').textContent);//值意外:'h1 content是“来自ngOnInit的值”'
});
});
});
});
所以在最后两个
console.log中,我从ngOnInit中获得
值,但我希望从test中获得


使用的角度版本:7.2.0发现问题,仅更改
输入的
值是不够的,之后需要调用
dispatchEvent

所以这个代码:

。。。
compiled.querySelector('input')。value='value from test';
fixture.detectChanges();
...
需要更改为:

。。。
compiled.querySelector('input')。value='value from test';
编译的.querySelector('input').dispatchEvent(新事件('input'));
fixture.detectChanges();
...
注: 如果上一个解决方案不适用于您,请尝试在
输入之后发送
模糊
事件。我碰到了一个案例,
输入
是不够的