Отказывание службы в компоненте - mock игнорируется

Question

На этот раз я пытаюсь издеваться над сервисом (который выполняет http-вызовы) для тестирования компонента.

@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 (версия 2.0.0) объясняет, что вы должны издеваться службу. Используя ту же самую конфигурацию TestBed:

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'); 
    }); 

}); 

Когда я запустить тест, я получаю:

Error: No provider for AuthHttp! 

, который indeedused на действительную службу, но не по издеваться. Поэтому по какой-то причине макет не вводится и не используется.

Любые советы? Благодаря!

Answer 1

Это из-за

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

@Component.providers имеет приоритет над любыми глобальными поставщиками, так как с помощью @Component.providers делает поставщик видимость только к компоненту. В тесте «Угловая» создает издеваемую службу в области модуля и в исходной службе в области компонентов.

Чтобы решить эту проблему, Угловой обеспечивает TestBed.overrideComponent метод, в котором мы можем переопределить такие вещи, как шаблоны и поставщики

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

Смотрите также:

• Override a component's providers