I'm using angular2 rc2 with jasmin, trying to test my component.
So first, my component:
@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"
></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();
},
)
}
...
}
This will show if the logger is active/inactive and can toggle the active-boolean. The DataService will do an http-request to get the info's. All methods and the DataService are (successfully) tested. Now I want to test the click on the button. This looks like:
//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 {
}
So, I've got a TestComponent, which has the "to-test-comonent" in a div-container, which will be clicked on and my DataService will be replaced by the MockDataService which does no http-requests.
This will cause the following error:
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://ift.tt/28SnBNg)
at NoProviderError.AbstractProviderError [as constructor] (http://ift.tt/28ORdx5)
at new NoProviderError (http://ift.tt/28SnAbW)
at ReflectiveInjector_._throwOrNull (http://ift.tt/28OR5gZ)
at ReflectiveInjector_._getByKeyDefault (http://ift.tt/28SnCk7)
at ReflectiveInjector_._getByKey (http://ift.tt/28OR8Jw)
at ReflectiveInjector_.get (http://ift.tt/28Sny3S)
at ElementInjector.get (http://ift.tt/28OR8JP)
at DebugAppView._View_MockToggleLogerStatusDirective0.createInternal (MockToggleLogerStatusDirective.template.js:26:68)
at DebugAppView.AppView.create (http://ift.tt/28SnAJg)
Does anyone know, what causes this error? (And how to handle it?) I could think about, that the "nested" call of the DataService is the cause (MockToggleLogerStatusDirective -> ToggleLogerStatusDirective -> DataService).. .
Thanks, Bene
Aucun commentaire:
Enregistrer un commentaire