Issue with angular2 tesing DI

Question

I try to test some component with DI. I looking in the common resources like stack/forums etc. But there is no correct answer to my question (I can't found).

When I try to provide mock dependency I got error about: Token must be defined What is this? How I can provide mock dependency? (in provided component exist some next level dependency - from http and config, so I can create it in real (because he failed withoud his own dependencies...And I think I must to mock this dependency).

There is my test

import {provide} from 'angular2/core';

import {setBaseTestProviders} from 'angular2/testing';
import {
TEST_BROWSER_PLATFORM_PROVIDERS,
TEST_BROWSER_APPLICATION_PROVIDERS
} from 'angular2/platform/testing/browser';

import { beforeEach,beforeEachProviders,describe,expect,
provide,
it,
inject,
injectAsync,
TestComponentBuilder,
AsyncTestCompleter} from 'angular2/testing';


import {HTTPPatientsListService} from '../../shared/http_services/http_patients_list.service';
import {PatientsListComponent} from './patients_list.component';

class MockClass {}

describe('Patients list Tests', () => {
  beforeEachProviders(() => [
    provide(HTTPPatientsListService, {useClass: MockClass})
  ]);

  it('Should defined recentPatientData ', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb.createAsync(PatientsListComponent).then((componentFixture: ComponentFixture) => {
      const element = componentFixture.nativeElement;
      componentFixture.detectChanges();
    });
  }));


});

There part of my component (only part. it is work correctly, buy he too long)

@Component({
  selector: 'cgm_patients_list',
  templateUrl: `${MODULE_PATH}/patients_list.component.html`,
  styleUrls: [`..${MODULE_PATH}/patients_list.component.css`],
  pipes: [SearchPipe],
  providers: [HTTPPatientsListService],
  directives: [PatientsListDetailComponent]
})

export class PatientsListComponent implements OnInit {
  public recentPatientData;

  private pipedPatientsData;

  constructor(
    private patientsListService: HTTPPatientsListService) {

  }

thanks for any help...

P.S. Error is:

Chrome 49.0.2623 (Windows 7 0.0.0) Patients list Tests Should defined recentPatientData  FAILED
        Failed: Token must be defined!
        Error: Token must be defined!
            at new BaseException (D:/nucleous/client/src/www/node_modules/angular2/bundles/angular2.dev.js:7521:21)

Answer 1

You need to override the providers of the test component

return tcb
.overrideProviders(PatientsListComponent, [provide(HTTPPatientsListService, {useClass: MockClass})])
.createAsync(PatientsListComponent)
.then((componentFixture: ComponentFixture) => {

See also https://angular.io/docs/ts/latest/api/testing/TestComponentBuilder-class.html