Dịch vụ tùy chỉnh giả trong angular2 trong khi kiểm tra đơn vị

Question

Tôi đang cố viết một bài kiểm tra đơn vị cho thành phần được sử dụng trong dịch vụ của tôi. Thành phần và dịch vụ hoạt động tốt.

Component:

import {Component} from '@angular/core'; 
import {PonyService} from '../../services'; 
import {Pony} from "../../models/pony.model"; 
@Component({ 
    selector: 'el-ponies', 
    templateUrl: 'ponies.component.html', 
    providers: [PonyService] 
}) 
export class PoniesComponent { 
    ponies: Array<Pony>; 
    constructor(private ponyService: PonyService) { 
    this.ponies = this.ponyService.getPonies(2); 
    } 
    refreshPonies() { 
    this.ponies = this.ponyService.getPonies(3); 
    } 
} 

dịch vụ:

import {Injectable} from "@angular/core"; 
import {Http} from "@angular/http"; 
import {Pony} from "../../models/pony.model"; 
@Injectable() 
export class PonyService { 
    constructor(private http: Http) {} 
    getPonies(count: number): Array<Pony> { 
    let toReturn: Array<Pony> = []; 
    this.http.get('http://localhost:8080/js-backend/ponies') 
    .subscribe(response => { 
     response.json().forEach((tmp: Pony)=> { toReturn.push(tmp); }); 
     if (count && count % 2 === 0) { toReturn.splice(0, count); } 
     else { toReturn.splice(count); } 
    }); 
    return toReturn; 
    }} 

Component kiểm tra đơn vị:

import {TestBed} from "@angular/core/testing"; 
import {PoniesComponent} from "./ponies.component"; 
import {PonyComponent} from "../pony/pony.component"; 
import {PonyService} from "../../services"; 
import {Pony} from "../../models/pony.model"; 
describe('Ponies component test',() => { 
    let poniesComponent: PoniesComponent; 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [PoniesComponent, PonyComponent], 
     providers: [{provide: PonyService, useClass: MockPonyService}] 
    }); 
    poniesComponent = TestBed.createComponent(PoniesComponent).componentInstance; 
    }); 
    it('should instantiate component',() => { 
    expect(poniesComponent instanceof PoniesComponent).toBe(true, 'should create PoniesComponent'); 
    }); 
}); 

class MockPonyService { 
    getPonies(count: number): Array<Pony> { 
    let toReturn: Array<Pony> = []; 
    if (count === 2) { 
     toReturn.push(new Pony('Rainbow Dash', 'green')); 
     toReturn.push(new Pony('Pinkie Pie', 'orange')); 
    } 
    if (count === 3) { 
     toReturn.push(new Pony('Fluttershy', 'blue')); 
     toReturn.push(new Pony('Rarity', 'purple')); 
     toReturn.push(new Pony('Applejack', 'yellow')); 
    } 
    return toReturn; 
    }; 
} 

Một phần của package.json:

{ 
    ... 
    "dependencies": { 
    "@angular/core": "2.0.0", 
    "@angular/http": "2.0.0", 
    ... 
    }, 
    "devDependencies": { 
    "jasmine-core": "2.4.1", 
    "karma": "1.2.0", 
    "karma-jasmine": "1.0.2", 
    "karma-phantomjs-launcher": "1.0.2", 
    "phantomjs-prebuilt": "2.1.7", 
    ... 
    } 
} 

Khi tôi thực hiện 'bắt đầu nghiệp' Tôi nhận được lỗi này

Error: Error in ./PoniesComponent class PoniesComponent_Host - inline template:0:0 caused by: No provider for Http! in config/karma-test-shim.js

Dường như nghiệp sử dụng PonyService thay vì chế giễu nó như MockPonyService, mặc dù dòng này: providers: [{provide: PonyService, useClass: MockPonyService}].

Câu hỏi: Tôi nên thử dịch vụ bằng cách nào?

Answer 1

Đó là vì điều này

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

này làm cho nó để dịch vụ được scoped với thành phần, có nghĩa là góc sẽ tạo ra nó cho mỗi thành phần, và cũng có nghĩa là nó thế cho bất kỳ nhà cung cấp toàn cầu cấu hình ở mức mô-đun. Điều này bao gồm các nhà cung cấp giả lập mà bạn cấu hình trong giường thử nghiệm.

Để giải quyết vấn đề này, Angular cung cấp phương thức TestBed.overrideComponent, cho phép chúng tôi ghi đè những thứ như @Component.providers và @Component.template.

TestBed.configureTestingModule({ 
    declarations: [PoniesComponent, PonyComponent] 
}) 
.overrideComponent(PoniesComponent, { 
    set: { 
    providers: [ 
     {provide: PonyService, useClass: MockPonyService} 
    ] 
    } 
});