mercredi 22 juin 2016

Angular2 rc2 testing with Jasmin, mocked component class, http error

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