Dịch vụ mô phỏng trong một thành phần - mô hình bị bỏ qua

Question

Lần này tôi đang cố gắng thử một dịch vụ (gọi http) để kiểm tra một thành phần.

@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 (phiên bản 2.0.0) giải thích rằng bạn nên thử dịch vụ. Sử dụng cùng một cấu hình 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'); 
    }); 

}); 

Khi tôi chạy thử nghiệm, tôi nhận được:

Error: No provider for AuthHttp! 

được indeedused bởi dịch vụ thực tế, nhưng không phải do giả. Vì vậy, vì một số lý do, giả không được tiêm hoặc sử dụng.

Bất kỳ lời khuyên nào? Cảm ơn!

Answer 1

Đó là vì

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

Các @Component.providers được ưu tiên hơn bất kỳ nhà cung cấp toàn cầu, kể từ khi sử dụng @Component.providers làm nhà cung cấp duy scoped với thành phần. Trong thử nghiệm, Angular tạo ra dịch vụ giả lập trong phạm vi mô-đun và dịch vụ gốc trong phạm vi thành phần.

Để giải quyết vấn đề này, góc cung cấp các phương pháp TestBed.overrideComponent, nơi chúng ta có thể ghi đè lên những thứ như các mẫu và các nhà cung cấp

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

Xem thêm:

• Override a component's providers