Angular2 组件:测试表单输入值的变化
Angular2 Component: Testing form input value change
我有一个文本输入,我正在监听更改。
mycomponent.ts
ngOnInit() {
this.searchInput = new Control();
this.searchInput.valueChanges
.distinctUntilChanged()
.subscribe(newValue => this.search(newValue))
}
search(query) {
// do something to search
}
mycomponent.html
<search-box>
<input type="text" [ngFormControl]="searchInput" >
</search-box>
运行 应用程序一切正常,但我想对其进行单元测试。
这就是我的尝试
mycomponent.spec.ts
beforeEach(done => {
createComponent().then(fix => {
cmpFixture = fix
mockResponse()
instance = cmpFixture.componentInstance
cmpFixture.detectChanges();
done();
})
})
describe('on searching on the list', () => {
let compiled, input
beforeEach(() => {
cmpFixture.detectChanges();
compiled = cmpFixture.debugElement.nativeElement;
spyOn(instance, 'search').and.callThrough()
input = compiled.querySelector('search-box > input')
input.value = 'fake-search-query'
cmpFixture.detectChanges();
})
it('should call the .search() method', () => {
expect(instance.search).toHaveBeenCalled()
})
})
测试失败,因为未调用 .search()
方法。
我想我必须以另一种方式设置 value
才能让测试实现更改,但我真的不知道如何设置。
有人有想法吗?
可能有点晚了,但您的代码似乎在设置输入元素值后没有调度 input
事件:
// ...
input.value = 'fake-search-query';
input.dispatchEvent(new Event('input'));
cmpFixture.detectChanges();
// ...
触发FormControl
的值变化很简单:
cmpFixture.debugElement.componentInstance.searchInput.setValue(newValue);
带有@input、订阅、双向数据绑定的自定义组件
如果您有自定义组件,则需要对您的应用程序进行进一步更改才能成功对您的应用程序进行单元测试
看看这里的要点,这会给你一些想法
https://gist.github.com/AikoPath/050ad0ffb91d628d4b10ef81736af386/raw/846c7bcfc54be8cce78eba8d12015bf749b91eee/@ViewChild(ComponentUnderTestComponent).js
仔细阅读这里的更多内容,否则你很容易再次混淆 -
https://betterprogramming.pub/testing-angular-components-with-input-3bd6c07cfaf6
我有一个文本输入,我正在监听更改。
mycomponent.ts
ngOnInit() {
this.searchInput = new Control();
this.searchInput.valueChanges
.distinctUntilChanged()
.subscribe(newValue => this.search(newValue))
}
search(query) {
// do something to search
}
mycomponent.html
<search-box>
<input type="text" [ngFormControl]="searchInput" >
</search-box>
运行 应用程序一切正常,但我想对其进行单元测试。
这就是我的尝试
mycomponent.spec.ts
beforeEach(done => {
createComponent().then(fix => {
cmpFixture = fix
mockResponse()
instance = cmpFixture.componentInstance
cmpFixture.detectChanges();
done();
})
})
describe('on searching on the list', () => {
let compiled, input
beforeEach(() => {
cmpFixture.detectChanges();
compiled = cmpFixture.debugElement.nativeElement;
spyOn(instance, 'search').and.callThrough()
input = compiled.querySelector('search-box > input')
input.value = 'fake-search-query'
cmpFixture.detectChanges();
})
it('should call the .search() method', () => {
expect(instance.search).toHaveBeenCalled()
})
})
测试失败,因为未调用 .search()
方法。
我想我必须以另一种方式设置 value
才能让测试实现更改,但我真的不知道如何设置。
有人有想法吗?
可能有点晚了,但您的代码似乎在设置输入元素值后没有调度 input
事件:
// ...
input.value = 'fake-search-query';
input.dispatchEvent(new Event('input'));
cmpFixture.detectChanges();
// ...
触发FormControl
的值变化很简单:
cmpFixture.debugElement.componentInstance.searchInput.setValue(newValue);
带有@input、订阅、双向数据绑定的自定义组件
如果您有自定义组件,则需要对您的应用程序进行进一步更改才能成功对您的应用程序进行单元测试
看看这里的要点,这会给你一些想法 https://gist.github.com/AikoPath/050ad0ffb91d628d4b10ef81736af386/raw/846c7bcfc54be8cce78eba8d12015bf749b91eee/@ViewChild(ComponentUnderTestComponent).js
仔细阅读这里的更多内容,否则你很容易再次混淆 - https://betterprogramming.pub/testing-angular-components-with-input-3bd6c07cfaf6