Angular 2 TestBed with mocks

LonsomeHell picture LonsomeHell · Aug 12, 2016 · Viewed 11.1k times · Source

I am trying to test a component which uses another service. And I want to isolate the component by providing a mock for the service. Before RC5 I can simply use addproviders which is now deprecated and will be removed by the next RC. Instead I have to use the TestBed. When I provide the mock angular for some reason keep looking for the services that the mock depends on. And throws a DI exception. When I provide all the dependencies the test works but I don't want to repeat myself for each test suite. And this breaks basic OO principles. My test suite:

describe('Component: DummyRestApi', () => {

  class DummyRestApiTestService {

    GetAll() {

      return Rx.Observable.create(observer => {

        let data:Data[] = [];

        data.push({
          id: 0,
          data: 'data'
        });

        observer.next(data);
        observer.complete();

      });
    }

    Add(data) {
    }
  }
  let fixture;
  let myMockWindow:Window;
  // ToDo use the mocks
  beforeEach(() => {
    myMockWindow = <any> {location: <any> {hostname: '127.0.0.1'}};
    TestBed.configureTestingModule({
      declarations: [DummyRestApiComponent],
      providers: [
        // ServerAddressResolverService,
        DummyRestApiComponent,
        // ConfigurationService,
        {provide: DummyRestApiService, useClass: DummyRestApiTestService},
        // {provide: Window, useValue: myMockWindow}
      ],
      imports: [FormsModule, HttpModule]
    });
    TestBed.compileComponents().catch(error => console.error(error));


    // addProviders([
    //   DummyRestApiComponent,
    //   {provide: DummyRestApiService, useClass: DummyRestApiTestService},
    // ]);
  });


  describe('Initializing', () => {

    beforeEach(async(() => {
      console.log('Compiling');
      TestBed.compileComponents().catch(error => console.error(error));
      console.log('Compiling again');
    }));

    it('should create an instance', async(() => {
        var fixture = TestBed.createComponent(DummyRestApiComponent);
        fixture.detectChanges();
        expect(fixture.debugElement.componentInstance).toBeTruthy();
      }
    ));

});

Angular 2.0.0-RC5

Answer

Hugh Tomkins picture Hugh Tomkins · Aug 26, 2016

Note that Patrick Ineichens answer uses provide, which is deprecated.

 providers: [provide(TodoService, { useValue: this.service })]

should instead read:

 providers: [{provide:TodoService, useValue: this.service }]