Mock custom service in angular2 during unit test
<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>