如何將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示例中查看實際操作

另一種方法是使用上面文章中所述的臨時組件。