如何注入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); 
 
    }); 
 
});

和錯誤我得到了什麼之後運行;「故宮測試」：

錯誤消息是不是太清楚本身，而是其原因是因爲嘗試使用對象「不同，」應該是什麼在構造負荷。

任何想法如何在測試中添加它？

更新1 遵循TIEP藩的指示，插入「IterableDiffers」作爲一個供應商後...我得到這個問題：「無法解析IterableDiffers所有參數」 ...... 我能理解錯誤但不知道如何解決它...錯誤基本上是因爲IterableDiffers類的構造函數接受類型爲「IterableDifferFactory」的數組。

constructor(factories: IterableDifferFactory[]); 

Answer 1

我不understant爲什麼要注入IterableDiffers。它運作良好。這裏

你的錯誤發生

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

this.sourceDiffer是不確定的。如果你看看源代碼，你可以注意到在ngOnChanges內初始化了sourceDiffer。所以，你需要調用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 Example

另一種方法是使用臨時如上文中所述。

Answer 2

添加您的依賴關係NgModule聲明

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

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