如何解决无法在 Angular 中使用基类进行集成测试
我有一个带有注册表单和 AuthorService 的组件“AuthorComponent”。在那个组件中,我使用的是反应式形式。所以,我想进行集成测试,断言 GIVEN 完成的表单,当点击提交按钮时,然后 AuthorService 调用 #save()。
此测试的设置是:
beforeEach(fakeAsync(()=>{
TestBed.configureTestingModule({
declarations:[AuthorComponent],imports:[
ReactiveFormModule
],providers:[
{provide:AuthorService,useValue:{save(){}}}
]
}).compileComponents()
fixture=TestBed.createComponent(AuthorComponent)
fakeService=TestBed.inject(AuthorService)
}
为了保持测试代码干净,我创建了一个类来包装 ComponentFixture 并提供在组件模板中执行操作的方法。
class AuthorWrapper{
fix:ComponentFixture<AuthorComponent>
constructor(fixx: ComponentFixture<AuthorComponent>){
this.fix=fixx
}
setInputValue(newValue: string){
let inputElement=this.fix.debugElement.query(By.css('inputReference')).nativeElement
inputElement.value=newValue
inputElement.dispatchEvent(new Event('input'))
this.fix.detectChanges()
}
clickSubmitFormButton(){
let inputElement=this.fix.debugElement.query(By.css('buttonReference')).nativeElement
inputElement.click()
this.fix.detectChanges()
}
}
所以,当我进行这样的测试时,测试通过:
it('service should call #save,()=>{
let element=fixture.debugElement.query(By.css('inputReference')).nativeElement
element.value='newValue'
authorWrapper.clickSubmitFormButton()
expect(fakeService.save).toHaveBeenCalled()
但是,当我尝试使用 authorWrapper 中的 #setInputValue 来设置表单值时,模板会收到新值,但表单不会更新值,然后不会调用 fakeService。这种行为就像 ReactiveFormModule 在 AuthorWrapper 内的 ComponentFixture 组件中不起作用。另一方面,它没有意义,因为它在 AuthorWrapper 构造函数中作为引用传递,因此 ComponentFixture 和它的 componentInstance 对于 in 和 out AuthorWrapper 应该是相同的。
有人知道发生了什么吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。