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