如何将IterableDiffers“服务”注入到单元测试中

Question

我正在尝试为位于https://github.com/czeckd/angular-dual-listbox的该组件添加单元测试...。但是我收到一个错误，因为该组件具有类型为“ IterableDiffers”的依赖项

export class DualListComponent implements DoCheck, OnChanges { ....
constructor(private differs: IterableDiffers) {} ...

我的第一次尝试是这样的：

 import { async, ComponentFixture, TestBed} from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; import { TranslateModule } from 'ng2-translate/ng2-translate'; import { DualListComponent } from './dual-list.component'; describe('DashboardHeroComponent when tested directly', () => { let comp: DualListComponent; let fixture: ComponentFixture<DualListComponent>; let heroEl: DebugElement; // async beforeEach beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [DualListComponent], imports: [ TranslateModule.forRoot()] }) .compileComponents(); // compile template and css })); // synchronous beforeEach beforeEach(() => { let srouce: Array < any > = [ { key: 1, station: 'Antonito', state: 'CO' }, { key: 2, station: 'Big Horn', state: 'NM' }, { key: 3, station: 'Sublette', state: 'NM' }, { key: 32, station: 'Eureka', state: 'CO' } ]; fixture = TestBed.createComponent(DualListComponent); comp = fixture.componentInstance; heroEl = fixture.debugElement.query(By.css('.hero')); // find hero element comp.key = 'key'; comp.display = 'station'; comp.source = srouce; comp.destination = []; fixture.detectChanges(); // trigger initial data binding }); it('should display hero name', () => { expect(comp.available.list.length).toEqual(4); }); }); 

而我在运行“ npm test”后得到的错误是：

TypeError: Cannot read property 'diff' of undefined   

错误消息本身并不太清楚，原因是因为尝试使用对象“ differs”应在构造函数中加载的内容。

任何想法如何在测试中添加它？

按照Tiep Phan的说明进行更新1 ，然后将“ IterableDiffers”作为提供程序插入...我遇到了问题：“无法解析IterableDiffers的所有参数” ...我可以理解该错误，但不知道如何解决它...错误基本上是因为IterableDiffers类的构造函数接受类型为“ IterableDifferFactory”的数组。

constructor(factories: IterableDifferFactory[]);

Answer 1

将您的依赖项添加到NgModule声明中

import { IterableDiffers } from '@angular/core';

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [DualListComponent],
        imports: [ TranslateModule.forRoot()],
        providers: [
            //other provider
            IterableDiffers
        ]
    })
        .compileComponents(); // compile template and css
}));

Answer 2

我不明白您为什么要注入IterableDiffers 。 它运作良好。

您的错误发生在这里

buildAvailable(source:Array<any>) : boolean {
    let sourceChanges = this.sourceDiffer.diff(source);

this.sourceDiffer是未定义的。 如果看一下源代码，您会注意到sourceDiffer在ngOnChanges被初始化。 所以你需要打电话给ngOnChanges

看看这篇文章https://medium.com/@christophkrautz/testing-ngonchanges-in-angular-components-bbb3b4650ee8

这是您的情况的示例：

fixture = TestBed.createComponent(DualListComponent);
comp = fixture.componentInstance;
heroEl = fixture.debugElement.query(By.css('.hero')); // find hero element
comp.key = 'key';
comp.display = 'station';
comp.source = srouce;
comp.destination = [];

comp.ngOnChanges({ // add this
    source: new SimpleChange(null, srouce, true)
});

在Plunker示例中查看实际操作

另一种方法是使用上面文章中所述的临时组件。