Angular2 rc2 тестирование с Jasmin, классный класс компонентов, ошибка http

Question

Я использую angular2 rc2 с jasmin, пытаясь проверить свой компонент.

Так первый, мой компонент:

@Component ({ 
    selector: '[toggleLogerStatusDirective]', 
    providers: [DataService], 
    template: 
    ` 
    <button type="button" class="btn btn-link" (click)=toggleLoggerStatus() 
    data-toggle="tooltip" data-placement="right" 
    title="Click to enable/ disable the ServiceDebugMonitor" 
    >{{status}}</button> 
    ` 

}) 
export class ToggleLogerStatusDirective implements OnInit { 
    active: boolean; 

    constructor(private _dataService: DataService) { 
    } 

    toggleLoggerStatus() { 
    this._dataService.putData('/loggerStatus', !this.active) 
     .subscribe(
     (data) => { 
      this.active = data; 
      }, 
     (error) => { 
      console.log(error); 
      this.getLoggerStatus(); 
     } 
     ); 
    } 
    getLoggerStatus() { 
    this._dataService.getData('/loggerStatus') 
     .subscribe(
     (data) => this.active = data, 
     (error) => { 
      console.log(error); 
      this.getLoggerStatus(); 
     }, 
    ) 
    } 


    ... 
} 

Это покажет, если регистратор активен/неактивен и может переключать активный-логическое значение. DataService выполнит http-запрос, чтобы получить информацию. Все методы и DataService (успешно) протестированы. Теперь я хочу проверить клик на кнопке. Это выглядит следующим образом:

//imports.. 
setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, 
       TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); 
describe('Directive: ToggleLogerStatusDirective',() => { 
    let toggleLogerStatusDirective;  

    beforeEachProviders(() => [ 
    provide(DataService, {useClass: MockDataService}), 
    TestComponentBuilder, 
    ]); 

    it('Check if toggling via web-interface is possible', inject([TestComponentBuilder, DataService], (_tcb, _dataService) => { 
    _tcb.createAsync(MockToggleLogerStatusDirective) 
     .then((fixture) => { 
     this.toggleLogerStatusDirective = new ToggleLogerStatusDirective(_dataService); 
     this.toggleLogerStatusDirective.active = false; 
     let container = fixture.componentInstance; 
     let div = fixture.nativeElement.querySelector('div'); 
     div.click(); 

     expect(this.toggleLogerStatusDirective.active).toEqual(true); 
     fixture.destroy(); 
    }); 
    })); 

} 

class MockDataService { 
    getData(appendedUrl: string, searchParamTimestamp? : string) : Observable<any> { 
    return Observable.of(false); 
    } 

    putData(appendedUrl: string, searchParam: boolean) : Observable<any> { 
    return Observable.of(true); 
    } 
} 


@Component({ 
    selector: '[mockLogger]', 
    template: `<div toggleLogerStatusDirective></div>`, 
    directives: [ToggleLogerStatusDirective], 
}) export class MockToggleLogerStatusDirective { 
} 

Итак, у меня есть TestComponent, который имеет «для испытаний comonent» в Div-контейнер, который будет щелкнули и мой DataService будет заменен на MockDataService который не делает http-запросов.

Это вызовет следующую ошибку:

zone.js:461 Unhandled Promise rejection: EXCEPTION: Error in ./MockToggleLogerStatusDirective class MockToggleLogerStatusDirective - inline template:1:2 
ORIGINAL EXCEPTION: No provider for Http! 
ORIGINAL STACKTRACE: 
Error: DI Exception 
at NoProviderError.BaseException [as constructor] (http://127.0.0.1:8080/node_modules/@angular/core/src/facade/exceptions.js:20:23) 
at NoProviderError.AbstractProviderError [as constructor] (http://127.0.0.1:8080/node_modules/@angular/core/src/di/reflective_exceptions.js:40:16) 
at new NoProviderError (http://127.0.0.1:8080/node_modules/@angular/core/src/di/reflective_exceptions.js:77:16) 
at ReflectiveInjector_._throwOrNull (http://127.0.0.1:8080/node_modules/@angular/core/src/di/reflective_injector.js:777:19) 
at ReflectiveInjector_._getByKeyDefault (http://127.0.0.1:8080/node_modules/@angular/core/src/di/reflective_injector.js:805:25) 
at ReflectiveInjector_._getByKey (http://127.0.0.1:8080/node_modules/@angular/core/src/di/reflective_injector.js:768:25) 
at ReflectiveInjector_.get (http://127.0.0.1:8080/node_modules/@angular/core/src/di/reflective_injector.js:577:21) 
at ElementInjector.get (http://127.0.0.1:8080/node_modules/@angular/core/src/linker/element_injector.js:23:48) 
at DebugAppView._View_MockToggleLogerStatusDirective0.createInternal (MockToggleLogerStatusDirective.template.js:26:68) 
at DebugAppView.AppView.create (http://127.0.0.1:8080/node_modules/@angular/core/src/linker/view.js:87:21) 

Кто-нибудь знает, что вызывает эту ошибку? (И как с этим справиться?) Я мог подумать, что причиной «вложенного» вызова DataService является (MockToggleLogerStatusDirective -> ToggleLogerStatusDirective -> DataService) ...

Спасибо, Bene

Answer 1

Вы должны переопределить поставщиков для тестового компонента, например:

it('Check if toggling via web-interface is possible', inject([TestComponentBuilder, DataService], (_tcb, _dataService) => { 
    _tcb.overrideProviders(MockToggleLogerStatusDirective, 
     [{provide: DataService, useClass: MockDataService}]) 
    .createAsync(MockToggleLogerStatusDirective) 
     .then((fixture) => {