title: Mock custom service in angular2 during unit test
body: <p>I'm trying to write a unit test for component used in my service.
  Component and service work fine.</p>
  
  <p>Component:</p>
  
  <pre class="lang-js prettyprint-override"><code>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&lt;Pony&gt;;
    constructor(private ponyService: PonyService) {
      this.ponies = this.ponyService.getPonies(2);
    }
    refreshPonies() {
      this.ponies = this.ponyService.getPonies(3);
    }
  }
  </code></pre>
  
  <p>Service:</p>
  
  <pre class="lang-js prettyprint-override"><code>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&lt;Pony&gt; {
      let toReturn: Array&lt;Pony&gt; = [];
      this.http.get('http://localhost:8080/js-backend/ponies')
      .subscribe(response =&gt; {
        response.json().forEach((tmp: Pony)=&gt; { toReturn.push(tmp); });
        if (count &amp;&amp; count % 2 === 0) { toReturn.splice(0, count); } 
        else { toReturn.splice(count); }
      });
      return toReturn;
    }}
  </code></pre>
  
  <p>Component unit test:</p>
  
  <pre class="lang-js prettyprint-override"><code>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', () =&gt; {
    let poniesComponent: PoniesComponent;
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [PoniesComponent, PonyComponent],
        providers: [{provide: PonyService, useClass: MockPonyService}]
      });
      poniesComponent = TestBed.createComponent(PoniesComponent).componentInstance;
    });
    it('should instantiate component', () =&gt; {
      expect(poniesComponent instanceof PoniesComponent).toBe(true, 'should create PoniesComponent');
    });
  });
  
  class MockPonyService {
    getPonies(count: number): Array&lt;Pony&gt; {
      let toReturn: Array&lt;Pony&gt; = [];
      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;
    };
  }
  </code></pre>
  
  <p>Part of package.json:</p>
  
  <pre><code>{
    ...
    "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",
      ...
    }
  }
  </code></pre>
  
  <p>When I execute 'karma start' I get this error</p>
  
  <blockquote>
    <p>Error: Error in ./PoniesComponent class PoniesComponent_Host - inline template:0:0 caused by: No provider for Http! in config/karma-test-shim.js</p>
  </blockquote>
  
  <p>It looks like karma uses <code>PonyService</code> instead of mocking it as <code>MockPonyService</code>, in spite of this line: <code>providers: [{provide: PonyService, useClass: MockPonyService}]</code>.</p>
  
  <p>The question: How I should mock the service?</p>