2016-10-13 92 views
7

Bu sefer bir bileşeni (http aramaları) bir bileşeni sınamak için alay etmeye çalışıyorum.Bileşeninde alay etme hizmeti - alamet görmezden gelin

@Component({ 
    selector: 'ub-funding-plan', 
    templateUrl: './funding-plan.component.html', 
    styleUrls: ['./funding-plan.component.css'], 
    providers: [FundingPlanService] 
}) 
export class FundingPlanComponent implements OnInit { 
    constructor(private fundingPlanService: FundingPlanService) { 
    } 

    ngOnInit() { 
    this.reloadFundingPlans(); 
    } 

    reloadFundingPlans() { 
    this.fundingPlanService.getFundingPlans().subscribe((fundingPlans: FundingPlan[]) => { 
     this.fundingPlans = fundingPlans; 
    }, (error) => { 
     console.log(error); 
    }); 
    } 
} 

documentation (versiyon 2.0.0) hizmeti alay gerektiğini açıklar. Aynı TestBed yapılandırmayı kullanma: Testi çalıştırdığınızda

describe('Component: FundingPlan',() => { 
    class FundingPlanServiceMock { 
    getFundingPlans(): Observable<FundingPlan> { return Observable.of(testFundingPlans) } 
    } 

    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [FundingPlanComponent], 
     providers: [ 
     { provide: FundingPlanService, useClass: FundingPlanServiceMock }, 
     ] 
    }); 

    fixture = TestBed.createComponent(FundingPlanComponent); 
    component = fixture.componentInstance; 
    }); 

    fit('should display a title',() => { 
    fixture.detectChanges(); 
    expect(titleElement.nativeElement.textContent).toContain('Funding Plans'); 
    }); 

}); 

, alıyorum: ama taklidinin tarafından, fiili hizmet tarafından indeedused edilir

Error: No provider for AuthHttp! 

. Yani bir sebepten dolayı, sahte enjekte edilmez veya kullanılmaz.

Herhangi bir öneri? Teşekkürler!

cevap

19

O @Component.providers kullanarak sağlayıcı bileşenine sadece kapsamlı hale getirdiği için

@Component({ 
    providers: [FundingPlanService] <=== 
}) 

@Component.providers, herhangi bir global sağlayıcılar önceliklidir çünkü bu. testte, Açısal modülü kapsamında alay hizmet ve bileşen kapsamında özgün hizmet yaratır.

Bu sorunu çözmek için, Açısal biz şablonlar ve sağlayıcılar da

TestBed.configureTestingModule({ 
    declarations: [FundingPlanComponent] 
}); 
TestBed.overrideComponent(FundingPlanComponent, { 
    set: { 
    providers: [ 
     { provide: FundingPlanService, useClass: FundingPlanServiceMock }, 
    ] 
    } 
}) 

Bkz gibi şeyler geçersiz kılabilir TestBed.overrideComponent yöntem sağlar:

+1

sağlanan bağlantı ediyorum son derece yararlı olmuştur, ama bu tür kırık. Bunu mu demek istediniz? [Bir bileşenin sağlayıcı geçersiz kıl] (https://angular.io/guide/testing#override-a-components-providers) – rchavarria

+0

haklısın @rchavarria, bağlantı güncellendi. –