11

我有一个文本输入，我正在听变化。

我的组件.ts

ngOnInit() {
    this.searchInput = new Control();
    this.searchInput.valueChanges
        .distinctUntilChanged()
        .subscribe(newValue => this.search(newValue))
}
search(query) {
    // do something to search
}

我的组件.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另一种方式设置测试以实现更改，但我真的不知道如何。

有人有想法吗？

4

3 回答 3

25

可能有点晚了，但似乎您的代码input在设置输入元素值后没有调度事件：

// ...    
input.value = 'fake-search-query';
input.dispatchEvent(new Event('input'));
cmpFixture.detectChanges();
// ...

从 Angular 2 测试中更新输入 html 字段

于 2016-10-15T11:01:34.047 回答
1

触发 的值变化FormControl很简单：

cmpFixture.debugElement.componentInstance.searchInput.setValue(newValue);
于 2017-10-19T07:35:06.770 回答
0

带有@input、订阅、双向数据绑定的自定义组件

如果您有一个自定义组件，您将需要在您的应用程序中进行进一步的更改才能成功地对您的应用程序进行单元测试

看看这里的要点，这会给你一些想法 https://gist.github.com/AikoPath/050ad0ffb91d628d4b10ef81736af386/raw/846c7bcfc54be8cce78eba8d12015bf749b91eee/@ViewChild(ComponentUnderTestComponent).js

仔细阅读这里的完整内容，否则您很容易再次感到困惑 - https://betterprogramming.pub/testing-angular-components-with-input-3bd6c07cfaf6

于 2021-11-22T11:12:03.380 回答