unit testing यूनिट परीक्षण के दौरान कोणीय 2 में कस्टम सेवा का नकली



unit-testing angular (1)

मैं अपनी सेवा में उपयोग किए गए घटक के लिए एक यूनिट टेस्ट लिखने की कोशिश कर रहा हूं। घटक और सेवा काम ठीक है।

घटक:

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

सर्विस:

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

घटक इकाई परीक्षण:

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

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",
    ...
  }
}

जब मैं 'कर्म शुरू' चलाता हूं तो मुझे यह त्रुटि मिलती है

त्रुटि: त्रुटि /। प्रायोजक वर्ग PoniesComponent_Host - इनलाइन टेम्पलेट: 0: 0 के कारण: एचटीटीपी के लिए कोई प्रदाता! config / karma-test-shim.js में

ऐसा लगता है जैसे कर्मों को इस लाइन के बावजूद इसे MockPonyService रूप में मजाक करने के बजाय PonyService इस्तेमाल होता है: providers: [{provide: PonyService, useClass: MockPonyService}]

प्रश्न: मुझे सेवा का नकली होना चाहिए?


इसका कारण यह है

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

यह ऐसा बना देता है कि सेवा को घटक को स्कॉच किया गया है, जिसका अर्थ है कि कोणीय प्रत्येक घटक के लिए इसे बनाएगा, और इसका मतलब यह भी होगा कि यह मॉड्यूल स्तर पर कॉन्फ़िगर किए गए किसी भी वैश्विक प्रदाता को सुपरसेट करेगा। इसमें शाम प्रदाता है जिसमें आप परीक्षण बिस्तर में कॉन्फ़िगर करते हैं

इसके चारों ओर पाने के लिए, कोणीय ने TestBed.overrideComponent विधि प्रदान की है, जो हमें @Component.providers और @Component.template जैसी चीज़ों को ओवरराइड करने की अनुमति देता है।

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




karma-jasmine